@logicflow/core 1.0.0-alpha.2 → 1.0.0-alpha.6

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,44 +1,15 @@
 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;
 };
-declare type StyleAttribute = {
-    width: number;
-    height: number;
-    fill: string;
-    fillOpacity?: number;
-    strokeWidth?: number;
-    stroke: string;
-    strokeOpacity?: number;
-    opacity?: number;
-    outlineColor?: string;
-    [key: string]: any;
-};
-export declare type NodeAttributes = {
-    id: string;
-    properties: Record<string, any>;
-    type: string;
-    x: number;
-    y: number;
-    isSelected: boolean;
-    isHovered: boolean;
-    text: {
-        x: number;
-        y: number;
-        value: string;
-        [key: string]: any;
-    };
-} & StyleAttribute;
 export default abstract class BaseNode extends Component<IProps, Istate> {
     static getModel(defaultModel: any): any;
     stepDrag: StepDrag;
@@ -47,14 +18,7 @@ export default abstract class BaseNode extends Component<IProps, Istate> {
     clickTimer: number;
     constructor(props: any);
     abstract getShape(): any;
-    getShapeStyle(): StyleAttribute;
-    getAttributes(): NodeAttributes;
-    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,42 +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: Record<string, any>;
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            [key: string]: any;
-            x: number;
-            y: number;
-            value: string;
-        };
-    };
     getShape(): h.JSX.Element;
 }

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

@@ -1,42 +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: Record<string, any>;
-        type: string;
-        x: number;
-        y: number;
-        isSelected: boolean;
-        isHovered: boolean;
-        text: {
-            [key: string]: any;
-            x: number;
-            y: number;
-            value: string;
-        };
-    };
     getShape(): h.JSX.Element;
 }

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

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

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

@@ -2,9 +2,29 @@ import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class HtmlNode extends BaseNode {
     ref: HTMLElement;
+    currrentProperties: 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,23 +1,5 @@
 import { h } from 'preact';
-import BaseNode, { NodeAttributes } from './BaseNode';
-import { PointTuple } from '../../type';
-declare type PolygonNodeAttributes = {
-    points: PointTuple[];
-} & NodeAttributes;
+import BaseNode from './BaseNode';
 export default class PolygonNode extends BaseNode {
-    getShapeStyle(): {
-        points: PointTuple[];
-        width: number;
-        height: number;
-        fill: string;
-        fillOpacity?: number;
-        strokeWidth?: number;
-        stroke: string;
-        strokeOpacity?: number;
-        opacity?: number;
-        outlineColor?: string;
-    };
-    getAttributes(): PolygonNodeAttributes;
     getShape(): h.JSX.Element;
 }
-export {};

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

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

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

@@ -2,5 +2,6 @@ import { h } from 'preact';
 import BaseNode from './BaseNode';
 export default class TextNode extends BaseNode {
     getBackgroud(): h.JSX.Element;
+    getText(): any;
     getShape(): h.JSX.Element;
 }

package/types/view/overlay/BackgroundOverlay.d.ts

@@ -1,39 +1,28 @@
 import { h, Component } from 'preact';
+/**
+ * 背景配置, 支持css属性配置
+ * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
+ * @example
+ * {
+ *  backgroundImage: "url('./img/grid.svg')",
+    backgroundRepeat: 'repeat',
+ * }
+ */
 export declare type BackgroundConfig = {
-    image?: string;
-    color?: string;
-    repeat?: string;
-    position?: string;
-    size?: string;
-    opacity?: number;
+    /**
+     * 背景图片地址
+     */
+    backgroundImage?: string;
+    /**
+     * 是否重复
+     */
+    backgroundRepeat?: string;
+    [key: string]: any;
 };
 declare type IProps = {
     background: BackgroundConfig;
 };
 export default class BackgroundOverlay extends Component<IProps> {
-    getAttributes(): {
-        color: string;
-        opacity: number;
-        image: string;
-        repeat?: undefined;
-        position?: undefined;
-        size?: undefined;
-    } | {
-        image: string;
-        repeat: string;
-        position: string;
-        size: string;
-        opacity: number;
-        color?: undefined;
-    } | {
-        color?: undefined;
-        opacity?: undefined;
-        image?: undefined;
-        repeat?: undefined;
-        position?: undefined;
-        size?: undefined;
-    };
-    getShape(): h.JSX.Element;
     render(): h.JSX.Element;
 }
 export {};

package/types/view/overlay/CanvasOverlay.d.ts

@@ -1,11 +1,9 @@
 import { h, Component } from 'preact';
 import GraphModel from '../../model/GraphModel';
 import { StepDrag } from '../../util/drag';
-import EventEmitter from '../../event/eventEmitter';
 import Dnd from '../behavior/DnD';
 declare type IProps = {
     graphModel: GraphModel;
-    eventCenter: EventEmitter;
     dnd: Dnd;
 };
 declare type Istate = {

package/types/view/overlay/OutlineOverlay.d.ts

@@ -7,7 +7,7 @@ declare type IProps = {
     graphModel: GraphModel;
 };
 export default class OutlineOverlay extends Component<IProps> {
-    getNodeOutline(): any[];
+    getNodesOutline(): any[];
     getEdgeOutline(): any[];
     getLineOutline(line: LineEdgeModel): h.JSX.Element;
     getPolylineOutline(polyline: PolylineEdgeModel): h.JSX.Element;

package/dist/logic-flow.es.js

@@ -1,74 +0,0 @@
-
-/**
- * 由于logicflow本身基于preact、mobx、mobx-react编写。
- * 如果导出es module的形式，会在react项目中mobx-react会错误的使用react渲染。
- * 所以logicflow暂时不提供完善导出es module形式。
- */
-import {
-  LogicFlow,
-  LogicFlowUtil,
-  h,
-  observer,
-  BaseNode,
-  RectNode,
-  CircleNode,
-  PolygonNode,
-  DiamondNode,
-  EllipseNode,
-  TextNode,
-  HtmlNode,
-  BaseEdge,
-  LineEdge,
-  PolylineEdge,
-  BezierEdge,
-  BaseEdgeModel,
-  BezierEdgeModel,
-  LineEdgeModel,
-  PolylineEdgeModel,
-  BaseNodeModel,
-  CircleNodeModel,
-  DiamondNodeModel,
-  EllipseNodeModel,
-  PolygonNodeModel,
-  RectNodeModel,
-  TextNodeModel,
-  HtmlNodeModel,
-  GraphModel,
-  Arrow,
-  Keyboard,
-} from './logic-flow';
-
-export {
-  LogicFlow,
-  LogicFlowUtil,
-  h,
-  observer,
-  BaseNode,
-  RectNode,
-  CircleNode,
-  PolygonNode,
-  DiamondNode,
-  EllipseNode,
-  TextNode,
-  HtmlNode,
-  BaseEdge,
-  LineEdge,
-  PolylineEdge,
-  BezierEdge,
-  BaseEdgeModel,
-  BezierEdgeModel,
-  LineEdgeModel,
-  PolylineEdgeModel,
-  BaseNodeModel,
-  CircleNodeModel,
-  DiamondNodeModel,
-  EllipseNodeModel,
-  PolygonNodeModel,
-  RectNodeModel,
-  TextNodeModel,
-  HtmlNodeModel,
-  GraphModel,
-  Arrow,
-  Keyboard,
-}
-export default LogicFlow;