@metadev/daga 5.0.5 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "5.0.5",
+  "version": "5.1.0",
   "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';
@@ -33,12 +34,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: (canvas: DiagramCanvas, 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';
@@ -40,12 +40,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 +61,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, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public
@@ -336,10 +336,16 @@ 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;
+    /**
+     * Whether when `fit` is enabled should the root element of the field also shrink if there is excess space.
+     * @default true
+     */
+    shrink?: 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
@@ -350,27 +356,6 @@ export interface FieldConfig {
      * @default 0
      */
     padding?: 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'
-     */
-    selectedColor?: string;
     /**
      * The horizontal alignment of the text of this field.
      * @default 'center'
@@ -381,27 +366,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 +402,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

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

@@ -58,6 +58,13 @@ 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> {
+}
 export interface Look {
     /**
      * String used to discern the type of look this is.
@@ -228,3 +235,36 @@ export interface ConnectionLook extends Look {
      */
     style?: LineStyle;
 }
+/**
+ * Configuration for a look for a field.
+ * @public
+ */
+export interface FieldLook extends Look {
+    lookType: 'field-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 0
+     */
+    fontSize?: number;
+    /**
+     * Font weight of this field.
+     * @default 0
+     */
+    fontWeight?: number;
+}

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

@@ -1,4 +1,4 @@
-import { Point } from '../../util/canvas-util';
+import { AnchorPoint, Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
 import { CollabTimestamp, CollabTimestampSet } from '../collab/primitives';
 export declare const DAGA_FILE_VERSION = 1;
@@ -18,9 +18,9 @@ export interface DagaModel {
     typeVersion: number;
     createdAt: Date;
     updatedAt: Date;
-    updatedDaysAgo?: string;
     nodes: DagaNode[];
     connections: DagaConnection[];
+    objects?: DagaObject[];
     data: {
         [key: string]: unknown;
     };
@@ -35,6 +35,7 @@ export interface DagaNode {
     children?: DagaNode[];
     sections?: DagaSection[];
     ports?: DagaPort[];
+    decorators?: DagaDecorator[];
     label: string;
     coords: Point;
     width: number;
@@ -59,6 +60,7 @@ export interface DagaNode {
 export interface DagaSection {
     id: string;
     ports?: DagaPort[];
+    decorators?: DagaDecorator[];
     label: string;
     indexXInNode: number;
     indexYInNode: number;
@@ -115,3 +117,28 @@ export interface DagaConnection {
         dataTimestamps: CollabTimestampSet;
     };
 }
+export interface DagaObject {
+    id: string;
+    coords: Point;
+    width: number;
+    height: number;
+    priority: number;
+    svg: string;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+    };
+}
+export interface DagaDecorator {
+    id: string;
+    coords: Point;
+    width: number;
+    height: number;
+    priority: number;
+    anchorPoints: [AnchorPoint, AnchorPoint];
+    svg: string;
+    collabMeta?: {
+        removed: boolean;
+        selfRemoved: boolean;
+    };
+}

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

@@ -33,7 +33,8 @@ export declare class DiagramZoomEvent extends DiagramEvent {
     /**
      * Create a diagram zoom event.
      *
-     * @param coords .
+     * @param coords Coordinates to which the user panned. Calling the method `canvas.translateTo()` with these coordinates after this event should cause no changes.
+     * @param zoom Zoom level to which the user zoomed. Calling the method `canvas.zoomTo()` with this zoom level after this event should cause no changes.
      */
     constructor(coords: Point, zoom: number);
 }

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

@@ -4,7 +4,7 @@ import { DiagramModel } from './diagram-model';
 import { DiagramNode } from './diagram-node';
 import { DiagramSection } from './diagram-section';
 /**
- * A foreign object which is inserted with arbitrary html into a diagram.
+ * A foreign object which is inserted with arbitrary SVG code into a diagram.
  * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
  * Diagram decorators are not serialized with other diagram elements.
  * @public
@@ -34,7 +34,7 @@ export declare class DiagramDecorator extends DiagramElement {
      */
     height: number;
     priority: number;
-    html: string;
+    svg: string;
     /**
      * Horizontal anchor point for this decorator. Determines how the decorator behaves when its root element is resized.
      * @public
@@ -45,7 +45,7 @@ export declare class DiagramDecorator extends DiagramElement {
      * @public
      */
     anchorPointY: AnchorPoint;
-    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
+    constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, svg: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -71,10 +71,10 @@ export declare class DiagramDecoratorSet extends DiagramElementSet<DiagramDecora
      * @param width The dimension of the decorator along the x axis.
      * @param height The dimension of the decorator along the y axis.
      * @param priority The priority of the decorator. Used when filtering by priority.
-     * @param html The html contents of the decorator.
+     * @param svg The SVG contents of the decorator.
      * @param id The id of the decorator. Cannot be an empty string.
      * @returns The instanced decorator.
      */
-    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, html: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramDecorator;
+    new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, width: number, height: number, priority: number, svg: string, id: string, anchorPointX?: AnchorPoint, anchorPointY?: AnchorPoint): DiagramDecorator;
     remove(id: string): void;
 }

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

@@ -2,6 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { CollabTimestamp } from '../collab/primitives';
 import { FieldConfig } from '../config/diagram-config';
+import { FieldLook, FieldLookConfig } from '../config/diagram-look-config';
 import { DiagramElement, DiagramElementSet } from './diagram-element';
 import { DiagramModel } from './diagram-model';
 /**
@@ -11,19 +12,22 @@ import { DiagramModel } from './diagram-model';
  */
 export declare const DIAGRAM_FIELD_DEFAULTS: {
     editable: boolean;
-    fontSize: number;
     margin: number;
     padding: number;
-    fontFamily: string;
-    color: string;
-    selectedColor: string;
-    backgroundColor: string;
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
     orientation: Side;
     multiline: boolean;
     fit: boolean;
     shrink: boolean;
+    look: {
+        lookType: "field-look";
+        fillColor: string;
+        fontColor: string;
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: number;
+    };
 };
 export interface LabeledElement {
     label?: DiagramField;
@@ -56,26 +60,6 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     height: number;
-    /**
-     * Font size of this field.
-     * @public
-     */
-    fontSize: number;
-    /**
-     * Font family of this field. `null` for the default one.
-     * @public
-     */
-    fontFamily: string | null;
-    /**
-     * Font color of this field.
-     * @public
-     */
-    color: string;
-    /**
-     * Font color of this field when selected.
-     * @public
-     */
-    selectedColor: string;
     /**
      * Horizontal alignment of the text of this field.
      * @public
@@ -128,7 +112,16 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     shrink: boolean;
-    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean);
+    private defaultLook;
+    private selectedLook;
+    private highlightedLook;
+    private selectedAndHighlightedLook;
+    /**
+     * Current look of this field.
+     * @private
+     */
+    get look(): FieldLook;
+    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, look: FieldLookConfig, text: string, editable: boolean, fit: boolean, shrink: boolean);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -151,7 +144,7 @@ export declare class DiagramFieldSet extends DiagramElementSet<DiagramField> {
      * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
      * @private
      */
-    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
+    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, look: FieldLookConfig, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
     remove(id: string): void;
 }
 export declare const getBottomMargin: (config?: FieldConfig | null) => number;