@logicflow/core 1.0.0-alpha.0 → 1.0.0-alpha.12

package/types/util/theme.d.ts

@@ -1,173 +1,2 @@
-export declare const updateTheme: (style: any) => {
-    rect: {
-        width: number;
-        height: number;
-        radius: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    circle: {
-        r: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    diamond: {
-        rx: number;
-        ry: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    ellipse: {
-        rx: number;
-        ry: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    polygon: {
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    anchor: {
-        stroke: string;
-        strokeWidth: number;
-        r: number;
-        fill: string;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    text: {
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-    };
-    nodeText: {
-        autoWrap: boolean;
-        lineHeight: number;
-        wrapPadding: string;
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-    };
-    edgeText: {
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-        background: {
-            fill: string;
-            height: number;
-            stroke: string;
-            radius: number;
-        };
-        hoverBackground: any;
-        autoWrap: boolean;
-        lineHeight: number;
-        wrapPadding: string;
-    };
-    line: {
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    polyline: {
-        offset: number;
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    bezier: {
-        offset: number;
-        adjustLineColor: string;
-        adjustAnchorStroke: string;
-        adjustAnchorFill: string;
-        adjustAnchorFillOpacity: number;
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    arrow: {
-        offset: number;
-        verticalLength: number;
-    };
-    anchorLine: {
-        stroke: string;
-        strokeWidth: number;
-        strokeDasharray: string;
-    };
-    anchorHover: {
-        fill: string;
-        fillOpacity: number;
-        stroke: string;
-        strokeWidth: number;
-        r: number;
-    };
-    snapline: {
-        stroke: string;
-        strokeWidth: number;
-    };
-    edgeAdjust: {
-        r: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: string;
-    };
-};
+import { Theme } from '../constant/DefaultTheme';
+export declare const updateTheme: (style: Theme) => Theme;

package/types/view/Anchor.d.ts

@@ -1,7 +1,6 @@
 import { h, Component } from 'preact';
 import BaseNodeModel, { ConnectRuleResult } from '../model/node/BaseNodeModel';
 import GraphModel from '../model/GraphModel';
-import EventEmitter from '../event/eventEmitter';
 import { AnchorConfig } from '../type';
 declare type TargetNodeId = string;
 interface IProps {
@@ -13,7 +12,6 @@ interface IProps {
     hoverStyle?: Record<string, any>;
     edgeStyle?: Record<string, any>;
     anchorIndex: number;
-    eventCenter: EventEmitter;
     graphModel: GraphModel;
     nodeModel: BaseNodeModel;
     nodeDraging: boolean;

package/types/view/Graph.d.ts

@@ -2,7 +2,6 @@ import { Component, h } from 'preact';
 import GraphModel from '../model/GraphModel';
 import Tool from '../tool';
 import * as Options from '../options';
-import EventEmitter from '../event/eventEmitter';
 import DnD from './behavior/DnD';
 import BaseEdgeModel from '../model/edge/BaseEdgeModel';
 import BaseNodeModel from '../model/node/BaseNodeModel';
@@ -11,13 +10,12 @@ declare type IProps = {
     getView: (type: string) => typeof Component;
     tool: Tool;
     options: Options.Definition;
-    eventCenter: EventEmitter;
     dnd: DnD;
     snaplineModel: SnaplineModel;
     graphModel: GraphModel;
 };
 declare class Graph extends Component<IProps> {
-    getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, eventCenter: EventEmitter, overlay?: string): h.JSX.Element;
+    getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, overlay?: string): h.JSX.Element;
     render(): h.JSX.Element;
 }
 export default Graph;

package/types/view/basic-shape/Path.d.ts

@@ -1,15 +1,7 @@
 import { h } from 'preact';
 declare type IProps = {
     d: string;
-    strokeWidth: number;
-    stroke: string;
-    fill: string;
-    strokeDasharray?: string;
+    [key: string]: any;
 };
 declare function Path(props: IProps): h.JSX.Element;
-declare namespace Path {
-    var defaultProps: {
-        strokeDasharray: string;
-    };
-}
 export default Path;

package/types/view/basic-shape/Rect.d.ts

@@ -3,16 +3,12 @@ import * as type from '../../type';
 declare type IProps = {
     className?: string;
     radius?: number;
-    stroke?: string;
-    strokeDasharray?: string;
 } & type.Point & type.Size;
 declare function Rect(props: IProps): h.JSX.Element;
 declare namespace Rect {
     var defaultProps: {
-        radius: number;
-        stroke: string;
-        strokeDasharray: string;
         className: string;
+        radius: string;
     };
 }
 export default Rect;

package/types/view/behavior/DnD.d.ts

@@ -1,9 +1,6 @@
 import LogicFlow from '../../LogicFlow';
 import { BaseNodeModel } from '../../model';
 import { TextConfig } from '../../type';
-export declare type DndOptions = {
-    validate: () => boolean;
-};
 export declare type NewNodeConfig = {
     type: string;
     text?: TextConfig | string;
@@ -12,7 +9,6 @@ export declare type NewNodeConfig = {
 export default class Dnd {
     nodeConfig: NewNodeConfig;
     lf: LogicFlow;
-    options: DndOptions;
     fakerNode: BaseNodeModel;
     constructor(params: any);
     clientToLocalPoint({ x, y }: {

package/types/view/edge/AdjustPoint.d.ts

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import EventEmitter from '../../event/eventEmitter';
 import { BaseEdgeModel } from '../../model/edge';
 import GraphModel from '../../model/GraphModel';
 import { Point } from '../../type';
@@ -8,7 +7,6 @@ interface IProps {
     y: number;
     type: AdjustType;
     id?: string;
-    eventCenter: EventEmitter;
     graphModel: GraphModel;
     edgeModel: BaseEdgeModel;
 }
@@ -37,7 +35,7 @@ export default class AdjustPoint extends Component<IProps, IState> {
     }) => void;
     onDragEnd: () => void;
     recoveryEdge: () => void;
-    getAdjustPointStyle: () => any;
+    getAdjustPointStyle: () => import("../../constant/DefaultTheme").CircleTheme;
     render(): h.JSX.Element;
 }
 export {};

package/types/view/edge/Arrow.d.ts

@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 import { ArrowInfo } from '../../type/index';
-declare type ArrowStyle = {
-    stroke: string;
-    fill: string;
+export declare type ArrowStyle = {
+    stroke?: string;
+    fill?: string;
     strokeWidth?: number;
     offset: number;
     verticalLength: number;

package/types/view/edge/BaseEdge.d.ts

@@ -1,39 +1,21 @@
 import { h, Component } from 'preact';
+import { ArrowStyle } from './Arrow';
 import BaseEdgeModel from '../../model/edge/BaseEdgeModel';
 import GraphModel from '../../model/GraphModel';
-import EventEmitter from '../../event/eventEmitter';
 import { ArrowInfo } from '../../type/index';
 declare type IProps = {
     model: BaseEdgeModel;
     graphModel: GraphModel;
-    eventCenter: EventEmitter;
 };
 export default class BaseEdge extends Component<IProps> {
     startTime: number;
     contextMenuTime: number;
     clickTimer: number;
-    getAttributes(): {
-        stroke: string;
-        strokeWidth: number;
-        strokeOpacity: number;
-        strokeDashArray: string;
-        isSelected: boolean;
-        isHovered: boolean;
-        hoverStroke: string;
-        selectedStroke: string;
-        properties: {};
-    };
     getShape(): void;
     getTextStyle(): void;
     getText(): "" | h.JSX.Element;
     getArrowInfo(): ArrowInfo;
-    getArrowStyle(): {
-        stroke: string;
-        strokeWidth: number;
-        fill: string;
-        offset: any;
-        verticalLength: any;
-    };
+    getArrowStyle(): ArrowStyle;
     getArrow(): h.JSX.Element;
     getAdjustPoints(): h.JSX.Element;
     getAppendWidth(): h.JSX.Element;

package/types/view/edge/BezierEdge.d.ts

@@ -2,18 +2,6 @@ import { h } from 'preact';
 import BaseEdge from './BaseEdge';
 import { ArrowInfo } from '../../type/index';
 export default class BezierEdge extends BaseEdge {
-    getAttributes(): {
-        path: string;
-        stroke: string;
-        strokeWidth: number;
-        strokeOpacity: number;
-        strokeDashArray: string;
-        isSelected: boolean;
-        isHovered: boolean;
-        hoverStroke: string;
-        selectedStroke: string;
-        properties: {};
-    };
     getEdge(): h.JSX.Element;
     getShape(): h.JSX.Element;
     getAppendWidth(): h.JSX.Element;

package/types/view/edge/LineEdge.d.ts

@@ -1,19 +1,6 @@
 import { h } from 'preact';
 import BaseEdge from './BaseEdge';
 export default class LineEdge extends BaseEdge {
-    getAttributes(): {
-        startPoint: any;
-        endPoint: any;
-        stroke: string;
-        strokeWidth: number;
-        strokeOpacity: number;
-        strokeDashArray: string;
-        isSelected: boolean;
-        isHovered: boolean;
-        hoverStroke: string;
-        selectedStroke: string;
-        properties: {};
-    };
     getEdge(): h.JSX.Element;
     getShape(): h.JSX.Element;
     getAppendWidth(): h.JSX.Element;

package/types/view/edge/PolylineEdge.d.ts

@@ -22,18 +22,6 @@ export default class PolylineEdge extends BaseEdge {
     onDragEnd: () => void;
     beforeDragStart: (e: any, appendInfo: any) => void;
     getIsDraging: () => boolean;
-    getAttributes(): {
-        points: string;
-        stroke: string;
-        strokeWidth: number;
-        strokeOpacity: number;
-        strokeDashArray: string;
-        isSelected: boolean;
-        isHovered: boolean;
-        hoverStroke: string;
-        selectedStroke: string;
-        properties: {};
-    };
     getEdge(): h.JSX.Element;
     getShape(): h.JSX.Element;
     getArrowInfo(): ArrowInfo;

package/types/view/node/BaseNode.d.ts

@@ -1,16 +1,14 @@
 import { h, Component } from 'preact';
 import GraphModel from '../../model/GraphModel';
 import BaseNodeModel from '../../model/node/BaseNodeModel';
-import EventEmitter from '../../event/eventEmitter';
 import { StepDrag } from '../../util/drag';
 declare type IProps = {
     model: BaseNodeModel;
     graphModel: GraphModel;
-    eventCenter: EventEmitter;
 };
 declare type Istate = {
-    isDraging: boolean;
     isHovered: boolean;
+    isDraging?: boolean;
 };
 export default abstract class BaseNode extends Component<IProps, Istate> {
     static getModel(defaultModel: any): any;
@@ -20,50 +18,7 @@ export default abstract class BaseNode extends Component<IProps, Istate> {
     clickTimer: number;
     constructor(props: any);
     abstract getShape(): any;
-    getShapeStyle(): {
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-    };
-    getAttributes(): {
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        id: string;
-        properties: {
-            [x: string]: any;
-        };
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            value: string;
-            x: number;
-            y: number;
-            draggable: boolean;
-            editable: boolean;
-        };
-    };
-    getProperties(): Record<string, any>;
-    getAnchorStyle(): Record<string, any>;
-    getAnchorHoverStyle(): Record<string, any>;
-    getNewEdgeStyle(): Record<string, any>;
     getAnchors(): h.JSX.Element[];
-    getTextStyle(): any;
     getText(): "" | h.JSX.Element;
     getStateClassName(): string;
     onDraging: ({ deltaX, deltaY }: {

package/types/view/node/CircleNode.d.ts

@@ -1,45 +1,5 @@
 import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class CircleNode extends BaseNode {
-    getShapeStyle(): {
-        r: number;
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-    };
-    getAttributes(): {
-        r: number;
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        id: string;
-        properties: {
-            [x: string]: any;
-        };
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            value: string;
-            x: number;
-            y: number;
-            draggable: boolean;
-            editable: boolean;
-        };
-    };
     getShape(): h.JSX.Element;
 }

package/types/view/node/DiamondNode.d.ts

@@ -1,45 +1,5 @@
 import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class DiamondNode extends BaseNode {
-    getShapeStyle(): {
-        points: import("../..").PointTuple[];
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-    };
-    getAttributes(): {
-        points: import("../..").PointTuple[];
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        id: string;
-        properties: {
-            [x: string]: any;
-        };
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            value: string;
-            x: number;
-            y: number;
-            draggable: boolean;
-            editable: boolean;
-        };
-    };
     getShape(): h.JSX.Element;
 }

package/types/view/node/EllipseNode.d.ts

@@ -1,34 +1,5 @@
 import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class EllipseNode extends BaseNode {
-    getAttributes(): {
-        rx: number;
-        ry: number;
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        id: string;
-        properties: {
-            [x: string]: any;
-        };
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            value: string;
-            x: number;
-            y: number;
-            draggable: boolean;
-            editable: boolean;
-        };
-    };
     getShape(): h.JSX.Element;
 }

package/types/view/node/HtmlNode.d.ts

@@ -2,9 +2,30 @@ import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class HtmlNode extends BaseNode {
     ref: HTMLElement;
+    currrentProperties: string;
+    preProperties: string;
     setRef: (dom: any) => void;
     get rootEl(): HTMLElement;
+    /**
+     * @overridable 支持重写
+     * 自定义HTML节点内容
+     * @param {HTMLElement} rootEl 自定义HTML节点内容可以挂载的dom节点
+     * @example
+     * class CustomHtmlNode extends HtmlNode {
+     *   setHtml(rootEl) {
+     *     const input = document.createElement('input');
+     *     rootEl.appendChild(input)
+     *   }
+     * }
+     */
     setHtml(rootEl: HTMLElement): void;
+    /**
+     * @overridable 支持重写
+     * 和react的shouldComponentUpdate类似，都是为了避免出发不必要的render.
+     * 但是这里不一样的地方在于，setHtml方法，我们只在properties发生变化了后再触发。
+     * 而x,y等这些坐标相关的方法发生了变化，不会再重新触发setHtml.
+     */
+    shouldUpdate(): boolean;
     componentDidMount(): void;
     componentDidUpdate(): void;
     getShape(): h.JSX.Element;

package/types/view/node/PolygonNode.d.ts

@@ -1,45 +1,5 @@
 import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class PolygonNode extends BaseNode {
-    getShapeStyle(): {
-        points: import("../..").PointTuple[];
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-    };
-    getAttributes(): {
-        points: import("../..").PointTuple[];
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity: number;
-        strokeWidth: number;
-        stroke: string;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        id: string;
-        properties: {
-            [x: string]: any;
-        };
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            value: string;
-            x: number;
-            y: number;
-            draggable: boolean;
-            editable: boolean;
-        };
-    };
     getShape(): h.JSX.Element;
 }