@logicflow/extension 2.0.0-beta.0 → 2.0.0-beta.10

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

@@ -0,0 +1,26 @@
+import LogicFlow, { BaseEdgeModel, BaseNodeModel, GraphModel, h } from '@logicflow/core';
+import LabelData = LogicFlow.LabelData;
+import LabelConfig = LogicFlow.LabelConfig;
+import GraphElement = LogicFlow.GraphElement;
+export declare class LabelModel {
+    id: string;
+    type: string;
+    x: number;
+    y: number;
+    content: string;
+    value: string;
+    rotate?: number;
+    style: h.JSX.CSSProperties;
+    zIndex?: number;
+    vertical: boolean;
+    editable: boolean;
+    draggable: boolean;
+    labelWidth?: number;
+    textOverflowMode: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default';
+    element: BaseNodeModel | BaseEdgeModel;
+    graphModel: GraphModel;
+    constructor(config: LabelConfig, element: GraphElement, graphModel: GraphModel);
+    initLabelData(config: LabelConfig): void;
+    getData(): LabelData;
+}
+export default LabelModel;

package/lib/tools/label/LabelModel.js

@@ -0,0 +1,89 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelModel = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+// export type ILabelConfig = {}
+var createUuid = core_1.LogicFlowUtil.createUuid;
+var LabelModel = /** @class */ (function () {
+    function LabelModel(config, element, graphModel) {
+        var _a;
+        this.type = 'label'; // 目前写死，后续可以根据业务需求进行扩展
+        this.content = '';
+        this.value = '';
+        this.style = {};
+        this.vertical = false; // 文字是否垂直显示
+        this.editable = true; // label 是否可编辑
+        this.draggable = true; // label 是否可拖拽
+        this.textOverflowMode = 'default'; // Label 节点的文本溢出模式
+        this.element = element;
+        this.graphModel = graphModel;
+        this.id = (_a = config.id) !== null && _a !== void 0 ? _a : createUuid();
+        this.initLabelData(config);
+    }
+    LabelModel.prototype.initLabelData = function (config) {
+        (0, lodash_es_1.assign)(this, config);
+    };
+    LabelModel.prototype.getData = function () {
+        return {
+            id: this.id,
+            x: this.x,
+            y: this.y,
+            content: this.content,
+            value: this.value,
+            rotate: this.rotate,
+            style: (0, core_1.toJS)(this.style),
+            draggable: this.draggable,
+            editable: this.editable,
+            labelWidth: this.labelWidth,
+            textOverflowMode: this.textOverflowMode,
+            vertical: this.vertical,
+        };
+    };
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "x", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "y", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "content", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "value", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "rotate", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "style", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "zIndex", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "vertical", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "editable", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "draggable", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "labelWidth", void 0);
+    __decorate([
+        core_1.observable
+    ], LabelModel.prototype, "textOverflowMode", void 0);
+    return LabelModel;
+}());
+exports.LabelModel = LabelModel;
+exports.default = LabelModel;
+//# sourceMappingURL=LabelModel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelModel.js","sourceRoot":"","sources":["../../../src/tools/label/LabelModel.ts"],"names":[],"mappings":";;;;;;;;;AAAA,wCAQwB;AACxB,uCAAkC;AAMlC,gCAAgC;AACxB,IAAA,UAAU,GAAK,oBAAa,WAAlB,CAAkB;AAEpC;IA2BE,oBACE,MAAmB,EACnB,OAAqB,EACrB,UAAsB;;QA5BxB,SAAI,GAAW,OAAO,CAAA,CAAC,sBAAsB;QAIjC,YAAO,GAAW,EAAE,CAAA;QACpB,UAAK,GAAW,EAAE,CAAA;QAElB,UAAK,GAAwB,EAAE,CAAA;QAG/B,aAAQ,GAAY,KAAK,CAAA,CAAC,WAAW;QACrC,aAAQ,GAAY,IAAI,CAAA,CAAC,cAAc;QACvC,cAAS,GAAY,IAAI,CAAA,CAAC,cAAc;QAExC,qBAAgB,GAKZ,SAAS,CAAA,CAAC,kBAAkB;QAW1C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC5B,IAAI,CAAC,EAAE,GAAG,MAAA,MAAM,CAAC,EAAE,mCAAI,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B,CAAC;IAED,kCAAa,GAAb,UAAc,MAAmB;QAC/B,IAAA,kBAAM,EAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IACtB,CAAC;IAED,4BAAO,GAAP;QACE,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAA,WAAI,EAAC,IAAI,CAAC,KAAK,CAAC;YAEvB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YAEvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAA;IACH,CAAC;IAxDW;QAAX,iBAAU;yCAAW;IACV;QAAX,iBAAU;yCAAW;IACV;QAAX,iBAAU;+CAAqB;IACpB;QAAX,iBAAU;6CAAmB;IAClB;QAAX,iBAAU;8CAAgB;IACf;QAAX,iBAAU;6CAAgC;IAE/B;QAAX,iBAAU;8CAAgB;IACf;QAAX,iBAAU;gDAA0B;IACzB;QAAX,iBAAU;gDAAyB;IACxB;QAAX,iBAAU;iDAA0B;IACzB;QAAX,iBAAU;kDAAoB;IACnB;QAAX,iBAAU;wDAKc;IAwC3B,iBAAC;CAAA,AA7DD,IA6DC;AA7DY,gCAAU;AA+DvB,kBAAe,UAAU,CAAA"}

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

@@ -0,0 +1,28 @@
+import LogicFlow, { Component, GraphModel, h } from '@logicflow/core';
+import type { IToolProps } from '@logicflow/core';
+import LabelModel from './LabelModel';
+import { MediumEditor } from './mediumEditor';
+import LabelConfig = LogicFlow.LabelConfig;
+export type LabelConfigType = string | LabelConfig | LabelConfig[];
+export interface ILabelOverlayState {
+    tick: number;
+}
+export declare class LabelOverlay extends Component<IToolProps, ILabelOverlayState> {
+    static toolName: string;
+    lf: LogicFlow;
+    editor?: MediumEditor;
+    graphModel: GraphModel;
+    labelMap: Map<string, LabelModel>;
+    constructor(props: IToolProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * 获取当前画布上所有的 label
+     * 1. 第一步，先把当前所有的 text 转换为 label 进行展示
+     * 2. 数据同步，text 编辑后，同步更新 label，并重新渲染
+     */
+    getLabels(): h.JSX.Element[] | null;
+    render(): h.JSX.Element;
+}
+export default LabelOverlay;

package/lib/tools/label/LabelOverlay.js

@@ -0,0 +1,167 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelOverlay = void 0;
+var jsx_runtime_1 = require("preact/jsx-runtime");
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var Label_1 = __importDefault(require("./Label"));
+var LabelModel_1 = __importDefault(require("./LabelModel"));
+var mediumEditor_1 = require("./mediumEditor");
+// const { createUuid } = LogicFlowUtil
+// DONE: 解决问题，如果 LabelOverlay 设置为 Observer，拖拽 Label 时会导致 LabelOverlay 组件重新渲染，不知道为何
+// 目前解决了。流程是 拖动 -> 更新 label 的数据信息到 element model -> 重新渲染 LabelOverlay
+// 这种目前存在的问题，会全量重新渲染，是否会影响性能 ❓❓❓
+// 另一种解决方案是，在此组件中监听一些事件，当这些事件触发时，再重新渲染 LabelOverlay
+// 讨论一下
+var LabelOverlay = /** @class */ (function (_super) {
+    __extends(LabelOverlay, _super);
+    function LabelOverlay(props) {
+        var _this = _super.call(this, props) || this;
+        _this.labelMap = new Map();
+        var lf = props.lf, graphModel = props.graphModel;
+        _this.lf = lf;
+        _this.graphModel = graphModel;
+        _this.state = { tick: 0 };
+        return _this;
+    }
+    LabelOverlay.prototype.componentDidMount = function () {
+        var _this = this;
+        var graphModel = this.props.graphModel;
+        // 1. 直接在此处初始化 RichTextEdit 工具
+        this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
+            autoLink: true,
+            extensions: {
+                colorPicker: new mediumEditor_1.ColorPickerButton(),
+            },
+        }));
+        // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
+        // TODO: 3. 整理哪些事件应该触发 Label 的更新
+        // 不需要了，将当前组件设置成 @observer 后，graphModel 更新会自动触发更新
+        graphModel.eventCenter.on('text:update,node:mousemove,node:resize,node:rotate,node:drag,label:drop,node:drop', function () {
+            // this.setState({ tick: this.state.tick + 1 })
+        });
+        graphModel.eventCenter.on('node:properties-change,node:properties-delete', function () {
+            _this.setState({ tick: _this.state.tick + 1 });
+        });
+    };
+    LabelOverlay.prototype.componentDidUpdate = function () {
+        var _a;
+        // 在组件更新后，将新增的 label 元素添加到富文本编辑器中
+        if (this.editor && this.editor.elements.length > 0) {
+            this.editor.addElements('.lf-label-editor');
+        }
+        else {
+            // FIX: 如果初始化的数据中没有 properties._label，需要重新初始化富文本编辑器
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
+                autoLink: true,
+                extensions: {
+                    colorPicker: new mediumEditor_1.ColorPickerButton(),
+                },
+            }));
+        }
+    };
+    LabelOverlay.prototype.componentWillUnmount = function () {
+        var _a;
+        // 组件销毁时，同时将富文本编辑器注销
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+    };
+    /**
+     * 获取当前画布上所有的 label
+     * 1. 第一步，先把当前所有的 text 转换为 label 进行展示
+     * 2. 数据同步，text 编辑后，同步更新 label，并重新渲染
+     */
+    LabelOverlay.prototype.getLabels = function () {
+        var _this = this;
+        // 1. 通过 graphModel 获取当前画布上所有的 label 配置数据
+        var _a = this.props, extension = _a.lf.extension, graphModel = _a.graphModel;
+        var elements = __spreadArray(__spreadArray([], __read(graphModel.nodes), false), __read(graphModel.edges), false);
+        var curExtension = extension['label'];
+        if (curExtension) {
+            var labels_1 = []; // 保存所有的 Label 元素
+            // TODO: 筛选出当前画布上，textMode 为 TextMode.LABEL 的元素(在支持元素级别的 textMode 时，需要做这个筛选)
+            // REMIND: 本期先只支持全局配置，所以判断全局的 textMode 即可
+            (0, lodash_es_1.forEach)(elements, function (element) {
+                var _a, _b;
+                var elementData = element.getData();
+                var labelConfig = (_b = (_a = elementData.properties) === null || _a === void 0 ? void 0 : _a._label) !== null && _b !== void 0 ? _b : [];
+                (0, lodash_es_1.forEach)(labelConfig, function (config) {
+                    var labelMap = _this.labelMap;
+                    // 查找 labelModel 实例，如果是实例化过的，直接复用；如果是新的，创建实例
+                    // let label: LabelModel
+                    // if (config.id && labelMap.has(config.id)) {
+                    //   label = labelMap.get(config.id)!
+                    // } else {
+                    //   label = new LabelModel(config, element, graphModel)
+                    //   labelMap.set(label.id, label)
+                    // }
+                    var label = new LabelModel_1.default(config, element, graphModel);
+                    labelMap.set(label.id, label);
+                    labels_1.push((0, jsx_runtime_1.jsx)(Label_1.default, { label: label, element: element, graphModel: graphModel }, label.id));
+                });
+            });
+            return labels_1;
+        }
+        return null;
+    };
+    LabelOverlay.prototype.render = function () {
+        return ((0, jsx_runtime_1.jsx)("foreignObject", { id: "lf-label-overlay", class: "lf-label-overlay", children: this.getLabels() }));
+    };
+    LabelOverlay.toolName = 'label-edit-tool';
+    LabelOverlay = __decorate([
+        core_1.observer
+    ], LabelOverlay);
+    return LabelOverlay;
+}(core_1.Component));
+exports.LabelOverlay = LabelOverlay;
+exports.default = LabelOverlay;
+//# sourceMappingURL=LabelOverlay.js.map

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

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

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

@@ -0,0 +1,16 @@
+import LogicFlow from '@logicflow/core';
+import Point = LogicFlow.Point;
+/**
+ * 三次贝塞尔曲线公式
+ */
+export declare const getPointOnBezier: (t: number, P0: Point, P1: Point, P2: Point, P3: Point) => {
+    x: number;
+    y: number;
+};
+/**
+ * 计算两个节点间的距离
+ * @param point1
+ * @param point2
+ * @param gridSize
+ */
+export declare const calcTwoPointsDistance: (point1: Point, point2: Point, gridSize?: number) => number;

package/lib/tools/label/algorithm.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcTwoPointsDistance = exports.getPointOnBezier = void 0;
+/**
+ * 三次贝塞尔曲线公式
+ */
+var getPointOnBezier = function (t, P0, P1, P2, P3) {
+    var x = Math.pow((1 - t), 3) * P0.x +
+        3 * Math.pow((1 - t), 2) * t * P1.x +
+        3 * (1 - t) * Math.pow(t, 2) * P2.x +
+        Math.pow(t, 3) * P3.x;
+    var y = Math.pow((1 - t), 3) * P0.y +
+        3 * Math.pow((1 - t), 2) * t * P1.y +
+        3 * (1 - t) * Math.pow(t, 2) * P2.y +
+        Math.pow(t, 3) * P3.y;
+    return { x: x, y: y };
+};
+exports.getPointOnBezier = getPointOnBezier;
+/**
+ * 计算两个节点间的距离
+ * @param point1
+ * @param point2
+ * @param gridSize
+ */
+var calcTwoPointsDistance = function (point1, point2, gridSize) {
+    if (gridSize === void 0) { gridSize = 1; }
+    var dx = (point1.x - point2.x) / gridSize;
+    var dy = (point1.y - point2.y) / gridSize;
+    return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+};
+exports.calcTwoPointsDistance = calcTwoPointsDistance;
+//# sourceMappingURL=algorithm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"algorithm.js","sourceRoot":"","sources":["../../../src/tools/label/algorithm.ts"],"names":[],"mappings":";;;AAGA;;GAEG;AACI,IAAM,gBAAgB,GAAG,UAC9B,CAAS,EACT,EAAS,EACT,EAAS,EACT,EAAS,EACT,EAAS;IAET,IAAM,CAAC,GACL,SAAA,CAAC,CAAC,GAAG,CAAC,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC;QACnB,CAAC,GAAG,SAAA,CAAC,CAAC,GAAG,CAAC,CAAC,EAAI,CAAC,CAAA,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAA,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC;QAC3B,SAAA,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC,CAAA;IACf,IAAM,CAAC,GACL,SAAA,CAAC,CAAC,GAAG,CAAC,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC;QACnB,CAAC,GAAG,SAAA,CAAC,CAAC,GAAG,CAAC,CAAC,EAAI,CAAC,CAAA,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAA,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC;QAC3B,SAAA,CAAC,EAAI,CAAC,CAAA,GAAG,EAAE,CAAC,CAAC,CAAA;IAEf,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AACvB,CAAC,CAAA;AAnBY,QAAA,gBAAgB,oBAmB5B;AAED;;;;;GAKG;AACI,IAAM,qBAAqB,GAAG,UACnC,MAAa,EACb,MAAa,EACb,QAAoB;IAApB,yBAAA,EAAA,YAAoB;IAEpB,IAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAA;IAC3C,IAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAA;IAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,SAAA,EAAE,EAAI,CAAC,CAAA,GAAG,SAAA,EAAE,EAAI,CAAC,CAAA,CAAC,CAAA;AACrC,CAAC,CAAA;AARY,QAAA,qBAAqB,yBAQjC"}

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

@@ -0,0 +1,59 @@
+import LogicFlow, { TextMode } from '@logicflow/core';
+import Position = LogicFlow.Position;
+import Extension = LogicFlow.Extension;
+export type ILabelOptions = {
+    isMultiple?: boolean;
+    maxCount?: number;
+    labelWidth?: number;
+    textOverflowMode?: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default';
+};
+export declare class Label implements Extension {
+    static pluginName: string;
+    lf: LogicFlow;
+    options: ILabelOptions;
+    textOverflowMode: 'ellipsis' | 'wrap' | 'clip' | 'nowrap' | 'default';
+    isMultiple: boolean;
+    labelWidth?: number;
+    maxCount: number;
+    labelInitPositionMap: Map<string, Position>;
+    constructor({ lf, options }: {
+        lf: LogicFlow;
+        options: ILabelOptions;
+    });
+    /**
+     * 格式化元素的 Label 配置，后续初始化 Label 用统一的数据格式
+     * 主要是将 _label 类型 string | LabelConfig | LabelConfig[] 统一转换为 LabelConfig[]
+     * @param graphModel 当前图的 model
+     * @param element 当前元素 model
+     * @return LabelConfig[]
+     */
+    private formatConfig;
+    /**
+     * 根据初始化的数据，格式化 Label 的数据格式后，统一更新到元素的 properties._label 中，保证后续的渲染以这个数据格式进行
+     * @param graphModel
+     */
+    private setupLabels;
+    /**
+     * 给元素添加一个 label
+     * @param element
+     * @param position
+     */
+    private addLabel;
+    /**
+     * 移除元素的某个 label
+     * @private
+     */
+    private addEventListeners;
+    /**
+     * 重写元素的一些方法，以支持 Label 的拖拽、编辑等
+     * @param element
+     */
+    private rewriteInnerMethods;
+    /**
+     * 更新当前渲染使用的 Text or Label 模式
+     */
+    updateTextMode(textMode: TextMode): void;
+    render(): void;
+    destroy(): void;
+}
+export default Label;