@metadev/daga 3.1.5 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "3.1.5",
+  "version": "4.0.0",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -1,5 +1,6 @@
 export { Corner, HorizontalAlign, Side, VerticalAlign } from '../../daga/src/lib/util/svg-util';
-export { ACTION_STACK_SIZE, DiagramCanvas, setCursorStyle } from './lib/diagram/canvas/diagram-canvas';
+export { ACTION_STACK_SIZE, DiagramCanvas } from './lib/diagram/canvas/diagram-canvas';
+export { setCursorStyle } from './lib/diagram/canvas/diagram-canvas-util';
 export { DiagramContextMenu } from './lib/diagram/canvas/diagram-context-menu';
 export { DiagramUserHighlight } from './lib/diagram/canvas/diagram-user-highlight';
 export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selection';
@@ -13,7 +14,8 @@ export type { DiagramModelExporter } from './lib/diagram/converters/diagram-mode
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
 export { ActionStack, AddConnectionAction, AddNodeAction, ApplyLayoutAction, DiagramActionMethod, DiagramActions, EditFieldAction, MoveAction, PasteAction, RemoveAction, SetGeometryAction, SetParentAction, UpdateValuesAction } from './lib/diagram/diagram-action';
 export type { DiagramAction } from './lib/diagram/diagram-action';
-export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, ImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, ShapedLook, StretchableImageLook, UserActionConfig } from './lib/diagram/diagram-config';
+export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
+export type { MarkerImageLook, StretchableImageLook, ImageLook, ShapedLook, Look, MarkerImageLookConfig, StretchableImageLookConfig, ImageLookConfig, ShapedLookConfig, LookConfig } from './lib/diagram/config/diagram-look';
 export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';

package/src/lib/diagram/canvas/diagram-canvas-util.d.ts

@@ -0,0 +1,26 @@
+import * as d3 from 'd3';
+import { Point } from '../../util/canvas-util';
+import { LineFunction, LineShape } from '../../util/line';
+import { CursorStyle } from '../../util/style';
+import { Side } from '../../util/svg-util';
+import { DiagramField } from '../model/diagram-field';
+import { DiagramNode } from '../model/diagram-node';
+import { DiagramPort } from '../model/diagram-port';
+import { DiagramSection } from '../model/diagram-section';
+/**
+ * Checks if the given mouse event was produced with a secondary button press.
+ * @private
+ * @param event A mouse event.
+ * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ */
+export declare const isSecondaryButton: (event: MouseEvent) => boolean;
+/**
+ * Get the SVG path of a diagram connection.
+ * @private
+ * @see linePath
+ */
+export declare const getConnectionPath: (shape: LineShape | LineFunction, startCoords: Point, endCoords: Point, startDirection: Side | undefined, endDirection: Side | undefined, width: number, startMarkerWidth: number | undefined, endMarkerWidth: number | undefined) => string;
+export declare const setCursorStyle: (style?: CursorStyle) => void;
+export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
+export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
+export declare const updateLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -4,10 +4,9 @@ import { DiagramValidator } from '../../errors/diagram-validator';
 import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
-import { CursorStyle } from '../../util/style';
 import { CollabEngine } from '../collab/collab-engine';
+import { DiagramConfig } from '../config/diagram-config';
 import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
-import { DiagramConfig } from '../diagram-config';
 import { DiagramEvent } from '../diagram-event';
 import { DiagramConnectionType } from '../model/diagram-connection';
 import { DiagramModel } from '../model/diagram-model';
@@ -145,4 +144,3 @@ export declare class DiagramCanvas implements Canvas {
     private continueMultipleSelection;
     private finishMultipleSelection;
 }
-export declare const setCursorStyle: (style?: CursorStyle) => void;

package/src/lib/diagram/{diagram-config.d.ts → config/diagram-config.d.ts}

@@ -1,9 +1,8 @@
-import { Point } from '../util/canvas-util';
-import { LineFunction, LineShape, LineStyle } from '../util/line';
-import { ClosedShape, ShapeFunction } from '../util/shape';
-import { Corner, HorizontalAlign, Side, VerticalAlign } from '../util/svg-util';
-import { DiagramActions } from './diagram-action';
-import { Property } from './model/diagram-property';
+import { Point } from '../../util/canvas-util';
+import { Corner, HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { DiagramActions } from '../diagram-action';
+import { Property } from '../model/diagram-property';
+import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look';
 /**
  * The configuration for a diagram.
  * @public
@@ -348,7 +347,7 @@ export interface NodeTemplateConfig {
     /**
      * Look of this template as it appears on the palette which can be used to override the default look of the nodes of this type.
      */
-    look?: ShapedLook | ImageLook | StretchableImageLook;
+    look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
     /**
      * Label of this template as it appears on the palette and label that will be given to nodes created from this template.
      */
@@ -468,10 +467,9 @@ export interface NodeTypeConfig {
      */
     ports?: PortConfig[];
     /**
-     * Configuration of the look of nodes of this type as it should appear to the user.
-     * @default {lookType: 'shaped-look', shape: ClosedShape.Rectangle, fillColor: '#FFFFFF', borderColor: '#000000', selectedFillColor: '#FFFFFF', selectedBorderColor: '#000000'}
+     * Configuration of the look of nodes of this type as they should appear to the user.
      */
-    look?: ShapedLook | ImageLook | StretchableImageLook;
+    look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
     /**
      * 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
@@ -524,7 +522,7 @@ export interface PortTypeConfig {
      */
     allowsIncoming?: boolean;
     /**
-     * Configuration for the label of nodes of this type.
+     * Configuration for the label of ports of this type.
      * @default null
      */
     label?: FieldConfig | null;
@@ -534,10 +532,9 @@ export interface PortTypeConfig {
      */
     width?: number;
     /**
-     * Configuration of the look of ports of this type as they should appear to the user. Can be used to override the default look of ports.
-     * @default undefined
+     * Configuration of the look of ports of this type as they should appear to the user.
      */
-    look?: ImageLook;
+    look?: ShapedLookConfig | ImageLookConfig;
 }
 /**
  * Configuration for a port that is part of another element.
@@ -651,7 +648,7 @@ export interface SectionGridConfig {
      */
     margin?: number;
     /**
-     * Configuration for the sections of this grid.
+     * Configuration for the look of each section of this grid.
      * @default [[]]
      */
     sections: SectionConfig[][];
@@ -673,162 +670,15 @@ export interface SectionConfig {
      */
     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'}
+     * Configuration of the look of nodes of this type as they should appear to the user.
      */
-    look?: ShapedLook | ImageLook | StretchableImageLook;
+    look?: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig;
     /**
      * The priority of this section when filtering out sections below a given threshold.
      * @default 0
      */
     priority?: number;
 }
-/**
- * Configuration for the look of a node given by shape and color.
- * @public
- */
-export interface ShapedLook {
-    /**
-     * String used to discern the type of node look this is.
-     */
-    lookType: 'shaped-look';
-    /**
-     * Shape of nodes using this look.
-     */
-    shape: ClosedShape | ShapeFunction;
-    /**
-     * Background color of nodes using this look.
-     */
-    fillColor: string;
-    /**
-     * Border color of nodes using this look.
-     */
-    borderColor: string;
-    /**
-     * Background color of nodes using this look when selected.
-     */
-    selectedFillColor: string;
-    /**
-     * Border color of nodes using this look when selected.
-     */
-    selectedBorderColor: string;
-}
-/**
- * Configuration for the look of a node given by an image.
- * @public
- */
-export interface ImageLook {
-    /**
-     * 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.
- * @public
- */
-export interface StretchableImageLook {
-    /**
-     * 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 diagram units.
-     */
-    leftMargin: number;
-    /**
-     * Width taken up by the images at the right of nodes using this look in diagram units.
-     */
-    rightMargin: number;
-    /**
-     * Width taken up by the images at the top of nodes using this look in diagram units.
-     */
-    topMargin: number;
-    /**
-     * Width taken up by the images at the bottom of nodes using this look in diagram units.
-     */
-    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.
  * @public
@@ -843,45 +693,24 @@ export interface ConnectionTypeConfig {
      * 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 diagram units.
-     * @default 1
-     */
-    width?: 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;
     /**
      * Configuration of the labels of connections of this type.
      */
     label?: FieldConfig | null;
+    /**
+     * Configuration of the look of connections of this type as they should appear to the user.
+     */
+    look?: ConnectionLookConfig;
     /**
      * 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
+     * @default undefined
      */
-    defaultStartMarkerLook?: ConnectionMarkerLook | null;
+    startMarkerLook?: MarkerImageLookConfig;
     /**
      * 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
+     * @default undefined
      */
-    defaultEndMarkerLook?: ConnectionMarkerLook | null;
+    endMarkerLook?: MarkerImageLookConfig;
     /**
      * 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 []
@@ -899,41 +728,3 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
-/**
- * Configuration for the look of the markers at the start and end of a connection.
- * @public
- */
-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 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}
-     */
-    markerWidth: 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}
-     */
-    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/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;
+}