@logicflow/core 2.2.0-alpha.2 → 2.2.0-alpha.4

package/src/util/theme.ts

@@ -1,312 +1,21 @@
 import { cloneDeep, merge, assign } from 'lodash-es'
 import LogicFlow from '../LogicFlow'
-
-export const defaultTheme: LogicFlow.Theme = {
-  baseNode: {
-    fill: '#fff',
-    stroke: '#000',
-    strokeWidth: 2,
-  },
-
-  baseEdge: {
-    stroke: '#000',
-    strokeWidth: 2,
-  },
-
-  rect: {},
-  circle: {},
-  diamond: {},
-  ellipse: {},
-  polygon: {},
-
-  text: {
-    color: '#000',
-    stroke: 'none',
-    fontSize: 12,
-    background: {
-      fill: 'transparent',
-    },
-  },
-
-  anchor: {
-    stroke: '#000',
-    fill: '#fff',
-    r: 4,
-    hover: {
-      r: 10,
-      fill: '#949494',
-      fillOpacity: 0.5,
-      stroke: '#949494',
-    },
-  },
-
-  anchorLine: {
-    stroke: '#000',
-    strokeWidth: 2,
-    strokeDasharray: '3,2',
-  },
-
-  nodeText: {
-    color: '#000',
-    overflowMode: 'default',
-    fontSize: 12,
-    lineHeight: 1.2,
-  },
-
-  edgeText: {
-    textWidth: 100,
-    overflowMode: 'default',
-    fontSize: 12,
-    background: {
-      fill: '#fff',
-    },
-  },
-
-  line: {},
-  polyline: {},
-
-  bezier: {
-    fill: 'none',
-    adjustLine: {
-      stroke: '#949494',
-    },
-    adjustAnchor: {
-      r: 4,
-      fill: '#949494',
-      fillOpacity: 1,
-      stroke: '#949494',
-    },
-  },
-
-  arrow: {
-    offset: 10,
-    verticalLength: 5, // 箭头垂直于边的距离
-  },
-
-  snapline: {
-    stroke: '#949494',
-    strokeWidth: 1,
-  },
-
-  edgeAdjust: {
-    r: 4,
-    fill: '#fff',
-    stroke: '#949494',
-    strokeWidth: 2,
-  },
-
-  outline: {
-    fill: 'transparent',
-    stroke: '#949494',
-    strokeDasharray: '3,3',
-    hover: {
-      stroke: '#949494',
-    },
-  },
-
-  edgeAnimation: {
-    stroke: 'red',
-    strokeDasharray: '10,10',
-    strokeDashoffset: '100%',
-    animationName: 'lf_animate_dash',
-    animationDuration: '20s',
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear',
-    animationDirection: 'normal',
-  },
-
-  rotateControl: {
-    stroke: '#000',
-    fill: '#fff',
-    strokeWidth: 1.5,
-  },
-
-  resizeControl: {
-    width: 7,
-    height: 7,
-    fill: '#fff',
-    stroke: '#000',
-  },
-
-  resizeOutline: {
-    fill: 'none',
-    stroke: 'transparent', // 矩形默认不显示调整边框
-    strokeWidth: 1,
-    strokeDasharray: '3,3',
-  },
-}
-export const radiusMode: any = {
-  rect: { radius: 8 },
-  diamond: { radius: 8 },
-  polygon: { radius: 8 },
-  polyline: { radius: 8 },
-  arrow: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    offset: 10,
-    verticalLength: 5, // 箭头垂直于边的距离
-  },
-  snapline: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    stroke: '#949494',
-    strokeWidth: 1,
-  },
-  outline: {
-    radius: 8,
-    fill: 'transparent',
-    stroke: '#949494',
-    strokeDasharray: '3,3',
-    hover: {
-      stroke: '#949494',
-    },
-  },
-  resizeOutline: {
-    radius: 8,
-    fill: 'none',
-    stroke: 'transparent', // 矩形默认不显示调整边框
-    strokeWidth: 1,
-    strokeDasharray: '3,3',
-  },
-}
-export const darkMode: any = {
-  baseNode: {
-    fill: '#23272e',
-    stroke: '#fefeff',
-  },
-  baseEdge: {
-    stroke: '#fefeff',
-  },
-  rect: { radius: 8 },
-  diamond: { radius: 8 },
-  polygon: { radius: 8 },
-  polyline: { radius: 8 },
-  nodeText: {
-    color: '#fefeff',
-    overflowMode: 'default',
-    fontSize: 12,
-    lineHeight: 1.2,
-  },
-  arrow: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    offset: 10,
-    verticalLength: 5, // 箭头垂直于边的距离
-  },
-  snapline: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    stroke: '#949494',
-    strokeWidth: 1,
-  },
-  outline: {
-    radius: 8,
-    fill: 'transparent',
-    stroke: '#949494',
-    strokeDasharray: '3,3',
-    hover: {
-      stroke: '#949494',
-    },
-  },
-  resizeOutline: {
-    radius: 8,
-    fill: 'none',
-    stroke: 'transparent', // 矩形默认不显示调整边框
-    strokeWidth: 1,
-    strokeDasharray: '3,3',
-  },
-}
-export const colorfulMode: any = {
-  rect: { fill: '#72CBFF', stroke: '#3ABDF9', radius: 8 },
-  circle: { fill: '#FFE075', stroke: '#F9CE3A', radius: 8 },
-  ellipse: { fill: '#FFA8A8', stroke: '#FF6B66', radius: 8 },
-  text: { fill: '#72CBFF', radius: 8 },
-  diamond: { fill: '#96F7AF', stroke: '#40EF7E', radius: 8 },
-  polygon: { fill: '#E0A8FF', stroke: '#C271FF', radius: 8 },
-  polyline: { radius: 8 },
-  arrow: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    offset: 10,
-    verticalLength: 5, // 箭头垂直于边的距离
-  },
-  snapline: {
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round',
-    stroke: '#949494',
-    strokeWidth: 1,
-  },
-  outline: {
-    radius: 8,
-    fill: 'transparent',
-    stroke: '#949494',
-    strokeDasharray: '3,3',
-    hover: {
-      stroke: '#949494',
-    },
-  },
-  resizeOutline: {
-    radius: 8,
-    fill: 'none',
-    stroke: 'transparent', // 矩形默认不显示调整边框
-    strokeWidth: 1,
-    strokeDasharray: '3,3',
-  },
-}
-
-export const themeModeMap = {
-  colorful: colorfulMode,
-  dark: darkMode,
-  radius: radiusMode,
-  default: defaultTheme,
-}
-
-// 不同主题的背景色
-export const darkBackground = {
-  background: '#23272e',
-}
-export const colorfulBackground = {
-  background: '#fefeff',
-}
-export const defaultBackground = {
-  background: '#ffffff',
-}
-export const backgroundModeMap = {
-  colorful: colorfulBackground,
-  dark: darkBackground,
-  radius: defaultBackground,
-  default: defaultBackground,
-}
-
-// 不同主题的网格样式
-export const darkGrid = {
-  color: '#66676a',
-  thickness: 1,
-}
-export const colorfulGrid = {
-  color: '#dadada',
-  thickness: 1,
-}
-export const defaultGrid = {
-  color: '#acacac',
-  thickness: 1,
-}
-export const gridModeMap = {
-  colorful: colorfulGrid,
-  dark: darkGrid,
-  radius: defaultGrid,
-  default: defaultGrid,
-}
+import {
+  themeModeMap,
+  backgroundModeMap,
+  defaultBackground,
+  gridModeMap,
+  defaultGrid,
+} from '../constant/theme'
 
 /* 主题（全局样式）相关工具方法 */
 export const setupTheme = (
   customTheme?: Partial<LogicFlow.Theme>,
-  themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string,
+  themeMode?: LogicFlow.ThemeMode | string,
 ): LogicFlow.Theme => {
-  let theme = cloneDeep(defaultTheme)
-  if (themeMode) {
-    theme = merge(theme, themeModeMap[themeMode])
-  }
+  let theme =
+    cloneDeep(themeModeMap[themeMode || 'default']) ||
+    cloneDeep(themeModeMap.default)
   if (customTheme) {
     /**
      * 为了不让默认样式被覆盖，使用 merge 方法
@@ -363,7 +72,7 @@ export const clearThemeMode = (): void => {
   const resetTheme = {
     colorful: {},
     dark: {},
-    radius: {},
+    retro: {},
     default: {},
   }
   assign(themeModeMap, resetTheme)

package/src/view/Control.tsx

@@ -286,61 +286,6 @@ export class ResizeControl extends Component<
         this.dragHandler.cancelDrag()
       },
     })
-    // 1. 计算当前 Control 的一些信息，
-    // const {
-    //   r, // circle
-    //   rx, // ellipse/diamond
-    //   ry,
-    //   width, // rect/html
-    //   height,
-    //   PCTResizeInfo,
-    //
-    //   minWidth,
-    //   minHeight,
-    //   maxWidth,
-    //   maxHeight,
-    // } = this.nodeModel
-    // const isFreezeWidth = minWidth === maxWidth
-    // const isFreezeHeight = minHeight === maxHeight
-    //
-    // const resizeInfo = {
-    //   width: r || rx || width,
-    //   height: r || ry || height,
-    //   deltaX,
-    //   deltaY,
-    //   PCTResizeInfo,
-    // }
-    //
-    // const pct = r || (rx && ry) ? 1 / 2 : 1
-    // const nextSize = this.recalcResizeInfo(
-    //   this.index,
-    //   resizeInfo,
-    //   pct,
-    //   isFreezeWidth,
-    //   isFreezeHeight,
-    // )
-    //
-    // // 限制放大缩小的最大最小范围
-    // if (
-    //   nextSize.width < minWidth ||
-    //   nextSize.width > maxWidth ||
-    //   nextSize.height < minHeight ||
-    //   nextSize.height > maxHeight
-    // ) {
-    //   this.dragHandler.cancelDrag()
-    //   return
-    // }
-    // // 如果限制了宽高不变，对应的 x/y 不产生位移
-    // nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX
-    // nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY
-    //
-    // const preNodeData = this.nodeModel.getData()
-    // const curNodeData = this.nodeModel.resize(nextSize)
-    //
-    // // 更新边
-    // this.updateEdgePointByAnchors()
-    // // 触发 resize 事件
-    // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
   }
 
   onDragStart = () => {
@@ -372,28 +317,70 @@ export class ResizeControl extends Component<
     this.updateEdgePointByAnchors()
   }
 
+  onPointerDown = (e: PointerEvent) => {
+    e.stopPropagation()
+    this.dragHandler.handleMouseDown(e)
+  }
+
+  getViewPosition(direction, x, y) {
+    const { width = 8, height = 8 } = this.props.model.getResizeControlStyle()
+    switch (direction) {
+      case 'nw':
+        return {
+          x: x - width / 2,
+          y: y - height / 2,
+        }
+      case 'ne': {
+        return {
+          x: x + width / 2,
+          y: y - height / 2,
+        }
+      }
+      case 'se': {
+        return {
+          x: x + width / 2,
+          y: y + height / 2,
+        }
+      }
+      case 'sw': {
+        return {
+          x: x - width / 2,
+          y: y + height / 2,
+        }
+      }
+      default: {
+        return {
+          x,
+          y,
+        }
+      }
+    }
+  }
+
   render(): h.JSX.Element {
     const { x, y, direction, model } = this.props
     const { width, height, ...restStyle } = model.getResizeControlStyle()
+    // 为了让调整点在视觉上在调整外框的中间，因此在渲染时转换一下
+    const { x: viewX, y: viewY } = this.getViewPosition(direction, x, y)
     return (
       <g className={`lf-resize-control lf-resize-control-${direction}`}>
         <Rect
           className="lf-resize-control-content"
-          x={x}
-          y={y}
+          x={viewX}
+          y={viewY}
           width={width ?? 7}
           height={height ?? 7}
           {...restStyle}
         />
         <Rect
           className="lf-resize-control-content"
-          x={x}
-          y={y}
-          width={25}
-          height={25}
+          x={viewX}
+          y={viewY}
+          width={width ? width + 5 : 25}
+          height={width ? width + 5 : 25}
           fill="transparent"
           stroke="transparent"
-          onPointerDown={this.dragHandler.handleMouseDown}
+          onPointerDown={this.onPointerDown}
         />
       </g>
     )
@@ -451,7 +438,18 @@ export class ResizeControlGroup extends Component<IResizeControlGroupProps> {
     const { model } = this.props
     const { x, y, width, height } = model
     const style = model.getResizeOutlineStyle()
-    return <Rect {...style} x={x} y={y} width={width} height={height} />
+
+    return (
+      <Rect
+        {...style}
+        pointer-events="none"
+        x={x}
+        y={y}
+        // TODO：宽高padding后续改成配置化的
+        width={width + 10}
+        height={height + 10}
+      />
+    )
   }
 
   render(): h.JSX.Element {

package/src/view/edge/PolylineEdge.tsx

@@ -5,6 +5,7 @@ import LogicFlow from '../../LogicFlow'
 import { GraphModel, PolylineEdgeModel } from '../../model'
 import { EventType, SegmentDirection } from '../../constant'
 import { StepDrag, points2PointsList } from '../../util'
+import { generateRoundedCorners } from '../../util/geometry'
 import { getVerticalPointOfLine } from '../../algorithm'
 
 import ArrowInfo = LogicFlow.ArrowInfo
@@ -110,7 +111,7 @@ export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
    */
   getEdge() {
     const { model } = this.props
-    const { points, isAnimation, arrowConfig } = model
+    const { points, isAnimation, arrowConfig, properties } = model
     const style = model.getEdgeStyle()
     const animationStyle = model.getEdgeAnimationStyle()
     const {
@@ -123,9 +124,20 @@ export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
       animationTimingFunction,
       animationDirection,
     } = animationStyle
+    // 应用通用圆角：当存在样式半径时，为折线拐点生成圆角
+    const radius: number = (properties?.radius ??
+      (style as any)?.radius ??
+      0) as number
+    const roundedPointsStr = (() => {
+      if (!radius || radius <= 0) return points
+      const list = points2PointsList(points)
+      const rounded = generateRoundedCorners(list, radius, false)
+      return rounded.map((p) => `${p.x},${p.y}`).join(' ')
+    })()
+
     return (
       <Polyline
-        points={points}
+        points={roundedPointsStr}
         {...style}
         {...arrowConfig}
         {...(isAnimation

package/src/view/node/BaseNode.tsx

@@ -43,6 +43,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   startTime?: number
   modelDisposer: IReactionDisposer
   longPressTimer?: number
+  mouseDownPosition?: LogicFlow.Position
 
   constructor(props: IProps) {
     super()
@@ -248,8 +249,11 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       height,
       gridSize,
     } = graphModel
-    model.isDragging = true
     const { clientX, clientY } = event!
+    const { x: mouseDownX, y: mouseDownY } = this.mouseDownPosition!
+    if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+      model.isDragging = true
+    }
     let {
       canvasOverlayPosition: { x, y },
     } = graphModel.getPointByClient({
@@ -347,7 +351,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     const { model, graphModel } = this.props
     // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
     // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
-    if (!isDragging && timeInterval > 100) return
+    if (!isDragging && timeInterval > 300) return
     if (!isDragging) {
       this.onDragEnd()
       this.handleMouseUp()
@@ -403,6 +407,16 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     } else {
       graphModel.eventCenter.emit(EventType.ELEMENT_CLICK, eventOptions)
       graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions)
+      // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+      const el = e.currentTarget as HTMLElement
+      const rAF =
+        typeof window !== 'undefined' &&
+        typeof window.requestAnimationFrame === 'function'
+          ? window.requestAnimationFrame.bind(window)
+          : (fn: () => void) => setTimeout(fn, 0)
+      rAF(() => {
+        el.focus()
+      })
     }
   }
 
@@ -438,6 +452,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
 
   handleMouseDown = (ev: PointerEvent) => {
     const { model, graphModel } = this.props
+    this.mouseDownPosition = { x: ev.clientX, y: ev.clientY }
     this.startTime = new Date().getTime()
     const { editConfigModel } = graphModel
     if (editConfigModel.adjustNodePosition && model.draggable) {
@@ -524,8 +539,8 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
         <g transform={transform}>
           {this.getShape()}
           {this.getText()}
-          {allowRotate && this.getRotateControl()}
           {allowResize && this.getResizeControl()}
+          {allowRotate && this.getRotateControl()}
         </g>
         {!hideAnchors && this.getAnchors()}
       </g>

package/src/view/node/HtmlNode.tsx

@@ -54,14 +54,12 @@ export class HtmlNode<
   }
 
   componentDidMount() {
-    // console.log('HtmlNode --->>> componentDidMount - 初始化内容')
     if (this.shouldUpdate() && this.rootEl) {
       this.setHtml(this.rootEl)
     }
   }
 
   componentDidUpdate() {
-    // console.log('HtmlNode --->>> componentDidUpdate - 更新节点内容')
     // DONE: 将 componentDidMount 和 componentDidUpdate 区分开，如果写在一次，渲染 React 组件会重复初始化，消耗过多资源
     // 为了保证历史兼容性，先将默认 HTML 节点的 setHtml 和 confirmUpdate 保持一直，用户可通过自定义的方式重新定义
     if (this.shouldUpdate() && this.rootEl) {
@@ -80,14 +78,33 @@ export class HtmlNode<
     const style = model.getNodeStyle()
     this.currentProperties = JSON.stringify(model.properties)
     return (
-      <foreignObject
-        {...style}
-        x={x - width / 2}
-        y={y - height / 2}
-        width={width}
-        height={height}
-        ref={this.ref}
-      />
+      <g>
+        {style.shadow && (
+          <defs>
+            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+              <feDropShadow {...style.shadow} />
+            </filter>
+          </defs>
+        )}
+        <rect
+          x={x - width / 2}
+          y={y - height / 2}
+          width={width}
+          height={height}
+          rx={style.radius}
+          ry={style.radius}
+          {...style}
+          filter="url(#shadow)"
+        />
+        <foreignObject
+          {...style}
+          x={x - width / 2}
+          y={y - height / 2}
+          width={width}
+          height={height}
+          ref={this.ref}
+        />
+      </g>
     )
   }
 }

package/src/view/overlay/CanvasOverlay.tsx

@@ -115,6 +115,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       if (selectElements.size > 0) {
         graphModel.clearSelectElements()
       }
+      // 如果是拖拽状态，不触发点击事件
+      if (this.state.isDragging) return
       graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev })
     }
   }
@@ -184,8 +186,6 @@ export class CanvasOverlay extends Component<IProps, IState> {
       } else {
         eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev })
       }
-      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-      this.clickHandler(ev)
     }
   }
   pointerMoveHandler = (ev: PointerEvent) => {
@@ -249,6 +249,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       } = this.props
       // 标记退出捏合，框选等交互可恢复
       editConfigModel.updateEditConfig({ isPinching: false })
+      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+      this.clickHandler(ev)
     }
   }