@logicflow/extension 2.0.0-beta.1 → 2.0.0-beta.11

package/lib/tools/label/index.js

@@ -0,0 +1,298 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var LabelOverlay_1 = __importDefault(require("./LabelOverlay"));
+var utils_1 = require("./utils");
+var Label = /** @class */ (function () {
+    function Label(_a) {
+        var lf = _a.lf, options = _a.options;
+        var _b, _c, _d;
+        this.labelInitPositionMap = new Map();
+        this.lf = lf;
+        // DONE: 根据 options 初始化一些插件配置，比如是否支持多个 label 等，生效在所有 label 中
+        this.options = options !== null && options !== void 0 ? options : {};
+        this.textOverflowMode = (_b = options.textOverflowMode) !== null && _b !== void 0 ? _b : 'default';
+        this.isMultiple = (_c = options.isMultiple) !== null && _c !== void 0 ? _c : true;
+        this.labelWidth = options.labelWidth;
+        this.maxCount = (_d = options.maxCount) !== null && _d !== void 0 ? _d : Infinity;
+        // DONE: 1. 启用插件时，将当前画布的 textMode 更新为 TextMode.LABEL。
+        // 如果将其又重新设置为 TextModel.TEXT，则需要 disable 掉 Label 工具，enable TextEditTool
+        lf.graphModel.editConfigModel.updateTextMode(core_1.TextMode.LABEL);
+        // TODO: 2. 做一些插件需要的事件监听
+        this.addEventListeners();
+        // TODO: 3. 自定义快捷键，比如 delete，选中 label 时，移除 label
+        // this.rewriteShortcut()
+        // 插件中注册 LabelOverlay 工具，用于 label 的编辑
+        lf.tool.registerTool(LabelOverlay_1.default.toolName, LabelOverlay_1.default);
+        // LabelOverlay 和 TextEditTool 互斥，所以将它 disable 掉
+        lf.tool.disableTool('text-edit-tool');
+    }
+    /**
+     * 格式化元素的 Label 配置，后续初始化 Label 用统一的数据格式
+     * 主要是将 _label 类型 string | LabelConfig | LabelConfig[] 统一转换为 LabelConfig[]
+     * @param graphModel 当前图的 model
+     * @param element 当前元素 model
+     * @return LabelConfig[]
+     */
+    Label.prototype.formatConfig = function (graphModel, element) {
+        var _a = graphModel.editConfigModel, nodeTextEdit = _a.nodeTextEdit, edgeTextEdit = _a.edgeTextEdit, nodeTextDraggable = _a.nodeTextDraggable, edgeTextDraggable = _a.edgeTextDraggable;
+        var _b = this, textOverflowMode = _b.textOverflowMode, isMultiple = _b.isMultiple, maxCount = _b.maxCount, labelWidth = _b.labelWidth;
+        var text = element.text, zIndex = element.zIndex, _c = element.properties, _label = _c._label, _d = _c._labelOption, _labelOption = _d === void 0 ? {} : _d;
+        // 当前元素的 Label 相关配置
+        var curLabelConfig = _label;
+        var _e = _labelOption, curIsMultiple = _e.isMultiple, curMaxCount = _e.maxCount;
+        // REMIND: 对 3 种可能得数据类型进行处理
+        var formatConfig = []; // 保存格式化后的 LabelConfig
+        if ((0, lodash_es_1.isArray)(curLabelConfig)) {
+            // 1. 数组的话就是 LabelConfig[] 类型
+            // 判断是否开启 isMultiple, 如果开启了，判断是否超过最大数量。超出就截取
+            var size = curMaxCount !== null && curMaxCount !== void 0 ? curMaxCount : maxCount; // 优先级，当设置 multiple 时，元素的 maxCount 优先级高于插件的 maxCount
+            if (isMultiple && curIsMultiple) {
+                if (curLabelConfig.length > size) {
+                    formatConfig = curLabelConfig.slice(0, size);
+                }
+                else {
+                    formatConfig = curLabelConfig;
+                }
+            }
+            else {
+                formatConfig = [curLabelConfig[0]];
+            }
+        }
+        else if ((0, lodash_es_1.isObject)(curLabelConfig)) {
+            // 2. 对象的话就是 LabelConfig 类型
+            formatConfig = [curLabelConfig];
+        }
+        else if (typeof curLabelConfig === 'string' || !curLabelConfig) {
+            // 3. 字符串或者为空的话就是 string 类型，基于 text 的数据合成 LabelConfig 信息（主要复用 text 的 x,y 信息）
+            var config = __assign(__assign({}, text), { content: curLabelConfig || text.value, draggable: element.BaseType === 'edge' ? edgeTextDraggable : nodeTextDraggable });
+            formatConfig = config.value ? [config] : [];
+        }
+        // TODO: 针对 Edge，在 edge 更新时 重新计算 Label 的位置
+        if (element.BaseType === 'edge') {
+            // 判断当前 label，是否在 edge 的路径上，如果不在，就重新计算位置
+            formatConfig = (0, lodash_es_1.map)(formatConfig, function (config) {
+                var x = config.x, y = config.y;
+                console.log('x, y --->>>', x, y);
+                return config;
+            });
+        }
+        // DONE: 再根据一些全局配置，比如是否支持垂直显示等，对 LabelConfig 进行二次处理
+        // 优先级：全局配置 > 元素配置。比如全局设置 isMultiple 为 true 时，才可以使用 局部的 isMultiple 设置才生效
+        // 当全局 isMultiple 为 false 时，局部的 isMultiple 不生效
+        return (0, lodash_es_1.map)(formatConfig, function (config) {
+            if (!config.id) {
+                config.id = (0, core_1.createUuid)();
+            }
+            var value = config.value, content = config.content, vertical = config.vertical, editable = config.editable, draggable = config.draggable, labelTextOverflowMode = config.textOverflowMode;
+            var textEdit = element.BaseType === 'node' ? nodeTextEdit : edgeTextEdit;
+            var textDraggable = element.BaseType === 'node' ? nodeTextDraggable : edgeTextDraggable;
+            return __assign(__assign({}, config), { zIndex: zIndex, labelWidth: labelWidth, content: content !== null && content !== void 0 ? content : value, vertical: vertical !== null && vertical !== void 0 ? vertical : false, editable: textEdit && editable, draggable: textDraggable && draggable, textOverflowMode: labelTextOverflowMode !== null && labelTextOverflowMode !== void 0 ? labelTextOverflowMode : textOverflowMode });
+        });
+    };
+    /**
+     * 根据初始化的数据，格式化 Label 的数据格式后，统一更新到元素的 properties._label 中，保证后续的渲染以这个数据格式进行
+     * @param graphModel
+     */
+    Label.prototype.setupLabels = function (graphModel) {
+        var _this = this;
+        // const elements = [...graphModel.nodes, ...graphModel.edges]
+        var elements = graphModel.sortElements;
+        // TODO: 1. 筛选出当前画布上，textMode 为 TextMode.LABEL 的元素(在支持元素级别的 textMode 时，需要做这个筛选)
+        // REMIND: 本期先只支持全局配置，所以判断全局的 textMode 即可
+        (0, lodash_es_1.forEach)(elements, function (element) {
+            // DONE: 2. 在此处做数据的转换
+            // 输入：NodeConfig.properties._label: string | LabelConfig | LabelConfig[]
+            // 输出：NodeData.properties._label: LabelData | LabelData[]
+            // 是否需要根据 isMultiple 控制是否返回数组或对象 or 直接全部返回数组 ❓❓❓ -> 目前直接全部返回数组
+            _this.rewriteInnerMethods(element);
+            var formatLabelConfig = _this.formatConfig(graphModel, element);
+            // FIX: BUG Here: 格式化后的 labelConfig 没有同步到 element 上，导致每次重新渲染时，都会重新格式化，且重新生成 id
+            // 但如果在此处通过 setProperty 更新元素的 _label 时，又会导致死循环
+            element.setProperty('_label', formatLabelConfig);
+        });
+    };
+    /**
+     * 给元素添加一个 label
+     * @param element
+     * @param position
+     */
+    Label.prototype.addLabel = function (element, position) {
+        var _a, _b, _c;
+        var _d = this, isMultiple = _d.isMultiple, maxCount = _d.maxCount;
+        var _e = element.properties, _label = _e._label, _labelOption = _e._labelOption;
+        var curLabelConfig = (_a = _label) !== null && _a !== void 0 ? _a : [];
+        var curLabelOption = (_b = _labelOption) !== null && _b !== void 0 ? _b : {};
+        var len = curLabelConfig.length;
+        var newLabel = {
+            id: (0, core_1.createUuid)(),
+            x: position.x,
+            y: position.y,
+            content: "Label".concat(len + 1),
+            value: "Label".concat(len + 1),
+            style: {},
+            draggable: true,
+            editable: true,
+            vertical: false,
+        };
+        if (!isMultiple || len >= ((_c = curLabelOption === null || curLabelOption === void 0 ? void 0 : curLabelOption.maxCount) !== null && _c !== void 0 ? _c : maxCount)) {
+            return;
+        }
+        curLabelConfig.push(newLabel);
+        element.setProperty('_label', curLabelConfig);
+    };
+    /**
+     * 移除元素的某个 label
+     * @private
+     */
+    // private removeLabel() {}
+    Label.prototype.addEventListeners = function () {
+        var _this = this;
+        var graphModel = this.lf.graphModel;
+        var eventCenter = graphModel.eventCenter, editConfigModel = graphModel.editConfigModel;
+        eventCenter.on('graph:rendered', function (_a) {
+            var graphModel = _a.graphModel;
+            _this.setupLabels(graphModel);
+        });
+        // 监听元素双击事件，给元素增加 Label
+        eventCenter.on('node:dbclick,edge:dbclick', function (_a) {
+            var e = _a.e, data = _a.data;
+            // DONE: 增加 label 的数据信息到 element model
+            var target = graphModel.getElement(data.id);
+            // DONE: 将 clientX 和 clientY 转换为画布坐标
+            var _b = graphModel.getPointByClient({
+                x: e.clientX,
+                y: e.clientY,
+            }).canvasOverlayPosition, x1 = _b.x, y1 = _b.y;
+            var point = {
+                x: x1,
+                y: y1,
+            };
+            if (target && editConfigModel.textMode === core_1.TextMode.LABEL) {
+                _this.addLabel(target, point);
+            }
+        });
+        // 监听 node:resize 事件，在 resize 时，重新计算 label 的位置信息
+        eventCenter.on('node:resize', function (_a) {
+            var _b, _c;
+            var preData = _a.preData, data = _a.data, model = _a.model;
+            var _d = (_b = preData.properties) !== null && _b !== void 0 ? _b : {}, preWidth = _d.width, preHeight = _d.height, _e = _d._label, _label = _e === void 0 ? [] : _e;
+            var _f = (_c = data.properties) !== null && _c !== void 0 ? _c : {}, curWidth = _f.width, curHeight = _f.height;
+            if (preWidth && preHeight && curWidth && curHeight) {
+                var origin_1 = {
+                    x: preData.x,
+                    y: preData.y,
+                    width: preWidth,
+                    height: preHeight,
+                };
+                var scaled_1 = {
+                    x: data.x,
+                    y: data.y,
+                    width: curWidth,
+                    height: curHeight,
+                };
+                var newLabelConfig = (0, lodash_es_1.map)(_label, function (label) {
+                    var x = label.x, y = label.y;
+                    var newPoint = (0, utils_1.calcPointAfterResize)(origin_1, scaled_1, { x: x, y: y });
+                    return __assign(__assign({}, label), newPoint);
+                });
+                model.setProperty('_label', newLabelConfig);
+            }
+        });
+        // 监听 node:rotate 事件，在 rotate 时，重新计算 Label 的位置信息
+        eventCenter.on('node:rotate', function (_a) {
+            var model = _a.model;
+            var x = model.x, y = model.y, rotate = model.rotate, _b = model.properties._label, _label = _b === void 0 ? [] : _b;
+            var center = { x: x, y: y };
+            var newLabelConfig = (0, lodash_es_1.map)(_label, function (label) {
+                if (!label.id)
+                    return label;
+                var point = { x: label.x, y: label.y };
+                if (_this.labelInitPositionMap.has(label.id)) {
+                    point = _this.labelInitPositionMap.get(label.id);
+                }
+                else {
+                    _this.labelInitPositionMap.set(label.id, point);
+                }
+                // 弧度转角度
+                var theta = rotate * (180 / Math.PI);
+                if (theta < 0)
+                    theta += 360;
+                var radian = theta * (Math.PI / 180);
+                var newPoint = (0, utils_1.rotatePointAroundCenter)(point, center, radian);
+                return __assign(__assign(__assign({}, label), newPoint), { rotate: theta });
+            });
+            model.setProperty('_label', newLabelConfig);
+        });
+    };
+    /**
+     * 重写元素的一些方法，以支持 Label 的拖拽、编辑等
+     * @param element
+     */
+    Label.prototype.rewriteInnerMethods = function (element) {
+        // 重写 edgeModel/nodeModel moveText 方法，在 move text 时，以相同的逻辑移动 label
+        element.moveText = function (deltaX, deltaY) {
+            if (!element.text)
+                return;
+            var _a = element.text, x = _a.x, y = _a.y, value = _a.value, draggable = _a.draggable, editable = _a.editable;
+            element.text = {
+                value: value,
+                editable: editable,
+                draggable: draggable,
+                x: x + deltaX,
+                y: y + deltaY,
+            };
+            var properties = (0, lodash_es_1.cloneDeep)(element.getProperties());
+            // 重新计算新的 label 位置信息
+            if ((0, lodash_es_1.isArray)(properties._label)) {
+                var nextLabel = (0, lodash_es_1.map)(properties._label, function (label) {
+                    return __assign(__assign({}, label), { x: label.x + deltaX, y: label.y + deltaY });
+                });
+                // console.log('Label --->>>', nextLabel)
+                element === null || element === void 0 ? void 0 : element.setProperty('_label', nextLabel);
+            }
+        };
+        // TODO: others methods ???
+    };
+    // private rewriteShortcut() {}
+    /**
+     * 更新当前渲染使用的 Text or Label 模式
+     */
+    Label.prototype.updateTextMode = function (textMode) {
+        var editConfigModel = this.lf.graphModel.editConfigModel;
+        if (textMode === editConfigModel.textMode)
+            return;
+        editConfigModel.updateTextMode(textMode);
+        if (textMode === core_1.TextMode.LABEL) {
+            this.lf.tool.enableTool(LabelOverlay_1.default.toolName);
+            this.lf.tool.disableTool('text-edit-tool');
+        }
+        else if (textMode === core_1.TextMode.TEXT) {
+            this.lf.tool.enableTool('text-edit-tool');
+            this.lf.tool.disableTool(LabelOverlay_1.default.toolName);
+        }
+    };
+    Label.prototype.render = function () { };
+    Label.prototype.destroy = function () { };
+    Label.pluginName = 'label';
+    return Label;
+}());
+exports.Label = Label;
+exports.default = Label;
+//# sourceMappingURL=index.js.map

package/lib/tools/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tools/label/index.ts"],"names":[],"mappings":"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"}

package/lib/tools/label/mediumEditor.d.ts

@@ -0,0 +1,17 @@
+import MediumEditor from 'medium-editor';
+import 'rangy/lib/rangy-classapplier';
+export declare const defaultOptions: {
+    toolbar: {
+        allowMultiParagraphSelection: boolean;
+        buttons: string[];
+        standardizeSelectionStart: boolean;
+        updateOnEmptySelection: boolean;
+    };
+    placeholder: {
+        text: string;
+        hideOnClick: boolean;
+    };
+    disableEditing: boolean;
+};
+export declare const ColorPickerButton: any;
+export { MediumEditor };

package/lib/tools/label/mediumEditor.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumEditor = exports.ColorPickerButton = exports.defaultOptions = void 0;
+var medium_editor_1 = __importDefault(require("medium-editor"));
+exports.MediumEditor = medium_editor_1.default;
+var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
+var rangy_1 = __importDefault(require("rangy"));
+require("rangy/lib/rangy-classapplier");
+exports.defaultOptions = {
+    toolbar: {
+        allowMultiParagraphSelection: true,
+        buttons: [
+            'bold',
+            'colorpicker',
+            'italic',
+            'underline',
+            'strikethrough',
+            'quote',
+            'justifyLeft',
+            'justifyCenter',
+            'justifyRight',
+            'justifyFull',
+            'superscript',
+            'subscript',
+            'orderedlist',
+            'unorderedlist',
+            'pre',
+            'removeFormat',
+            'outdent',
+            'indent',
+            'h2',
+            'h3',
+        ],
+        standardizeSelectionStart: false,
+        updateOnEmptySelection: false,
+    },
+    placeholder: {
+        text: '请输入内容',
+        hideOnClick: true,
+    },
+    disableEditing: true,
+};
+exports.ColorPickerButton = medium_editor_1.default.extensions.button.extend({
+    name: 'colorpicker',
+    tagNames: ['mark'],
+    contentDefault: '<b>Color</b>',
+    aria: 'Color Picker',
+    action: 'colorPicker',
+    init: function () {
+        var _this = this;
+        rangy_1.default.init();
+        medium_editor_1.default.extensions.button.prototype.init.call(this);
+        this.colorPicker = new vanilla_picker_1.default({
+            parent: this.button,
+            color: '#000',
+            onDone: function (res) {
+                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
+                    _this.coloredText.undoToSelection();
+                }
+                _this.coloredText = rangy_1.default.createClassApplier('colored', {
+                    elementTagName: 'span',
+                    elementProperties: {
+                        style: {
+                            color: res.hex,
+                        },
+                    },
+                    normalize: true,
+                });
+                _this.coloredText.toggleSelection();
+                _this.base.checkContentChanged();
+                _this.setInactive();
+            },
+        });
+    },
+    getButton: function () {
+        return this.button;
+    },
+    handleClick: function () {
+        this.setActive();
+        this.colorPicker.show();
+    },
+    isAlreadyApplied: function (node) {
+        return node.nodeName.toLowerCase() === 'mark';
+    },
+    isActive: function () {
+        return this.button.classList.contains('medium-editor-button-active');
+    },
+    setInactive: function () {
+        this.button.classList.remove('medium-editor-button-active');
+    },
+    setActive: function () {
+        this.button.classList.add('medium-editor-button-active');
+    },
+});
+//# sourceMappingURL=mediumEditor.js.map

package/lib/tools/label/mediumEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediumEditor.js","sourceRoot":"","sources":["../../../src/tools/label/mediumEditor.ts"],"names":[],"mappings":";;;;;;AAAA,gEAAwC;AA6F/B,uBA7FF,uBAAY,CA6FE;AA5FrB,kEAAmC;AACnC,gDAAyB;AACzB,wCAAqC;AAExB,QAAA,cAAc,GAAG;IAC5B,OAAO,EAAE;QACP,4BAA4B,EAAE,IAAI;QAClC,OAAO,EAAE;YACP,MAAM;YACN,aAAa;YACb,QAAQ;YACR,WAAW;YACX,eAAe;YACf,OAAO;YACP,aAAa;YACb,eAAe;YACf,cAAc;YACd,aAAa;YACb,aAAa;YACb,WAAW;YACX,aAAa;YACb,eAAe;YACf,KAAK;YACL,cAAc;YACd,SAAS;YACT,QAAQ;YACR,IAAI;YACJ,IAAI;SACL;QACD,yBAAyB,EAAE,KAAK;QAChC,sBAAsB,EAAE,KAAK;KAC9B;IAED,WAAW,EAAE;QACX,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,IAAI;KAClB;IACD,cAAc,EAAE,IAAI;CACrB,CAAA;AAEY,QAAA,iBAAiB,GAAG,uBAAY,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;IACrE,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,CAAC,MAAM,CAAC;IAClB,cAAc,EAAE,cAAc;IAC9B,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE;QAAA,iBAwBL;QAvBC,eAAK,CAAC,IAAI,EAAE,CAAA;QACZ,uBAAY,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxD,IAAI,CAAC,WAAW,GAAG,IAAI,wBAAM,CAAC;YAC5B,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,UAAC,GAAG;gBACV,IAAI,KAAI,CAAC,WAAW,IAAI,KAAI,CAAC,WAAW,CAAC,oBAAoB,EAAE,EAAE,CAAC;oBAChE,KAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAA;gBACpC,CAAC;gBACD,KAAI,CAAC,WAAW,GAAG,eAAK,CAAC,kBAAkB,CAAC,SAAS,EAAE;oBACrD,cAAc,EAAE,MAAM;oBACtB,iBAAiB,EAAE;wBACjB,KAAK,EAAE;4BACL,KAAK,EAAE,GAAG,CAAC,GAAG;yBACf;qBACF;oBACD,SAAS,EAAE,IAAI;iBAChB,CAAC,CAAA;gBACF,KAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAA;gBAClC,KAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAA;gBAC/B,KAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;SACF,CAAC,CAAA;IACJ,CAAC;IACD,SAAS,EAAE;QACT,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IACD,WAAW,EAAE;QACX,IAAI,CAAC,SAAS,EAAE,CAAA;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IACD,gBAAgB,EAAE,UAAU,IAAI;QAC9B,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,MAAM,CAAA;IAC/C,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,6BAA6B,CAAC,CAAA;IACtE,CAAC;IACD,WAAW,EAAE;QACX,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAA;IAC7D,CAAC;IACD,SAAS,EAAE;QACT,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;IAC1D,CAAC;CACF,CAAC,CAAA"}

package/lib/tools/label/utils.d.ts

@@ -0,0 +1,64 @@
+import LogicFlow, { BaseEdgeModel, BaseNodeModel, BezierEdgeModel } from '@logicflow/core';
+import Point = LogicFlow.Point;
+import LabelConfig = LogicFlow.LabelConfig;
+export type BBoxInfo = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function calcPointAfterResize(origin: BBoxInfo, scaled: BBoxInfo, point: Point): Point;
+export declare function rotatePointAroundCenter(target: Point, center: Point, radian: number): Point;
+/** Edge 相关工具方法 */
+/**
+ * 获取某点在一个矩形图形（节点 or 边的 outline）内的偏移量
+ * @param point 目标点（此处即 Label 的坐标信息）
+ * @param element 目标元素
+ */
+export declare const getPointOffsetOfElementOutline: (point: Point, element: BaseNodeModel | BaseEdgeModel) => {
+    xDeltaPercent: number;
+    yDeltaPercent: number;
+    xDeltaDistance: number;
+    yDeltaDistance: number;
+} | undefined;
+/**
+ * 给定一个点  P = (x_0, y_0)  和线段的两个端点  A = (x_1, y_1)  和  B = (x_2, y_2) ，可以使用以下步骤计算点到线段的距离：
+ * 1.	计算向量  AB  和  AP 。
+ * 2.	计算  AB  的平方长度。
+ * 3.	计算点  P  在直线  AB  上的投影点  Q 。
+ * 4.	判断  Q  是否在线段  AB  上。
+ * 5.	根据  Q  是否在线段上，计算点到线段的距离。
+ *
+ * 计算点到线段质检的距离
+ * @param point
+ * @param start
+ * @param end
+ */
+export declare const pointToSegmentDistance: (point: Point, start: Point, end: Point) => number;
+export declare const calcPolylineTotalLength: (points: Point[]) => number;
+/**
+ * TODO: 确认该函数的意义，写完还是没看懂什么意思
+ * @param point
+ * @param points
+ */
+export declare const pointPositionRatio: (point: Point, points: Point[]) => number;
+/**
+ * 计算一个坐标在贝塞尔曲线上最近的一个点
+ * @param point
+ * @param edge
+ * @param step
+ */
+export declare const calcClosestPointOnBezierEdge: (point: Point, edge: BezierEdgeModel, step?: number) => Point;
+export declare const getNewPointAtDistance: (points: Point[], ratio: number) => Point | undefined;
+/**
+ * 计算一个坐标离折线（包括 PolylineEdge 和 LineEdge 直线）最近的一个点
+ * @param point
+ * @param edge
+ */
+export declare const calcLabelPositionOnPolyline: (point: Point, edge: BaseEdgeModel) => Point;
+/**
+ * 计算 Label 离边最近的点的坐标，用于更新为 Label 的坐标
+ * @param label LabelConfig -> 当前 Label 的配置项
+ * @param edge
+ */
+export declare const getLabelPositionOfLine: (label: LabelConfig, edge: BaseEdgeModel) => Point;