@metadev/daga 1.0.0

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

@@ -0,0 +1,617 @@
+import { Point } from '../../util/canvas-util';
+import { LineShape, LineStyle } from '../../util/line';
+import { ClosedShape } from '../../util/shape';
+import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { Property } from './diagram-property';
+/**
+ * The configuration for a diagram.
+ */
+export interface DiagramConfig {
+    /**
+     * The name of this type of diagram. Used so that it is possible to discern the type of a diagram.
+     * @default ""
+     */
+    type?: string;
+    /**
+     * The default name for a new diagram of this type.
+     * @default "unnamed"
+     */
+    name?: string;
+    /**
+     * Background color of this diagram.
+     * @default "#FFFFFF"
+     */
+    color?: string;
+    /**
+     * Distance between each point of the grid of this diagram in pixels. 0 or negative is interpreted as no grid.
+     * @default 0
+     */
+    gridSize?: number;
+    /**
+     * When true, nodes moved by the user will be moved to the closest point where the top left corner matches a grid point.
+     * @default false
+     */
+    snapToGrid?: boolean;
+    /**
+     * When true, connections made by the user will have their type assumed based on the type of the source and target nodes.
+     * @default false
+     */
+    guessConnectionType?: boolean;
+    /**
+     * Id of the type of connection that is selected by default initially for the user to make.
+     * @default undefined
+     */
+    defaultConnection?: string;
+    /**
+     * Initial threshold value used to hide nodes whose priority value is below it.
+     * @default undefined
+     */
+    defaultPriorityThreshold?: number;
+    /**
+     * Possible values of the priority threshold that the user can toggle between to hide nodes whose priority value is below it.
+     * @default []
+     */
+    priorityThresholds?: number[];
+    /**
+     * Name of the layout format used to arrange the nodes of this diagram when pressing the layout button in the diagram buttons component.
+     * @see DiagramButtonsComponent
+     * @default undefined
+     */
+    layoutFormat?: string;
+    /**
+     * Configuration for the palettes of this diagram. Each configuration provided will configure one palette, which will be displayed as one of the tabs in the palette component.
+     * @see PaletteComponent
+     * @default undefined
+     */
+    palettes?: PaletteConfig[];
+    /**
+     * Default attributes for each of the types of node of this diagram.
+     * @default undefined
+     */
+    nodeTypeDefaults?: Partial<NodeTypeConfig>;
+    /**
+     * List of the types of node that can be used in this diagram.
+     * @default undefined
+     */
+    nodeTypes?: NodeTypeConfig[];
+    /**
+     * Default attributes for each of the types of connection of this diagram.
+     * @default undefined
+     */
+    connectionTypeDefaults?: Partial<ConnectionTypeConfig>;
+    /**
+     * List of the types of connection that can be used in this diagram.
+     * @default undefined
+     */
+    connectionTypes?: ConnectionTypeConfig[];
+    /**
+     * Properties of this diagram that can be edited in the property editor component.
+     * @see PropertyEditorComponent
+     * @default []
+     */
+    properties?: Property[];
+}
+/**
+ * Configuration for a palette.
+ * @see PaletteComponent
+ */
+export interface PaletteConfig {
+    /**
+     * Name of this palette. Displayed in the tab of this palette in the palette component. Can be left undefined if this is the only palette.
+     */
+    name?: string;
+    /**
+     * Categories of this palette. Used to enable displaying one of different categories of templates as defined here. Can be left undefined if there are no categories.
+     */
+    categories?: {
+        [key: string]: (NodeTemplateConfig | ConnectionTemplateConfig)[];
+    };
+    /**
+     * List of templates that are always displayed in this palette. Can be left undefined.
+     */
+    templates?: (NodeTemplateConfig | ConnectionTemplateConfig)[];
+}
+/**
+ * Configuration for a template of a node in a palette.
+ * @see PaletteComponent
+ */
+export interface NodeTemplateConfig {
+    /**
+     * String used to indicate that this is a template of a node.
+     */
+    templateType: 'node';
+    /**
+     * Id of the type of node of this template. Must correspond to the id of a type of node defined in the nodeTypes list.
+     */
+    type: string;
+    /**
+     * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
+     */
+    label: string;
+    /**
+     * Default values of the properties of nodes created from this template.
+     */
+    values?: {
+        [key: string]: unknown;
+    };
+}
+/**
+ * Configuration for a template of a connection in a palette.
+ * @see PaletteComponent
+ */
+export interface ConnectionTemplateConfig {
+    /**
+     * String used to indicate that this is a template of a connection.
+     */
+    templateType: 'connection';
+    /**
+     * Id of the type of connection of this template. Must correspond to the id of a type of connection defined in the connectionTypes list.
+     */
+    type: string;
+    /**
+     * Label of this template as it appears on the palette.
+     */
+    label: string;
+    /**
+     * Background color of this template as it appears on the palette.
+     */
+    color: string;
+    /**
+     * File path of the background image of this template as it appears on the palette.
+     */
+    icon: string;
+    /**
+     * Width of this template in pixels as it appears on the palette.
+     */
+    width: number;
+    /**
+     * Height of this template in pixels as it appears on the palette.
+     */
+    height: number;
+}
+/**
+ * Configuration for a type of node.
+ * @see DiagramNodeType
+ */
+export interface NodeTypeConfig {
+    /**
+     * Id of this type of node used to reference this type of node internally.
+     */
+    id: string;
+    /**
+     * Name of this type of node as displayed to the user.
+     */
+    name?: string;
+    /**
+     * Default width of nodes of this type in pixels.
+     * @default 0
+     */
+    defaultWidth?: number;
+    /**
+     * Default height of nodes of this type in pixels.
+     * @default 0
+     */
+    defaultHeight?: number;
+    /**
+     * Minimum width of nodes of this type in pixels.
+     * @default 0
+     */
+    minWidth?: number;
+    /**
+     * Minimum height of nodes of this type in pixels.
+     * @default 0
+     */
+    minHeight?: number;
+    /**
+     * Whether the user can resize nodes of this type along the x axis.
+     * @default false
+     */
+    resizableX?: boolean;
+    /**
+     * Whether the user can resize nodes of this type along the y axis.
+     * @default false
+     */
+    resizableY?: boolean;
+    /**
+     * Configuration for the label of nodes of this type.
+     * @default null
+     */
+    label?: FieldConfig | null;
+    /**
+     * Configuration of the ports of nodes of this type.
+     * @default []
+     */
+    ports?: PortConfig[];
+    /**
+     * Configuration for the sections of this diagram if applicable.
+     * @default null
+     */
+    sections?: SectionConfig | null;
+    /**
+     * Configuration of the look of nodes of this type as it should appear to the user.
+     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, color: '#FFFFFF', borderColor: '#000000', selectedColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     */
+    look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+    /**
+     * If true and a node of this type already exists in the diagram, the user can't create more nodes of this type.
+     * @default false
+     */
+    isUnique?: boolean;
+    /**
+     * The priority of this node when filtering out nodes below a given threshold.
+     * @default 0
+     */
+    priority?: number;
+    /**
+     * Properties of nodes of this type that can be edited in the property editor component.
+     * @see PropertyEditorComponent
+     * @default []
+     */
+    properties?: Property[];
+}
+/**
+ * Configuration for a field that is part of another element.
+ * @see DiagramField
+ */
+export interface FieldConfig {
+    /**
+     * Whether this field can be edited by the user.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * The size of the font of this field in pixels.
+     * @default 0
+     */
+    fontSize?: number;
+    /**
+     * The margin around the field in pixels.
+     * @default 0
+     */
+    margin?: number;
+    /**
+     * The padding around the field in pixels.
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * The font family of the text of this field.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |font-family}
+     * @default null
+     */
+    fontFamily?: string | null;
+    /**
+     * The color of the text of this field.
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * The color of the text of this field when selected.
+     * @default '#000000'
+     */
+    selectedColor?: string;
+    /**
+     * The horizontal alignment of the text of this field.
+     * @default 'center'
+     */
+    horizontalAlign?: HorizontalAlign;
+    /**
+     * The vertical alignment of the text of this field.
+     * @default 'center'
+     */
+    verticalAlign?: VerticalAlign;
+}
+/**
+ * Configuration for a port that is part of another element.
+ * @see DiagramPort
+ */
+export interface PortConfig {
+    /**
+     * Coordinates of this port relative to its root element's coordinates.
+     */
+    coords: Point;
+    /**
+     * Direction that the connections passing by this port follow at the point of the port.
+     */
+    direction: Side;
+    /**
+     * Configuration for the label of this port.
+     * @default null
+     */
+    label?: FieldConfig | null;
+}
+/**
+ * Configuration for the sections of a node.
+ * @see DiagramSection
+ */
+export interface SectionConfig {
+    /**
+     * The number of sections this node can accomodate along the x axis.
+     * @default 1
+     */
+    sectionsX?: number;
+    /**
+     * The number of sections this node can accomodate along the y axis.
+     * @default 1
+     */
+    sectionsY?: number;
+    /**
+     * Minimum width of sections of this node in pixels.
+     * @default 0
+     */
+    minWidth?: number;
+    /**
+     * Minimum height of sections of this node in pixels.
+     * @default 0
+     */
+    minHeight?: number;
+    /**
+     * The margin left around sections in pixels.
+     * @default 0
+     */
+    margin?: number;
+    /**
+     * Configuration for the label of the sections.
+     * @default null
+     */
+    label?: FieldConfig | null;
+    /**
+     * Configuration of the ports of the sections.
+     * @default []
+     */
+    ports?: PortConfig[];
+    /**
+     * Configuration of the look of the sections as it should appear to the user.
+     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, color: '#FFFFFF', borderColor: '#000000', selectedColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     */
+    look?: NodeShapedLook | NodeImageLook | NodeStretchableImageLook;
+}
+/**
+ * Configuration for the look of a node given by shape and color.
+ */
+export interface NodeShapedLook {
+    /**
+     * String used to discern the type of node look this is.
+     */
+    lookType: 'shaped-look';
+    /**
+     * Shape of nodes using this look.
+     */
+    shape: ClosedShape;
+    /**
+     * Background color of nodes using this look.
+     */
+    color: string;
+    /**
+     * Border color of nodes using this look.
+     */
+    borderColor: string;
+    /**
+     * Background color of nodes using this look when selected.
+     */
+    selectedColor: string;
+    /**
+     * Border color of nodes using this look when selected.
+     */
+    selectedBorderColor: string;
+}
+/**
+ * Configuration for the look of a node given by an image.
+ */
+export interface NodeImageLook {
+    /**
+     * String used to discern the type of node look this is.
+     */
+    lookType: 'image-look';
+    /**
+     * File path to the background image used by nodes using this look.
+     */
+    backgroundImage: string;
+    /**
+     * File path to the background image used by nodes using this look when selected.
+     */
+    selectedBackgroundImage: string;
+}
+/**
+ * Configuration for the look of a node given by fixed size images in the corners and stretchable images in the middle.
+ */
+export interface NodeStretchableImageLook {
+    /**
+     * String used to discern the type of node look this is.
+     */
+    lookType: 'stretchable-image-look';
+    /**
+     * Width taken up by the images at the left of nodes using this look in pixels.
+     */
+    leftMargin: number;
+    /**
+     * Width taken up by the images at the right of nodes using this look in pixels.
+     */
+    rightMargin: number;
+    /**
+     * Width taken up by the images at the top of nodes using this look in pixels.
+     */
+    topMargin: number;
+    /**
+     * Width taken up by the images at the bottom of nodes using this look in pixels.
+     */
+    bottomMargin: number;
+    /**
+     * File path to the background image used at the top left of nodes using this look.
+     */
+    backgroundImageTopLeft: string;
+    /**
+     * File path to the background image used at the top of nodes using this look.
+     */
+    backgroundImageTop: string;
+    /**
+     * File path to the background image used at the top right of nodes using this look.
+     */
+    backgroundImageTopRight: string;
+    /**
+     * File path to the background image used at the left of nodes using this look.
+     */
+    backgroundImageLeft: string;
+    /**
+     * File path to the background image used at the center of nodes using this look.
+     */
+    backgroundImageCenter: string;
+    /**
+     * File path to the background image used at the right of nodes using this look.
+     */
+    backgroundImageRight: string;
+    /**
+     * File path to the background image used at the bottom left of nodes using this look.
+     */
+    backgroundImageBottomLeft: string;
+    /**
+     * File path to the background image used at the bottom of nodes using this look.
+     */
+    backgroundImageBottom: string;
+    /**
+     * File path to the background image used at the bottom right of nodes using this look.
+     */
+    backgroundImageBottomRight: string;
+    /**
+     * File path to the background image used at the top left of nodes using this look when selected.
+     */
+    selectedBackgroundImageTopLeft: string;
+    /**
+     * File path to the background image used at the top of nodes using this look when selected.
+     */
+    selectedBackgroundImageTop: string;
+    /**
+     * File path to the background image used at the top right of nodes using this look when selected.
+     */
+    selectedBackgroundImageTopRight: string;
+    /**
+     * File path to the background image used at the left of nodes using this look when selected.
+     */
+    selectedBackgroundImageLeft: string;
+    /**
+     * File path to the background image used at the center of nodes using this look when selected.
+     */
+    selectedBackgroundImageCenter: string;
+    /**
+     * File path to the background image used at the right of nodes using this look when selected.
+     */
+    selectedBackgroundImageRight: string;
+    /**
+     * File path to the background image used at the bottom left of nodes using this look when selected.
+     */
+    selectedBackgroundImageBottomLeft: string;
+    /**
+     * File path to the background image used at the bottom of nodes using this look when selected.
+     */
+    selectedBackgroundImageBottom: string;
+    /**
+     * File path to the background image used at the bottom right of nodes using this look when selected.
+     */
+    selectedBackgroundImageBottomRight: string;
+}
+/**
+ * Configuration for a type of connection.
+ * @see DiagramConnectionType
+ */
+export interface ConnectionTypeConfig {
+    /**
+     * Id of this type of connection used to reference this type of node internally.
+     */
+    id: string;
+    /**
+     * Name of this type of connection as displayed to the user.
+     */
+    name?: string;
+    /**
+     * Color of the line of connections of this type.
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * Color of the line of connections of this type when selected.
+     * @default '#000000'
+     */
+    selectedColor?: string;
+    /**
+     * Width of the line of connections of this type in pixels.
+     * @default 1
+     */
+    width?: number;
+    /**
+     * Shape of the line of connections of this type.
+     * @default 'straight'
+     */
+    shape?: LineShape;
+    /**
+     * Style of the line of connections of this type.
+     * @default 'solid'
+     */
+    style?: LineStyle;
+    /**
+     * Configuration of the labels of connections of this type.
+     */
+    label?: FieldConfig | null;
+    /**
+     * Configuration of the look of the marker at the start of connections of this type as it should appear to the user. Undefined for no marker.
+     * @default null
+     */
+    defaultStartMarkerLook?: ConnectionMarkerLook | null;
+    /**
+     * Configuration of the look of the marker at the end of connections of this type as it should appear to the user. Undefined for no marker.
+     * @default null
+     */
+    defaultEndMarkerLook?: ConnectionMarkerLook | null;
+    /**
+     * Ids of the types of nodes that connections of this type can start from. Must correspond to the ids of types of node defined in the nodeTypes list. Should list one id at minimum.
+     * @default []
+     */
+    startTypes?: string[];
+    /**
+     * Ids of the types of nodes that connections of this type can end at. Must correspond to the ids of types of node defined in the nodeTypes list. Should list one id at minimum.
+     * @default []
+     */
+    endTypes?: string[];
+    /**
+     * Properties of connections of this type that can be edited in the property editor component.
+     * @see PropertyEditorComponent
+     * @default []
+     */
+    properties?: Property[];
+}
+/**
+ * Configuration for the look of the markers at the start and end of a connection.
+ */
+export interface ConnectionMarkerLook {
+    /**
+     * File path to the image used for the marker.
+     */
+    image: string;
+    /**
+     * File path to the image used for the marker when selected.
+     */
+    selectedImage: string;
+    /**
+     * The width of the marker in pixels.
+     * @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}
+     */
+    markerWidth: number;
+    /**
+     * The height of the marker in pixels.
+     * @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}
+     */
+    markerHeight: 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}
+     */
+    markerRefX: 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}
+     */
+    markerRefY: number;
+}

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

@@ -0,0 +1,64 @@
+import { Point } from '../../util/canvas-util';
+import { LineShape, LineStyle } from '../../util/line';
+import { Side } from '../../util/svg-util';
+import { DiagramElement } from './diagram-element';
+import { DiagramModel } from './diagram-model';
+import { DiagramPort } from './diagram-port';
+import { PropertySet, ValueSet } from './diagram-property';
+import { ConnectionMarkerLook, ConnectionTypeConfig, FieldConfig } from './diagram-config';
+export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
+    name: string;
+    width: number;
+    shape: LineShape;
+    style: LineStyle;
+    label: null;
+    defaultStartMarkerLook: null;
+    defaultEndMarkerLook: null;
+    startTypes: never[];
+    endTypes: never[];
+    color: string;
+    selectedColor: string;
+    properties: never[];
+};
+export declare class DiagramConnectionType {
+    id: string;
+    name: string;
+    width: number;
+    shape: LineShape;
+    style: LineStyle;
+    label: FieldConfig | null;
+    defaultStartMarkerLook: ConnectionMarkerLook | null;
+    defaultEndMarkerLook: ConnectionMarkerLook | null;
+    startTypes: string[];
+    endTypes: string[];
+    color: string;
+    selectedColor: string;
+    propertySet: PropertySet;
+    constructor(options: ConnectionTypeConfig);
+    canStartFromType(type: string): boolean;
+    canFinishOnType(type: string): boolean;
+}
+export declare class DiagramConnection extends DiagramElement {
+    type: DiagramConnectionType;
+    valueSet: ValueSet;
+    originalData: unknown;
+    start?: DiagramPort;
+    startDirection?: Side;
+    startCoords: Point;
+    startMarkerLook: ConnectionMarkerLook | null;
+    end?: DiagramPort;
+    endDirection?: Side;
+    endCoords: Point;
+    endMarkerLook: ConnectionMarkerLook | null;
+    startLabel: string;
+    middleLabel: string;
+    endLabel: string;
+    points: Point[];
+    get name(): string;
+    set name(name: string);
+    constructor(model: DiagramModel, type: DiagramConnectionType, start?: DiagramPort, end?: DiagramPort, id?: string);
+    updateInView(): void;
+    setStart(start?: DiagramPort): void;
+    setEnd(end?: DiagramPort): void;
+    tighten(): void;
+}

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

@@ -0,0 +1,21 @@
+import * as d3 from 'd3';
+import { DiagramModel } from './diagram-model';
+/**
+ * Represents an object which exists as part of a particular diagram model and has a visual representation in a diagram canvas.
+ * @see DiagramModel
+ * @see DiagramCanvas
+ */
+export declare abstract class DiagramElement {
+    model: DiagramModel;
+    _id: string;
+    get id(): string;
+    set id(value: string);
+    highlighted: boolean;
+    selected: boolean;
+    constructor(model: DiagramModel, id: string);
+    abstract updateInView(): void;
+    /**
+     * Obtain the selection of this element.
+     */
+    select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
+}