Пример использования WxPython для создания нодового интерфейса. Часть 4: Реализуем Drag&Drop

    В небольшом цикле статей будет описано использование WxPython для решения вполне конкретной задачи по разработке пользовательского интерфейса, да еще и то, как сделать это решение универсальным. Туториал этот расчитан на тех, кто уже начал изучать эту библиотеку и хочет увидеть что-то более сложное и целостное, чем простейшие примеры (хотя начнется все с относительно простых вещей).



    В этой части мы добавим поддерку Drag&Drop к нашему приложению и научим его таким образом создавать новые ноды.

    Часть 1: Учимся рисовать
    Часть 2: Обработка событий мыши
    Часть 3: Продолжаем добавлять фичи + обработка клавиатуры
    Часть 4: Реализуем Drag&Drop
    Часть 5: Соединяем ноды

    Кому интересно, добро пожаловать под кат…


    9. Добавляем поддержку Drag&Drop


    Поддержка Drag&Drop — штука полезная и популярная, но тут мы ее будем использовать не совсем по назначению. Мы таким образом будем создавать новые ноды. Работает это дело достаточно просто. Требуется создать объект класса «wx.TextDropTarget» и передать его в метод «SetDropTarget» класса «wx.Window» от которого наследуется наш канвас. Соответственно, в момент дропа будет вызван метод «wx.TextDropTarget.OnDropText», который нам и надо будет реализовать. Для теста, реализация этого класса будет выглядеть так:
    class TextDropTarget(wx.TextDropTarget):
        def __init__(self):
            wx.TextDropTarget.__init__(self)
        
        def OnDropText(self, x, y, data):
            print x, y, data
    

    Теперь при бросании текста в окно, в консоле будет печататься сообщение с позицией и самим текстом. Как вы могли догататься, для принятия файлов, существует похожий класс «wx.FileDropTarget», который работает аналогичным образом, ну или класс «wx.PyDropTarget», который умеет принимать все и вся.

    10. Создаем ноды с Drag&Drop


    Просто печатать текст не очень полезно, поэтому мы используем полученный текст, чтобы создавать ноды с ним. Но для начала надо немного изменить архитектуру и добавить фабрику нод (это пригодится на будущее). На данный момент — это будет очень простая фабрика:
    class NodesFactory(object):
        def __init__(self):
            pass
        
        def CreateNodeFromDescription(self, nodeDescription):
            return SimpleTextBoxNode(text=nodeDescription)
    

    которая просто создает экземплят «SimpleTextBoxNode», который является слегда продвинутым наследником «SimpleBoxNode»:
    class SimpleTextBoxNode(SimpleBoxNode):
        def __init__(self, **kwargs):
            super(SimpleTextBoxNode, self).__init__(**kwargs)
            self.text = kwargs.get("text", "No text")
            
        def Render(self, gc):
            super(SimpleTextBoxNode, self).Render(gc)
    
            gc.DrawText(self.text, self.position[0]+10, self.position[1]+10)
    

    который в свою очередь рендерит заданный текст поверх прямоугольной ноды.
    Осталось к канвасу добавить метод, позволяющий добавлять новые ноды из описания:
        def CreateNodeFromDescriptionAtPosition(self, nodeDescription, pos):
            node = self._nodesFactory.CreateNodeFromDescription(nodeDescription)
            if node:
                node.position = pos
                self._canvasObjects.append(node)
                self.Render()
    

    И немного модернизировать TextDropTarget, чтобы он вызывал этот метод при поступлении текста:
    class TextDropTarget(wx.TextDropTarget):
        def __init__(self, canvas):
            wx.TextDropTarget.__init__(self)
            self._canvas = canvas
        
        def OnDropText(self, x, y, data):
            print x, y, data
            self._canvas.CreateNodeFromDescriptionAtPosition(data, [x, y])
    

    И теперь мы можем создавать новые текстовые ноды, просто бросая фрагменты текста на канвас.
    Выглядит все это вот так:

    Код, как и всегда, можно найти в соответствующем коммите на GitHub'е.

    11. Клонируем ноды с Drag&Drop


    Но кроме создания нод, с помощью Drag&Drop можно также организовать и копирование нод, причем очень легко. Если пользователь в момент начала перетаскивания ноды зажмет Ctrl, нам надо просто инициировать начало Drag&Drop'а и отдать описание ноды. А код создания ноды сделает для нас всю оставшуюся работу. Для инициации Drag&Drop'а мы добавим следующий код в обработчик нажатия левой кнопки мыши:
            if evt.ControlDown() and self._objectUnderCursor.clonable:
                text = self._objectUnderCursor.GetCloningNodeDescription()
                data = wx.TextDataObject(text)
                dropSource = wx.DropSource(self)
                dropSource.SetData(data)
                dropSource.DoDragDrop(wx.Drag_AllowMove)
    

    Тут мы создаем источник Drag&Drop'а и отдаем ему описание, которое мы получили от ноды. Осталось реализовать метод «GetCloningNodeDescription» у ноды и все будет готово. Но сначала реализуем интерфейс:
    class ClonableObject(CanvasObject):
        def __init__(self, **kwargs):
            super(ClonableObject, self).__init__(**kwargs)
            self.clonable = True
    
        def GetCloningNodeDescription(self):
            """
            GetNodeDescription should return a dictionary that contains 
            all information required for cloning this node at another position
            """
            raise NotImplementedError()
    

    А теперь уже реализацию метода у ноды:
        def GetCloningNodeDescription(self):
            return self.text
    

    которая просто отдает ее текст.
    Текущая версия кода живет тут.

    12. Масштабирубщиеся ноды


    Ну и перед завершением 4ой части, добавим последнюю маленькую рюшечку. Сделаем так, чтобы ноды масштабировались под размер текста. Для этого мы немного изменим метод рендеринга текстовой ноды:
        def Render(self, gc):
            textDimensions = gc.GetTextExtent(self.text)
            self.boundingBoxDimensions = [textDimensions[0]+20, textDimensions[1]+20] 
            super(SimpleTextBoxNode, self).Render(gc)
    
            gc.DrawText(self.text, self.position[0]+10, self.position[1]+10)
    

    Метод «GetTextExtent» в данном случае возвращает размер прямоугольника, который занимает текст. Соответственно перед рендерингом ноды, мы обновляем ее размеры так, чтобы она была на 10 пикселей больше текста с каждой стороны. Вот так теперь выглядит весь этот процесс:


    Код живет в этом коммите на GitHub'е.

    PS: Об опечатках пишите в личку.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.