Схемы, графы

Соглашения

Линия

Присоединить ломаную к объектам

Рассмотрим типичную ситуацию начертания схемы базы данных.

Мы поместим "City" и "Street" в ячейки невидимой таблицы, чтобы расположить их на странице.

Требуется привязать ломаную к таблицам.

Предлагаю ввести теги line , ld (происхождение обозначений: ld = line division) и pack с атрибутом host , равным атрибуту id тега td.

<table>
  <tr>
    <td></td>
    <td>
      <table id="id1">
        <caption> Street      </caption>
        <tr><td>  idStreet    </td></tr>
        <tr><td>  idCity (FK) </td></tr>
        <tr><td>  name        </td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table id="id2">
        <caption> City   </caption>
        <tr><td>  idCity </td></tr>
        <tr><td>  name   </td></tr>
      </table>
    </td>
    <td></td>
  </tr>
</table>

<line>
  <pack host="id1" align="side">
  <pack host="id2" dot="last" align="side">
  <ld x="0" y="0"></ld>
  <ld x="0" y="50"></ld>
  <ld x="100" y="50"></ld>
  <ld x="100" y="100"></ld>
</line>

При привязке к 2 объектам ломаная масштабируется.

Тег pack привязывает точку ломаной к объекту (в данном случае - к table). Идентификатор id (а при его отсутствии - порядковый номер, отсчитываемый от единицы) привязываемой точки указывается в атрибуте dot. Специальными значениями атрибута dot являются first и last, которые указывают, что должна быть привязана первая или последняя точка ломаной.

Тегами pack ломаные можно привязывать не только за две концевые, но за две промежуточные точки, или за промежуточную и концевую.

Если внутри тега line нет ни одного тега ld, то объекты соединяются одной прямой линией.

Выравнивание

Свойство align тега pack определяет, где будет расположен конец привязываемого отрезка, и принимает одно из следующих значений: side (значение по умолчанию), center, into. Пунктиром обозначена невидимая часть отрезка.

side	center	into

Полупривязанная ломаная

Если у ломаной определен единственный тег pack, то ломаная не масштабируется, прикрепляется к объекту только одним своим узлом (точкой). При этом ломаная нарисована так, что ее ось "Ox" проходит горизонтально слева направо, а ее ось "Oy" идет вертикально снизу вверх.

координаты ломаной из одного отрезка	расположение ломаной в html-документе

Непривязанная ломаная

<pic>
  <line> ... </line>
</pic>

pic {
  reper=100.5 200.5;
  range=200.5 400.5;
}

Положить объект в узел ломаной

В узле ломаной могут быть расположены произвольные объекты (в дальнейшем будем называть их вложенными)

• текст: <ld> это текст </ld>
• произвольную теговую структуру:
• таблицу <ld> <table> ... </table> </ld>
• картинку <ld> <img src= > </ld>
• и т.д.

Положение центра объекта относительно узла ломаной по-прежнему определяется свойством align, но употреблено это свойство должно быть в теге ld. Расположение объекта в узле ломаной позволяет собирать сложные конструкции

а каскадируя - очень сложные, например схемы баз данных

Случай, когда объект, расположенный в узле, может заслонить (в т.ч. и после drag-and-drop'a) другие объекты, регламентируется свойством push тега ld. Значение yes для любого тега ld означает, что перекрывающиеся с ним объекты должны быть автоматически раздвинуты браузером в направлении, которое ясно из следующих рисунков. Значение по умолчанию - no.

Замечание для разработчиков браузера.

Позволить произвольным объектам иметь атрибуты "x", "y" плохо, и вот по какой причине. Все объекты должны быть сгруппированы в слои (т.е. в ломаные линии), и даже те объекты, которые представляют из себя свалку, должны быть размещены внутри невидимой ломаной (можете назвать эту ломаную "heap", "dump" и т.д.).

Пояснительные надписи

Пояснительные надписи узлов и отрезков ломаной определяюся в атрибутах point-note и section-note тега ld. Место расположения надписи ясно из следующих рисунков.

Для того, чтобы внутри ломаной (точнее в геометрическом центре точек ломаной) разместить некоторый текст, нужно поместить дополнительный тег contour c атрибутом text внутри тега line. Тег contour имеет свойства color, white-space и все свойства группы font.

contour { color=lime }	<line> <ld> ... <ld> <contour text="open"> </line>
contour { white-space=pre }	<line> <ld> ... <ld> <contour text="p1 7.28 p2 1.93 p3 5.02"> </line>

Замкнутые, закрашенные

Присвоение свойству background-color тега contour какого-либо цвета приводит к закраске ломаной указанным цветом (таким способом удобно наносить на карту спецзначки полезных ископаемых, буровых вышек, военные обозначения и т.п.). Значение по умолчанию null указывает, что применяется величина, указанная в обрамляющем теге.

У самопересекающегося контура закрашивается только внутренняя область.

Если два полигона (замкнутые закрашенные ломаные) пересекаются в результате команд сервера или пользователя, то участок их пересечения окрашивается в "средний" цвет.

Граф может иметь несколько тегов contour. Присвоение цвета свойству background-color закрашивает только один контур графа.

Всплывающая подсказка

Подсказки, всплывающие при наведении мыши на узел или отрезок, (roalover) определяется в атрибутах point-title и section-title тега ld. Если всплывающая подсказка для точки не определена, то браузер в качестве таковой показывает координаты точки.

Прикрепить ломаную к ломаной

Для этого нужно указать идентификатор id (а при его отсутствии - порядковый номер) точки другой ломаной в атрибуте ptr тега pack. Специальными значениями атрибута ptr являются first и last, которые указывают, что привязать надо к первой или последней точке другой ломаной.

Если ломаная имеет только один тег pack, т.е. является полупривязванной, то ее можно повернуть, указав в атрибуте angle тега pack ее новое положение.

	angle=median angle=m
	angle=antimedian angle=am

Резюме

Поддержка баз данных

Географические карты, GML

Внутри тега line может находиться тег <link type="point">. При условии, что файл "a.txt" имеет следующее содержание

0 0
0 50
100 50
100 100

пример в начале статьи можно переписать так

<line>
 <link src="./a.txt" type="point">
 <pack host="id1" align="side">
 <pack host="id2" dot="last" align="side">
</line>

Вы без труда оцените преимущества на примере ниже приведенного изображения.

<line>
 <link src="./a.txt" type="point">
</line>

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

0 0 7
0 50 h21
100 50 5
100 100 8

В четвертом поле до конца строки расположены (возможно через пробелы) html-теги (или текст), которые надо расположить в узле.

Графы

<line>
 <link src="./a.txt" type="point">
 <link src="./b.txt" type="section">
 <pack host="id1" align="side">
 <pack host="id2" dot="last" align="side">
</line>

72  250 4       NH
317 182 anyword OH
581 42  7       Na <sup> + </sup>

4 7 1  triple red
4 5 ab wedge

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

Наличие тега <link type="section"> означает, что связи будут нарисованы не в порядке следования узлов.

Стандартным примерами графа являются структурные химические формулы.

Пояснительные надписи

Пояснительные надписи начала и конца отрезков ломаной определяются в свойствах section-parent и section-child тега ld.

ld {
  section-parent: "parent";
  section-child:  "child";
}

Пояснительные надписи внутри контуров

Если нужно поместить пояснительные надписи в некоторых контурах

<line>
 <contour src="./c1.txt" text="open">
 <contour src="./c2.txt" text="any">
 <contour src="./c3.txt" text="some">
</line>

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

2 
4 
7 
8 
11 
15 

Если отсутствует тег <link type="section">, то атрибут src первого тега contour игнорируется (контур есть вся ломаная), а последующие теги contour игнорируются вообще.

Резюме

Свойства

Каждый тег ld (за исключением последнего) - отвечает и за точку ломаной, и за отрезок (последний тег ld - только за точку).

Все свойства действительны как для тега ld , так и для тега line .

Свойство color определяет цвет включенного в узел текста, по умолчанию оно равно black.

Группа свойств POINT

Когда содержимое тега ld пусто, его свойство point-type указывает, какая геометрическая фигурка будет нарисована в узле (это свойство аналогично свойству list-style-type). Обычные значения point-type : none (значение по умолчанию), disc, circle, square, decimal. Предлагаю добавить: arrow (стрелка в конца отрезка), barrow (backarrow, стрелка в начала отрезка ), botharrow (стрелка с двух сторон отрезка), star (звездочка), romb (ромб), triangle (треугольник), hex (шестиугольник), которые нужны для построения научных графиков. Причем браузер всегда рисует целую ( не половину ! ) геометрическую фигурку.

Свойство point-color определяет цвет геометрической фигурки в узле, по умолчанию оно равно black.

Группа свойств SECTION

Свойство section-color определяет цвет отрезка, по умолчанию оно равно black .

Cвойство section-width определяет толщину отрезка в миллиметрах (дробная часть числа отделяется от целой знаком "точка") и принимает также специальные значения thin (значение по умолчанию), medium, thick.

Свойство section-type определяет тип отрезка и принимает значения: null (none) - невидимый отрезок, dotted, dashed, solid (значение по умолчанию), double (им можно обозначать железные дороги), groove, ridge. Предлагаю добавить значение single как тождественное solid, а также значения wedge, bwedge, dwedge, bdwedge для рисования любых удаляющихся и приближающихся линий (они нужны каждый раз, когда нужно показать, что некоторые линии выходят из плоскости рисунка).

	triple
	wedge (если section-type=thin, то от thin до medium, если section-type=medium, то от medium до thick, и т.д.)
	bwedge (backwedge, если section-type=thin, то от medium до thin, если section-type=medium, то от thick до medium, и т.д.)
	dwedge (dottedwedge, wedge & dotted)
	bdwedge (backdottedwedge, backwedge & dotted)

Свойства группы section аналогичны свойствам группы border. И они не зависят от свойства background-color.

Резюме

Свойства

тег	свойство	значение по умолчанию	список возможных значений
ld ( line )	point-type	null	null (none), disc, circle, square, decimal, arrow, barrow, botharrow, star, romb, triangle, hex
	point-color	black	black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqva, white, gold, orange, violet, indigo, #FFFFFF
	color	- || -	- || -
	section-color	- || -	- || -
	section-type	solid	null (none), dotted, dashed, single (solid), double, groove, ridge, triple , wedge , bwedge , dwedge , bdwedge
	section-width	thin	thin, medium, thick, float

Формы с линиями и картами

Тег line может быть расположен внутри тега form. Поведение ломаных под воздействием команд в точности совпадает с поведением всех других html-объектов, но только у линий существуют:

• операция перетаскивания (drag-and-drop)
• 7 новых параметров (атрибутов) в отправляемом XML-тексте (действии): num, x, y, dx, dy, user-x, user-y
• наравне с атрибутом menu применяются атрибуты point-menu и section-menu, которые определяют меню соответственно для точки и отрезка

После команды точка и отрезок одного и того же узела ломаной могут быть изображены двумя разными стилями, что совершенно нормально.

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

line.a {}
line.b {}

Важно помнить, что одноименные стили узлов могут быть не эквивалентны.

line.a ld.x {color:red}
line.b ld.x {color:blue}

Новые координаты точек отсылаются в параметрах x и y. После ряда перемещений точки отправляется ее суммарное перемещение.

Последние передвинутые точка (и объект в ней) или отрезок лежат поверх всех других (в пределах тега layer).

Присвоение значения yes свойству user-xy тега ld приводит к отправке двух дополнительных атрибутов user-x и user-y в действии section.

Перетаскивание (drag-and-drop) объекта, вложенного в точку, есть перетаскивание точки.

Если вложенный объект под действием команд изменил стиль, то тег ld стиль не меняет.

• параметр name содержит значение атрибута name (а при его отсутствии - атрибута id) тега line - далее значение параметра обозначается буквой "A".
• параметр num содержит порядковый номер тега ld (отсчитывается от 1) или первичный ключ точки или отрезка - далее значение параметра обозначается буквой "N".

Происхождение обозначений: num = number, os = old style (state), ns = new style (state), cmd = command.

Момент отправки описан в отдельном документе.

Работа с точками

click

Одинарный щелчек (click) мышкой на точке отправляет XML-текст

<dot name=A cmd=click os=... ns=... num=N>

Обычно программист определяет стиль ns в css-файле для данного случая (форма отправляется по нажатию на кнопку "submit"), потому что одинарный щелчок на точке обычно означает выбор точки.

Для тега ld существует свойство deformation, по умолчанию равное yes. Присвоение ему значения no приводит к невозможности перемещения мышкой (drag-and-drop) только одной точки - два смежных отрезка перемещаются как целое, без изменения угла между ними.

<dot name=A cmd=double os=... ns=... num=N>

Щелчек правой ("right" click) клавишей мыши на точке означает появление меню для точки, в котором пользователь выбирает новое состояние точки (новый стиль). Отправляется XML-текст

<dot name=A cmd=... os=... ns=... num=N>

Меню для точки задается в атрибуте point-menu тегов ld или line.

Если стиль ns не найден в css-файле, то смысл элемента меню другой - это выбор некоторой операции для точки.

drag

<dragdot name=A num=N x=... y=...>

Перемещение точек очень удобно использовать при написании html-документа для подбора координат точек. В случае, если координаты точек заданы в отдельном файле

<line>
  <link src="./a.txt" type="point">
</line>

Если координаты заданы в теле самого html-документа, то новые координаты перемещенных ("перетасканных") точек можно узнать при отправке их из формы.

Если точка при перемещении попала на другую точку (этой или другой ломаной, этой или другой картинки) - в дальнейшем будем называть ее принимающей, то браузер отправляет дополнительный XML-текст

<dropdot name=A num=N onname= onnum= >

drop

См. предыдущий абзац

<dragdot name=A1 num=N1                             x=  y=  >
<dot     name=A1 num=N1                    cmd=drag os= ns= >
<dropdot name=A1 num=N1 onname=A2 onnum=N2>
<dot                    name=A2   num=N2   cmd=drop os= ns= >

Работа с отрезками

click

Одинарный щелчек (click) мышкой на отрезке отправляет следующий XML-текст для точки отрезка

<section name=A cmd=click os=... ns=... num=N>
<section name=A cmd=click os=... ns=... num=N user-x=... user-y=...>

Обычно программист определяет стиль ns в css-файле для данного случая (форма отправляется по нажатию на кнопку "submit"), потому что одинарный щелчок на отрезке обычно обозначает выбор отрезка.

double

Двойной щелчек (double-click) мышкой на отрезке отправляет следующий XML-текст для точки отрезка

<section name=A cmd=double os=... ns=... num=N>
<section name=A cmd=double os=... ns=... num=N user-x=... user-y=...>

Обычно программист не определяет стиль ns в css-файле для данного случая (форма немедленно отправляется), потому что двойной щелчок на отрезке обычно означает его разрезание и создание новой точки в месте щелчка. Немедленно появляется та же самая, но обновленная html-страница с новой точкой.

right-click

Щелчек правой ("right" click) клавишей мыши на отрезке означает появление меню для отрезка, в котором пользователь выбирает новое состояние отрезка (новый стиль отрезка). Отправляется XML-текст

<section name=A cmd=... os=... ns=... num=N>
<section name=A cmd=... os=... ns=... num=N user-x=... user-y=...>

Меню для отрезка задается в атрибуте section-menu тегов ld или line.

Если стиль не найден в css-файле, то смысл элемента меню другой - это выбор некоторой операции для отрезка.

drag

При перемещении мышкой отрезка (drag-and-drop) последний сдвигается путем параллельного переноса, из формы отсылаются новые координаты двух точек.

<dragdot name=A num=N   x=... y=...>
<dragdot name=A num=N+1 x=... y=...>

Возможны два варианта в зависимости от значения свойства move тега ld :

• Перемещение конца отрезка есть сдвиг точки A в точку B, move=dot (значение по умолчанию)
• Перемещение конца отрезка есть сдвиг точки A в точку C, move=cross

dot	cross

Если при этом две точки совмещаются в одну, то второй (по следованию внутри тега line) присваиваются координаты (null,null) и и из формы отсылается следующий XML текст

<dragdot name=A num=N  x=... y=...>
<deldot  name=A num=N+1>

Форма всегда отправляется по нажатию на кнопку "submit".

Перемещение отрезка очень удобно использовать при написании html-документа для подбора координат точек.

Работа с полигонами

click, double, right click

Щелчек, двойной щелчек, щелчок правой клавишей внутри контура

• графа
• ломаной, у которой координаты первой точки совпадают с координатами последней
• замкнутой, закрашенной ломаной

<line name=A cmd=... os=... ns=...>
<line name=A cmd=... os=... ns=... user-x=... user-y=...>

В случае щелчка правой клавишей мыши для тега line используется атрибут menu (а не point-menu или section-menu).

drag

Перетаскивание мышью (drag-and-drop) при нажатии клавиши внутри контура

• графа
• ломаной, у которой координаты первой точки совпадают с координатами последней
• замкнутой, закрашенной ломаной

<dragline name=A dx=... dy=...>

Резюме

<dot      name= cmd= os= ns=  num= >
<section  name= cmd= os= ns=  num= user-x= user-y= >
<line     name= cmd= os= ns=       user-x= user-y= >
<dragdot  name=      x=  y=   num= >
<dropdot  name=               num= onname= onnum= >
<dragline name=      dx= dy= >
<deldot   name=               num= >

html60author