@metadev/daga 5.0.5 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "5.0.5",
+  "version": "5.1.1",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {},
   "peerDependencies": {

package/src/index.d.ts

@@ -7,14 +7,14 @@ 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, GridStyle } from './lib/diagram/config/diagram-canvas-config';
+export type { CanvasConfig, GridConfig, GridStyle, EmptyGridConfig, DotsGridConfig, LinesGridConfig, ImageGridConfig, BackgroundStyle, BackgroundConfig, SolidBackgroundConfig, ImageBackgroundConfig, ContextMenuConfig, ContextMenuButtonConfig } 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 { ResizableMode } from './lib/diagram/config/diagram-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';
+export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection, DagaObject, DagaDecorator } from './lib/diagram/converters/daga-model';
 export type { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
 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';

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

@@ -3,6 +3,7 @@ import { Point } from '../../util/canvas-util';
 import { LineFunction, LineShape, LineStyle } from '../../util/line';
 import { CursorStyle } from '../../util/style';
 import { Side } from '../../util/svg-util';
+import { BackgroundConfig, DotsGridConfig, EmptyGridConfig, GridConfig, SolidBackgroundConfig } from '../config/diagram-canvas-config';
 import { DiagramField } from '../model/diagram-field';
 import { DiagramNode } from '../model/diagram-node';
 import { DiagramPort } from '../model/diagram-port';
@@ -25,6 +26,7 @@ export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
 export declare const needsResizerX: (element: DiagramNode | DiagramSection) => boolean;
 export declare const needsResizerY: (element: DiagramNode | DiagramSection) => boolean;
+export declare const needsResizerXY: (element: DiagramNode | DiagramSection) => boolean;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const SHAPED_LOOK_DEFAULTS: {
     fillColor: string;
@@ -33,12 +35,11 @@ export declare const SHAPED_LOOK_DEFAULTS: {
     borderStyle: LineStyle;
 };
 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;
+export declare const BACKGROUND_DEFAULTS: SolidBackgroundConfig;
+export declare const GRID_DEFAULTS: EmptyGridConfig;
+export declare const DOTS_GRID_DEFAULTS: DotsGridConfig;
+export declare const initializeBackground: (canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, backgroundConfig: BackgroundConfig | undefined | null) => d3.Selection<SVGRectElement, unknown, null, unknown> | d3.Selection<SVGImageElement, unknown, null, unknown>;
+export declare const applyGridDefaults: (gridConfig?: GridConfig) => GridConfig;
+export declare const initializeGrid: (canvas: DiagramCanvas, canvasView: d3.Selection<SVGGElement, unknown, null, unknown>, canvasDefs: d3.Selection<SVGDefsElement, unknown, null, unknown>, gridPatternId: string, gridConfig: GridConfig) => d3.Selection<SVGRectElement, unknown, null, unknown> | undefined;
+export declare const getGridSpacingX: (gridConfig: GridConfig) => number;
+export declare const getGridSpacingY: (gridConfig: GridConfig) => number;

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

@@ -5,7 +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 { BackgroundConfig, GridConfig } from '../config/diagram-canvas-config';
 import { DiagramConfig } from '../config/diagram-config';
 import { ActionStack, DiagramAction, DiagramActionMethod, DiagramActions } from '../diagram-action';
 import { DiagramEvent } from '../diagram-event';
@@ -19,11 +19,6 @@ import { DiagramUserSelection } from './diagram-user-selection';
  * @private
  */
 export declare const CONNECTION_PATH_BOX_THICKNESS = 12;
-/**
- * Thickness of the resizer line used to resize nodes and sections on drag, in diagram units.
- * @private
- */
-export declare const RESIZER_THICKNESS = 6;
 /**
  * Maximum number of user actions that can be recorded in the user action stack.
  * @private
@@ -40,12 +35,9 @@ export declare class DiagramCanvas implements Canvas {
     readonly contextMenu: DiagramContextMenu;
     readonly actionStack: ActionStack;
     readonly collabEngine: CollabEngine;
-    backgroundColor: string;
-    gridStyle: GridStyle;
-    gridSize: number;
-    gridThickness: number;
-    gridColor: string;
-    snapToGrid: boolean;
+    backgroundConfig: BackgroundConfig;
+    gridConfig: GridConfig;
+    ancillaryGridsConfig: GridConfig[];
     zoomFactor: number;
     panRate: number;
     inferConnectionType: boolean;
@@ -64,7 +56,8 @@ export declare class DiagramCanvas implements Canvas {
     userActions: {
         [key in DiagramActions]?: boolean;
     };
-    private readonly backgroundPatternId;
+    private readonly gridPatternId;
+    private readonly ancillaryGridPatternIds;
     private zoomBehavior;
     private zoomTransform;
     private priorityThreshold?;

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

@@ -10,16 +10,23 @@ export interface CanvasConfig {
      */
     contextMenu?: ContextMenuConfig;
     /**
-     * Configuration for the grid in the canvas.
+     * Configuration for the main grid in the canvas.
      * If left undefined, it is interpreted as disabling the grid,
      * same as if the attribute `enabled` in its configuration was set to `false`.
+     * The grid repeats with a period of diagram units determined by the `spacing` attribute.
      */
-    grid?: GridConfig;
+    grid?: EmptyGridConfig | DotsGridConfig | LinesGridConfig | ImageGridConfig;
     /**
-     * Background color of this diagram.
-     * @default "#FFFFFF"
+     * Configuration for ancillary grids in the canvas.
+     * They accompany the main grid without affecting the diagram.
      */
-    backgroundColor?: string;
+    ancillaryGrids?: (DotsGridConfig | LinesGridConfig | ImageGridConfig)[];
+    /**
+     * Configuration for the background of the canvas.
+     * If left undefined, it is interpreted as a solid white (`'#FFFFFF'`) background.
+     * The background of the canvas covers the entire canvas and does not move when changing the position or zoom.
+     */
+    background?: SolidBackgroundConfig | ImageBackgroundConfig;
     /**
      * The factor by which the zoom level increases or decreases when the user users buttons or keys to zoom in or out. Should be above 1.
      * @default 2
@@ -42,9 +49,12 @@ export interface CanvasConfig {
      */
     priorityThresholds?: number[];
 }
-export type GridStyle = 'dots' | 'lines';
 /**
- * Configuration of the guide grid in the background of the diagram.
+ * Possible styles for the grid of the diagram. Each corresponds to a different configuration with different attributes.
+ */
+export type GridStyle = 'none' | 'dots' | 'lines' | 'image';
+/**
+ * Configuration of the guide grid of the diagram.
  */
 export interface GridConfig {
     /**
@@ -56,28 +66,102 @@ export interface GridConfig {
      * The style of the grid.
      * @default "dots"
      */
-    style?: GridStyle;
+    style: GridStyle;
     /**
-     * Color of grid elements such as the points or axes.
-     * @default "rgba(0, 0, 0, 0.1)"
+     * Distance between each point of the grid of this diagram in diagram units.
+     * @default 10
      */
-    color?: string;
+    spacing?: number | [number, number];
     /**
      * When true, the user moving or stretching nodes will cause their corners to automatically snap to the closest grid point.
+     * Does not have an effect in ancillary grids.
      * @default false
      */
     snap?: boolean;
+}
+/**
+ * A grid with no points are marked by dots.
+ */
+export interface EmptyGridConfig extends GridConfig {
+    style: 'none';
+}
+/**
+ * A grid where the points are marked by dots.
+ */
+export interface DotsGridConfig extends GridConfig {
+    style: 'dots';
     /**
-     * Distance between each point of the grid of this diagram in diagram units.
-     * @default 10
+     * Color of grid elements such as the points or axes.
+     * @default "rgba(0, 0, 0, 0.1)"
+     */
+    color?: string;
+    /**
+     * In a range between 0 and 1, how thick the points of the grid are relative to the distance between them.
+     * @default 0.05
+     */
+    thickness?: number;
+}
+/**
+ * A grid where the points are marked by lines.
+ */
+export interface LinesGridConfig extends GridConfig {
+    style: 'lines';
+    /**
+     * Color of grid elements such as the points or axes.
+     * @default "rgba(0, 0, 0, 0.1)"
      */
-    spacing?: number;
+    color?: string;
     /**
      * In a range between 0 and 1, how thick the points of the grid are relative to the distance between them.
      * @default 0.05
      */
     thickness?: number;
 }
+/**
+ * A grid which consists of an image.
+ */
+export interface ImageGridConfig extends GridConfig {
+    style: 'image';
+    /**
+     * The source of the image to use as grid.
+     * This image is placed such that the 0,0 point of the diagram is in the center of the image.
+     */
+    image: string;
+}
+/**
+ * Possible styles for the background of the diagram. Each corresponds to a different configuration with different attributes.
+ */
+export type BackgroundStyle = 'solid' | 'image';
+/**
+ * Configuration of the background of the diagram.
+ */
+export interface BackgroundConfig {
+    /**
+     * The style of the background.
+     */
+    style: BackgroundStyle;
+}
+/**
+ * A background which consists of a solid color.
+ */
+export interface SolidBackgroundConfig extends BackgroundConfig {
+    style: 'solid';
+    /**
+     * The color of the background.
+     * @default '#FFFFFF'
+     */
+    color?: string;
+}
+/**
+ * A background which consists of an image.
+ */
+export interface ImageBackgroundConfig extends BackgroundConfig {
+    style: 'image';
+    /**
+     * The source of the image to use as background.
+     */
+    image: string;
+}
 export interface ContextMenuConfig {
     /**
      * Custom buttons to be added to the context menu.

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

@@ -106,6 +106,11 @@ export interface PaletteComponentConfig {
      * @default true
      */
     enabled?: boolean;
+    /**
+     * Whether this component is open (not collapsed) by default in the diagram.
+     * @default true
+     */
+    open?: boolean;
     /**
      * Location of this component in the screen.
      * @default 'top-left'
@@ -116,21 +121,26 @@ export interface PaletteComponentConfig {
      * @default 'bottom'
      */
     direction?: Side;
-    /**
-     * Dimension of this component in the direction that it extends towards. If undefined, it stretches as needed.
-     * @default undefined
-     */
-    height?: string;
     /**
      * Dimension of this component in the direction perpendicular to the direction that it extends towards.
      * @default '12rem'
      */
     width?: string;
+    /**
+     * Dimension of this component in the direction that it extends towards.
+     * @default 'min-content'
+     */
+    length?: string;
     /**
      * Gap between the templates in this palette.
      * @default '1rem'
      */
     gap?: string;
+    /**
+     * Value of the `justify-content` property in the elemments of the palette.
+     * @default 'center'
+     */
+    justifyContent?: string;
     /**
      * Configuration for the sections of this palette. By default, no sections are created.
      * @default undefined
@@ -148,6 +158,11 @@ export interface PropertyEditorComponentConfig {
      * @default true
      */
     enabled?: boolean;
+    /**
+     * Whether this component is open (not collapsed) by default in the diagram.
+     * @default true
+     */
+    open?: boolean;
     /**
      * Location of this component in the screen.
      * @default 'top-right'
@@ -164,10 +179,10 @@ export interface PropertyEditorComponentConfig {
      */
     width?: string;
     /**
-     * Dimension of this component in the direction that it extends towards. If undefined, it stretches as needed.
-     * @default undefined
+     * Dimension of this component in the direction that it extends towards.
+     * @default 'min-content'
      */
-    height?: string;
+    length?: string;
     /**
      * Title that appears heading this component.
      * @default 'Diagram properties'

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

@@ -4,7 +4,7 @@ import { DiagramActions } from '../diagram-action';
 import { Property } from '../property/property';
 import { CanvasConfig } from './diagram-canvas-config';
 import { ComponentsConfig } from './diagram-components-config';
-import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
+import { ConnectionLookConfig, FieldLookConfig, ImageLookConfig, MarkerImageLookConfig, ResizerLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -171,15 +171,20 @@ export interface NodeTypeConfig {
      */
     minHeight?: number;
     /**
-     * Whether the user can resize nodes of this type along the x axis.
+     * Whether the user can resize nodes of this type horizontally.
      * @default false
      */
-    resizableX?: boolean | ResizableMode;
+    resizableX?: boolean | ResizableMode | ResizerConfig;
     /**
-     * Whether the user can resize nodes of this type along the y axis.
+     * Whether the user can resize nodes of this type vertically.
      * @default false
      */
-    resizableY?: boolean | ResizableMode;
+    resizableY?: boolean | ResizableMode | ResizerConfig;
+    /**
+     * Whether the user can resize nodes of this type diagonally.
+     * @default false
+     */
+    resizableXY?: boolean | ResizableMode | ResizerConfig;
     /**
      * By how much the location of nodes of this type should be offset when snapping to grid in diagram units.
      * Each value corresponds to left, top, right and bottom respectively.
@@ -187,10 +192,11 @@ export interface NodeTypeConfig {
      */
     snapToGridOffset?: [number, number, number, number];
     /**
-     * The padding between the node and its children in diagram units if children are present. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * The padding between the node and its children in diagram units if children are present.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding.
      * @default 0
      */
-    padding?: number | number[];
+    padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
      * Configuration for the label of nodes of this type.
      * @default null
@@ -336,41 +342,28 @@ export interface FieldConfig {
      */
     editable?: boolean;
     /**
-     * The size of the font of this field in diagram units.
-     * @default 0
+     * Whether this field and its root element should be resized automatically if the size of the text increases.
+     * Setting this to true should also entail setting reasonable `minWidth` and `minHeight` values for the configuration of any nodes or sections that contain this field.
+     * @default false
      */
-    fontSize?: number;
+    fit?: boolean;
     /**
-     * The margin around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS margin.
-     * @default 0
+     * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space.
+     * @default true
      */
-    margin?: number | number[];
+    shrink?: boolean;
     /**
-     * The padding around the field in diagram units. May be a single value or an array, in which case the value is interpreted in the same way as in CSS padding.
+     * The margin around the field in diagram units.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS margin.
      * @default 0
      */
-    padding?: number | number[];
+    margin?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
-     * The font family of the text of this field.
-     * @default null
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |font-family}
-     */
-    fontFamily?: string | null;
-    /**
-     * The color of the text of this field.
-     * @default '#000000'
-     */
-    color?: string;
-    /**
-     * The background color of the text of this field.
-     * @default 'transparent'
-     */
-    backgroundColor?: string;
-    /**
-     * The color of the text of this field when selected.
-     * @default '#000000'
+     * The padding around the field in diagram units.
+     * May be a single number or an array of up to four numbers, in which case the value is interpreted in the same way as in CSS padding.
+     * @default 0
      */
-    selectedColor?: string;
+    padding?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number];
     /**
      * The horizontal alignment of the text of this field.
      * @default 'center'
@@ -381,27 +374,20 @@ export interface FieldConfig {
      * @default 'center'
      */
     verticalAlign?: VerticalAlign;
-    /**
-     * The orientation of the text of this field. It may be a side or a number of degrees.
-     * @default 'top'
-     */
-    orientation?: Side | number;
     /**
      * Whether this field can have multiple lines.
      * @default false
      */
     multiline?: boolean;
     /**
-     * Whether this field and its root element should be resized automatically if the size of the text increases.
-     * Setting this to true should also entail setting reasonable `minWidth` and `minHeight` values for the configuration of any nodes or sections that contain this field.
-     * @default false
+     * The orientation of the text of this field. It may be a side or a number of degrees.
+     * @default 'top'
      */
-    fit?: boolean;
+    orientation?: Side | number;
     /**
-     * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space.
-     * @default true
+     * Configuration of the look this field as it should appear to the user.
      */
-    shrink?: boolean;
+    look?: FieldLookConfig;
 }
 /**
  * Configuration for a decorator that is part of another element.
@@ -424,9 +410,9 @@ export interface DecoratorConfig {
      */
     height: number;
     /**
-     * Inner HTML of this decorator.
+     * Inner SVG of this decorator.
      */
-    html: string;
+    svg: string;
     /**
      * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
      * - 'start': Always maintains the same distance from the left edge
@@ -509,13 +495,19 @@ export interface SectionConfig {
      * If undefined, inherits from the parent node's resizableX setting.
      * @default undefined
      */
-    resizableX?: boolean | ResizableMode;
+    resizableX?: boolean | ResizableMode | ResizerConfig;
     /**
      * Whether this section can be resized vertically.
      * If undefined, inherits from the parent node's resizableY setting.
      * @default undefined
      */
-    resizableY?: boolean | ResizableMode;
+    resizableY?: boolean | ResizableMode | ResizerConfig;
+    /**
+     * Whether this section can be resized diagonally.
+     * If undefined, inherits from the parent node's resizableXY setting.
+     * @default undefined
+     */
+    resizableXY?: boolean | ResizableMode | ResizerConfig;
 }
 /**
  * Configuration for a type of connection.
@@ -566,6 +558,51 @@ export interface ConnectionTypeConfig {
      */
     properties?: Property[];
 }
+/**
+ * Configuration for the resizers of a node or section.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
+export interface ResizerConfig {
+    /**
+     * Mode of the resizer.
+     * @default ResizableMode.Never
+     */
+    mode?: ResizableMode;
+    /**
+     * Thickness of the resizer.
+     * @default 10
+     */
+    thickness?: number;
+    /**
+     * The margin around the resizer in diagram units. Used to shift the resizer relative to its default position.
+     * @default 0
+     */
+    outerMargin?: number;
+    /**
+     * Configuration of the look of the resizer.
+     * @default { fillColor: 'transparent' }
+     */
+    look?: ResizerLookConfig;
+}
+/**
+ * The different modes for when a node or section can be resized.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
 export declare enum ResizableMode {
-    OnlyWhenSelected = 0
+    /**
+     * Resizable mode for always being resizable.
+     */
+    Always = 0,
+    /**
+     * Resizable mode for only being resizable while selected.
+     */
+    OnlyWhenSelected = 1,
+    /**
+     * Resizable mode for never being resizable.
+     */
+    Never = 2
 }

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

@@ -58,11 +58,25 @@ export interface MarkerImageLookConfig extends MarkerImageLook, LookConfig<Marke
  */
 export interface ConnectionLookConfig extends ConnectionLook, LookConfig<ConnectionLook> {
 }
+/**
+ * Configuration for a look for a field.
+ * @public
+ * @see FieldLook
+ */
+export interface FieldLookConfig extends FieldLook, LookConfig<FieldLook> {
+}
+/**
+ * Configuration for a look for a resizer.
+ * @public
+ * @see ResizerLook
+ */
+export interface ResizerLookConfig extends ResizerLook, LookConfig<ResizerLook> {
+}
 export interface Look {
     /**
-     * String used to discern the type of look this is.
+     * String used to discern the type of look this is in cases where different types of looks can be used.
      */
-    lookType: string;
+    lookType?: string;
 }
 /**
  * Configuration for a look given by a shape.
@@ -171,7 +185,6 @@ export interface StretchableImageLook extends Look {
  * @public
  */
 export interface MarkerImageLook extends Look {
-    lookType: 'marker-image-look';
     /**
      * File path to the image used for the marker.
      */
@@ -206,7 +219,6 @@ export interface MarkerImageLook extends Look {
  * @public
  */
 export interface ConnectionLook extends Look {
-    lookType: 'connection-look';
     /**
      * Color of the line of connections of this type.
      * @default '#000000'
@@ -228,3 +240,56 @@ export interface ConnectionLook extends Look {
      */
     style?: LineStyle;
 }
+/**
+ * Configuration for a look for a field.
+ * @public
+ */
+export interface FieldLook extends Look {
+    /**
+     * Background color of this look.
+     * @default '#FFFFFF'
+     */
+    fillColor?: string;
+    /**
+     * Font color of this look.
+     * @default '#000000'
+     */
+    fontColor?: string;
+    /**
+     * Font family of this field. `null` for the default one.
+     * @default null
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-family |font-family}
+     */
+    fontFamily?: string | null;
+    /**
+     * Font size of this field.
+     * @default 10
+     */
+    fontSize?: number;
+    /**
+     * Font weight of this field.
+     * @default 400
+     */
+    fontWeight?: number;
+}
+/**
+ * Configuration for a look for a resizer.
+ * @public
+ */
+export interface ResizerLook extends Look {
+    /**
+     * Color of this resizer.
+     * @default 'transparent'
+     */
+    fillColor?: string;
+    /**
+     * Border color of this resizer.
+     * @default 'transparent'
+     */
+    borderColor?: string;
+    /**
+     * Border thickness of this resizer in diagram units.
+     * @default 0
+     */
+    borderThickness?: number;
+}