@metadev/daga 1.3.1 → 1.4.0

package/lib/diagram-editor/diagram/diagram-connection.d.ts

@@ -136,6 +136,7 @@ export declare class DiagramConnection extends DiagramElement {
     setStart(start?: DiagramPort): void;
     setEnd(end?: DiagramPort): void;
     tighten(): void;
+    getPriority(): number;
 }
 export declare class DiagramConnectionSet extends DiagramEntitySet<DiagramConnection> {
     private model;

package/lib/diagram-editor/diagram/diagram-element.d.ts

@@ -1,5 +1,10 @@
 import * as d3 from 'd3';
 import { DiagramModel } from './diagram-model';
+/**
+ * Default priority value for diagram elements.
+ * @private
+ */
+export declare const DEFAULT_PRIORITY = 0;
 /**
  * Represents an object which exists as part of a diagram model.
  * @public
@@ -37,6 +42,11 @@ export declare abstract class DiagramElement implements DiagramEntity {
      */
     selected: boolean;
     constructor(model: DiagramModel, id: string);
+    /**
+     * Get the priority of this element to calculate whether it should be filtered out in the view or not.
+     * @public
+     */
+    abstract getPriority(): number;
     /**
      * Update the view of the canvas to show the current state of this element.
      * @public

package/lib/diagram-editor/diagram/diagram-field.d.ts

@@ -15,11 +15,12 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     fontSize: number;
     margin: number;
     padding: number;
-    fontFamily: null;
+    fontFamily: string;
     color: string;
     selectedColor: string;
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
+    fit: boolean;
 };
 /**
  * A field which displays text and is part of a diagram element.
@@ -96,15 +97,21 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     editable: boolean;
-    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, id?: string);
+    /**
+     * Whether this field's size can adapt to the size of the text.
+     * @public
+     */
+    fit: boolean;
+    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean, id?: string);
+    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
     updateInView(): void;
     move(coords: Point): void;
-    getClosestNode(): DiagramNode | undefined;
+    getPriority(): number;
 }
 export declare class DiagramFieldSet extends DiagramEntitySet<DiagramField> {
     private model;
     constructor(model: DiagramModel);
-    new(rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, id?: string | undefined): DiagramField;
+    new(rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean, id?: string | undefined): DiagramField;
     remove(id: string): void;
     filter(threshold?: number): DiagramField[];
     find(threshold?: number): DiagramField | undefined;

package/lib/diagram-editor/diagram/diagram-model.d.ts

@@ -15,11 +15,6 @@ export declare class DiagramModel {
      * @private
      */
     canvas?: Canvas;
-    /**
-     * Whether changes to this model are updated in the canvas in real time.
-     * @private
-     */
-    renderToCanvas: boolean;
     /**
      * Nodes of this model.
      * @see DiagramNode
@@ -86,17 +81,6 @@ export declare class DiagramModel {
      */
     valueSet: ValueSet;
     constructor(canvas: Canvas | undefined, id: string | undefined, name: string, description: string | undefined, type: string, properties?: Property[]);
-    /**
-     * Enables rendering to canvas in real time and updates the view of this model in the canvas.
-     * @public
-     */
-    enableRenderToCanvas(): void;
-    /**
-     * Disables rendering to canvas in real time.
-     * Used to perform batches of changes to the model without the computational cost of rendering each change to the canvas individually.
-     * @public
-     */
-    disableRenderToCanvas(): void;
     /**
      * Deletes everything in this diagram.
      * @public

package/lib/diagram-editor/diagram/diagram-node.d.ts

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionConfig } from './diagram-config';
+import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntity, DiagramEntitySet } from './diagram-element';
 import { DiagramField } from './diagram-field';
@@ -29,7 +29,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     resizableY: boolean;
     label: null;
     ports: never[];
-    sections: null;
+    sectionGrid: null;
     look: NodeShapedLook;
     isUnique: boolean;
     priority: number;
@@ -51,7 +51,7 @@ export declare class DiagramNodeType implements DiagramEntity {
     resizableY: boolean;
     label: FieldConfig | null;
     ports: PortConfig[];
-    sections: SectionConfig | null;
+    sectionGrid: SectionGridConfig | null;
     look: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
     isUnique: boolean;
     priority: number;
@@ -115,6 +115,7 @@ export declare class DiagramNode extends DiagramElement {
     set name(name: string);
     constructor(model: DiagramModel, type: DiagramNodeType, coords?: Point, id?: string);
     updateInView(): void;
+    getPriority(): number;
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
     getIncomingConnections(): DiagramConnection[];
     getOutgoingConnections(): DiagramConnection[];
@@ -122,7 +123,7 @@ export declare class DiagramNode extends DiagramElement {
     getAdjacentNodes(): DiagramNode[];
     move(coords: Point): void;
     stretch(direction: Side, distance: number): void;
-    stretchSections(direction: Side, distance: number, point: Point): void;
+    stretchSections(direction: Side, distance: number, indexX: number, indexY: number): void;
 }
 export declare class DiagramNodeSet extends DiagramEntitySet<DiagramNode> {
     private model;

package/lib/diagram-editor/diagram/diagram-port.d.ts

@@ -59,6 +59,7 @@ export declare class DiagramPort extends DiagramElement {
     startConnection(connection: DiagramConnection): void;
     finishConnection(connection: DiagramConnection): void;
     getNode(): DiagramNode | undefined;
+    getPriority(): number;
     move(coords: Point): void;
     distanceTo(coords: Point): number;
 }

package/lib/diagram-editor/diagram/diagram-section.d.ts

@@ -1,6 +1,6 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
-import { NodeShapedLook } from './diagram-config';
+import { NodeShapedLook, SectionConfig } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntitySet } from './diagram-element';
 import { DiagramField } from './diagram-field';
@@ -19,15 +19,35 @@ export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: NodeShapedLook;
  * @private
  */
 export declare const DIAGRAM_SECTION_DEFAULTS: {
-    sectionsX: number;
-    sectionsY: number;
-    minWidth: number;
-    minHeight: number;
-    margin: number;
     label: null;
     ports: never[];
     look: NodeShapedLook;
+    priority: number;
 };
+/**
+ * Default value of the default width of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_DEFAULT_WIDTH = 1;
+/**
+ * Default value of the default height of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_DEFAULT_HEIGHT = 1;
+/**
+ * Default value of the minimum width of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_MIN_WIDTH = 1;
+/**
+ * Default value of the minimum height of a diagram section.
+ * @see DiagramSection
+ * @private
+ */
+export declare const DIAGRAM_SECTION_MIN_HEIGHT = 1;
 /**
  * A section of a node which can have connections and display a property of the node.
  * @see DiagramConnection
@@ -41,6 +61,14 @@ export declare class DiagramSection extends DiagramElement {
      * @public
      */
     node?: DiagramNode;
+    /**
+     * X index of this section in the parent node's section array.
+     */
+    indexXInNode: number;
+    /**
+     * Y index of this section in the parent node's section array.
+     */
+    indexYInNode: number;
     /**
      * Label of this section.
      * @public
@@ -72,8 +100,12 @@ export declare class DiagramSection extends DiagramElement {
      */
     get name(): string;
     set name(name: string);
-    constructor(model: DiagramModel, node: DiagramNode | undefined, coords: Point, width: number, height: number, id?: string);
+    constructor(model: DiagramModel, node: DiagramNode | undefined, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string);
     updateInView(): void;
+    getConfig(): SectionConfig | undefined;
+    getMinWidth(): number;
+    getMinHeight(): number;
+    getPriority(): number;
     getClosestPortToPoint(coords: Point): DiagramPort | undefined;
     getIncomingConnections(): DiagramConnection[];
     getOutgoingConnections(): DiagramConnection[];
@@ -84,7 +116,7 @@ export declare class DiagramSection extends DiagramElement {
 export declare class DiagramSectionSet extends DiagramEntitySet<DiagramSection> {
     private model;
     constructor(model: DiagramModel);
-    new(node: DiagramNode, coords: Point, width: number, height: number, id?: string | undefined, portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[]): DiagramSection;
+    new(node: DiagramNode, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id?: string | undefined, portIds?: (string | undefined)[], portLabelIds?: (string | undefined)[]): DiagramSection;
     remove(id: string): void;
     filter(threshold?: number): DiagramSection[];
     find(threshold?: number): DiagramSection | undefined;

package/lib/diagram-editor/diagram-editor.component.d.ts

@@ -7,7 +7,7 @@ import { PaletteComponent } from '../palette/palette.component';
 import { PropertyEditorComponent } from '../property-editor/property-editor.component';
 import { CanvasProviderService } from '../services/canvas-provider.service';
 import { DagaConfigurationService } from '../services/daga-configuration.service';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * A diagram's user interface editor.
@@ -23,6 +23,7 @@ export declare class DiagramEditorComponent implements AfterViewInit, DiagramEdi
     get config(): DiagramConfig;
     get canvas(): Canvas;
     Corner: typeof Corner;
+    Side: typeof Side;
     constructor(configurationService: DagaConfigurationService, canvasProvider: CanvasProviderService);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/lib/interfaces/canvas.d.ts

@@ -1,12 +1,13 @@
 import { Subject } from 'rxjs';
-import { ActionQueue } from '../diagram-editor/diagram/diagram-action';
+import { ActionQueue, DiagramActions } from '../diagram-editor/diagram/diagram-action';
+import { UserActionConfig } from '../diagram-editor/diagram/diagram-config';
 import { DiagramConnectionType } from '../diagram-editor/diagram/diagram-connection';
 import { DiagramElement } from '../diagram-editor/diagram/diagram-element';
 import { DiagramModel } from '../diagram-editor/diagram/diagram-model';
 import { DiagramValidator } from '../errors/diagram-validator';
 import { Point } from '../util/canvas-util';
 import { DiagramEditor } from './diagram-editor';
-import { UserActionConfig } from '../diagram-editor/diagram/diagram-config';
+import { ValueSet } from '../diagram-editor/diagram/diagram-property';
 /**
  * Provides the functionality for the visual representation of the elements of a model.
  * @public
@@ -26,7 +27,7 @@ export interface Canvas {
      * Background color of the diagram.
      * @public
      */
-    color: string;
+    backgroundColor: string;
     /**
      * Distance between the grid points of the diagram.
      * @public
@@ -47,16 +48,6 @@ export interface Canvas {
      * @public
      */
     connectionType?: DiagramConnectionType;
-    /**
-     * Elements below the priority threshold shouldn't be displayed.
-     * @public
-     */
-    priorityThreshold?: number;
-    /**
-     * Possible values that the priority threshold can take.
-     * @public
-     */
-    priorityThresholds: number[];
     /**
      * Identifier of the current layout format used by the diagram.
      * @public
@@ -83,19 +74,20 @@ export interface Canvas {
      */
     viewInitialized$: Subject<void>;
     /**
-     * Subject for tracking when validators are added to the canvas.
+     * Subject for tracking when validators are added to or removed from the canvas.
      * @public
      */
     validatorChanges$: Subject<void>;
     /**
      * Subject for tracking changes in the diagram.
      * Used to detect if there have been changes over a period of time.
+     * Values are sent when the user performs changes on the diagram, but not when the changes are performed programmatically.
      * @public
      */
-    diagramChanges$: Subject<number>;
+    diagramChanges$: Subject<void>;
     /**
      * Subject for tracking the presence of important changes in the diagram.
-     * Used to detect if there are any changes that require an immediate reaction.
+     * Used to detect if there are any changes that require immediate handling.
      * @public
      */
     diagramImportantChanges$: Subject<void>;
@@ -163,6 +155,22 @@ export interface Canvas {
      * @public
      */
     removeValidator(validator: DiagramValidator): void;
+    /**
+     * Get the possible priority thresholds of the diagram.
+     * @public
+     */
+    getPriorityThresholdOptions(): number[] | undefined;
+    /**
+     * Get the current priority threshold of the diagram.
+     * @public
+     */
+    getPriorityThreshold(): number | undefined;
+    /**
+     * Changes the current priority threshold of the diagram.
+     * @public
+     * @param priority A priority threshold.
+     */
+    setPriorityThreshold(priority: number): void;
     /**
      * Update the view of the canvas to show the current state of the model.
      * @public
@@ -193,6 +201,16 @@ export interface Canvas {
      * @public
      */
     updateFieldsInView(...ids: string[]): void;
+    /**
+     * Fit the root of a diagram field to encompass the totality of the field.
+     * @param id The id of a diagram field
+     */
+    fitFieldRootInView(id: string): void;
+    /**
+     * Fit a node to encompass the totality of its sections.
+     * @param id The id of a node
+     */
+    fitNodeInView(id: string): void;
     /**
      * Get the d3 Selection containing the view of all the elements in the canvas.
      * @private
@@ -245,9 +263,16 @@ export interface Canvas {
      * @public
      */
     cancelAllUserActions(): void;
+    /**
+     * Checks whether the user can perform the given action.
+     * @public
+     */
+    canUserPerformAction(action: DiagramActions): boolean;
     /**
      * Sets the diagram element whose ValueSet is being displayed in the value set editor.
      * @private
      */
-    setPropertyEditorSelection(selection?: DiagramElement): void;
+    setPropertyEditorSelection(selection?: {
+        valueSet: ValueSet;
+    } & (DiagramElement | DiagramModel)): void;
 }

package/lib/palette/palette.component.d.ts

@@ -1,10 +1,10 @@
 import { AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
 import * as d3 from 'd3';
-import { PaletteConfig } from '../diagram-editor/diagram/diagram-config';
+import { PaletteSectionConfig } from '../diagram-editor/diagram/diagram-config';
 import { Canvas } from '../interfaces/canvas';
 import { Palette } from '../interfaces/palette';
 import { CanvasProviderService } from '../services/canvas-provider.service';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * Palette that the user can drag and drop nodes from.
@@ -16,16 +16,18 @@ export declare class PaletteComponent implements AfterContentInit, AfterViewInit
     private canvasProvider;
     get canvas(): Canvas;
     panel: ElementRef<HTMLDivElement>;
-    palettes: PaletteConfig[];
-    currentPalette: PaletteConfig;
+    palettes: PaletteSectionConfig[];
+    currentPalette: PaletteSectionConfig;
     currentCategory: string;
     location: Corner;
+    direction: Side;
+    width: string;
     private priorityThreshold?;
     constructor(canvasProvider: CanvasProviderService);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     refreshPalette(): void;
-    switchPalette(palette: PaletteConfig): void;
+    switchPalette(palette: PaletteSectionConfig): void;
     selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     selectPalette(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     private appendCategories;
@@ -33,5 +35,5 @@ export declare class PaletteComponent implements AfterContentInit, AfterViewInit
     private appendNodeTemplate;
     private appendConnectionTemplate;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaletteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteComponent, "daga-palette", never, { "palettes": { "alias": "palettes"; "required": false; }; "currentPalette": { "alias": "currentPalette"; "required": false; }; "currentCategory": { "alias": "currentCategory"; "required": false; }; "location": { "alias": "location"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteComponent, "daga-palette", never, { "palettes": { "alias": "palettes"; "required": false; }; "currentPalette": { "alias": "currentPalette"; "required": false; }; "currentCategory": { "alias": "currentCategory"; "required": false; }; "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/property-editor/property-editor.component.d.ts

@@ -1,23 +1,28 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+import * as d3 from 'd3';
 import { ValueSet } from '../diagram-editor/diagram/diagram-property';
 import { PropertyEditor } from '../interfaces/property-editor';
-import { Corner } from '../util/svg-util';
+import { Corner, Side } from '../util/svg-util';
 import * as i0 from "@angular/core";
 /**
  * Editor of the values of a value set.
  * @see ValueSet
  * @private
  */
-export declare class PropertyEditorComponent implements PropertyEditor {
+export declare class PropertyEditorComponent implements AfterViewInit, PropertyEditor {
     private cdr;
     panel: ElementRef<HTMLDivElement>;
     location: Corner;
+    direction: Side;
+    width: string;
     title?: string;
     _valueSet: ValueSet | undefined;
     get valueSet(): ValueSet | undefined;
     set valueSet(valueSet: ValueSet | undefined);
     constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
     highlightProperty(...propertyNames: string[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PropertyEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "location": { "alias": "location"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "location": { "alias": "location"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "width": { "alias": "width"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/services/canvas-provider.service.d.ts

@@ -22,7 +22,7 @@ export declare class CanvasProviderService {
      */
     initCanvasView(appendTo: HTMLElement): void;
     /**
-     * Get the diagram canvas of this context.
+     * Get the diagram canvas of this context. Should only be called after the view of the {@link DiagramComponent} context has been initialized.
      * @public
      * @returns A diagram canvas.
      */

package/lib/services/daga-configuration.service.d.ts

@@ -13,7 +13,7 @@ export declare class DagaConfigurationService {
      */
     init(config: DiagramConfig): void;
     /**
-     * Get the diagram configuration of this context.
+     * Get the diagram configuration of this context. Should only be called after the {@link DiagramComponent} context has been initialized.
      * @public
      * @returns A diagram configuration.
      */

package/lib/util/events.d.ts

@@ -7,11 +7,15 @@ export declare enum Events {
     Change = "change",
     Click = "click",
     DoubleClick = "dblclick",
+    Focus = "focus",
+    FocusIn = "focusin",
+    FocusOut = "focusout",
     Input = "input",
     KeyUp = "keyup",
     MouseMove = "mousemove",
     MouseOut = "mouseout",
-    MouseOver = "mouseover"
+    MouseOver = "mouseover",
+    Wheel = "wheel"
 }
 /**
  * Keys in keyboard events.

package/lib/util/style.d.ts

@@ -0,0 +1,13 @@
+export declare enum CursorStyle {
+    AllScroll = "all-scroll",
+    Auto = "auto",
+    EWResize = "ew-resize",
+    Grab = "grab",
+    Grabbing = "grabbing",
+    Move = "move",
+    NoDrop = "no-drop",
+    NSResize = "ns-resize",
+    NotAllowed = "not-allowed",
+    ZoomIn = "zoom-in",
+    ZoomOut = "zoom-out"
+}

package/lib/util/text-util.d.ts

@@ -0,0 +1,2 @@
+export declare const numberOfColumns: (s: string) => number;
+export declare const numberOfRows: (s: string) => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",

package/assets/config/generic-diagram.json

@@ -1,94 +0,0 @@
-{
-  "type": "generic-diagram",
-  "color": "#FFFFFF",
-  "gridSize": 50,
-  "snapToGrid": true,
-  "guessConnectionType": false,
-  "defaultConnection": "diagram-connection",
-  "palettes": [
-    {
-      "name": "",
-      "templates": [
-        {
-          "templateType": "node",
-          "type": "diagram-node",
-          "label": "Node"
-        },
-        {
-          "templateType": "connection",
-          "type": "diagram-connection",
-          "label": "",
-          "color": "white",
-          "icon": "/assets/daga/icon/connection/filled-arrow.svg",
-          "width": 150,
-          "height": 50
-        }
-      ]
-    }
-  ],
-  "nodeTypes": [
-    {
-      "id": "diagram-node",
-      "name": "Node",
-      "defaultWidth": 150,
-      "defaultHeight": 50,
-      "label": {
-        "fontSize": 20,
-        "margin": 10
-      },
-      "ports": [
-        {
-          "coords": [75, 0],
-          "direction": "top"
-        },
-        {
-          "coords": [0, 25],
-          "direction": "left"
-        },
-        {
-          "coords": [75, 50],
-          "direction": "bottom"
-        },
-        {
-          "coords": [150, 25],
-          "direction": "right"
-        }
-      ],
-      "look": {
-        "lookType": "shaped-look",
-        "shape": "rectangle",
-        "color": "#FFFFFF",
-        "borderColor": "#000000",
-        "selectedColor": "#FFAAFF",
-        "selectedBorderColor": "#AA00AA"
-      }
-    }
-  ],
-  "connectionTypes": [
-    {
-      "id": "diagram-connection",
-      "name": "Connection",
-      "color": "#000000",
-      "selectedColor": "#AA00AA",
-      "width": 3,
-      "shape": "bezier",
-      "defaultEndMarkerLook": {
-        "image": "/assets/marker/arrow.svg",
-        "selectedImage": "/assets/marker/arrow.svg",
-        "markerWidth": 4,
-        "markerHeight": 8,
-        "markerRefX": 4,
-        "markerRefY": 4
-      },
-      "label": {
-        "color": "#FFFFFF",
-        "selectedColor": "#FFFFFF",
-        "fontSize": 12,
-        "padding": 6,
-        "margin": 20
-      },
-      "startTypes": ["diagram-node"],
-      "endTypes": ["diagram-node"]
-    }
-  ]
-}

package/assets/icon/connection/arrow.svg

@@ -1,23 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-	<line
-		x1="120"
-		y1="5"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-	<line
-		x1="120"
-		y1="45"
-		x2="140"
-		y2="25"
-		stroke="black"
-	/>
-</svg>

package/assets/icon/connection/empty-arrow.svg

@@ -1,19 +0,0 @@
-<svg viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg">
-	<line
-		x1="10"
-		y1="25"
-		x2="120"
-		y2="25"
-		stroke="black"
-	/>
-	<path
-		d="
-			M 140, 25
-			L 120,  5
-			L 120, 45
-			z
-		"
-		stroke="black"
-		fill="white"
-	/>
-</svg>