@next-bricks/diagram 0.55.0 → 0.56.0

package/dist-types/draw-canvas/CellComponent.d.ts

@@ -1,4 +1,4 @@
-import type { ActiveTarget, Cell, CellContextMenuDetail, ComputedEdgeLineConf, DecoratorTextChangeDetail, EdgeCell, LayoutOptions, LayoutType, NodeBrickConf, EditableLine, BaseEdgeCell } from "./interfaces";
+import type { ActiveTarget, Cell, CellContextMenuDetail, ComputedEdgeLineConf, DecoratorTextChangeDetail, LayoutOptions, LayoutType, NodeBrickConf, EditableLine, EditableLineCell } from "./interfaces";
 import type { MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
 import type { SizeTuple, TransformLiteral } from "../diagram/interfaces";
 export interface CellComponentProps {
@@ -10,16 +10,16 @@ export interface CellComponentProps {
     degradedNodeLabel?: string;
     defaultNodeBricks?: NodeBrickConf[];
     transform: TransformLiteral;
-    lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>;
-    editableLineMap: WeakMap<EdgeCell, EditableLine>;
+    lineConfMap: WeakMap<EditableLineCell, ComputedEdgeLineConf>;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
     activeTarget: ActiveTarget | null | undefined;
     readOnly?: boolean;
     hoverCell?: Cell | null | undefined;
     unrelatedCells: Cell[];
     dragNodeToContainerActive?: boolean;
     allowEdgeToArea?: boolean;
-    curActiveEditableEdge?: BaseEdgeCell | null;
-    updateCurActiveEditableEdge?: (activeEditableEdge: BaseEdgeCell | null) => void;
+    curActiveEditableLine?: EditableLineCell | null;
+    updateCurActiveEditableLine?: (activeEditableLine: EditableLineCell | null) => void;
     onCellsMoving?(info: MoveCellPayload[]): void;
     onCellsMoved?(info: MoveCellPayload[]): void;
     onCellResizing?(info: ResizeCellPayload): void;
@@ -36,4 +36,4 @@ export interface CellComponentProps {
     onCellMouseEnter?(cell: Cell): void;
     onCellMouseLeave?(cell: Cell): void;
 }
-export declare function CellComponent({ layout, layoutOptions, cell, cells, degraded, degradedNodeLabel, defaultNodeBricks, lineConfMap, editableLineMap, activeTarget, dragNodeToContainerActive, readOnly, transform, hoverCell, unrelatedCells, allowEdgeToArea, curActiveEditableEdge, updateCurActiveEditableEdge, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onCellClick, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;
+export declare function CellComponent({ layout, layoutOptions, cell, cells, degraded, degradedNodeLabel, defaultNodeBricks, lineConfMap, editableLineMap, activeTarget, dragNodeToContainerActive, readOnly, transform, hoverCell, unrelatedCells, allowEdgeToArea, curActiveEditableLine, updateCurActiveEditableLine, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onCellClick, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;

package/dist-types/draw-canvas/EdgeComponent.d.ts

@@ -1,8 +1,8 @@
-import type { ActiveTarget, ComputedEdgeLineConf, EdgeCell, EditableLine } from "./interfaces";
+import type { ActiveTarget, ComputedEdgeLineConf, EdgeCell, EditableLine, EditableLineCell } from "./interfaces";
 export interface EdgeComponentProps {
     edge: EdgeCell;
-    lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>;
-    editableLineMap: WeakMap<EdgeCell, EditableLine>;
+    lineConfMap: WeakMap<EditableLineCell, ComputedEdgeLineConf>;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
     readOnly?: boolean;
     active?: boolean;
     activeRelated?: boolean;

package/dist-types/draw-canvas/EditingLineComponent.d.ts

@@ -1,10 +1,10 @@
-import type { Cell, ComputedLineConnecterConf, EdgeCell, EditableLine } from "./interfaces";
+import type { Cell, ComputedLineConnecterConf, EditableLine, EditableLineCell } from "./interfaces";
 import type { TransformLiteral } from "../diagram/interfaces";
 export interface EditingLineComponentProps {
     cells: Cell[];
-    editableLineMap: WeakMap<EdgeCell, EditableLine>;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
     transform: TransformLiteral;
     options: ComputedLineConnecterConf;
-    activeEditableEdge: EdgeCell | null;
+    activeEditableLine: EditableLineCell | null;
 }
-export declare function EditingLineComponent({ cells, editableLineMap, transform, options, activeEditableEdge, }: EditingLineComponentProps): JSX.Element;
+export declare function EditingLineComponent({ cells, editableLineMap, transform, options, activeEditableLine, }: EditingLineComponentProps): JSX.Element;

package/dist-types/draw-canvas/HoverStateContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { DecoratorCell, EdgeCell, EdgeView, LineEditorState, NodeCell, SmartConnectLineState } from "./interfaces";
+import type { DecoratorCell, DecoratorLineView, DecoratorView, EdgeView, EditableLineCell, LineEditorState, NodeCell, SmartConnectLineState } from "./interfaces";
 import type { NodePosition } from "../diagram/interfaces";
 export interface HoverState {
     cell: NodeCell | DecoratorCell;
@@ -12,24 +12,28 @@ export declare const HoverStateContext: React.Context<{
     smartConnectLineState: SmartConnectLineState | null;
     unsetHoverStateTimeoutRef: React.MutableRefObject<number | null>;
     hoverState: HoverState | null;
-    activeEditableEdges: EdgeCell[];
+    activeEditableLines: EditableLineCell[];
     lineEditorState: LineEditorState | null;
+    movingCells?: boolean;
     setLineEditorState: React.Dispatch<React.SetStateAction<LineEditorState | null>>;
     setHoverState: React.Dispatch<React.SetStateAction<HoverState | null>>;
     setSmartConnectLineState: React.Dispatch<React.SetStateAction<SmartConnectLineState | null>>;
     onConnect?: (source: NodeCell | DecoratorCell, target: NodeCell | DecoratorCell, exitPosition: NodePosition, entryPosition: NodePosition | undefined) => void;
     onChangeEdgeView?: (source: NodeCell | DecoratorCell, target: NodeCell | DecoratorCell, view: EdgeView) => void;
+    onChangeDecoratorView?: (cell: DecoratorCell, view: DecoratorView | DecoratorLineView) => void;
 }>;
 export declare function useHoverStateContext(): {
     rootRef: React.RefObject<SVGSVGElement>;
     smartConnectLineState: SmartConnectLineState | null;
     unsetHoverStateTimeoutRef: React.MutableRefObject<number | null>;
     hoverState: HoverState | null;
-    activeEditableEdges: EdgeCell[];
+    activeEditableLines: EditableLineCell[];
     lineEditorState: LineEditorState | null;
+    movingCells?: boolean;
     setLineEditorState: React.Dispatch<React.SetStateAction<LineEditorState | null>>;
     setHoverState: React.Dispatch<React.SetStateAction<HoverState | null>>;
     setSmartConnectLineState: React.Dispatch<React.SetStateAction<SmartConnectLineState | null>>;
     onConnect?: (source: NodeCell | DecoratorCell, target: NodeCell | DecoratorCell, exitPosition: NodePosition, entryPosition: NodePosition | undefined) => void;
     onChangeEdgeView?: (source: NodeCell | DecoratorCell, target: NodeCell | DecoratorCell, view: EdgeView) => void;
+    onChangeDecoratorView?: (cell: DecoratorCell, view: DecoratorView | DecoratorLineView) => void;
 };

package/dist-types/draw-canvas/LineConnectorComponent.d.ts

@@ -1,9 +1,9 @@
-import type { ActiveTarget, EdgeCell, EditableLine } from "./interfaces";
+import type { ActiveTarget, EditableLine, EditableLineCell } from "./interfaces";
 export interface LineConnectorComponentProps {
     activeTarget: ActiveTarget | null;
-    editableLineMap: WeakMap<EdgeCell, EditableLine>;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
     scale: number;
-    activeEditableEdge: EdgeCell | null;
+    activeEditableLine: EditableLineCell | null;
     disabled?: boolean;
 }
-export declare function LineConnectorComponent({ activeTarget, editableLineMap, scale, activeEditableEdge, disabled, }: LineConnectorComponentProps): JSX.Element | null;
+export declare function LineConnectorComponent({ activeTarget, editableLineMap, scale, activeEditableLine, disabled, }: LineConnectorComponentProps): JSX.Element | null;

package/dist-types/draw-canvas/LineEditorComponent.d.ts

@@ -1,8 +1,8 @@
-import type { BaseEdgeCell, EdgeCell, EditableLine } from "./interfaces";
+import type { EditableLine, EditableLineCell } from "./interfaces";
 export interface LineEditorComponentProps {
     scale: number;
-    editableLineMap: WeakMap<EdgeCell, EditableLine>;
-    activeEditableEdge: EdgeCell;
-    updateCurActiveEditableEdge?: (activeEditableEdge: BaseEdgeCell | null) => void;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
+    activeEditableLine: EditableLineCell;
+    updateCurActiveEditableLine?: (activeEditableLine: EditableLineCell | null) => void;
 }
-export declare function LineEditorComponent({ scale, editableLineMap, activeEditableEdge, updateCurActiveEditableEdge, }: LineEditorComponentProps): JSX.Element | null;
+export declare function LineEditorComponent({ scale, editableLineMap, activeEditableLine, updateCurActiveEditableLine, }: LineEditorComponentProps): JSX.Element | null;

package/dist-types/draw-canvas/constants.d.ts

@@ -9,6 +9,7 @@ export declare const DEFAULT_SCALE_RANGE_MIN = 0.5;
 export declare const DEFAULT_SCALE_RANGE_MAX = 2;
 export declare const DEFAULT_LINE_STROKE_COLOR = "gray";
 export declare const DEFAULT_LINE_STROKE_WIDTH = 1;
+export declare const DEFAULT_DECORATOR_LINE_STROKE_COLOR = "rgba(73, 126, 255, 0.7)";
 export declare const DEFAULT_LINE_INTERACT_STROKE_WIDTH = 15;
 export declare const DEFAULT_LINE_INTERACT_SHOW_START_ARROW = false;
 export declare const DEFAULT_LINE_INTERACT_SHOW_END_ARROW = true;

package/dist-types/draw-canvas/decorators/DecoratorLine.d.ts

@@ -0,0 +1,3 @@
+import type { BasicDecoratorProps } from "../interfaces";
+export type DecoratorLineProps = Pick<BasicDecoratorProps, "cell" | "active" | "lineConfMap" | "editableLineMap">;
+export declare function DecoratorLine({ cell, active, lineConfMap, editableLineMap, }: DecoratorLineProps): JSX.Element | null;

package/dist-types/draw-canvas/decorators/DecoratorLine.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/draw-canvas/decorators/DecoratorRect.d.ts

@@ -0,0 +1,3 @@
+import type { BasicDecoratorProps } from "../interfaces";
+export type DecoratorRectProps = Omit<BasicDecoratorProps, "lineConfMap" | "editableLineMap">;
+export declare function DecoratorRect({ cell, transform, readOnly, layout, view, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, }: DecoratorRectProps): JSX.Element;

package/dist-types/draw-canvas/decorators/DecoratorRect.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/draw-canvas/decorators/index.d.ts

@@ -1,2 +1,2 @@
 import type { BasicDecoratorProps } from "../interfaces";
-export declare function DecoratorComponent({ cell, view, transform, readOnly, layout, layoutOptions, activeTarget, cells, onCellResizing, onCellResized, onSwitchActiveTarget, onDecoratorTextEditing, onDecoratorTextChange, }: BasicDecoratorProps): JSX.Element | null;
+export declare function DecoratorComponent({ cell, view, transform, readOnly, layout, layoutOptions, active, activeTarget, cells, lineConfMap, editableLineMap, onCellResizing, onCellResized, onSwitchActiveTarget, onDecoratorTextEditing, onDecoratorTextChange, }: BasicDecoratorProps): JSX.Element | null;

package/dist-types/draw-canvas/index.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import type { UseSingleBrickConf } from "@next-core/react-runtime";
 import "@next-core/theme";
-import type { PositionTuple, RangeTuple, SizeTuple, TransformLiteral } from "../diagram/interfaces";
-import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail, LayoutType, LayoutOptions, LineConnecterConf, Direction, LineSettings } from "./interfaces";
-import type { EdgeViewChangePayload, MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
+import type { NodePosition, PositionTuple, RangeTuple, SizeTuple, TransformLiteral } from "../diagram/interfaces";
+import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail, LayoutType, LayoutOptions, LineConnecterConf, Direction, LineSettings, DecoratorView, DecoratorLineView } from "./interfaces";
+import type { DecoratorViewChangePayload, EdgeViewChangePayload, MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
 export interface EoDrawCanvasProps {
     cells: InitialCell[] | undefined;
     layout: LayoutType;
@@ -40,6 +40,18 @@ export interface DropDecoratorInfo {
     position: PositionTuple;
     text?: string;
     direction?: Direction;
+    /**
+     * Line decorator only: setting initial source position related to (0, 0)
+     * @default {x:-30,y:30}
+     */
+    source?: NodePosition;
+    /**
+     * Line decorator only: setting initial source position related to (0, 0)
+     * @default {x:30,y:-30}
+     */
+    target?: NodePosition;
+    /** Override decorator view settings */
+    view?: DecoratorView & DecoratorLineView;
 }
 export interface AddNodeInfo {
     id: NodeId;
@@ -140,7 +152,7 @@ export declare class EoDrawCanvas extends ReactNextElement implements EoDrawCanv
      */
     accessor doNotResetActiveTargetOutsideCanvas: boolean | undefined;
     dropNode({ id, position, size, data, useBrick, }: DropNodeInfo): Promise<NodeCell | null>;
-    dropDecorator({ position, decorator, text, direction, }: DropDecoratorInfo): Promise<DecoratorCell | null>;
+    dropDecorator({ position, decorator, text, direction, source, target, view, }: DropDecoratorInfo): Promise<DecoratorCell | null>;
     addNodes(nodes: AddNodeInfo[]): Promise<NodeCell[]>;
     addEdge({ source, target, data }: AddEdgeInfo): Promise<EdgeCell>;
     manuallyConnectNodes(source: NodeId): Promise<ConnectNodesDetail>;
@@ -164,6 +176,7 @@ export interface EoDrawCanvasComponentProps extends EoDrawCanvasProps {
     onEdgeAdd(detail: ConnectNodesDetail): void;
     onEdgeViewChange(detail: EdgeViewChangePayload): void;
     onDecoratorTextChange(detail: DecoratorTextChangeDetail): void;
+    onDecoratorViewChange(detail: DecoratorViewChangePayload): void;
     onContainerContainerChange(detail: MoveCellPayload[]): void;
     onScaleChange(scale: number): void;
 }

package/dist-types/draw-canvas/interfaces.d.ts

@@ -6,7 +6,6 @@ import type { SYMBOL_FOR_SIZE_INITIALIZED, SYMBOL_FOR_LAYOUT_INITIALIZED } from
 export type Cell = NodeCell | EdgeCell | DecoratorCell;
 export type BrickCell = NodeBrickCell;
 export type NodeCell = NodeBrickCell;
-export type EdgeCell = BaseEdgeCell;
 export type NodeBrickCell = BaseBrickCell & BaseNodeCell;
 export type NodeId = string;
 export interface BaseBrickCell extends BaseCell {
@@ -21,13 +20,13 @@ export interface BaseNodeCell extends BaseCell {
     [SYMBOL_FOR_SIZE_INITIALIZED]?: boolean;
     [SYMBOL_FOR_LAYOUT_INITIALIZED]?: boolean;
 }
-export interface BaseEdgeCell extends BaseCell {
+export interface EdgeCell extends BaseCell {
     type: "edge";
     source: NodeId;
     target: NodeId;
     view?: EdgeView;
 }
-export type DecoratorType = "text" | "area" | "container";
+export type DecoratorType = "text" | "area" | "container" | "rect" | "line";
 export type Direction = "top" | "right" | "bottom" | "left";
 export interface DecoratorCell extends BaseCell {
     type: "decorator";
@@ -35,6 +34,10 @@ export interface DecoratorCell extends BaseCell {
     id: NodeId;
     view: DecoratorView;
 }
+export interface LineDecoratorCell extends Omit<DecoratorCell, "view"> {
+    decorator: "line";
+    view: DecoratorLineView;
+}
 export interface BaseCell {
     type: "node" | "edge" | "decorator";
     data?: unknown;
@@ -44,9 +47,21 @@ export interface NodeView extends InitialNodeView {
     height: number;
 }
 export interface DecoratorView extends NodeView {
+    /** 用于文本装饰器和容器装饰器 */
     text?: string;
+    /** 设置容器装饰器的文本位置 */
     direction?: Direction;
+    vertices?: NodePosition[] | null;
+}
+export interface DecoratorLineView extends NodeView, BaseEdgeLineConf {
+    source: NodePosition;
+    target: NodePosition;
+    vertices?: NodePosition[] | null;
+    exitPosition?: undefined;
+    entryPosition?: undefined;
 }
+export type EditableLineCell = EdgeCell | DecoratorCell;
+export type EditableLineView = EdgeView | DecoratorLineView;
 export interface InitialNodeView {
     x: number;
     y: number;
@@ -170,8 +185,11 @@ export interface BasicDecoratorProps {
     layout?: LayoutType;
     view: DecoratorView;
     layoutOptions?: LayoutOptions;
+    active?: boolean;
     activeTarget: ActiveTarget | null | undefined;
     cells: Cell[];
+    lineConfMap: WeakMap<EditableLineCell, ComputedEdgeLineConf>;
+    editableLineMap: WeakMap<EditableLineCell, EditableLine>;
     onCellResizing?(info: ResizeCellPayload): void;
     onCellResized?(info: ResizeCellPayload): void;
     onSwitchActiveTarget?(activeTarget: ActiveTarget | null): void;
@@ -208,7 +226,7 @@ export interface ConnectNodesDetail {
 }
 export interface DecoratorTextChangeDetail {
     id: string;
-    view: DecoratorView;
+    view: DecoratorView | DecoratorLineView;
 }
 export type LayoutType = "manual" | "force" | "dagre" | undefined;
 export type LayoutOptions = LayoutOptionsManual | LayoutOptionsDagre | LayoutOptionsForce;
@@ -296,7 +314,7 @@ export interface LineEditorStateOfEndPoint {
     from: PositionTuple;
 }
 export interface LineEditorStateOfControl {
-    type: "control";
+    type: "control" | "corner" | "break";
     offset: PositionTuple;
     from: PositionTuple;
     control: ControlPoint;
@@ -318,16 +336,23 @@ export type BiDirection = "ns" | "ew";
  * ```
  */
 export interface ControlPoint extends NodePosition {
-    direction: BiDirection;
+    type: "control" | "corner" | "break";
+    direction?: BiDirection;
     index: number;
 }
-export interface EditableLine {
+export type EditableLine = EditableEdgeLine | EditableDecoratorLine;
+export interface EditableEdgeLine {
     edge: EdgeCell;
     points: NodePosition[];
     source: NodeBrickCell | DecoratorCell;
     target: NodeBrickCell | DecoratorCell;
     parallelGap: number;
 }
+export interface EditableDecoratorLine {
+    decorator: DecoratorCell;
+    points: NodePosition[];
+    parallelGap: number;
+}
 export type PositionAndAngle = [
     x: number,
     y: number,

package/dist-types/draw-canvas/processors/asserts.d.ts

@@ -1,4 +1,4 @@
-import type { Cell, DecoratorCell, EdgeCell, InitialCell, InitialNodeCell, LayoutType, LineType, NodeCell } from "../interfaces";
+import type { Cell, DecoratorCell, EdgeCell, EditableEdgeLine, EditableLine, InitialCell, InitialNodeCell, LayoutType, LineDecoratorCell, LineType, NodeCell } from "../interfaces";
 import { MoveCellPayload } from "../reducers/interfaces";
 export declare function isNodeCell(cell: Cell | MoveCellPayload): cell is NodeCell;
 export declare function isDecoratorCell(cell: Cell): cell is DecoratorCell;
@@ -10,5 +10,8 @@ export declare function isEdgeSide(cell: Cell, allowEdgeToArea: boolean | undefi
 export declare function isNodeOrTextDecoratorCell(cell: Cell | MoveCellPayload): cell is NodeCell | DecoratorCell;
 export declare function isTextDecoratorCell(cell: Cell): cell is DecoratorCell;
 export declare function isContainerDecoratorCell(cell: Cell | MoveCellPayload): cell is DecoratorCell;
+export declare function isRectDecoratorCell(cell: Cell | MoveCellPayload): cell is DecoratorCell;
+export declare function isLineDecoratorCell(cell: Cell | LineDecoratorCell | MoveCellPayload): cell is LineDecoratorCell;
 export declare function isNoManualLayout(layout: LayoutType): boolean;
 export declare function isStraightType(type: LineType | undefined): type is "straight" | undefined;
+export declare function isEditableEdgeLine(line: EditableLine): line is EditableEdgeLine;

package/dist-types/draw-canvas/processors/handleMouseDown.d.ts

@@ -1,6 +1,6 @@
-import type { ActiveTarget, Cell, LayoutOptions, LayoutType, BaseEdgeCell } from "../interfaces";
+import type { ActiveTarget, Cell, LayoutOptions, LayoutType, EditableLineCell } from "../interfaces";
 import type { MoveCellPayload, ResizeCellPayload } from "../reducers/interfaces";
-export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, layout, layoutOptions, activeTarget, cells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, updateCurActiveEditableEdge, }: {
+export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, layout, layoutOptions, activeTarget, cells, onCellsMoving, onCellsMoved, onCellResizing, onCellResized, onSwitchActiveTarget, updateCurActiveEditableLine, }: {
     action: "move" | "resize";
     cell: Cell;
     scale: number;
@@ -13,5 +13,5 @@ export declare function handleMouseDown(event: MouseEvent, { action, cell, scale
     onCellResizing?(info: ResizeCellPayload): void;
     onCellResized?(info: ResizeCellPayload): void;
     onSwitchActiveTarget?(activeTarget: ActiveTarget | null): void;
-    updateCurActiveEditableEdge?: (activeEditableEdge: BaseEdgeCell | null) => void;
+    updateCurActiveEditableLine?: (activeEditableLine: EditableLineCell | null) => void;
 }): void;

package/dist-types/draw-canvas/reducers/interfaces.d.ts

@@ -1,10 +1,10 @@
-import type { PositionTuple, SizeTuple } from "../../diagram/interfaces";
-import type { Cell, DecoratorCell, DecoratorType, EdgeCell, NodeCell, NodeId } from "../interfaces";
+import type { NodePosition, PositionTuple, SizeTuple } from "../../diagram/interfaces";
+import type { Cell, DecoratorCell, DecoratorLineView, DecoratorType, DecoratorView, EdgeCell, NodeCell, NodeId } from "../interfaces";
 export interface DrawCanvasState {
     cells: Cell[];
     layoutKey: number;
 }
-export type DrawCanvasAction = DropNodeAction | DropDecoratorAction | AddNodeAction | AddEdgeAction | ChangeEdgeViewAction | MoveCellsAction | ResizeCellAction | UpdateCellsAction | UpdateNodeSizeAction;
+export type DrawCanvasAction = DropNodeAction | DropDecoratorAction | AddNodeAction | AddEdgeAction | ChangeEdgeViewAction | ChangeDecoratorViewAction | MoveCellsAction | ResizeCellAction | UpdateCellsAction | UpdateNodeSizeAction;
 export interface DropNodeAction {
     type: "drop-node";
     payload: NodeCell;
@@ -25,6 +25,10 @@ export interface ChangeEdgeViewAction {
     type: "change-edge-view";
     payload: EdgeViewChangePayload;
 }
+export interface ChangeDecoratorViewAction {
+    type: "change-decorator-view";
+    payload: DecoratorViewChangePayload;
+}
 export interface MoveCellsAction {
     type: "move-cells";
     payload: MoveCellPayload[];
@@ -56,6 +60,9 @@ export interface MoveCellPayload {
     decorator?: DecoratorType;
     containerCell?: DecoratorCell;
     guideLines?: LineTuple[];
+    source?: NodePosition;
+    target?: NodePosition;
+    vertices?: NodePosition[];
 }
 export interface ResizeCellPayload {
     type: "node" | "decorator";
@@ -69,3 +76,7 @@ export interface MoveNodePayload {
     y: number;
 }
 export type EdgeViewChangePayload = Pick<EdgeCell, "source" | "target" | "view">;
+export type DecoratorViewChangePayload = {
+    id: NodeId;
+    view: DecoratorView | DecoratorLineView;
+};

package/dist-types/shared/canvas/processors/getEditingLinePoints.d.ts

@@ -1,5 +1,5 @@
 import type { NodePosition, PositionTuple } from "../../../diagram/interfaces";
 import type { HoverState } from "../../../draw-canvas/HoverStateContext";
-import type { EdgeCell, LineEditorState, LineEditorStateOfControl, EditableLine } from "../../../draw-canvas/interfaces";
-export declare function getEditingLinePoints(activeEditableEdge: EdgeCell | null, lineEditorState: LineEditorState | null, editableLineMap: WeakMap<EdgeCell, EditableLine>, connectLineTo: PositionTuple | null, hoverState: HoverState | null): NodePosition[] | null;
-export declare function getNewLineVertices(activeEditableEdge: EdgeCell, lineEditorState: LineEditorStateOfControl, editableLineMap: WeakMap<EdgeCell, EditableLine>, connectLineTo: PositionTuple): NodePosition[];
+import type { LineEditorState, LineEditorStateOfControl, EditableLine, EditableLineCell } from "../../../draw-canvas/interfaces";
+export declare function getEditingLinePoints(activeEditableLine: EditableLineCell | null, lineEditorState: LineEditorState | null, editableLineMap: WeakMap<EditableLineCell, EditableLine>, connectLineTo: PositionTuple | null, hoverState: HoverState | null): NodePosition[] | null;
+export declare function getNewLineVertices(activeEditableLine: EditableLineCell, lineEditorState: LineEditorStateOfControl, editableLineMap: WeakMap<EditableLineCell, EditableLine>, connectLineTo: PositionTuple): NodePosition[];

package/dist-types/shared/canvas/processors/getSmartLinePoints.d.ts

@@ -1,4 +1,6 @@
 import type { NodePosition } from "../../../diagram/interfaces";
-import type { EdgeView, NodeView } from "../../../draw-canvas/interfaces";
-export declare function getSmartLinePoints(sourceView: NodeView, targetView: NodeView, edgeView: EdgeView | undefined, parallelGap?: number): NodePosition[] | null;
+import type { EditableLineView, NodeView } from "../../../draw-canvas/interfaces";
+export declare function getSmartLinePoints(sourceView: NodeView, targetView: NodeView, lineView: EditableLineView | undefined, parallelGap?: number, 
+/** @default "edge" */
+cellType?: "edge" | "decorator"): NodePosition[] | null;
 export declare function simplifyVertices(exitPoint: NodePosition, vertices: NodePosition[], entryPoint: NodePosition): NodePosition[];

package/dist-types/shared/canvas/useEditableLineMap.d.ts

@@ -1,5 +1,5 @@
-import type { Cell, ComputedEdgeLineConf, EdgeCell, EditableLine } from "../../draw-canvas/interfaces";
+import type { Cell, ComputedEdgeLineConf, DecoratorCell, EdgeCell, EditableLine } from "../../draw-canvas/interfaces";
 export declare function useEditableLineMap({ cells, lineConfMap, }: {
     cells: Cell[];
-    lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>;
-}): WeakMap<import("../../draw-canvas/interfaces").BaseEdgeCell, EditableLine>;
+    lineConfMap: WeakMap<EdgeCell | DecoratorCell, ComputedEdgeLineConf>;
+}): WeakMap<EdgeCell | DecoratorCell, EditableLine>;

package/dist-types/shared/canvas/useLineMarkers.d.ts

@@ -1,4 +1,4 @@
-import type { Cell, ComputedEdgeLineConf, ComputedLineConnecterConf, EdgeCell, EdgeLineConf, LineConnecterConf, LineMarker } from "../../draw-canvas/interfaces";
+import type { Cell, ComputedEdgeLineConf, ComputedLineConnecterConf, EdgeLineConf, EditableLineCell, LineConnecterConf, LineMarker } from "../../draw-canvas/interfaces";
 import { LineMarkerConf } from "../../diagram/interfaces";
 export interface UseLineMarkersOptions {
     cells: Cell[];
@@ -7,7 +7,7 @@ export interface UseLineMarkersOptions {
     lineConnector?: LineConnecterConf | boolean;
 }
 export declare function useLineMarkers({ cells, defaultEdgeLines, markerPrefix, lineConnector, }: UseLineMarkersOptions): {
-    lineConfMap: WeakMap<EdgeCell, ComputedEdgeLineConf>;
+    lineConfMap: WeakMap<EditableLineCell, ComputedEdgeLineConf>;
     lineConnectorConf: ComputedLineConnecterConf | null;
     markers: LineMarker[];
 };

package/docs/eo-draw-canvas.md

@@ -29,6 +29,17 @@
                 height: 300,
               },
             },
+            {
+              type: "decorator",
+              id: "rect-1",
+              decorator: "rect",
+              view: {
+                x: 10,
+                y: 20,
+                width: 400,
+                height: 300,
+              },
+            },
             {
               type: "decorator",
               id: "container-1",
@@ -256,6 +267,8 @@
           dataSource:
             - area
             - text
+            - line
+            - rect
             - container.top
             - container.right
             - container.bottom
@@ -280,21 +293,26 @@
                   - target: eo-draw-canvas
                     method: dropDecorator
                     args:
-                      - position: <% EVENT.detail %>
-                        decorator: <% ITEM.split(".")[0] %>
-                        text: <% ITEM %>
-                        direction: <% ITEM.split(".").pop() %>
+                      - |
+                        <%
+                          ITEM === "line"
+                            ? {
+                                position: EVENT.detail,
+                                decorator: ITEM.split(".")[0],
+                              }
+                            : {
+                                position: EVENT.detail,
+                                decorator: ITEM.split(".")[0],
+                                text: _.upperFirst(ITEM),
+                                direction: ITEM.split(".").pop(),
+                              }
+                        %>
                     callback:
                       success:
-                        if: <% EVENT.detail %>
-                        then:
-                          # action: message.success
-                          # args:
-                          #   - <% JSON.stringify(EVENT.detail) %>
-                        else:
-                          action: message.warn
-                          args:
-                            - Unexpected drop position
+                        if: <% !EVENT.detail %>
+                        action: message.warn
+                        args:
+                          - Unexpected drop position
     - brick: div
       properties:
         style:
@@ -389,6 +407,11 @@
               args:
                 - |
                   <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>
+            decorator.view.change:
+              action: message.info
+              args:
+                - |
+                  <% `Decorator view changed: ${JSON.stringify(EVENT.detail)}` %>
             decorator.text.change:
               action: message.info
               args:
@@ -638,6 +661,32 @@
       value: |
         <%
           [
+            {
+              type: "decorator",
+              decorator: "line",
+              id: "line-1",
+              view: {
+                source: {
+                  x: 200,
+                  y: 200,
+                },
+                target: {
+                  x: 250,
+                  y: 150,
+                },
+                // type: "polyline",
+                vertices: [
+                  {
+                    x: 180,
+                    y: 125,
+                  },
+                ],
+                markers: [{
+                  placement: "end",
+                  type: "arrow",
+                }],
+              },
+            },
             {
               type: "edge",
               source: "X",
@@ -1096,15 +1145,10 @@
                         text: '<% ITEM === "text" ? "Text" : undefined %>'
                     callback:
                       success:
-                        if: <% EVENT.detail %>
-                        then:
-                          # action: message.success
-                          # args:
-                          #   - <% JSON.stringify(EVENT.detail) %>
-                        else:
-                          action: message.warn
-                          args:
-                            - Unexpected drop position
+                        if: <% !EVENT.detail %>
+                        action: message.warn
+                        args:
+                          - Unexpected drop position
     - brick: div
       properties:
         style:
@@ -1487,15 +1531,10 @@
                         text: '<% ITEM === "text" ? "Text" : undefined %>'
                     callback:
                       success:
-                        if: <% EVENT.detail %>
-                        then:
-                          # action: message.success
-                          # args:
-                          #   - <% JSON.stringify(EVENT.detail) %>
-                        else:
-                          action: message.warn
-                          args:
-                            - Unexpected drop position
+                        if: <% !EVENT.detail %>
+                        action: message.warn
+                        args:
+                          - Unexpected drop position
     - brick: div
       properties:
         style:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/diagram",
   "repository": {
     "type": "git",
@@ -41,5 +41,5 @@
   "peerDependencies": {
     "@next-bricks/basic": "*"
   },
-  "gitHead": "d84e487582478488a11fcaa5e9827efb49c174f0"
+  "gitHead": "4bf3a21b3ba8b2ad8a79e373d967afc5aa26c227"
 }