@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/algorithm/edge.ts

@@ -0,0 +1,68 @@
+import LogicFlow from '../LogicFlow'
+import Point = LogicFlow.Point
+
+/**
+ * 求两个线段交点入参：线段1端点: ab, 线段2端点： cd,
+ * @param a
+ * @param b
+ * @param c
+ * @param d
+ * @return：有交点返回交点 Point，无交点返回false
+ */
+export const getCrossPointOfLine = (a: Point, b: Point, c: Point, d: Point) => {
+  /** 1 解线性方程组, 求线段交点. * */
+  // 如果分母为0 则平行或共线, 不相交
+  const denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y)
+  if (denominator === 0) {
+    return false
+  }
+  // 线段所在直线的交点坐标 (x , y)
+  const x =
+    ((b.x - a.x) * (d.x - c.x) * (c.y - a.y) +
+      (b.y - a.y) * (d.x - c.x) * a.x -
+      (d.y - c.y) * (b.x - a.x) * c.x) /
+    denominator
+  const y =
+    -(
+      (b.y - a.y) * (d.y - c.y) * (c.x - a.x) +
+      (b.x - a.x) * (d.y - c.y) * a.y -
+      (d.x - c.x) * (b.y - a.y) * c.y
+    ) / denominator
+
+  /** 2 判断交点是否在两条线段上 * */
+  if (
+    // 交点在线段1上
+    (x - a.x) * (x - b.x) <= 0 &&
+    (y - a.y) * (y - b.y) <= 0 &&
+    // 且交点也在线段2上
+    (x - c.x) * (x - d.x) <= 0 &&
+    (y - c.y) * (y - d.y) <= 0
+  ) {
+    // 返回交点p
+    return {
+      x,
+      y,
+    }
+  }
+  // 否则不相交
+  return false
+}
+
+/* 判断一个点是否在线段中
+入参点：point, 线段起终点，start,end,
+返回值： 在线段中true，否则false
+*/
+export const isInSegment = (point: Point, start: Point, end: Point) => {
+  const { x, y } = point
+  const { x: startX, y: startY } = start
+  const { x: endX, y: endY } = end
+  const k = (endY - startY) / (endX - startX)
+  const b = startY - k * startX
+  return (
+    x >= startX &&
+    x <= endX &&
+    y >= startY &&
+    y <= endY &&
+    Math.abs(y - k * x + b) < Number.EPSILON
+  )
+}

package/src/algorithm/index.ts

@@ -0,0 +1,68 @@
+// 各类算法的实现
+
+/*
+ * 计算垂直边的与起始点有一定距离对称，边垂直于边的点
+ * 调用方：计算箭头位置，计算扩大变得点击区域
+ */
+export const getVerticalPointOfLine = (config) => {
+  /*
+   ** offset: 端点到垂直点的距离
+   ** verticalLength: 两边点到垂直点的距离
+   ** type: 标识求的是线段的开始端点/结束端点
+   */
+  const { start, end, offset, verticalLength, type } = config
+  const pointPosition = {
+    leftX: 0,
+    leftY: 0,
+    rightX: 0,
+    rightY: 0,
+  }
+  // // 边与水平线的夹角
+  const angleOfHorizontal = Math.atan((end.y - start.y) / (end.x - start.x))
+  // 边和两边点的夹角
+  const angleOfPoints = Math.atan(offset / verticalLength)
+  // 点到起点的距离
+  const len = Math.sqrt(verticalLength * verticalLength + offset * offset)
+  if (type === 'start') {
+    if (end.x >= start.x) {
+      pointPosition.leftX =
+        start.x + len * Math.sin(angleOfHorizontal + angleOfPoints)
+      pointPosition.leftY =
+        start.y - len * Math.cos(angleOfHorizontal + angleOfPoints)
+      pointPosition.rightX =
+        start.x - len * Math.sin(angleOfHorizontal - angleOfPoints)
+      pointPosition.rightY =
+        start.y + len * Math.cos(angleOfHorizontal - angleOfPoints)
+    } else {
+      pointPosition.leftX =
+        start.x - len * Math.sin(angleOfHorizontal + angleOfPoints)
+      pointPosition.leftY =
+        start.y + len * Math.cos(angleOfHorizontal + angleOfPoints)
+      pointPosition.rightX =
+        start.x + len * Math.sin(angleOfHorizontal - angleOfPoints)
+      pointPosition.rightY =
+        start.y - len * Math.cos(angleOfHorizontal - angleOfPoints)
+    }
+  } else if (type === 'end') {
+    if (end.x >= start.x) {
+      pointPosition.leftX =
+        end.x + len * Math.sin(angleOfHorizontal - angleOfPoints)
+      pointPosition.leftY =
+        end.y - len * Math.cos(angleOfHorizontal - angleOfPoints)
+      pointPosition.rightX =
+        end.x - len * Math.sin(angleOfHorizontal + angleOfPoints)
+      pointPosition.rightY =
+        end.y + len * Math.cos(angleOfHorizontal + angleOfPoints)
+    } else {
+      pointPosition.leftX =
+        end.x - len * Math.sin(angleOfHorizontal - angleOfPoints)
+      pointPosition.leftY =
+        end.y + len * Math.cos(angleOfHorizontal - angleOfPoints)
+      pointPosition.rightX =
+        end.x + len * Math.sin(angleOfHorizontal + angleOfPoints)
+      pointPosition.rightY =
+        end.y - len * Math.cos(angleOfHorizontal + angleOfPoints)
+    }
+  }
+  return pointPosition
+}

package/src/algorithm/outline.ts

@@ -0,0 +1,77 @@
+import { ModelType } from '../constant'
+import {
+  Model,
+  PolylineEdgeModel,
+  BezierEdgeModel,
+  BaseNodeModel,
+  BaseEdgeModel,
+  LineEdgeModel,
+} from '../model'
+import { points2PointsList, getBBoxOfPoints, getBezierPoints } from '../util'
+
+import OutlineInfo = Model.OutlineInfo
+
+// 获取节点的out
+export const getNodeOutline = (node: BaseNodeModel): OutlineInfo => {
+  const { x, y, width, height } = node
+  return {
+    x: x - width / 2,
+    y: y - height / 2,
+    x1: x + width / 2,
+    y1: y + height / 2,
+  }
+}
+
+export const getLineOutline = (edge: LineEdgeModel): OutlineInfo => {
+  const { startPoint, endPoint } = edge
+  const x = (startPoint.x + endPoint.x) / 2
+  const y = (startPoint.y + endPoint.y) / 2
+  const width = Math.abs(startPoint.x - endPoint.x) + 10
+  const height = Math.abs(startPoint.y - endPoint.y) + 10
+  return {
+    x: x - width / 2,
+    y: y - height / 2,
+    x1: x + width / 2,
+    y1: y + height / 2,
+  }
+}
+
+export const getPolylineOutline = (edge: PolylineEdgeModel): OutlineInfo => {
+  const { points } = edge
+  const pointsList = points2PointsList(points)
+  const bbox = getBBoxOfPoints(pointsList, 8)
+  const { x, y, width, height } = bbox
+  return {
+    x: x - width / 2,
+    y: y - height / 2,
+    x1: x + width / 2,
+    y1: y + height / 2,
+  }
+}
+
+export const getBezierOutline = (edge: BezierEdgeModel): OutlineInfo => {
+  const { path } = edge
+  const pointsList = getBezierPoints(path)
+  const bbox = getBBoxOfPoints(pointsList, 8)
+  const { x, y, width, height } = bbox
+  return {
+    x: x - width / 2,
+    y: y - height / 2,
+    x1: x + width / 2,
+    y1: y + height / 2,
+  }
+}
+
+export const getEdgeOutline = (
+  edge: BaseEdgeModel,
+): OutlineInfo | undefined => {
+  if (edge.modelType === ModelType.LINE_EDGE) {
+    return getLineOutline(edge)
+  }
+  if (edge.modelType === ModelType.POLYLINE_EDGE) {
+    return getPolylineOutline(edge as PolylineEdgeModel)
+  }
+  if (edge.modelType === ModelType.BEZIER_EDGE) {
+    return getBezierOutline(edge as BezierEdgeModel)
+  }
+}

package/src/constant/index.ts

@@ -0,0 +1,127 @@
+export const DEFAULT_VISIBLE_SPACE = 200
+export const ELEMENT_MAX_Z_INDEX = 9999
+
+export const DEFAULT_GRID_SIZE = 10
+
+export enum ElementState {
+  DEFAULT = 1, // 默认显示
+  TEXT_EDIT, // 此元素正在进行文本编辑
+  SHOW_MENU, // 显示菜单，废弃请使用菜单插件
+  ALLOW_CONNECT, // 此元素允许作为当前边的目标节点
+  NOT_ALLOW_CONNECT, // 此元素不允许作为当前边的目标节点
+}
+
+export enum ElementType {
+  NODE = 'node',
+  EDGE = 'edge',
+  GRAPH = 'graph',
+}
+
+export enum ModelType {
+  NODE = 'node',
+  CIRCLE_NODE = 'circle-node',
+  POLYGON_NODE = 'polygon-node',
+  RECT_NODE = 'rect-node',
+  TEXT_NODE = 'text-node',
+  ELLIPSE_NODE = 'ellipse-node',
+  DIAMOND_NODE = 'diamond-node',
+  HTML_NODE = 'html-node',
+  CUSTOM_HTML_NODE = 'custom-html-node',
+  EDGE = 'edge',
+  LINE_EDGE = 'line-edge',
+  POLYLINE_EDGE = 'polyline-edge',
+  BEZIER_EDGE = 'bezier-edge',
+  GRAPH = 'graph',
+}
+
+export enum EventType {
+  ELEMENT_CLICK = 'element:click', // 是 node:click & edge:click 的并集
+
+  // Node events
+  NODE_ADD = 'node:add',
+  NODE_DELETE = 'node:delete',
+  NODE_CLICK = 'node:click',
+  NODE_DBCLICK = 'node:dbclick',
+
+  NODE_GROUP_COPY = 'node:group-copy-add',
+  NODE_DND_ADD = 'node:dnd-add',
+  NODE_DND_DRAG = 'node:dnd-drag',
+  NODE_MOUSEDOWN = 'node:mousedown',
+  NODE_DRAGSTART = 'node:dragstart',
+  NODE_DRAG = 'node:drag',
+  NODE_DROP = 'node:drop',
+  NODE_MOUSEUP = 'node:mouseup',
+  NODE_MOUSEMOVE = 'node:mousemove',
+  NODE_MOUSEENTER = 'node:mouseenter',
+  NODE_MOUSELEAVE = 'node:mouseleave',
+  NODE_CONTEXTMENU = 'node:contextmenu',
+  NODE_ROTATE = 'node:rotate',
+  NODE_RESIZE = 'node:resize',
+
+  // 节点 properties 变化事件
+  NODE_PROPERTIES_CHANGE = 'node:properties-change',
+  NODE_PROPERTIES_DELETE = 'node:properties-delete',
+
+  // Edge events
+  EDGE_ADD = 'edge:add',
+  EDGE_DELETE = 'edge:delete',
+  EDGE_CLICK = 'edge:click',
+  EDGE_DBCLICK = 'edge:dbclick',
+
+  EDGE_MOUSEENTER = 'edge:mouseenter',
+  EDGE_MOUSELEAVE = 'edge:mouseleave',
+  EDGE_CONTEXTMENU = 'edge:contextmenu',
+  EDGE_ADJUST = 'edge:adjust',
+  EDGE_EXCHANGE_NODE = 'edge:exchange-node',
+
+  // Anchor events
+  ANCHOR_DRAGSTART = 'anchor:dragstart',
+  ANCHOR_DRAG = 'anchor:drag',
+  ANCHOR_DROP = 'anchor:drop',
+  ANCHOR_DRAGEND = 'anchor:dragend',
+
+  // Adjust point events
+  ADJUST_POINT_MOUSEDOWN = 'adjustPoint:mousedown',
+  ADJUST_POINT_MOUSEUP = 'adjustPoint:mouseup',
+  ADJUST_POINT_MOUSEMOVE = 'adjustPoint:mousemove',
+  ADJUST_POINT_DRAGSTART = 'adjustPoint:dragstart',
+  ADJUST_POINT_DRAG = 'adjustPoint:drag',
+  ADJUST_POINT_DROP = 'adjustPoint:drop',
+  ADJUST_POINT_DRAGEND = 'adjustPoint:dragend',
+
+  // Blank events
+  BLANK_MOUSEDOWN = 'blank:mousedown',
+  BLANK_DRAGSTART = 'blank:dragstart',
+  BLANK_DRAG = 'blank:drag',
+  BLANK_DROP = 'blank:drop',
+  BLANK_MOUSEMOVE = 'blank:mousemove',
+  BLANK_MOUSEUP = 'blank:mouseup',
+  BLANK_CLICK = 'blank:click',
+  BLANK_CONTEXTMENU = 'blank:contextmenu',
+
+  // Selection events
+  SELECTION_MOUSEDOWN = 'selection:mousedown',
+  SELECTION_DRAGSTART = 'selection:dragstart',
+  SELECTION_DRAG = 'selection:drag',
+  SELECTION_DROP = 'selection:drop',
+  SELECTION_MOUSEMOVE = 'selection:mousemove',
+  SELECTION_MOUSEUP = 'selection:mouseup',
+  SELECTION_CONTEXTMENU = 'selection:contextmenu',
+  CONNECTION_NOT_ALLOWED = 'connection:not-allowed',
+
+  // Other events
+  HISTORY_CHANGE = 'history:change',
+  TEXT_UPDATE = 'text:update',
+  GRAPH_TRANSFORM = 'graph:transform',
+  GRAPH_RENDERED = 'graph:rendered',
+}
+
+export enum OverlapMode {
+  DEFAULT = 0, // 默认
+  INCREASE = 1, // 递增
+}
+
+export enum SegmentDirection {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}

package/src/event/event.md

@@ -0,0 +1,66 @@
+# EventCenter
+
+`eventCenter` 是 LogicFlow 内部的通讯中心，通过 `eventCenter` 来发布事件或者监听事件，以低耦合的方式使两个实例产生交互。
+
+在开发过程中，使用 `eventCenter` 也需要遵循一些规范。
+
+## 事件名
+
+### 规范
+
+命名遵循 `namespace:eventName` 的结构，同类 eventName 通过 namespace 来区分。
+
+比如 node 和 edge 抛出的都是 click 事件，但是观察者可能是不同群体，通过 namespace 使得事件监听更精确，不容易出错。
+
+目前 core 包中定义的 namespace 包括：
+
+- `node`：节点事件
+- `edge`：边事件
+- `anchor`：锚点事件
+- `blank`：画布空白区域事件
+- `history`：历史记录事件
+- `selection`：选区事件
+
+### 开发注意
+
+内部均通过 `eventCenter` 来抛出事件，包括以下两种情况：
+
+- `graphModel` 中通过 `this.eventCenter` 调用 `eventCenter` 对象的 `emit` 方法抛出事件。
+- 组件通过 `props` 获取到 `eventCenter` 实例对象，然后在组件内部调用 `eventCenter` 的 `emit` 方法来抛出事件。
+  - 部分组件会从 `props` 中直接获取 `eventCenter` 实例
+  - 而另一部分组件则需要从 `props` 中获取 `graphModel` 实例，然后通过 `graphModel.eventCenter` 获取 `eventCenter` 实例
+
+用户可以通过 LogicFlow 的实例 `lf` 去监听我们抛出的事件。
+
+如果组件内部监听了 `eventCenter` 事件，在组件销毁的时候，需要取消这些监听。
+
+## 事件对象
+
+在使用 `emit` 方法抛出事件时，可以传递一个对象作为第二个参数，该对象将作为对应的事件监听器的回调函数的入参。
+
+事件对象可以包含任何与当前事件相关的信息，比如节点的 id，边的 id，原生鼠标事件对象等。
+
+以 `node:click` 事件为例：
+
+```ts
+// 抛出 node:click 事件
+eventCenter.emit('node:click', {
+  data: {
+    // 节点数据
+  },
+  e: MouseEvent,
+  position: {
+    // 鼠标点击的位置信息
+  }
+});
+
+// 监听 node:click 事件
+eventCenter.on('node:click', (event) => {
+  console.log(event); // event 即为抛出事件时传递的对象
+});
+
+// 使用解构赋值可以便捷地获取事件对象中的信息
+eventCenter.on('node:click', ({ data, e, position }) => {
+  console.log(data, e, position);
+});
+```