@metadev/daga 4.0.1 → 4.1.0

package/package.json

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

package/src/index.d.ts

@@ -7,9 +7,10 @@ export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selectio
 export type { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
 export { CollabClient } from './lib/diagram/collab/collab-client';
 export type { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
-export type { CanvasConfig, GridConfig } from './lib/diagram/config/diagram-canvas-config';
-export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PortTypeConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
-export type { ImageLook, ImageLookConfig, Look, LookConfig, MarkerImageLook, MarkerImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from './lib/diagram/config/diagram-look-config';
+export type { CanvasConfig, GridConfig, GridStyle } from './lib/diagram/config/diagram-canvas-config';
+export type { ButtonsComponentConfig, ComponentsConfig, ConnectionTemplateConfig, ErrorsComponentConfig, NodeTemplateConfig, PaletteComponentConfig, PaletteSectionConfig, PropertyEditorComponentConfig } from './lib/diagram/config/diagram-components-config';
+export type { ConnectionTypeConfig, DiagramConfig, FieldConfig, NodeTypeConfig, PortConfig, PortTypeConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/config/diagram-config';
+export type { ConnectionLook, ConnectionLookConfig, ImageLook, ImageLookConfig, Look, LookConfig, MarkerImageLook, MarkerImageLookConfig, ShapedLook, ShapedLookConfig, StretchableImageLook, StretchableImageLookConfig } from './lib/diagram/config/diagram-look-config';
 export { DagaExporter } from './lib/diagram/converters/daga-exporter';
 export { DagaImporter } from './lib/diagram/converters/daga-importer';
 export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
@@ -39,10 +40,12 @@ export { DiagramNode, DiagramNodeSet, DiagramNodeType, filterByOnlyAncestors, fi
 export type { DiagramNodeGeometry } from './lib/diagram/model/diagram-node';
 export { DiagramObject, DiagramObjectSet } from './lib/diagram/model/diagram-object';
 export { DiagramPort, DiagramPortSet, DiagramPortType } from './lib/diagram/model/diagram-port';
-export { diff, equals, isObject, Property, PropertySet, Type, ValueSet } from './lib/diagram/model/diagram-property';
-export type { Option } from './lib/diagram/model/diagram-property';
 export { DiagramSection, DiagramSectionSet } from './lib/diagram/model/diagram-section';
 export type { DiagramSectionGeometry } from './lib/diagram/model/diagram-section';
+export { Property, PropertySet, Type } from './lib/diagram/property/property';
+export type { Option } from './lib/diagram/property/property';
+export { diff, equals, isObject } from './lib/diagram/property/property-util';
+export { ValueSet } from './lib/diagram/property/value';
 export type { DiagramError } from './lib/errors/diagram-error';
 export type { DiagramValidator } from './lib/errors/diagram-validator';
 export type { Canvas } from './lib/interfaces/canvas';

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

@@ -7,6 +7,7 @@ import { DiagramField } from '../model/diagram-field';
 import { DiagramNode } from '../model/diagram-node';
 import { DiagramPort } from '../model/diagram-port';
 import { DiagramSection } from '../model/diagram-section';
+import { DiagramCanvas } from './diagram-canvas';
 /**
  * Checks if the given mouse event was produced with a secondary button press.
  * @private
@@ -24,3 +25,12 @@ 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;
+export declare const GRID_DEFAULTS: {
+    enabled: boolean;
+    style: string;
+    color: string;
+    snap: boolean;
+    spacing: number;
+    thickness: number;
+};
+export declare const initializeGrid: (canvas: DiagramCanvas, canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, backgroundPatternId: string) => void;

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

@@ -5,6 +5,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
 import { CollabEngine } from '../collab/collab-engine';
+import { GridStyle } from '../config/diagram-canvas-config';
 import { DiagramConfig } from '../config/diagram-config';
 import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
 import { DiagramEvent } from '../diagram-event';
@@ -40,6 +41,7 @@ export declare class DiagramCanvas implements Canvas {
     readonly actionStack: ActionStack;
     readonly collabEngine: CollabEngine;
     backgroundColor: string;
+    gridStyle: GridStyle;
     gridSize: number;
     gridThickness: number;
     gridColor: string;
@@ -114,7 +116,8 @@ export declare class DiagramCanvas implements Canvas {
     updateDecoratorsInView(...ids: string[]): void;
     private updateConnectionLabelsInView;
     private updateConnectionMarkersInView;
-    fitFieldRootInView(id: string): void;
+    fieldRootFitsInView(id: string): boolean;
+    fitFieldRootInView(id: string, shrink?: boolean): void;
     fitNodeInView(id: string): void;
     selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
     selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;

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

@@ -2,7 +2,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { Point } from '../../util/canvas-util';
 import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
 import { DiagramModel } from '../model/diagram-model';
-import { ValueSet } from '../model/diagram-property';
+import { ValueSet } from '../property/value';
 /**
  * Text to display as the title of the property editor when editing the properties of a diagram's value set.
  * @private

package/src/lib/diagram/collab/collab-action.d.ts

@@ -2,7 +2,7 @@ import { Canvas } from '../../interfaces/canvas';
 import { Point } from '../../util/canvas-util';
 import { DagaConnection, DagaNode } from '../converters/daga-model';
 import { DiagramNodeGeometry } from '../model/diagram-node';
-import { ValueSet } from '../model/diagram-property';
+import { ValueSet } from '../property/value';
 import { CollabTimestamp } from './primitives';
 /**
  * An action taken by a local or remote user.
@@ -32,7 +32,7 @@ export interface CollabAction {
 /**
  * @private
  */
-export type CollabActionSerialized = AddNodeSerialized | ApplyLayoutSerialized | MoveSerialized | SetGeometrySerialized | SetParentSerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
+export type CollabActionSerialized = AddNodeSerialized | AddSectionSerialized | ApplyLayoutSerialized | MoveSerialized | SetGeometrySerialized | SetParentSerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
 /**
  * @private
  */
@@ -69,6 +69,36 @@ export declare class AddNodeCollabAction implements CollabAction {
     serialize(): AddNodeSerialized;
     static deserialize(canvas: Canvas, serialized: AddNodeSerialized): AddNodeCollabAction;
 }
+/**
+ * @private
+ */
+export type AddSectionSerialized = {
+    type: 'addSection';
+    nodeId: string;
+    copyColumnIndex: number | undefined;
+    copyRowIndex: number | undefined;
+    removeColumnIndex: number | undefined;
+    removeRowIndex: number | undefined;
+    timestamp: CollabTimestamp;
+};
+/**
+ * Collaborative action which consists of adding or removing sections in a node.
+ * @private
+ * @see AddNodeAction
+ */
+export declare class AddSectionCollabAction implements CollabAction {
+    readonly canvas: Canvas;
+    readonly nodeId: string;
+    readonly copyColumnIndex: number | undefined;
+    readonly copyRowIndex: number | undefined;
+    readonly removeColumnIndex: number | undefined;
+    readonly removeRowIndex: number | undefined;
+    readonly timestamp: CollabTimestamp;
+    constructor(canvas: Canvas, nodeId: string, copyColumnIndex: number | undefined, copyRowIndex: number | undefined, removeColumnIndex: number | undefined, removeRowIndex: number | undefined, timestamp: CollabTimestamp);
+    do(): void;
+    serialize(): AddSectionSerialized;
+    static deserialize(canvas: Canvas, serialized: AddSectionSerialized): AddSectionCollabAction;
+}
 /**
  * @private
  */

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

@@ -37,6 +37,7 @@ export interface CanvasConfig {
      */
     priorityThresholds?: number[];
 }
+export type GridStyle = 'dots' | 'lines';
 /**
  * Configuration of the guide grid in the background of the diagram.
  */
@@ -46,6 +47,11 @@ export interface GridConfig {
      * @default true
      */
     enabled?: boolean;
+    /**
+     * The style of the grid.
+     * @default "dots"
+     */
+    style?: GridStyle;
     /**
      * Color of grid elements such as the points or axes.
      * @default "rgba(0, 0, 0, 0.1)"

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

@@ -0,0 +1,249 @@
+import { Corner, Side } from '../../util/svg-util';
+import { FieldConfig } from './diagram-config';
+import { ImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
+/**
+ * Configuration for the components of the diagram.
+ * @public
+ */
+export type ComponentsConfig = {
+    /**
+     * Configuration for the buttons component in the diagram.
+     * If left undefined, it is interpreted as disabling the buttons component,
+     * same as if the attribute `enabled` in its configuration was set to `false`.
+     */
+    buttons?: ButtonsComponentConfig;
+    /**
+     * Configuration for the errors component in the diagram.
+     * If left undefined, it is interpreted as disabling the errors component,
+     * same as if the attribute `enabled` in its configuration was set to `false`.
+     */
+    errors?: ErrorsComponentConfig;
+    /**
+     * Configuration for the palette component in the diagram.
+     * If left undefined, it is interpreted as disabling the palette component,
+     * same as if the attribute `enabled` in its configuration was set to `false`.
+     */
+    palette?: PaletteComponentConfig;
+    /**
+     * Configuration for the property editor component in the diagram.
+     * If left undefined, it is interpreted as disabling the property editor component,
+     * same as if the attribute `enabled` in its configuration was set to `false`.
+     */
+    propertyEditor?: PropertyEditorComponentConfig;
+};
+/**
+ * Configuration for the buttons component in a diagram.
+ * @public
+ * @see DiagramButtonsComponent
+ */
+export interface ButtonsComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'bottom-right'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'top'
+     */
+    direction?: Side;
+    /**
+     * Whether to enable the user action (undo, redo) buttons in this component.
+     * @default true
+     */
+    enableAction?: boolean;
+    /**
+     * Whether to enable the filter button in this component.
+     * @default false
+     */
+    enableFilter?: boolean;
+    /**
+     * Whether to enable the layout button in this component.
+     * @default false
+     */
+    enableLayout?: boolean;
+    /**
+     * Whether to enable the user selection (copy, paste, cut, delete) buttons in this component.
+     * @default true
+     */
+    enableSelection?: boolean;
+    /**
+     * Whether to enable the zoom buttons in this component.
+     * @default true
+     */
+    enableZoom?: boolean;
+}
+/**
+ * Configuration for the errors component in a diagram.
+ * @public
+ * @see ErrorsComponent
+ */
+export interface ErrorsComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Configuration for the palette component in a diagram.
+ * @public
+ * @see PaletteComponent
+ */
+export interface PaletteComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'top-left'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'bottom'
+     */
+    direction?: Side;
+    /**
+     * Dimension of this component in the direction perpendicular to the direction that it extends towards.
+     * @default '12rem'
+     */
+    width?: string;
+    /**
+     * Gap between the templates in this palette.
+     * @default '1rem'
+     */
+    gap?: string;
+    /**
+     * Configuration for the sections of this palette. By default, no sections are created.
+     * @default undefined
+     */
+    sections?: PaletteSectionConfig[];
+}
+/**
+ * Configuration for the property editor component in a diagram.
+ * @public
+ * @see PropertyEditorComponent
+ */
+export interface PropertyEditorComponentConfig {
+    /**
+     * Whether this component is present in the diagram.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Location of this component in the screen.
+     * @default 'top-right'
+     */
+    location?: Corner;
+    /**
+     * Direction that this component extends towards.
+     * @default 'bottom'
+     */
+    direction?: Side;
+    /**
+     * Dimension of this component in the direction perpendicular to the direction that it extends towards.
+     * @default '24rem'
+     */
+    width?: string;
+}
+/**
+ * Configuration for a palette.
+ * @public
+ * @see PaletteComponent
+ */
+export interface PaletteSectionConfig {
+    /**
+     * 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.
+ * @public
+ * @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;
+    /**
+     * 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?: 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.
+     */
+    label?: string;
+    /**
+     * Look of the label of this template as it appears on the palette. By default, the label of the type of node is used.
+     */
+    labelLook?: FieldConfig | null;
+    /**
+     * 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.
+ * @public
+ * @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.
+     */
+    backgroundColor: string;
+    /**
+     * File path of the background image of this template as it appears on the palette.
+     */
+    icon: string;
+    /**
+     * File path of the background image of this template as it appears on the palette when this connection type is selected.
+     */
+    selectedIcon: string;
+    /**
+     * Width of this template in diagram units as it appears on the palette.
+     */
+    width: number;
+    /**
+     * Height of this template in diagram units as it appears on the palette.
+     */
+    height: number;
+}