@logicflow/core 2.2.1 → 2.2.3

package/dist/docs/tutorial/extension/control.en.md

@@ -0,0 +1,117 @@
+---
+nav: Guide
+group:
+  title: Plug-in functionality
+  order: 3
+title: Control
+order: 3
+toc: content
+---
+
+### start using
+
+```tsx | pure
+import LogicFlow from "@logicflow/core";
+import { Control } from "@logicflow/extension";
+import "@logicflow/extension/lib/style/index.css";
+
+LogicFlow.use(Control);
+```
+
+After registering the `Control` component, LogicFlow creates a control panel at the top right of
+the canvas, as shown here
+
+The control panel provides the common ability to zoom in and out or adapt to the canvas, and also
+has built-in redo and undo functionality, of course if you don't like the UI or the functionality,
+you can define your own based on the [API](../../api/logicflow-instance/index.en.md) provided by `LogicFlow`.
+
+
+<details>
+  <summary>The following controls are built into the control panel</summary>
+  <pre><code style="background-color: #282c34; color: #7ec798">
+private controlItems: ControlItem[] = [
+    {
+      key: 'zoom-out',
+      iconClass: 'lf-control-zoomOut',
+      title: 'Reduced Flowchart',
+      text: 'zoom-out',
+      onClick: () => {
+        this.lf.zoom(false);
+      },
+    },
+    {
+      key: 'zoom-in',
+      iconClass: 'lf-control-zoomIn',
+      title: 'Enlarge Flowchart',
+      text: 'zoom in',
+      onClick: () => {
+        this.lf.zoom(true);
+      },
+    },
+    {
+      key: 'reset',
+      iconClass: 'lf-control-fit',
+      title: 'Restore the original size of the process',
+      text: 'adaptive',
+      onClick: () => {
+        this.lf.resetZoom();
+      },
+    },
+    {
+      key: 'undo',
+      iconClass: 'lf-control-undo',
+      title: 'Go back to the previous step',
+      text: 'back',
+      onClick: () => {
+        this.lf.undo();
+      },
+    },
+    {
+      key: 'redo',
+      iconClass: 'lf-control-redo',
+      title: 'Move to next step',
+      text: 'next',
+      onClick: () => {
+        this.lf.redo();
+      },
+    },
+  ];</code></pre>
+</details>
+
+### example
+
+<a href="https://codesandbox.io/embed/intelligent-matsumoto-t1dc5?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> Go to CodeSandbox for examples</a>
+
+### Add Options
+
+```tsx | pure
+lf.extension.control.addItem({
+  key: 'mini-map',
+  iconClass: 'custom-minimap',
+  title: '',
+  text: 'nav',
+  onMouseEnter: (lf, ev) => {
+    const position = lf.getPointByClient(ev.x, ev.y)
+    lf.extension.miniMap.show(
+      position.domOverlayPosition.x - 120,
+      position.domOverlayPosition.y + 35,
+    )
+  },
+  onClick: (lf, ev) => {
+    const position = lf.getPointByClient(ev.x, ev.y)
+    lf.extension.miniMap.show(
+      position.domOverlayPosition.x - 120,
+      position.domOverlayPosition.y + 35,
+    )
+  },
+})
+```
+
+### Removing Options
+
+For example, to remove the navigation controls added above
+
+```tsx | pure
+lf.extension.control.removeItem('mini-map')
+```
+

package/dist/docs/tutorial/extension/control.zh.md

@@ -0,0 +1,118 @@
+---
+nav: 指南
+group:
+  title: 插件功能
+  order: 3
+title: 控制面板 (Control)
+order: 3
+toc: contents
+---
+
+### 启用
+
+```tsx | pure
+import LogicFlow from "@logicflow/core";
+import { Control } from "@logicflow/extension";
+import "@logicflow/extension/lib/style/index.css";
+
+LogicFlow.use(Control);
+```
+
+注册`Control`组件后，LogicFlow 会在画布右上方创建一个控制面板，如下所示
+
+控制面板提供了常见的能力，放大缩小或者自适应画布的能力，同时也内置了 redo 和 undo 的功能，当然如果你不喜欢这样的
+UI 或功能，也可以基于`LogicFlow`提供的 [API](../../api/logicflow-instance/index.zh.md) 自己定义。
+
+
+<details>
+  <summary>控制面板内置以下控制项</summary>
+  <pre><code style="background-color: #282c34; color: #7ec798">
+private controlItems: ControlItem[] = [
+    {
+      key: 'zoom-out',
+      iconClass: 'lf-control-zoomOut',
+      title: '缩小流程图',
+      text: '缩小',
+      onClick: () => {
+        this.lf.zoom(false);
+      },
+    },
+    {
+      key: 'zoom-in',
+      iconClass: 'lf-control-zoomIn',
+      title: '放大流程图',
+      text: '放大',
+      onClick: () => {
+        this.lf.zoom(true);
+      },
+    },
+    {
+      key: 'reset',
+      iconClass: 'lf-control-fit',
+      title: '恢复流程原有尺寸',
+      text: '适应',
+      onClick: () => {
+        this.lf.resetZoom();
+      },
+    },
+    {
+      key: 'undo',
+      iconClass: 'lf-control-undo',
+      title: '回到上一步',
+      text: '上一步',
+      onClick: () => {
+        this.lf.undo();
+      },
+    },
+    {
+      key: 'redo',
+      iconClass: 'lf-control-redo',
+      title: '移到下一步',
+      text: '下一步',
+      onClick: () => {
+        this.lf.redo();
+      },
+    },
+  ];</code></pre>
+</details>
+
+### 示例
+
+<a href="https://codesandbox.io/embed/intelligent-matsumoto-t1dc5?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> 去 CodeSandbox 查看示例</a>
+
+### 添加选项
+
+```tsx | pure
+lf.extension.control.addItem({
+  key: 'mini-map',
+  iconClass: 'custom-minimap',
+  title: '',
+  text: '导航',
+  onMouseEnter: (lf, ev) => {
+    const position = lf.getPointByClient(ev.x, ev.y)
+    lf.extension.miniMap.show(
+      position.domOverlayPosition.x - 120,
+      position.domOverlayPosition.y + 35,
+    )
+  },
+  onClick: (lf, ev) => {
+    const position = lf.getPointByClient(ev.x, ev.y)
+    lf.extension.miniMap.show(
+      position.domOverlayPosition.x - 120,
+      position.domOverlayPosition.y + 35,
+    )
+  },
+})
+```
+
+### 删除选项
+
+例如, 移除上面添加的导航控制项
+
+```tsx | pure
+/**
+ * @params key 需要删除的选项的key
+ */
+lf.extension.control.removeItem('mini-map')
+```
+

package/dist/docs/tutorial/extension/curved-edge.en.md

@@ -0,0 +1,46 @@
+---
+nav: Guide
+group:
+  title: Plug-in functionality
+  order: 3
+title: CurvedEdge
+order: 12
+toc: content
+---
+
+The LogicFlow core package has three built-in baselines: line, polyline, and bezier. Since SVG polyline does not have rounded corners, we provide CurvedEdge in the extension package.
+
+Rounded edges are used in the same way as LogicFlow's custom edges, by inheriting CurvedEdgeModel and CurvedEdge.
+
+```tsx | pure
+import { CurvedEdge, CurvedEdgeModel } from '@logicflow/extension'
+
+class myCurvedEdge extends CurvedEdge {
+}
+
+class myCurvedEdgeModel extends CurvedEdgeModel {
+  initEdgeData(data) {
+    super.initEdgeData(data)
+    this.radius = 5
+  }
+
+  getEdgeStyle() {
+    const style = super.getEdgeStyle()
+    style.strokeWidth = 3
+    style.stroke = 'rgb(130, 179, 102)'
+    return style
+  }
+
+  setAttributes() {
+    this.isAnimation = true
+  }
+
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle()
+    style.strokeDasharray = '15 5'
+    style.animationDuration = '10s'
+    style.stroke = 'rgb(130, 179, 102)'
+    return style
+  }
+}
+```

package/dist/docs/tutorial/extension/curved-edge.zh.md

@@ -0,0 +1,46 @@
+---
+nav: 指南
+group:
+  title: 插件功能
+  order: 3
+title: 圆角折线 (CurvedEdge)
+order: 12
+toc: content
+---
+
+LogicFlow core 包中内置了 直线(line)、直角折线(polyline)、贝塞尔曲线(bezier)三种基础连线。由于 svg 的 polyline 是不带圆角的，所以我们在 extension 包中提供了圆角弧线 CurvedEdge。
+
+圆角折线的使用方式和 LogicFlow 的自定义连线一样，开发者可以通过继承 CurvedEdgeModel 和 CurvedEdge
+
+```tsx | pure
+import { CurvedEdge, CurvedEdgeModel } from '@logicflow/extension'
+
+class myCurvedEdge extends CurvedEdge {
+}
+
+class myCurvedEdgeModel extends CurvedEdgeModel {
+  initEdgeData(data) {
+    super.initEdgeData(data)
+    this.radius = 5
+  }
+
+  getEdgeStyle() {
+    const style = super.getEdgeStyle()
+    style.strokeWidth = 3
+    style.stroke = 'rgb(130, 179, 102)'
+    return style
+  }
+
+  setAttributes() {
+    this.isAnimation = true
+  }
+
+  getEdgeAnimationStyle() {
+    const style = super.getEdgeAnimationStyle()
+    style.strokeDasharray = '15 5'
+    style.animationDuration = '10s'
+    style.stroke = 'rgb(130, 179, 102)'
+    return style
+  }
+}
+```

package/dist/docs/tutorial/extension/custom.en.md

@@ -0,0 +1,142 @@
+---
+nav: Guide
+group:
+  title: Plug-in functionality
+  order: 3
+title: Custom Plugin
+order: 17
+toc: content
+---
+
+LogicFlow provides a lot of plug-ins, but these plug-ins are some of the plug-ins with universal,
+not always meet the business needs. You can customize the plug-ins based on your business scenarios.
+
+## Plug-in base format
+
+```tsx | pure
+class PluginCls {
+  static pluginName = 'pluginName'
+
+  constructor({ lf, LogicFlow }) {
+    // do anything
+  }
+
+  render(lf, toolOverlay) {
+    // do anything
+  }
+
+  destroy() {
+    // do anything
+  }
+}
+```
+
+- A plugin is a class.
+- The class has a static property `pluginName` that identifies the name of the plugin. Plugins with
+  the same name are overridden when initializing an instance of `lf`, also, the user can get an
+  instance of the class plugin by `lf.extension.pluginName`.
+- When initializing `lf` instances, plugin instances are initialized at the same time, and the
+  parameters `lf` and `LogicFlow` are passed in.
+- After `lf` is rendered, the `render` method of the plugin instance is called (if any). The second
+  parameter, toolOverlay, is a node representing the `LogicFlow` Dom layer. Plugin developers can
+  insert html content directly into this node.
+- `destroy` is the method that is called to destroy the plugin. It can be left out in most cases.
+
+## Implementing the context-pad plugin
+
+The following is an example of implementing a `context-pad` plugin to show you how to define a
+plugin that fits your business. A `context-pad` plugin is a node that, when clicked on, displays an
+optional shortcut action next to the node, which can be thought of as a menu that appears when
+left-clicked on.
+
+### Add plug-in option method
+
+LogicFlow mounts instances of plugins as plugin names on `lf.extension` so that our methods
+in `class` can be called with `lf.extension.plugin-name. PluginMethods` calls.
+
+```tsx | pure
+class ContextPad {
+  setContextMenuItems(items) {
+    this.commonMenuItems = items;
+  }
+}
+
+ContextPad.pluginName = "contextPad";
+
+lf.extension.contextPad.setContextMenuItems([
+  {
+    icon: "...",
+    callback: () => {},
+  },
+]);
+```
+
+### Listening for nodes to be clicked
+
+When the plugin is initialized, `lf` is passed to the plugin as a parameter, which can then be used
+to listen for events occurring on the canvas.
+
+```tsx | pure
+class ContextPad {
+  constructor({ lf }) {
+    lf.on("node:click", (data) => {
+      this.showContextPad(data);
+    });
+  }
+
+  showContextPad() {
+    // ...
+  }
+}
+```
+
+### Displaying HTML content at a specified location on the canvas
+
+The plugin's render function takes two arguments, `lf` and `toolOverlay`, which is the component
+layer; LogicFlow's canvas is made up of multiple layers, and the component layer is dedicated to
+rendering custom components.
+
+**LogicFlow's diagram layers**
+
+<img src="../../../public/overlay.png" alt="overlay info" style="width: 300px">
+
+So here we just need to insert the menu into `toolOverlay`, and then move its menu to the
+corresponding position.
+
+```tsx | pure
+class ContextPad {
+  render(lf, toolOverlay) {
+    this.toolOverlay = toolOverlay;
+  }
+
+  createMenu() {
+    this.__menuDOM = document.createElement("div");
+  }
+
+  // Calculate where the menu should be displayed (top right corner of the node)
+  getContextMenuPosition() {
+    const data = this._activeData;
+    const Model = this.lf.graphModel.getElement(data.id);
+    let x;
+    let y;
+    if (Model.BaseType === "node") {
+      x = data.x + Model.width / 2;
+      y = data.y - Model.height / 2;
+    }
+    return this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([x, y]);
+  }
+
+  showMenu() {
+    const [x, y] = this.getContextMenuPosition();
+    this.__menuDOM.style.display = "flex";
+    // Display the menu to the corresponding position
+    this.__menuDOM.style.top = `${y}px`;
+    this.__menuDOM.style.left = `${x + 10}px`;
+    this.toolOverlay.appendChild(this.__menuDOM);
+  }
+}
+```
+
+## example
+
+<a href="https://codesandbox.io/embed/logicflow-base22-rl301?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> Go to CodeSandbox for examples</a>

package/dist/docs/tutorial/extension/custom.zh.md

@@ -0,0 +1,138 @@
+---
+nav: 指南
+group:
+  title: 插件功能
+  order: 3
+title: 自定义插件 (Custom Plugin)
+order: 17
+toc: content
+---
+
+LogicFlow 提供了很多的插件，但是这些插件都是一些具有普适性的插件，不一定都符合业务需求。这时候可以基于自己的业务场景进行自定义插件。
+
+## 插件的基础格式
+
+```tsx | pure
+class PluginCls {
+  static pluginName = 'pluginName'
+
+  constructor({ lf, LogicFlow }) {
+    // do anything
+  }
+
+  render(lf, toolOverlay) {
+    // do anything
+  }
+
+  destroy() {
+    // do anything
+  }
+}
+```
+
+- 插件是一个类。
+- 这个类有个静态属性`pluginName`用于标识插件的名称。同名的插件在初始化`lf`
+  实例的时候会覆盖。同时使用方可以通过`lf.extension.插件名称`获取插件这个类的实例。
+- 在初始化`lf`实例的时候，会同时初始化插件实例，此时会传入参数`lf`和`LogicFlow`。
+- 在`lf`渲染完成后，会调用插件实例的`render`方法(如有)。第二个参数 toolOverlay 是表示`LogicFlow` Dom
+  层的节点。插件开发者可以直接在这个节点插入 html 内容。
+- `destroy`是销毁插件是调用的方法。大多数情况下可以不写。
+
+## 实现 context-pad 插件
+
+下面实现一个`context-pad`示例，向大家介绍如何定义符合自己业务的插件。`context-pad`
+插件是一个点击节点后，在节点旁边出现可选的快捷操作，可以看做是左键点击出现的菜单。
+
+### 增加插入选项方法
+
+LogicFlow 会将插件的实例以插件名称的形式挂载到`lf.extension`上，这样我们在`class`
+中的方法就可以用`lf.extension.插件名称.插件方法`调用了。
+
+```tsx | pure
+class ContextPad {
+  /**
+   * 设置通用的菜单选项
+   */
+  setContextMenuItems(items) {
+    this.commonMenuItems = items;
+  }
+}
+
+ContextPad.pluginName = "contextPad";
+
+// 调用方法
+
+lf.extension.contextPad.setContextMenuItems([
+  {
+    icon: "...",
+    callback: () => {},
+  },
+]);
+```
+
+### 监听节点被点击
+
+在插件被初始化时，会将`lf`以参数的形式传递给插件，这时可以利用`lf`监听画布上发生的事件。
+
+```tsx | pure
+class ContextPad {
+  constructor({ lf }) {
+    lf.on("node:click", (data) => {
+      this.showContextPad(data);
+    });
+  }
+
+  showContextPad() {
+    // ...
+  }
+}
+```
+
+### 在画布指定位置显示 HTML 内容
+
+插件的 render 函数有两个参数，一个是`lf`, 第二个参数是`toolOverlay`, 也就是组件层。LogicFlow
+的画布是由多个图层组成，而组件层则是专门用来渲染自定义的组件。
+
+**LogicFlow 的图分层**
+
+<img src="../../../public/overlay.png" alt="图层说明" style="width: 300px">
+
+所以这里我们只需要将菜单插入到`toolOverlay`, 然后将其菜单移动到对应的位置即可。
+
+```tsx | pure
+class ContextPad {
+  render(lf, toolOverlay) {
+    this.toolOverlay = toolOverlay
+  }
+
+  createMenu() {
+    this.__menuDOM = document.createElement('div')
+  }
+
+  // 计算出菜单应该显示的位置（节点的右上角）
+  getContextMenuPosition() {
+    const data = this._activeData
+    const Model = this.lf.graphModel.getElement(data.id)
+    let x
+    let y
+    if (Model.BaseType === 'node') {
+      x = data.x + Model.width / 2
+      y = data.y - Model.height / 2
+    }
+    return this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([x, y])
+  }
+
+  showMenu() {
+    const [x, y] = this.getContextMenuPosition()
+    this.__menuDOM.style.display = 'flex'
+    // 将菜单显示到对应的位置
+    this.__menuDOM.style.top = `${y}px`
+    this.__menuDOM.style.left = `${x + 10}px`
+    this.toolOverlay.appendChild(this.__menuDOM)
+  }
+}
+```
+
+## 完整示例
+
+<a href="https://codesandbox.io/embed/logicflow-base22-rl301?fontsize=14&hidenavigation=1&theme=dark&view=preview" target="_blank"> 去 CodeSandbox 查看示例</a>