@logicflow/core 1.2.0-alpha.8 → 1.2.0-next.0

package/dist/style/index.css

@@ -37,7 +37,7 @@
   stroke-dashoffset: 100%;
   animation: dash 5s linear infinite;
 }
-@keyframes dash {
+@keyframes lf-dash {
   to {
     stroke-dashoffset: 0;
   }
@@ -196,3 +196,10 @@
 .lf-edge-adjust-point {
   cursor: move;
 }
+/*
+ * svg默认会多5px，强制全部设置为block
+ * @see https://stackoverflow.com/questions/41437423/difference-between-display-inline-and-block-on-svg-elements
+ */
+.lf-graph svg {
+  display: block;
+}

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@logicflow/core",
-  "version": "1.2.0-alpha.8",
+  "version": "1.2.0-next.0",
   "description": "LogicFlow core, to quickly build flowchart editor",
   "main": "dist/entry.js",
+  "module": "dist/logic-flow.js",
   "unpkg": "dist/logic-flow.min.js",
+  "sideEffects": true,
   "jsdelivr": "dist/logic-flow.min.js",
   "license": "Apache-2.0",
   "homepage": "http://logic-flow.org/",
@@ -17,12 +19,13 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --client-log-level warning --config scripts/webpack.config.dev.js",
     "clean": "rimraf dist lib esm cjs",
     "build": "npm run build:umd",
-    "build:umd": "cross-env NODE_ENV=production webpack --config scripts/webpack.config.build.js && cp -r src/style/ dist/style && cp scripts/entry.js dist",
+    "build:umd": "cross-env NODE_ENV=production webpack --config scripts/webpack.config.build.js && npm run copy",
     "build-analyse": "cross-env analyse=true npm run build",
     "types": "tsc -d --declarationDir ./tempTypes --outDir temp && rimraf types && mv ./tempTypes/src ./types && rimraf temp && rimraf tempTypes",
     "lint": "eslint . --ext .ts,.tsx",
     "publish-lib": "npm run types & npm run clean && npm run build && npm publish",
-    "publish-next": "npm run types & npm run clean && npm run build && npm publish --tag next"
+    "publish-next": "npm run types & npm run clean && npm run build && npm publish --tag next",
+    "copy": "node ./scripts/copy.js"
   },
   "files": [
     "dist",

package/types/LogicFlow.d.ts

@@ -19,14 +19,6 @@ export default class LogicFlow {
      * 只读：logicflow实例挂载的容器。
      */
     container: HTMLElement;
-    /**
-     * 只读：画布宽度
-     */
-    width: number;
-    /**
-     * 只读：画布高度
-     */
-    height: number;
     /**
      * 只读：控制整个logicflow画布的model
      */
@@ -133,8 +125,9 @@ export default class LogicFlow {
     setTheme(style: Theme): void;
     /**
      * 重新设置画布的宽高
+     * 不传会自动计算画布宽高
      */
-    resize(width: number, height: number): void;
+    resize(width?: number, height?: number): void;
     /**
      * 设置默认的边类型。
      * 也就是设置在节点直接有用户手动绘制的连线类型。
@@ -304,6 +297,7 @@ export default class LogicFlow {
      * @param properties 自定义属性
      */
     setProperties(id: string, properties: Object): void;
+    deleteProperty(id: string, key: string): void;
     /**
      * 获取元素的自定义属性
      * @param id 元素的id
@@ -337,7 +331,7 @@ export default class LogicFlow {
      * @param leftTopPoint 区域左上角坐标, dom层坐标
      * @param rightBottomPoint 区域右下角坐标，dom层坐标
      */
-    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple, wholeEdge?: boolean, wholeNode?: boolean): any[];
+    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple, wholeEdge?: boolean, wholeNode?: boolean, ignoreHideElement?: boolean): any[];
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。

package/types/constant/constant.d.ts

@@ -63,6 +63,7 @@ export declare enum EventType {
     ANCHOR_DRAGSTART = "anchor:dragstart",
     ANCHOR_DRAG = "anchor:drag",
     ANCHOR_DROP = "anchor:drop",
+    ANCHOR_DRAGEND = "anchor:dragend",
     BLANK_MOUSEDOWN = "blank:mousedown",
     BLANK_DRAGSTART = "blank:dragstart",
     BLANK_DRAG = "blank:drag",

package/types/model/BaseModel.d.ts

@@ -53,7 +53,14 @@ interface IBaseModel {
      * 元素是否被选中
      */
     isSelected: boolean;
+    /**
+     * 节点是否显示
+     */
     visible: boolean;
+    /**
+     * 节点是否可以通过getGraphData获取
+     */
+    virtual: boolean;
     /**
      * 元素堆叠是层级，默认情况下节点zIndex值为1，边zIndex为0。
      * todo：写完善

package/types/model/EditConfigModel.d.ts

@@ -69,11 +69,11 @@ export interface EditConfigInterface {
      */
     multipleSelectKey?: string;
     /**
-     * 拖动节点靠近画布边缘时，
+     * 拖动节点或者连线靠近画布边缘时，
      * 是否自动扩张画布.
      * 默认false。
      */
-    autoExpand?: string;
+    autoExpand?: boolean;
 }
 /**
  * 页面编辑配置

package/types/model/GraphModel.d.ts

@@ -53,6 +53,10 @@ declare class GraphModel {
      * @see todo docs link
      */
     idGenerator: (type?: string) => string;
+    /**
+     * 节点间连线、连线变更时的边的生成规则
+     */
+    edgeGenerator: Definition['edgeGenerator'];
     /**
      * 节点移动规则判断
      * 在节点移动的时候，会出发此数组中的所有规则判断
@@ -142,8 +146,9 @@ declare class GraphModel {
      * @param rightBottomPoint 表示区域右下角的点
      * @param wholeEdge 是否要整个边都在区域内部
      * @param wholeNode 是否要整个节点都在区域内部
+     * @param ignoreHideElement 是否忽略隐藏的节点
      */
-    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple, wholeEdge?: boolean, wholeNode?: boolean): any[];
+    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple, wholeEdge?: boolean, wholeNode?: boolean, ignoreHideElement?: boolean): any[];
     /**
      * 获取指定类型元素对应的Model
      */
@@ -417,7 +422,7 @@ declare class GraphModel {
     /**
      * 重新设置画布的宽高
      */
-    resize(width: number, height: number): void;
+    resize(width?: number, height?: number): void;
     /**
      * 清空画布
      */

package/types/model/edge/BaseEdgeModel.d.ts

@@ -129,7 +129,9 @@ declare class BaseEdgeModel implements IBaseModel {
      */
     getHistoryData(): EdgeData;
     setProperty(key: any, val: any): void;
+    deleteProperty(key: string): void;
     setProperties(properties: any): void;
+    changeEdgeId(id: string): void;
     setStyle(key: any, val: any): void;
     setStyles(styles: any): void;
     updateStyles(styles: any): void;

package/types/model/node/BaseNodeModel.d.ts

@@ -43,6 +43,7 @@ export default class BaseNodeModel implements IBaseNodeModel {
     isHovered: boolean;
     isDragging: boolean;
     isHitable: boolean;
+    isShowAnchor: boolean;
     draggable: boolean;
     visible: boolean;
     virtual: boolean;
@@ -141,7 +142,7 @@ export default class BaseNodeModel implements IBaseNodeModel {
      * 获取当前节点锚点拖出连线样式
      * @returns 自定义锚点拖出样式
      */
-    getAnchorLineStyle(): import("../../constant/DefaultTheme").CommonTheme;
+    getAnchorLineStyle(anchorInfo: any): import("../../constant/DefaultTheme").CommonTheme;
     /**
      * @override 支持重写
      * 获取outline样式，重写可以定义此类型节点outline样式， 默认使用主题样式
@@ -187,15 +188,18 @@ export default class BaseNodeModel implements IBaseNodeModel {
     getAnchorInfo(anchorId: string): PointAnchor;
     addNodeMoveRules(fn: NodeMoveRule): void;
     move(deltaX: any, deltaY: any, isIgnoreRule?: boolean): boolean;
+    getMoveDistance(deltaX: number, deltaY: number, isIgnoreRule?: boolean): [number, number];
     moveTo(x: any, y: any, isIgnoreRule?: boolean): boolean;
     moveText(deltaX: any, deltaY: any): void;
     updateText(value: string): void;
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
+    setIsShowAnchor(flag?: boolean): void;
     setHitable(flag?: boolean): void;
     setElementState(state: number, additionStateData?: AdditionData): void;
     setProperty(key: any, val: any): void;
     setProperties(properties: any): void;
+    deleteProperty(key: string): void;
     setStyle(key: any, val: any): void;
     setStyles(styles: any): void;
     updateStyles(styles: any): void;

package/types/options.d.ts

@@ -104,6 +104,17 @@ export declare type Definition = {
      * AnimationConfig: 配置部分动画开启
      */
     animation?: boolean | Partial<AnimationConfig>;
+    /**
+     * 节点间连线、连线变更时的边的生成规则
+     * @param sourceNode 起始节点数据
+     * @param targetNode 终止节点数据
+     * @param currentEdge 当前边的数据, 仅移动已有边的时候有值
+     *
+     * @return undefined: 使用默认边
+     *        string: 自定义边类型
+     *        any: 自定义边及其他数据
+     */
+    edgeGenerator?: (sourceNode: any, targetNode: any, currentEdge?: any) => string | any | undefined;
     [key: string]: any;
 } & EditConfigInterface;
 export interface GuardsTypes {
@@ -207,6 +218,17 @@ export declare function get(options: Definition): {
      * AnimationConfig: 配置部分动画开启
      */
     animation?: boolean | Partial<AnimationConfig>;
+    /**
+     * 节点间连线、连线变更时的边的生成规则
+     * @param sourceNode 起始节点数据
+     * @param targetNode 终止节点数据
+     * @param currentEdge 当前边的数据, 仅移动已有边的时候有值
+     *
+     * @return undefined: 使用默认边
+     *        string: 自定义边类型
+     *        any: 自定义边及其他数据
+     */
+    edgeGenerator?: (sourceNode: any, targetNode: any, currentEdge?: any) => any;
 } & EditConfigInterface;
 export declare const defaults: {
     background: boolean;

package/types/type/index.d.ts

@@ -31,6 +31,9 @@ export declare type Point = {
     y: number;
     [key: string]: unknown;
 };
+export declare type Vector2 = [number, number];
+export declare type DirectionVectorNumber = 0 | 1 | -1;
+export declare type DirectionVector2 = [DirectionVectorNumber, DirectionVectorNumber];
 /**
  * 锚点坐标
  * 为了方便计算

package/types/util/edge.d.ts

@@ -110,4 +110,10 @@ declare type Position = {
     y: number;
 };
 export declare const twoPointDistance: (source: Position, target: Position) => number;
+/**
+ * 包装边生成函数
+ * @param graphModel graph model
+ * @param generator 用户自定义的边生成函数
+ */
+export declare function createEdgeGenerator(graphModel: any, generator?: Function): (sourceNode: any, targetNode: any, currentEdge?: any) => any;
 export {};

package/types/util/vector.d.ts

@@ -0,0 +1,4 @@
+import { DirectionVector2, Point } from '../type';
+export declare const getDirectionVector: (point1: Point, point2: Point) => DirectionVector2;
+export declare const isSameDirection: (v1: DirectionVector2, v2: DirectionVector2) => boolean;
+export declare const isContraryDirection: (v1: DirectionVector2, v2: DirectionVector2) => boolean;

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

@@ -5,6 +5,8 @@ export declare type ArrowStyle = {
     fill?: string;
     strokeWidth?: number;
     offset: number;
+    refX?: number;
+    refY?: number;
     verticalLength: number;
 };
 declare type ArrowAttributesType = {

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

@@ -12,6 +12,10 @@ export default class BaseEdge extends Component<IProps> {
     contextMenuTime: number;
     clickTimer: number;
     getShape(): void;
+    /**
+     * 支持重写此方法来实现在连线上定义额外内容。
+     */
+    getExtraShape(): void;
     getTextStyle(): void;
     getText(): "" | h.JSX.Element;
     getArrowInfo(): ArrowInfo;
@@ -29,7 +33,7 @@ export default class BaseEdge extends Component<IProps> {
     handleContextMenu: (ev: MouseEvent) => void;
     handleMouseDown: (e: any) => void;
     handleMouseUp: (e: MouseEvent) => void;
-    getIsDraging: () => boolean;
+    getIsDragging: () => boolean;
     toFront(): void;
     render(): h.JSX.Element;
 }

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

@@ -21,7 +21,7 @@ export default class PolylineEdge extends BaseEdge {
     }) => void;
     onDragEnd: () => void;
     beforeDragStart: (e: any, appendInfo: any) => void;
-    getIsDraging: () => boolean;
+    getIsDragging: () => boolean;
     getEdge(): h.JSX.Element;
     getShape(): h.JSX.Element;
     getAnimation(): h.JSX.Element;