IE2017

Графическая схема. Управление при помощи XDTO.

Программирование - Практика программирования

В статье описывается методика программного управления элементами графической схемы при помощи механизма XDTO. Приложена готовая к использованию библиотека функций для создания и удаления графических объектов, а также для связи элементов схемы соединительными линиями.

Невозможность программного управления графической схемой периодически вызывает появление публикаций, которые тем или иным способом устраняют этот недостаток платформы. В качестве примера можно привести

//infostart.ru/public/537353/

//infostart.ru/public/551576/

//infostart.ru/public/336564/

//infostart.ru/public/320691/

Как правило, в этих публикациях графическая схема  либо сохраняется в файл GRS, который может быть программно изменен, либо используется  XML-, JSON- сериализация, конвертация в платформенные структуры и массивы. К сожалению, ни в одной публикации не был упомянут самый простой и логичный (на мой взгляд) способ - использование механизма XDTO. Этот способ имеет много общего с использованием XML-сериализации, но гораздо удобнее  в изучении и реализации, а также позволяет получить более понятный код.

Описание механизма

Несколько слов о механизме XDTO. Я не буду останавливаться на теории, желающие без труда найдут соответствующие статьи (например цикл статей //infostart.ru/public/167459/), ограничусь лишь рассмотрением практических вопросов, необходимых в рамках нашей задачи. Заранее прошу прощения у гуру за некий повтор информации из документации,  цель моей публикации - изложить информацию в максимально доступной для новичков форме.

Итак, для работы нам потребуется 2 вида сущностей: ОбъектXDTO - объекты, которые будут для нас элементами графической схемы, и СписокXDTO - список объектов ОбъектXDTO. Многие объекты 1С, в том числе графическая схема, могут быть преобразованы в объекты XDTO:

ГрафСхемаXDTO=СериализаторXDTO.ЗаписатьXDTO(ГрафСхема);

Каждый объект характеризуется типом. Программист может создавать объекты XDTO произвольных типов. Тип определяется совокупностью двух строк: URIПространстваИмен и Имя типа. Например создание объекта - элемента графической схемы выглядит так:

НовОбъект=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.2/data/graphscheme","GraphSchemeItem"));

Возникает вопрос: как перед созданием узнать тип нужного программисту объекта, т.е. Имя и URIПространстваИмен? Существует 2 способа: первый - создать объект вручную и посмотреть в отладчике свойства его типа:

Вариант второй - обратиться к в желтым книжкам, или синтаксис-помощнику. Так, для графической схемы:

... Данный объект может быть сериализован в/из XDTO. Тип XDTO, соответствующий данному объекту, определяется в пространстве имен {http://v8.1c.ru/8.1/data/graphscheme}. Имя типа XDTO: FlowchartContextType. 

У объекта XDTO есть свойства, значениями которых могут выступать как простые типы, так и сложные: другие объекты или их списки.

Как видим, у объекта графической схемы есть собственные свойства, кроме того есть реквизит item - Список XDTO.  Забегая вперед, отметим, что это - список графических элементов, т.е. именно то, что нам нужно.

Большинство свойств объектов доступны для изменения.

После модификации Объект XDTO можно преобразовать обратно в объект платформы 1С:

ГрафСхема=СериализаторXDTO.ПрочитатьXDTO(ГрафСхемаXDTO);

Таким образом методика программного изменения графической схемы выглядит так: 

  • Сериализуем (т.е. преобразовываем в объект XDTO) графическую схему
  • Меняем свойства объекта XDTO, список графических элементов,
  • Десериализуем объект XDTO обратно в графическую схему.

Неоспоримым плюсом и отличием от способов, предлагаемых в других публикациях, является тот факт, что на этапе изменения схемы мы работаем с понятной объектной моделью - объектами (с доступными свойствами-реквизитами) и списками объектов.

Примеры создания элементов

Для примера попробуем добавить в графическую схему элемент "Действие":

Сериализуем графическую схему и создадим новый элемент схемы:

	ГрафСхемаXDTO=СериализаторXDTO.ЗаписатьXDTO(ГрафСхема);
	НовОбъект=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.2/data/graphscheme","GraphSchemeItem"));
	НовОбъект.itemType=5;

Реквизит itemType - один из самых важных. Он задает тип графического элемента и его внешний вид.

Список типов:

  • 0 - Декорация
  • 1 - Линия
  • 2 - Старт
  • 3 - Завершение
  • 4 - Условие
  • 5 - Действие
  • 6 - Выбор варианта
  • 7 - Разделение
  • 8 - Слияние
  • 9 - Обработка
  • 10 - Вложенный процесс 

Далее зададим имя создаваемого объекта, его идентификатор (должен быть уникальным среди элементов схемы) и номер порядка обхода.

	НовОбъект.itemCode="Действие1";
	НовОбъект.itemId=1;
	НовОбъект.itemTabOrder=1;

Следующий шаг - мы должны задать координаты прямоугольника, внутри которого будет расположен наш объект. Именно к серединам его сторон будут потом "привязываться" соединительные линии. Координаты отсчитываются от левого верхнего угла схемы.

	НовОбъект.rectLeft=100;
	НовОбъект.rectRight=200;
	НовОбъект.rectTop=100;
	НовОбъект.rectBottom=200;

Заголовок элемента - это несколько вариантов строк, для разных языков. Нам хватит одного.

	Заголовки=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.1/data/core","LocalStringType"));
	ЗаголовокЭлемента=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.1/data/core","LocalStringItemType"));
	ЗаголовокЭлемента.lang="#";
	ЗаголовокЭлемента.content="Действие №1";
	Заголовки.Item.Добавить(ЗаголовокЭлемента);
	НовОбъект.itemTitle=Заголовки;
	НовОбъект.currentLanguage="#";

Определим цвет элемента. В нашем случае - цвет по умолчанию, определяется типом элемента.

	НовОбъект.backColor=новый Цвет;

Следующий момент - задание типа линии границы элемента - значение реквизита border. На этом шаге спотыкается большинство разработчиков, так как в документации этот вопрос не рассмотрен, а реверс-инжиниринг дает непонятный результат. Правильно делать так:

	НовОбъект.Border=СериализаторXDTO.ЗаписатьXDTO(новый линия(ТипСоединительнойЛинии.Сплошная,1));

У нашего объекта есть свойство point - список объектов XDTO - точек вершин элемента. Для корректного отображения элемента их надо задать. Правые и нижние координаты на единицу меньше чем координаты ограничивающего прямоугольника. (Почему так? Кто знает...)

	НовОбъект.Point.Добавить(НоваяТочкаXDTO(100,100));
	НовОбъект.Point.Добавить(НоваяТочкаXDTO(200-1,100));
	НовОбъект.Point.Добавить(НоваяТочкаXDTO(200-1,200-1));
	НовОбъект.Point.Добавить(НоваяТочкаXDTO(100,200-1));
////////////////////////////////////////////////////////////


Функция НоваяТочкаXDTO(x,y)
	Точка=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.2/data/graphscheme","Point"));
	Точка.x=x;
	Точка.y=y;	
	Возврат Точка;
КонецФункции

Что будет если мы зададим свой набор точек? Можно будет нарисовать многоугольник произвольной формы? Да можно, но... до первого "шевеления" элемента мышкой. При первом же удобном случае элемент примет форму, определяемую его типом, в пределах ограничивающего прямоугольника.

И, наконец, добавим наш созданный элемент в список элементов графической схемы и десериализуем ее.

	ГрафСхемаXDTO.item.Добавить(НовОбъект);
	ГрафСхема=СериализаторXDTO.ПрочитатьXDTO(ГрафСхемаXDTO);

Приведенного выше кода достаточно для отображения элемента "Действие". Но можно настроить и другие свойства: alignHor, alignVer, hyperlink, picturePlacement, pictureStyle, transparent, lineColor, textColor и др. Их назначение понятно из названий. 

Аналогичным образом создаются и другие объекты. При этом необходимо учесть несколько особенностей:

  • По умолчанию у объектов "Старт" и "Завершение" угол при вершине равен 120º
  • По умолчанию у объекта "Условие" углы правой и левой стороны равны 120º
  • Объект "Декорация" имеет реквизит shape, который отвечает за форму объекта: Блок, Документ, Эллипс и т.д.
  • У объекта "ВыборВарианта" есть реквизит transition, содержащий список вариантов.
  • Высота заголовка объекта "Действие" и высота вариантов объекта "ВыборВарианта" - величина постоянная

Создание соединительной линии несколько отличается  от создания прочих объектов:

	НовОбъект=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.2/data/graphscheme","GraphSchemeItem"));
	НовОбъект.itemType=1;
	НовОбъект.itemId=2;
	НовОбъект.itemTabOrder=2;
	НовОбъект.itemCode="Линия1";
	
	Заголовки=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.1/data/core","LocalStringType"));
	ЗаголовокЭлемента=СериализаторXDTO.Фабрика.Создать(СериализаторXDTO.Фабрика.Тип("http://v8.1c.ru/8.1/data/core","LocalStringItemType"));
	ЗаголовокЭлемента.lang="#";
	ЗаголовокЭлемента.content="Линия №1";
	Заголовки.Item.Добавить(ЗаголовокЭлемента);
	НовОбъект.itemTitle=Заголовки;
	НовОбъект.currentLanguage="#";
	
	НовОбъект.beginArrowStyle=СтильСтрелки.Нет;
	НовОбъект.endArrowStyle=СтильСтрелки.Заполненная;

	НовОбъект.connectFromItemId=-1;
	НовОбъект.connectToItemId=1;
	НовОбъект.portIndexFrom=0;
	НовОбъект.portIndexTo=3;
	НовОбъект.connectFromPortIndex=0;
	
	НовОбъект.backColor=новый Цвет;
	НовОбъект.decorativeLine=Ложь;
	НовОбъект.Border=СериализаторXDTO.ЗаписатьXDTO(новый линия(ТипСоединительнойЛинии.Сплошная,1));
	
	НовОбъект.Point.Добавить(НоваяТочкаXDTO(300,150));
	НовОбъект.Point.Добавить(НоваяТочкаXDTO(200,150));
	
	ГрафСхемаXDTO.item.Добавить(НовОбъект);

Здесь надо обратить внимание на следующие реквизиты: connectFromItemId, connectToItemId - идентификаторы объектов, к которым "привязаны" начало и конец линии.  portIndexFrom, portIndexTo - номера сторон, к которым присоединены линии.

Список номеров сторон:

  • 1 - середина левой стороны ограничивающего объект прямоугольника
  • 2 - середина верхней стороны 
  • 3 - середина правой стороны 
  • 4 - середина нижней стороны 
  • 6, 8, 10, ... - середина левой стороны варианта 1, 2, 3, ... для объекта ВыборВарианта
  • 7, 9, 11, ... - середина правой стороны варианта 1, 2, 3, ... для объекта ВыборВарианта

Особенности работы с линиями:

  • Если линия начинается из варианта объекта ВыборВарианта, то реквизит connectFromPortIndex равен номеру варианта.
  • Реквизит decorativeLine - флаг декоративной линии.
  • Соединительная линия, в отличие от декоративной, перестраивается при перемещении объекта, к которому присоединена. Присоединенная декоративная линия также перемещается вслед за перемещаемым объектом, но, как правило, ее форма не так сильно меняется.
  • Декоративная линия может иметь наконечники разных типов, а соединительная - только в виде заполненной стрелки.
  • Нельзя допускать наличия соседних сегментов линии, лежащих на одной прямой, иначе перемещение линии вызывает странные визуальные эффекты.

Библиотека для работы с графической схемой

Для упрощения работы с графической схемой была разработана библиотека функций, приложенная к статье.

Функции создания и удаления объектов:

// Создает XDTO объект - Действие
Функция НовыйОбъектДействие(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - ВыборВарианта
Функция НовыйОбъектВыборВарианта(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Старт
Функция НовыйОбъектСтарт(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Завершение
Функция НовыйОбъектЗавершение(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Условие
Функция НовыйОбъектУсловие(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Разделение
Функция НовыйОбъектРазделение(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Слияние
Функция НовыйОбъектСлияние(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Обработка
Функция НовыйОбъектОбработка(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - ВложенныйПроцесс
Функция НовыйОбъектВложенныйПроцесс(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Декорация
Функция НовыйОбъектДекорация(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Фигура,Лево,Верх,Ширина,Высота,Цвет=Неопределено,Линия=Неопределено)Экспорт
// Создает XDTO объект - Декоративную линию
Функция новаяДекоративнаяЛинияСхемы(ГрафСхемаXDTO,Имя,Заголовок=Неопределено,Знач Координаты,Линия=Неопределено,СтрелкаНачала=Неопределено,СтрелкаКонца=Неопределено)Экспорт
// Удаляет объект из схемы
Процедура УдалитьОбъектСхемы(ГрафСхемаXDTO,Объект)Экспорт

Функции работы с вариантами:

// Добавляет новый вариант в объект ВыборВарианта
Процедура ДобавитьВариант(ОбъектВыборВарианта,Имя,Заголовок=Неопределено,Цвет=Неопределено)Экспорт
// Вставляет (со сдвигом) новый вариант в объект ВыборВарианта
Процедура ВставитьВариант(ГрафСхемаXDTO,ОбъектВыборВарианта,Позиция,Имя,Заголовок=Неопределено,Цвет=Неопределено)Экспорт
// Удаляет (со сдвигом) вариант из объекта ВыборВарианта
Процедура УдалитьВариант(ГрафСхемаXDTO,ОбъектВыборВарианта,Позиция)Экспорт

Функции поиска:

// Возвращает объект схемы по его имени или идентификатору
Функция НайтиОбъектСхемы(ГрафСхемаXDTO,ЗначениеПоиска)Экспорт
// Возвращает индекс объекта схемы по его имени или идентификатору
Функция НайтиИндексОбъектаСхемы(ГрафСхемаXDTO,ЗначениеПоиска)Экспорт

Функция соединения объектов:

// Соединяет два объекта соединительной линией
Функция СоединитьОбъектыЛинией(ГрафСхемаXDTO,Знач Объект1,Знач Объект2,Направление1,Направление2,НомерВарианта1=0,НомерВарианта2=0,ТипЛинии=Неопределено,СтрелкаНачала=Неопределено,СтрелкаКонца=Неопределено)Экспорт

Задача соединения объектов линией оказалась неожиданно непростой. Количество вариантов взаимного расположения объектов с учетом комбинаций соединяемых сторон довольно велико. Для сокращения количества вариантов пришлось использовать поворот объектов вокруг оси координат так, чтобы линия в первый объект входила всегда с левой стороны. Интересной выглядит следующая задача: написать алгоритм построения соединительной линии так, чтобы а) линия по возможности огибала бы другие элементы схемы и б) количество пересечений с другими линиями было бы минимально. Задача а) уже решена в платформе. Желающие могут из решения этой задачи сделать очень хорошую публикацию.

Пример использования библиотеки:

	ГрафСхемаXDTO=СериализаторXDTO.ЗаписатьXDTO(ГрафСхема);	
	
	НовОбъект=РаботаСГС.НовыйОбъектДействие(ГрафСхемаXDTO,"Действие1",,240,40,80,60,WebЦвета.БледноБирюзовый);
	ГрафСхемаXDTO.item.Добавить(НовОбъект);
	
	НовОбъект=РаботаСГС.НовыйОбъектОбработка(ГрафСхемаXDTO,"Обработка1",,140,180,80,60);
	ГрафСхемаXDTO.item.Добавить(НовОбъект);
	РаботаСГС.СоединитьОбъектыЛинией(ГрафСхемаXDTO,"Действие1","Обработка1",4,1);	
	
	НовОбъект=РаботаСГС.НовыйОбъектВыборВарианта(ГрафСхемаXDTO,"Выбор",,260,200,100,60,WebЦвета.СветлоСерый);
	РаботаСГС.ДобавитьВариант(НовОбъект,"Вариант 1","",WebЦвета.Красный);
	РаботаСГС.ДобавитьВариант(НовОбъект,"Вариант 2","",WebЦвета.Желтый);
	РаботаСГС.ДобавитьВариант(НовОбъект,"Вариант 3","",WebЦвета.Зеленый);
	ГрафСхемаXDTO.item.Добавить(НовОбъект);	
	
	РаботаСГС.СоединитьОбъектыЛинией(ГрафСхемаXDTO,"Выбор","Действие1",3,3,2,0);	
	
	ГрафСхема=СериализаторXDTO.ПрочитатьXDTO(ГрафСхемаXDTO);

Предлагаемая библиотека позволит разработчику упростить построение схем произвольных бизнес-процессов, организационных диаграмм, структур подчиненности и т.п.

В заключение хотелось бы отметить, что использование XDTO позволяет программисту получить дополнительные возможности по работе с самыми разными объектами (Дерево значений, табличный документ, и т.д.), тем самым несколько скомпенсировать отсутствие таких возможностей в объектной модели, предоставляемой платформой.

Скачать файлы

Наименование Файл Версия Размер
Библиотека функций работы с графической схемой
.cf 20,87Kb
15.01.17
24
.cf 20,87Kb 24 Скачать

См. также

Комментарии
1. Николай Больсунов (boln) 927 18.01.17 11:00 Сейчас в теме
Интересуюсь возможностями программного управления ГС. "Плюс".
2. Михаил Русанов (RainyAugust22) 211 20.01.17 06:25 Сейчас в теме
Не хватает стартмоней чтобы скачать и попробовать, сделайте скидку в 1 старт плз :-D
3. Андрей Овсянкин (Evil Beaver) 4209 23.01.17 10:17 Сейчас в теме
Заплюсовал! Логичное решение, а сразу в голову не придет, что есть из коробки XDTO-сериализация. Спасибо.
4. Александр Быков (Alxby) 213 23.01.17 21:51 Сейчас в теме
5. Александр Быков (Alxby) 213 23.01.17 22:05 Сейчас в теме
(3) Да, чаще XDTO рассматривается с точки зрения обмена данными, Web-сервисов и т.п. Я сам несколько лет назад порядочно времени потратил на редактирование графической схемы через преобразование ее в строку: ЗначениеВСтрокуВнутр(ГрафСхема), пока не открыл для себя XDTO. Так что повторюсь: "...использование XDTO позволяет программисту получить дополнительные возможности по работе с самыми разными объектами ... , тем самым несколько скомпенсировать отсутствие таких возможностей в объектной модели, предоставляемой платформой". И это здОрово.
boln; dj_serega; +2 Ответить
6. Сергей Галюк (dj_serega) 250 21.03.17 16:46 Сейчас в теме
Очень крутая публикация.
Как-то не получилось с прозрачным фоном декорации... А так все что хотел сделал.

Спасибо.
7. Михаил Русанов (RainyAugust22) 211 30.06.17 12:53 Сейчас в теме
Возможно ли доработать библиотеку чтобы стрелки выходили/входили из/в фигуры не с центра стороны, а с разных позиций стороны фигуры? (рис.) т.к стрелок много, сливаются в одну становиться нечитабельно. Возможно фигуру "выбор варианта" еще попробовать.
Прикрепленные файлы:
8. Александр Быков (Alxby) 213 04.07.17 19:37 Сейчас в теме
К сожалению, механизм работы с графической схемой подразумевает наличие соединительных линий только между серединами сторон ограничивающего фигуру прямоугольника (не серединами сторон фигуры!). Единственный выход - самостоятельно построить декоративную, а не соединительную линию, рассчитав координаты конца линии, но в этом случае: а) в схеме не будет информации о связи линии с фигурой, б) линия не будет "тянуться" за фигурой при перемещении. В этом случае придется самостоятельно обеспечивать учет связей графических примитивов и механизм изменений. Я думаю, это выходит за рамки предлагаемой библиотеки, но буду рад, если кто-нибудь возьмется за реализацию данного функционала, мне кажется он будет востребован.
9. Игорь Дзеса (Kamikadze) 44 24.07.17 10:07 Сейчас в теме
Крутая публикация. Попробую использовать для своих потребностей, отпишусь по результатах.
Оставьте свое сообщение