;
}
/**
@@ -551,31 +555,6 @@ export interface ExportSvgOptions {
*/
export interface ExportRasterOptions extends ExportSvgOptions, ToDataURLOptions {}
-/**
- * Canvas widget layer to render widget:
- * - `viewport` - topmost layer, uses client (viewport) coordinates and
- * does not scale or scroll with the diagram;
- * - `overElements` - displayed over both elements and links, uses paper coordinates,
- * scales and scrolls with the diagram;
- * - `overLinks` - displayed under elements but over links, uses paper coordinates,
- * scales and scrolls with the diagram.
- */
-export type CanvasWidgetAttachment = 'viewport' | 'overElements' | 'overLinks';
-
-/**
- * Describes canvas widget element to render on the specific widget layer.
- */
-export interface CanvasWidgetDescription {
- /**
- * Canvas widget element to render.
- */
- element: React.ReactElement;
- /**
- * Canvas widget layer to render widget on.
- */
- attachment: CanvasWidgetAttachment;
-}
-
/**
* Represents a context for everything rendered inside the canvas,
* including diagram content and widgets.
diff --git a/src/diagram/canvasWidget.tsx b/src/diagram/canvasHotkey.tsx
similarity index 54%
rename from src/diagram/canvasWidget.tsx
rename to src/diagram/canvasHotkey.tsx
index 999c4c5c..1b33b39e 100644
--- a/src/diagram/canvasWidget.tsx
+++ b/src/diagram/canvasHotkey.tsx
@@ -2,54 +2,9 @@ import * as React from 'react';
import { HotkeyAst, type HotkeyString, parseHotkey, formatHotkey } from '../coreUtils/hotkey';
-import { type CanvasWidgetDescription, useCanvas } from './canvasApi';
+import { useCanvas } from './canvasApi';
import { type MutableRenderingState } from './renderingState';
-const GET_WIDGET_METADATA: unique symbol = Symbol('getWidgetMetadata');
-
-interface WithMetadata {
- [GET_WIDGET_METADATA]?: (element: React.ReactElement) => CanvasWidgetDescription;
-}
-
-/**
- * Defines the React component to be a canvas widget.
- *
- * A component cannot be rendered by canvas as widget unless explicitly
- * defined as such using this function.
- *
- * **Example**:
- * ```jsx
- * function MyWidget(props) {
- * ...
- * }
- *
- * defineCanvasWidget(MyWidget, element => ({
- * element,
- * attachment: 'viewport'
- * }));
- * ```
- *
- * @category Core
- */
-export function defineCanvasWidget(
- type: React.ComponentType
,
- metadataOf: (element: React.ReactElement
) => CanvasWidgetDescription
-): void {
- const typeWithMetadata = type as WithMetadata;
- typeWithMetadata[GET_WIDGET_METADATA] = metadataOf as WithMetadata[typeof GET_WIDGET_METADATA];
-}
-
-export function extractCanvasWidget(
- element: React.ReactElement
-): CanvasWidgetDescription | undefined {
- const typeWithMetadata = element.type as WithMetadata;
- const metadataOf = typeWithMetadata[GET_WIDGET_METADATA];
- if (metadataOf) {
- return metadataOf(element);
- }
- return undefined;
-}
-
/**
* Represents a registered canvas hotkey.
*
diff --git a/src/diagram/paperArea.tsx b/src/diagram/paperArea.tsx
index e3005f4a..6b29dbe0 100644
--- a/src/diagram/paperArea.tsx
+++ b/src/diagram/paperArea.tsx
@@ -8,20 +8,22 @@ import { Debouncer, animateInterval, easeInOutBezier } from '../coreUtils/schedu
import {
CanvasContext, CanvasApi, CanvasEvents, CanvasMetrics, CanvasAreaMetrics,
- CanvasDropEvent, CenterToOptions, ScaleOptions, ViewportOptions, CanvasWidgetDescription,
+ CanvasDropEvent, CenterToOptions, ScaleOptions, ViewportOptions,
CanvasPointerMode, ZoomOptions, ExportSvgOptions, ExportRasterOptions,
} from './canvasApi';
-import { extractCanvasWidget } from './canvasWidget';
import { RestoreGeometry } from './commands';
import { Element, Link, Cell, LinkVertex } from './elements';
import { ElementLayer } from './elementLayer';
import {
Vector, Rect, computePolyline, findNearestSegmentIndex, getContentFittingBox,
} from './geometry';
+import { CommandBatch } from './history';
import { LinkLabelLayer, LinkLayer, LinkMarkers } from './linkLayer';
import { DiagramModel } from './model';
-import { CommandBatch } from './history';
import { Paper, PaperTransform, SvgPaperLayer } from './paper';
+import {
+ CanvasPlaceLayerContext, CanvasPlaceLayer, createPlaceLayerContext,
+} from './placeLayer';
import { MutableRenderingState, RenderingLayer } from './renderingState';
import {
ToSVGOptions, toSVG, toDataURL, fitRectKeepingAspectRatio,
@@ -39,14 +41,7 @@ export interface PaperAreaProps {
}
interface State {
- readonly width: number;
- readonly height: number;
- readonly originX: number;
- readonly originY: number;
- readonly scale: number;
- readonly paddingX: number;
- readonly paddingY: number;
-
+ readonly transform: PaperTransform;
readonly cssAnimations: number;
readonly cssAnimationDuration: number | undefined;
}
@@ -104,6 +99,7 @@ export class PaperArea extends React.Component implements
private readonly linkLayerRef = React.createRef();
private readonly labelLayerRef = React.createRef();
private readonly elementLayerRef = React.createRef();
+ private readonly placeLayerContext: CanvasPlaceLayerContext;
private readonly pageSize = {x: 1500, y: 800};
private readonly canvasContext: CanvasContext;
@@ -129,16 +125,19 @@ export class PaperArea extends React.Component implements
super(props);
const {zoomOptions = {}} = this.props;
this.state = {
- width: this.pageSize.x,
- height: this.pageSize.y,
- originX: 0,
- originY: 0,
- scale: 1,
- paddingX: 0,
- paddingY: 0,
+ transform: {
+ width: this.pageSize.x,
+ height: this.pageSize.y,
+ originX: 0,
+ originY: 0,
+ scale: 1,
+ paddingX: 0,
+ paddingY: 0,
+ },
cssAnimations: 0,
cssAnimationDuration: undefined,
};
+ this.placeLayerContext = createPlaceLayerContext();
this.resizeObserver = new ResizeObserver(this.onResize);
this.metrics = new (class extends BasePaperMetrics {
constructor(private readonly paperArea: PaperArea) {
@@ -148,8 +147,7 @@ export class PaperArea extends React.Component implements
return this.paperArea.area;
}
get transform(): PaperTransform {
- const {width, height, originX, originY, scale, paddingX, paddingY} = this.paperArea.state;
- return {width, height, originX, originY, scale, paddingX, paddingY};
+ return this.paperArea.state.transform;
}
protected getClientRect(): AreaClientRect {
return this.paperArea.area.getBoundingClientRect();
@@ -191,7 +189,7 @@ export class PaperArea extends React.Component implements
}
render() {
- const {model, renderingState, hideScrollBars, watermarkSvg, watermarkUrl} = this.props;
+ const {model, renderingState, hideScrollBars, watermarkSvg, watermarkUrl, children} = this.props;
const {cssAnimationDuration} = this.state;
const paperTransform = this.metrics.getTransform();
@@ -205,7 +203,6 @@ export class PaperArea extends React.Component implements
? undefined : `${cssAnimationDuration}ms`,
} as React.CSSProperties;
- const renderedWidgets = Array.from(this.getAllWidgets());
return (
implements
onPointerDown={this.onPaperPointerDown}
onContextMenu={this.onContextMenu}
onScrollCapture={this.onPaperScrollCapture}>
+
implements
renderingState={renderingState}
/>
+
-
- {renderedWidgets
- .filter(w => w.attachment === 'overLinks')
- .map(widget => ensureWidgetGetRendered(widget.element))
- }
-
+
-
- {renderedWidgets
- .filter(w => w.attachment === 'overElements')
- .map(widget => ensureWidgetGetRendered(widget.element))
- }
-
+
{watermarkSvg ? (
@@ -264,10 +263,9 @@ export class PaperArea extends React.Component implements
) : null}