@metadev/daga 3.1.4 → 4.0.0

package/src/lib/diagram/config/diagram-look.d.ts

@@ -0,0 +1,220 @@
+import { LineFunction, LineShape, LineStyle } from '../../util/line';
+import { ClosedShape, ShapeFunction } from '../../util/shape';
+/**
+ * Converts a configuration for a look into an easier to consult object of fully qualified looks for each case.
+ *
+ * @param lookConfig A look configuration object
+ * @returns An object with four keys for a look with each possible state of being selected or not and being highlighted or not.
+ */
+export declare const extractLooksFromConfig: <L extends Look>(lookConfig: LookConfig<L>) => {
+    defaultLook: L;
+    selectedLook: L;
+    highlightedLook: L;
+    selectedAndHighlightedLook: L;
+};
+/**
+ * A configuration object for a look, which consists of the look
+ * plus optional objects indicating which values are different
+ * when the object with this look is selected or highlighted.
+ * @public
+ */
+export interface LookConfig<L extends Look> {
+    selected?: Partial<L>;
+    highlighted?: Partial<L>;
+}
+/**
+ * Configuration object for a look given by a shape.
+ * @public
+ * @see ShapedLook
+ */
+export interface ShapedLookConfig extends ShapedLook, LookConfig<ShapedLook> {
+}
+/**
+ * Configuration object for a look given by an image.
+ * @public
+ * @see ImageLook
+ */
+export interface ImageLookConfig extends ImageLook, LookConfig<ImageLook> {
+}
+/**
+ * Configuration object for a look given by fixed size images in the corners and stretchable images in the middle.
+ * @public
+ * @see StretchableImageLook
+ */
+export interface StretchableImageLookConfig extends StretchableImageLook, LookConfig<StretchableImageLook> {
+}
+/**
+ * Configuration for a look for the markers at the start and end of a connection given by an image.
+ * @public
+ * @see MarkerImageLook
+ */
+export interface MarkerImageLookConfig extends MarkerImageLook, LookConfig<MarkerImageLook> {
+}
+/**
+ * Configuration for a look for a connection.
+ * @public
+ * @see MarkerImageLook
+ */
+export interface ConnectionLookConfig extends ConnectionLook, LookConfig<ConnectionLook> {
+}
+export interface Look {
+    /**
+     * String used to discern the type of look this is.
+     */
+    lookType: string;
+}
+/**
+ * Configuration for a look given by a shape.
+ * @public
+ */
+export interface ShapedLook extends Look {
+    lookType: 'shaped-look';
+    /**
+     * Shape of nodes using this look.
+     */
+    shape: ClosedShape | ShapeFunction;
+    /**
+     * Background color of this look.
+     */
+    fillColor: string;
+    /**
+     * Border color of this look.
+     */
+    borderColor: string;
+    /**
+     * Border thickness of this look in diagram units.
+     */
+    borderThickness: number;
+}
+/**
+ * Configuration for a look given by an image.
+ * @public
+ */
+export interface ImageLook extends Look {
+    lookType: 'image-look';
+    /**
+     * File path to the background image used by this look.
+     */
+    backgroundImage: string;
+}
+/**
+ * Configuration for a look given by fixed size images in the corners and stretchable images in the middle.
+ * @public
+ */
+export interface StretchableImageLook extends Look {
+    lookType: 'stretchable-image-look';
+    /**
+     * Width taken up by the images at the left of the look in diagram units.
+     */
+    leftMargin: number;
+    /**
+     * Width taken up by the images at the right of the look in diagram units.
+     */
+    rightMargin: number;
+    /**
+     * Width taken up by the images at the top of the look in diagram units.
+     */
+    topMargin: number;
+    /**
+     * Width taken up by the images at the bottom of the look in diagram units.
+     */
+    bottomMargin: number;
+    /**
+     * File path to the background image used at the top left of the look.
+     */
+    backgroundImageTopLeft: string;
+    /**
+     * File path to the background image used at the top of the look.
+     */
+    backgroundImageTop: string;
+    /**
+     * File path to the background image used at the top right of the look.
+     */
+    backgroundImageTopRight: string;
+    /**
+     * File path to the background image used at the left of the look.
+     */
+    backgroundImageLeft: string;
+    /**
+     * File path to the background image used at the center of the look.
+     */
+    backgroundImageCenter: string;
+    /**
+     * File path to the background image used at the right of the look.
+     */
+    backgroundImageRight: string;
+    /**
+     * File path to the background image used at the bottom left of the look.
+     */
+    backgroundImageBottomLeft: string;
+    /**
+     * File path to the background image used at the bottom of the look.
+     */
+    backgroundImageBottom: string;
+    /**
+     * File path to the background image used at the bottom right of the look.
+     */
+    backgroundImageBottomRight: string;
+}
+/**
+ * Configuration for a look for the markers at the start and end of a connection given by an image.
+ * @public
+ */
+export interface MarkerImageLook extends Look {
+    lookType: 'marker-image-look';
+    /**
+     * File path to the image used for the marker.
+     */
+    image: string;
+    /**
+     * The width of the marker in diagram units.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerWidth |markerWidth}
+     */
+    width: number;
+    /**
+     * The height of the marker in diagram units.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerHeight |markerHeight}
+     */
+    height: number;
+    /**
+     * The x coordinate of the reference point of the image used for the marker.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refX |refX}
+     */
+    refX: number;
+    /**
+     * The y coordinate of the reference point of the image used for the marker.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker |marker}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refY |refY}
+     */
+    refY: number;
+}
+/**
+ * Configuration for a look for a connection.
+ * @public
+ */
+export interface ConnectionLook extends Look {
+    lookType: 'connection-look';
+    /**
+     * Color of the line of connections of this type.
+     * @default '#000000'
+     */
+    color: string;
+    /**
+     * Thickness of the line of connections of this type in diagram units.
+     * @default 1
+     */
+    thickness: number;
+    /**
+     * Shape of the line of connections of this type.
+     * @default 'straight'
+     */
+    shape: LineShape | LineFunction;
+    /**
+     * Style of the line of connections of this type.
+     * @default 'solid'
+     */
+    style: LineStyle;
+}

package/src/lib/diagram/converters/daga-model.d.ts

@@ -79,7 +79,9 @@ export interface DagaSection {
 }
 export interface DagaPort {
     id: string;
+    type?: string;
     coords: Point;
+    connectionPoint?: Point;
     direction: Side;
     label: string;
     collabMeta?: {

package/src/lib/diagram/model/diagram-connection.d.ts

@@ -1,7 +1,8 @@
 import { Point } from '../../util/canvas-util';
-import { LineFunction, LineShape, LineStyle } from '../../util/line';
+import { LineShape, LineStyle } from '../../util/line';
 import { Side } from '../../util/svg-util';
-import { ConnectionMarkerLook, ConnectionTypeConfig, FieldConfig } from '../diagram-config';
+import { ConnectionTypeConfig, FieldConfig } from '../config/diagram-config';
+import { ConnectionLook, ConnectionLookConfig, MarkerImageLook, MarkerImageLookConfig } from '../config/diagram-look';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramEntity, DiagramEntitySet } from './diagram-entity';
 import { DiagramModel } from './diagram-model';
@@ -14,16 +15,24 @@ import { PropertySet, ValueSet } from './diagram-property';
  */
 export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
     name: string;
-    width: number;
-    shape: LineShape;
-    style: LineStyle;
     label: null;
-    defaultStartMarkerLook: null;
-    defaultEndMarkerLook: null;
+    look: {
+        lookType: string;
+        color: string;
+        thickness: number;
+        shape: LineShape;
+        style: LineStyle;
+        selected: {
+            color: string;
+        };
+        highlighted: {
+            thickness: number;
+        };
+    };
+    startMarkerLook: undefined;
+    endMarkerLook: undefined;
     startTypes: never[];
     endTypes: never[];
-    color: string;
-    selectedColor: string;
     properties: never[];
 };
 /**
@@ -42,6 +51,13 @@ export declare const CAN_CONNECTIONS_SHARE_PORTS = true;
  * Whether tightening connections is allowed.
  */
 export declare const CAN_TIGHTEN_CONNECTIONS = true;
+/**
+ * The types allowed for the look of the markers of a connection.
+ * @public
+ * @see Look
+ * @see DiagramConnection
+ */
+export type ConnectionMarkerLook = MarkerImageLook;
 /**
  * A connection type, which holds properties that connections of this type share in common.
  * @public
@@ -50,16 +66,21 @@ export declare const CAN_TIGHTEN_CONNECTIONS = true;
 export declare class DiagramConnectionType implements DiagramEntity {
     id: string;
     name: string;
-    width: number;
-    shape: LineShape | LineFunction;
-    style: LineStyle;
     label: FieldConfig | null;
+    defaultLook: ConnectionLook;
+    selectedLook: ConnectionLook;
+    highlightedLook: ConnectionLook;
+    selectedAndHighlightedLook: ConnectionLook;
     defaultStartMarkerLook: ConnectionMarkerLook | null;
+    selectedStartMarkerLook: ConnectionMarkerLook | null;
+    highlightedStartMarkerLook: ConnectionMarkerLook | null;
+    selectedAndHighlightedStartMarkerLook: ConnectionMarkerLook | null;
     defaultEndMarkerLook: ConnectionMarkerLook | null;
+    selectedEndMarkerLook: ConnectionMarkerLook | null;
+    highlightedEndMarkerLook: ConnectionMarkerLook | null;
+    selectedAndHighlightedEndMarkerLook: ConnectionMarkerLook | null;
     startTypes: string[];
     endTypes: string[];
-    color: string;
-    selectedColor: string;
     propertySet: PropertySet;
     constructor(options: ConnectionTypeConfig);
     canStartFromType(type: string): boolean;
@@ -71,7 +92,11 @@ export declare class DiagramConnectionType implements DiagramEntity {
  * @see DiagramPort
  */
 export declare class DiagramConnection extends DiagramElement {
-    type: DiagramConnectionType;
+    private _type;
+    get type(): DiagramConnectionType;
+    set type(type: DiagramConnectionType);
+    get typeString(): string;
+    set typeString(typeString: string);
     /**
      * Additional properties of this connection.
      * @public
@@ -97,11 +122,6 @@ export declare class DiagramConnection extends DiagramElement {
      * @public
      */
     startCoords: Point;
-    /**
-     * Look of the marker of this connection at the start, or `null` if the connection has no start marker.
-     * @public
-     */
-    startMarkerLook: ConnectionMarkerLook | null;
     /**
      * Port that this connection ends at.
      * @public
@@ -117,11 +137,6 @@ export declare class DiagramConnection extends DiagramElement {
      * @public
      */
     endCoords: Point;
-    /**
-     * Look of the marker of this connection at the end, or `null` if the connection has no end marker.
-     * @public
-     */
-    endMarkerLook: ConnectionMarkerLook | null;
     /**
      * Text at the start of this connection, or `''` if no text.
      * @public
@@ -148,6 +163,51 @@ export declare class DiagramConnection extends DiagramElement {
      */
     get name(): string;
     set name(name: string);
+    private _defaultLook?;
+    private _selectedLook?;
+    private _highlightedLook?;
+    private _selectedAndHighlightedLook?;
+    /**
+     * Current look of the connection.
+     * @private
+     */
+    get look(): ConnectionLook;
+    /**
+     * Sets the look configuration of the connection to override the one determined by the type.
+     * `undefined` resets it to the one determined by the type.
+     * @private
+     */
+    set look(look: ConnectionLookConfig | undefined);
+    private _defaultStartMarkerLook?;
+    private _selectedStartMarkerLook?;
+    private _highlightedStartMarkerLook?;
+    private _selectedAndHighlightedStartMarkerLook?;
+    /**
+     * Current look of the start marker.
+     * @private
+     */
+    get startMarkerLook(): MarkerImageLook | null;
+    /**
+     * Sets the look configuration of the start marker to override the one determined by the type.
+     * `null` stands for no marker and `undefined` resets it to the one determined by the type.
+     * @private
+     */
+    set startMarkerLook(startMarkerLook: MarkerImageLookConfig | null | undefined);
+    private _defaultEndMarkerLook?;
+    private _selectedEndMarkerLook?;
+    private _highlightedEndMarkerLook?;
+    private _selectedAndHighlightedEndMarkerLook?;
+    /**
+     * Current look of the end marker.
+     * @private
+     */
+    get endMarkerLook(): MarkerImageLook | null;
+    /**
+     * Sets the look configuration of the end marker to override the one determined by the type.
+     * `null` stands for no marker and `undefined` resets it to the one determined by the type.
+     * @private
+     */
+    set endMarkerLook(endMarkerLook: MarkerImageLookConfig | null | undefined);
     constructor(model: DiagramModel, type: DiagramConnectionType, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string);
     get removed(): boolean;
     updateInView(): void;
@@ -192,7 +252,7 @@ export declare class DiagramConnectionSet extends DiagramElementSet<DiagramConne
      * @param type The type of the connection given as either the type itself or the id of the type.
      * @param start The start port of the connection.
      * @param end The end port of the connection.
-     * @param id The id of the connection.
+     * @param id The id of the connection. Cannot be an empty string.
      * @returns The instanced connection.
      */
     new(type: DiagramConnectionType | string, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string): DiagramConnection;

package/src/lib/diagram/model/diagram-decorator.d.ts

@@ -57,7 +57,14 @@ export declare class DiagramDecoratorSet extends DiagramElementSet<DiagramDecora
     constructor(model: DiagramModel);
     /**
      * Instance a new decorator and add it to this set.
-     * @private
+     * @public
+     * @param coords The coordinates of the top left corner of the decorator in the diagram.
+     * @param width The dimension of the decorator along the x axis.
+     * @param height The dimension of the decorator along the y axis.
+     * @param priority The priority of the decorator. Used when filtering by priority.
+     * @param html The html contents of the decorator.
+     * @param id The id of the decorator. Cannot be an empty string.
+     * @returns The instanced decorator.
      */
     new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string): DiagramDecorator;
     remove(id: string): void;

package/src/lib/diagram/model/diagram-element.d.ts

@@ -20,6 +20,10 @@ export declare abstract class DiagramElement implements DiagramEntity {
      */
     readonly model: DiagramModel;
     private _id;
+    /**
+     * Identifier that uniquely identifies this element within its diagram model. Cannot be an empty string.
+     * @public
+     */
     get id(): string;
     /**
      * Whether this diagram element is currently in the user highlight.

package/src/lib/diagram/model/diagram-field.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../util/canvas-util';
 import { HorizontalAlign, VerticalAlign } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
-import { FieldConfig } from '../diagram-config';
+import { FieldConfig } from '../config/diagram-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 /**

package/src/lib/diagram/model/diagram-node.d.ts

@@ -1,7 +1,8 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
-import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from '../diagram-config';
+import { FieldConfig, NodeTypeConfig, PortConfig } from '../config/diagram-config';
+import { ImageLook, ImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from '../config/diagram-look';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramDecorator } from './diagram-decorator';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
@@ -10,13 +11,13 @@ import { DiagramField, LabeledElement } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
 import { PropertySet, ValueSet } from './diagram-property';
-import { DiagramSection, DiagramSectionGeometry } from './diagram-section';
+import { DiagramSection, DiagramSectionGeometry, DiagramSectionGrid } from './diagram-section';
 /**
  * Default values of the look of a diagram node.
  * @private
  * @see DIAGRAM_NODE_TYPE_DEFAULTS
  */
-export declare const DIAGRAM_NODE_LOOK_DEFAULTS: NodeShapedLook;
+export declare const DIAGRAM_NODE_LOOK_DEFAULTS: ShapedLookConfig;
 /**
  * Default values of the parameters of a diagram node.
  * @private
@@ -34,7 +35,7 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     label: null;
     ports: never[];
     sectionGrid: null;
-    look: NodeShapedLook;
+    look: ShapedLookConfig;
     isUnique: boolean;
     canBeParentless: boolean;
     childrenTypes: never[];
@@ -52,6 +53,13 @@ export type DiagramNodeGeometry = {
         [childId: string]: DiagramNodeGeometry;
     };
 };
+/**
+ * The types allowed for the look of a node.
+ * @public
+ * @see Look
+ * @see DiagramNode
+ */
+export type NodeLook = ShapedLook | ImageLook | StretchableImageLook;
 /**
  * A node type, which holds properties that nodes of this type share in common.
  * @public
@@ -72,8 +80,11 @@ export declare class DiagramNodeType implements DiagramEntity {
     topPadding: number;
     label: FieldConfig | null;
     ports: PortConfig[];
-    sectionGrid: SectionGridConfig | null;
-    look: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    sectionGrid: DiagramSectionGrid | null;
+    defaultLook: NodeLook;
+    selectedLook: NodeLook;
+    highlightedLook: NodeLook;
+    selectedAndHighlightedLook: NodeLook;
     isUnique: boolean;
     canBeParentless: boolean;
     childrenTypes: string[];
@@ -89,7 +100,11 @@ export declare class DiagramNodeType implements DiagramEntity {
  * @see DiagramSection
  */
 export declare class DiagramNode extends DiagramElement implements LabeledElement {
-    type: DiagramNodeType;
+    private _type;
+    get type(): DiagramNodeType;
+    set type(type: DiagramNodeType);
+    get typeString(): string;
+    set typeString(typeString: string);
     /**
      * Additional properties of this node.
      * @public
@@ -156,6 +171,21 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      */
     get name(): string;
     set name(name: string);
+    private _defaultLook?;
+    private _selectedLook?;
+    private _highlightedLook?;
+    private _selectedAndHighlightedLook?;
+    /**
+     * Current look of this port.
+     * @private
+     */
+    get look(): NodeLook;
+    /**
+     * Sets the look configuration of the look to override the one determined by the type.
+     * `undefined` resets it to the one determined by the type.
+     * @private
+     */
+    set look(look: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
     constructor(model: DiagramModel, type: DiagramNodeType, coords: Point | undefined, id: string);
     get removed(): boolean;
     updateInView(): void;
@@ -261,7 +291,7 @@ export declare class DiagramNodeSet extends DiagramElementSet<DiagramNode> {
      * @public
      * @param type The type of the node given as either the type itself or the id of the type.
      * @param coords The coordinates of the top left corner of the node in the diagram.
-     * @param id The id of the node.
+     * @param id The id of the node. Cannot be an empty string.
      * @returns The instanced node.
      */
     new(type: DiagramNodeType | string, coords: Point, id: string): DiagramNode;

package/src/lib/diagram/model/diagram-object.d.ts

@@ -46,7 +46,14 @@ export declare class DiagramObjectSet extends DiagramElementSet<DiagramObject> {
     constructor(model: DiagramModel);
     /**
      * Instance a new object and add it to this set.
-     * @private
+     * @public
+     * @param coords The coordinates of the top left corner of the object in the diagram.
+     * @param width The dimension of the object along the x axis.
+     * @param height The dimension of the object along the y axis.
+     * @param priority The priority of the object. Used when filtering by priority.
+     * @param html The html contents of the object.
+     * @param id The id of the object. Cannot be an empty string.
+     * @returns The instanced object.
      */
     new(coords: Point, width: number, height: number, priority: number, html: string, id: string): DiagramObject;
     remove(id: string): void;