Editor

Contents

1. Editor
2. Shape
3. Constraint
4. Relationship

Editor

This component represents the canvas which renders all the shapes and their properties and relationships. The user can drag-drop and interact with the elements visualized on the stage.

• The canvas will resize to accomodate a changed window size.
• When the panel is resized, the size of the canvas will update when the user hovers over it.
• When the user scrolls on the canvas, the canvas will zoom in and out.
• When the canvas is dragged, the whole canvas and all the shapes will move around.

The canvas consists of multiple layers, from bottom to top:

• Relationships
• Property shapes
• Node shapes The order of the layers in the HTML will determine the order in which they will be rendered. Layers that are rendered earlier will be below newer layers.

Used libraries:

• Konva.js
• Vue Konva

Shape

Component that represents node and property shapes. They contains an identifier and a boolean nodeShape to differentiate between a NodeShape or PropertyShape.

• This component calculates the coordinates of its children components.
• Add a new predicate using the green button in the top right.
• Self destruct using the red button in the top right.
• Whenever this component is rendered and moved, it will recalculate its coordinates and those of its children components.
• The children components have dynamic configurations depending on the properties and location of the Shape.

When the URI of the shape is clicked, this will toggle a modal to edit the Shape's properties. The buttons will only appear when the user hovers over the Shape.

A shape consists of a rectangle, text to visualize the URI and label/name (if present), buttons to add predicates or self destruct, and a list of Constraint components to visualize the Shape's constraints. If the shape has a description, this will be shown whenever the user hovers over the shape object.

Constraint

Component that represents a certain predicate and its constraint values.

A constraint consists of a rectangle, text to visualize the predicate, a button to delete the constraint and a list of constraint values. When hovering over the predicate, the user can click the red button to delete the whole constraint and all its values.

These values are visualized in two different ways:

• As a single entry with a list of values seperated by a comma. This is used when the values are relations to other shapes, in which case they will also be visualized using the Relationship components. In this case, the values cannot be edited and only deleted as a whole using the constraint visualization.
• As multiple entries. In this case, every value is listed as a seperate entry. When the value is clicked, a modal will pop up to edit this value. When hovering over the value, the user can delete it using the red button.

Relationship

Component that represents a certain relationship between two shapes.

A relationship is visualized using an arrow which connects the two shapes and a label to indicate which relationship is portrayed. On hover, a red button will appear. When clicked, this will delete this relationship, and with that the related constraint entry. The children components have dynamic configurations depending on the end points of the Relationship.