agentlab/ldkg-ui-diags

Web-based diagram editor

ldkg-ui-diags's Issues

Add a Story with a diagram and a form for interaction testing

• add Forms renderer for the diagram editor (like in ldkg-ui-react)
• add new ViewKind and ViewDescr
• needs dispatcher migration from ViewDescr to ViewKind in ldkg-ui-react

Move hardcoded node and line stencils into configs

1. Some hardcoded stencils in different places:

• graphCore.tsx
• Stencil.tsx
• yoga.ts, kiwi.ts
• interactionValidation.ts

Stencils, which should be in test configs in ViewKind/ViewDescr or storybooks only:

• rm:GeneralCompartmentNodeStencil
• rm:PropertiesCompartmentNodeStencil
• rm:PropertyNodeStencil
• rm:ClassNodeStencil
• rm:WindTurbineStencil
• rm:HeaterStencil
• rm:HouseStencil
• rm:SubstationStencil
• rm:GeneratorStencil

2. For arrow types we need stensils-like mechanics with protoStencil = 'rm:EdgeStencil'. Arrow stencil palette should also use registered arrow types. We should remove hardcoded custom 'lines' and move it into test configs in ViewKind/ViewDescr or storybooks only:

• rm:AssociationArrowStencil
• rm:InheritanceArrowStencil
• rm:Line
• rm:DoubleLine

Unify cells multi-select and diagram pan

Mouse pointer behavior:

• pan diagram -- is the default mode now, but it should not be
  • drag-and-prop with scroll button pressed
• multi-select -- it should be the default pointer mode, not pan diagram mode
  • See x6 Box select node

Architecture diagrams with stencils SVG-and-label

Diagram nodes and edges created from Stencils panel should be processed by editor engines

Diagram nodes and edges should be :

• saved to the MST Collections
• added to the Kiwi.JS

Update x6 components

Delete nodes and edges by DEL keyboard key

Main delete scenarious:

• Single selected node or arrow
  • DEL should delete selected node or arrow
• Parent node with childs
  • selected only parent node OR parent with all childs OR parent with some of childs)
    • DEL should delete parent and ALL it's childs
  • selected only some of childs AND parent not selected
    • DEL should delete only selected childs
• Multi-elected nodes and/or arrows in any combinations (including parent nodes with childs)
  • DEL should delete selected nodes and/or arrows in any combinations
    • in case of parent nodes see "Parent node with childs"

See working example in Antv X6 DAG

Invalid shapes of newly created elements

A shape of newly created elements is not modified upon shape switching. Reproduced on d5385ec

Create forms renderer for DiagramEditor

• Create renderer and tester, export it from index.ts as an array.
• Add separate story to test renderer with Forms Dispatcher mechanics.

ViewDescr settings to disable right panel, minimap, title, top toolbar

• Add new configs into the new variant of mktpViewDescrs ViewDescr.
• Add new story with this config inside 'GraphEditor/CardsDiagram'

Update x6, fix stencils panel and movement

Restore Class diagram as story

Add card diagram stencil

• Add Ontodia-like diagram stencil for "Card" graph node
• Simple React rectangle with fields
  • picture (by picture URL)
  • title (string)
  • description (string)

Resize glitches for classes and properties

It could be Yoga layout settings bugs

Publishing library

For ease of use, the library should be published as a package to npm.
Additional preliminary steps:

• add license
• add project description to readme
• change project name to something more expressive

Enforce source code formatting and style

• Configure Prettier styles
  • Line endngs: LF Unix, not Windows CRLF.
  • Quotes: Single-quotes, not doubles
  • Indentation: two spaces, not tabs.
  • kebabKaseVariablesAndFunctions and CamelCaseInterfacesAndTypes
• Re-format all sources
• Configure Husky-Prettier precommit hook

Support CardDiagram's nodes and edges styling in ViewKind

Move graph editor code to the separate class

Add yoga layout to the stencils panel

Connecting cards did not work

Refactor KiwiCore to increase modularity and configurability

• Decompose into smaller finctions
• Move out node type configurations

Text editor for labels in graph Nodes and Edges

• In-place label editing in diagram node or edge
• Synchronization to the MST Collections

Example in x6 Node tool / Text editor

Test data for initial decoupling Model from View and ViewKind

• Separate ViewDescr and ViewKindDescr
• Add to ViewDescr representation objects with coords and references to the model objects

Add 6 layout actions to the editor selection context menu

• Add context menu on selection (several elements selected) x6 context menu on single element
  • This menu items is specific to the selection tool and several selected elements. If only one element selected it should be menu with Z-order but without layout options.
• Add layout actions support, see x6 layouts

Add complex request and shapes inclemental load

Add Cassovary constraints performance tests for kiwi.js witn x6

Reduce visual noize in Cadrs diagram

• Too much fallback images.
  • It should appears in case of broken image link only.
  • If image link is not provided, we should not sow fallback image.
• Too obtrusive arrows. See Ontodia arrow styles
  • Make lines thinner
  • Change line and text color to more faded one (from black to gray 1-2 tones)

Diagram settings panels has styling issues

For reference compare with x6 Draw Example

Convert CRA-storybook app into storybook library

TSDX did not work well due to es5 target. Switched to rollup config

Prepare ViewKind sample with model types to representation types mapping

Evaluate yoga layout from facebook

See https://yogalayout.com

Add zoom actions toolbar

See X6 DAG example

In should be possible to draw disconnected edges if relation class shema allows it

Subrelation Schema (targeting UsedInDiagramAsXXX classes) could allows disconnected edges (if property cardinality is 0:1) or forbids it (if property cardinality is 1:1).

Ability to draw new disconnected edge

• disconnected from one node
• disconnected from all nodes

Ability to edit connected edge and make in disconnected:

• Disconnect connected edge from one node
• Disconnect connected edge from all nodes

Stencils panel usability improvement

Stencils problems

• Node stencil's labels are too truncated. Its hard to see quickly what is what.
  
• Edge stencils didn't have labels at all. We should add it. arrow's labels should be in Russian.

Stencil panel problems

• Stencils panel's titles should be in Russian.
• Maybe move node stencils to "Stencils' and drop "Components" to make it more compact.
• More compact (too much height) node stencils panel (Component panel).
  
• Node stencils are layouted in a giant row and truncated (see pict. below). We need some sort of panel layout (like "2 in a row' grid) and "line break" to the next row.
  
• Edge stencils panel's background should be the same as in Node stencils panel.

Add connector tool support

Unified panel for node and arrow stencils

Some code handles text editing

• On nodes at diagram:
  • strange unintuitive switch between text editing and non-editing
  • text style and size changes and input borders appears while editing text in-place
• On edges at stensil panel:
  • double-click on edge at stensil panel allows label editing

Some visual examples:

1. Without editing
   

2. Class title editing
   

3. Class property editing
   

Reduce visual noize in shapes diagram

• Make shape node less intence
  • contour lines in gray color
  • title fill: maybe gray-white gradient
• Make compartment node colors less intence, then shape node colors
• Extract rest's title into separate rect's child element in ViewKind
• Prefer CSS styles for nodes, node elements
  • rects: fill, border, margins, paddings
  • text labels: font, font-size..., background

Refactor graph state contexts to mobx store

Compact shapes classes DiagramKind

• No separate top-level PropertyShape nodes, only NodeShape nodes are top-level
• All simple-type PropertyShapes (string, int,.. all except IRI) are like UML class properties (in compartments in Class nodes)
• Arrow types
  • Class inheritance relation (class-to-superclass) -- arrow between NodeShapes based on relation between their targetClass classes
  • Class reference relation (classA-to-classB-by-propertyC) -- arrow between shapes if there is a PropertyShape in class A with sh:nodeKind = sh:IRI and sh:class = iri of class B. Arrow label = propertyC IRI

Add e2e and jest tests

Diagram editor should autoresize if window size changes

• Top toolbar should save it's place
• Left and right panels should save it's width
• Canvas should change it's size
• Minimap should not change it's placement

Add UML Class Diagram arrow styles

• Inheritance arrow
• Association arrow (arrow without "dimonds")

Add props types and default values to the react functional components

In some stories we have errors with undefined onSelect if you try to move node. This types of errors should be detected at linting/compiling stage if we have strong typing specifications in the code.

• Please, add typings and default values to the react functional components.
• Please, add default empty funct to the onSelect() in GraphEditor's props.

Create embedding and connecting validator functions with example

Restore Stencils sidebar

History should work for roon nodes, child nodes and edges

Scenarios:

• Single node add/delete/resize/move/edit_content
• Single edge add/delete/move/edit_connection/edit_label
• Multi-select (mix with root nodes, child nodes, edges) delete/move
  GUI Interfaces:
• Toolbar buttons should
• Hot-keys sould work (undo: Ctrl+Z, redo: Ctrl+Y)

Same selection tool interaction for diagram nodes and edges

• Exactly the same selection visual markers for selected Nodes and Edges. Same size, same colour.
• The same selection markers behavior (or interactivity):
  • Markers should appear after single click on edge, not on hover. Like nodes selection.
  • Selected edge should stay selected untl "click outside" (like node).

Add selectHandler to the DiagramEditor

Inflexible graph state management