@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/overlay/gridConfig.ts

@@ -1,103 +0,0 @@
-/**
- * 网格高级 majorBold 配置。
- *
- * 示例（布尔值）：
- *  - false：禁用特殊样式，opacity=1，无加粗，无虚线
- *  - true：启用默认值，opacity=0.75，每第 5 条线/点加粗/实线，
- *          虚线图案通过 getDashArrayForSize(size) 计算
- *
- * 示例（对象）：
- * {
- *   opacity: 0.6,
- *   boldIndices: [4, 8],
- *   dashArrayConfig: { pattern: [4,2,4] },
- *   customBoldWidth: 2,
- * }
- */
-export type MajorBoldConfig = {
-  /** 默认网格透明度 (0-1) */
-  opacity: number
-  /** 一个周期内需要加粗/实线的索引列表 */
-  boldIndices: number[]
-  /** 虚线样式的计算配置 */
-  dashArrayConfig: {
-    /** 固定的虚线模式（可选） */
-    pattern: number[]
-  }
-  /** mesh 网格的自定义加粗线宽（可选） */
-  customBoldWidth?: number
-}
-
-export const defaultGridConfig: MajorBoldConfig = {
-  opacity: 1,
-  boldIndices: [5],
-  dashArrayConfig: {
-    pattern: [2, 1],
-  },
-  customBoldWidth: 2,
-}
-
-/**
- * 校验并规范化 GridConfig。
- * - 将 opacity 限制在 [0,1] 范围
- * - boldIndices 过滤为正整数并去重
- */
-export function validateGridConfig(cfg: MajorBoldConfig): MajorBoldConfig {
-  const opacity = Math.max(
-    0,
-    Math.min(1, cfg.opacity ?? defaultGridConfig.opacity),
-  )
-  const boldIndicesSet = new Set<number>()
-  const boldRaw = Array.isArray(cfg.boldIndices)
-    ? cfg.boldIndices
-    : defaultGridConfig.boldIndices
-  for (const n of boldRaw) {
-    if (typeof n === 'number' && Number.isFinite(n) && n > 0) {
-      boldIndicesSet.add(Math.floor(n))
-    }
-  }
-  const boldIndices = Array.from(boldIndicesSet)
-  const pattern = Array.isArray(cfg.dashArrayConfig?.pattern)
-    ? cfg.dashArrayConfig.pattern
-    : defaultGridConfig.dashArrayConfig.pattern
-  const dashArrayConfig = {
-    pattern,
-  }
-  const customBoldWidth = cfg.customBoldWidth
-  return {
-    opacity,
-    boldIndices: boldIndices.length
-      ? boldIndices
-      : defaultGridConfig.boldIndices,
-    dashArrayConfig,
-    customBoldWidth,
-  }
-}
-
-/**
- * 合并用户行为配置与默认值。
- * - false → 关闭模式：opacity=1，bold=[]，关闭虚线
- * - true → 默认模式：采用 defaultGridConfig
- * - object → 自定义模式：校验后使用用户配置
- */
-export function mergeMajorBoldConfig(input?: boolean | MajorBoldConfig): {
-  mode: 'disabled' | 'default' | 'custom'
-  config: MajorBoldConfig
-} {
-  if (input === false) {
-    return {
-      mode: 'disabled',
-      config: {
-        opacity: 1,
-        boldIndices: [],
-        dashArrayConfig: {
-          pattern: [],
-        },
-      },
-    }
-  }
-  if (input === true || input == null) {
-    return { mode: 'default', config: { ...defaultGridConfig } }
-  }
-  return { mode: 'custom', config: validateGridConfig(input) }
-}

package/src/view/overlay/index.ts

@@ -1,8 +0,0 @@
-export * from './CanvasOverlay'
-export * from './BezierAdjustOverlay'
-export * from './BackgroundOverlay'
-export * from './Grid'
-export * from './ModificationOverlay'
-export * from './OutlineOverlay'
-export * from './SnaplineOverlay'
-export * from './ToolOverlay'

package/src/view/shape/Circle.tsx

@@ -1,41 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-
-export type ICircleProps = {
-  x?: number
-  y?: number
-  r?: number
-  className?: string
-} & LogicFlow.CommonTheme
-
-export function Circle(props: ICircleProps): h.JSX.Element {
-  const { x = 0, y = 0, r = 4, className } = props
-
-  const attrs: ICircleProps = {
-    cx: x,
-    cy: y,
-    r,
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = `lf-basic-shape`
-  }
-
-  return <circle {...attrs} />
-}
-
-export default Circle

package/src/view/shape/Ellipse.tsx

@@ -1,42 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-
-export type IEllipseProps = {
-  x?: number
-  y?: number
-  rx?: number
-  ry?: number
-  className?: string
-} & LogicFlow.CommonTheme
-
-export function Ellipse(props: IEllipseProps): h.JSX.Element {
-  const { x = 0, y = 0, rx = 4, ry = 4, className } = props
-
-  const attrs: Record<string, any> = {
-    cx: x,
-    cy: y,
-    rx,
-    ry,
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-  }
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = `lf-basic-shape`
-  }
-
-  return <ellipse {...attrs} />
-}
-
-export default Ellipse

package/src/view/shape/Line.tsx

@@ -1,39 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type ILineProps = {
-  id?: string
-  tabindex?: number
-  x1?: number
-  y1?: number
-  x2?: number
-  y2?: number
-  stroke?: string // Color
-  className?: string
-  style?: h.JSX.CSSProperties
-  [key: string]: any
-}
-
-export function Line(props: ILineProps): h.JSX.Element {
-  const attrs: ILineProps = {
-    // default
-    x1: 10,
-    y1: 10,
-    x2: 20,
-    y2: 20,
-    stroke: 'black',
-    // ...props
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (k === 'style') {
-      attrs[k] = v
-    } else if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  return <line {...attrs} />
-}
-
-export default Line

package/src/view/shape/Path.tsx

@@ -1,22 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type IPathProps = {
-  d: string
-  [key: string]: any
-}
-
-export function Path(props: IPathProps): h.JSX.Element {
-  const attrs: Record<string, any> = {
-    d: '',
-  }
-  forEach(toPairs(props), ([k, v]: [key: string, v: any]) => {
-    if (k === 'style' || typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  return <path {...attrs} />
-}
-
-export default Path

package/src/view/shape/Polygon.tsx

@@ -1,54 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import { LogicFlow } from '../..'
-import { generateRoundedCorners } from '../../util/geometry'
-
-export type IPolygonProps = {
-  points: LogicFlow.PointTuple[]
-  x?: number
-  y?: number
-  className?: string
-  radius?: number
-}
-
-export function Polygon(props: IPolygonProps): h.JSX.Element {
-  const { points = [], className, radius } = props
-  const attrs: Record<string, any> = {
-    fill: 'transparent',
-    fillOpacity: 1,
-    strokeWidth: 1,
-    stroke: '#000',
-    strokeOpacity: 1,
-    points: '',
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = 'lf-basic-shape'
-  }
-  if (radius) {
-    const pointList = points.map((point) => ({ x: point[0], y: point[1] }))
-    const rounded = generateRoundedCorners(pointList, radius, true)
-    const d = rounded.length
-      ? `M ${rounded[0].x} ${rounded[0].y} ${rounded
-          .slice(1)
-          .map((p) => `L ${p.x} ${p.y}`)
-          .join(' ')} Z`
-      : ''
-    attrs.d = d
-    delete attrs.points
-    return <path {...attrs} />
-  } else {
-    attrs.points = points.map((point) => point.join(',')).join(' ')
-    return <polygon {...attrs} />
-  }
-}
-
-export default Polygon

package/src/view/shape/Polyline.tsx

@@ -1,31 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-
-export type IPolylineProps = {
-  points: string
-  pathLength?: number | 'none'
-  className?: string
-}
-
-export function Polyline(props: IPolylineProps): h.JSX.Element {
-  const { className } = props
-  const attrs: Record<string, unknown> = {
-    points: '',
-    fill: 'none',
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: unknown]) => {
-    if (k === 'style') {
-      attrs[k] = v
-    } else if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-  if (className) {
-    attrs.className = `${className}`
-  }
-
-  return <polyline {...attrs} />
-}
-
-export default Polyline

package/src/view/shape/Rect.tsx

@@ -1,44 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { forEach, toPairs } from 'lodash-es'
-import LogicFlow from '../..'
-
-export type IRectProps = {
-  x: number
-  y: number
-  width: number
-  height: number
-  className?: string
-  radius?: LogicFlow.NumberOrPercent
-  [key: string]: any
-}
-
-export function Rect(props: IRectProps): h.JSX.Element {
-  const { x, y, width, height, className, strokeWidth, radius = 0 } = props
-
-  const leftTopX = x - width / 2
-  const leftTopY = y - height / 2
-  const attrs: Record<string, any> = {}
-  attrs['stroke-width'] = strokeWidth
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (className) {
-    attrs.className = `lf-basic-shape ${className}`
-  } else {
-    attrs.className = 'lf-basic-shape'
-  }
-
-  if (radius) {
-    attrs.rx = radius
-    attrs.ry = radius
-  }
-  attrs.x = leftTopX
-  attrs.y = leftTopY
-
-  return <rect {...attrs} />
-}
-
-export default Rect

package/src/view/shape/Text.tsx

@@ -1,168 +0,0 @@
-import { createElement as h } from 'preact/compat'
-import { BaseNodeModel, BaseEdgeModel } from '../../model'
-import { ElementType, ModelType } from '../../constant'
-import { getHtmlTextHeight } from '../../util'
-import { forEach, toPairs } from 'lodash-es'
-
-export type ITextProps = {
-  x: number
-  y: number
-  value: string
-  fontSize?: number
-  fill?: string
-  overflowMode?: 'default' | 'autoWrap' | 'ellipsis'
-  textWidth?: number
-  lineHeight?: number
-  fontFamily?: string | null
-  wrapPadding?: string | number | null
-  model: BaseNodeModel | BaseEdgeModel
-  [key: string]: any
-}
-export type ForeignObjectPropsType =
-  'string | number | SignalLike<string | number | undefined> | undefined'
-
-export function Text(props: ITextProps): h.JSX.Element | null {
-  const {
-    x = 0,
-    y = 0,
-    value,
-    fontSize = 12,
-    fill = 'currentColor',
-    overflowMode = 'default',
-    // TODO: 确认该 textWidth 为 '' 时跟设置什么值一致
-    textWidth = undefined,
-    model,
-  } = props
-
-  const attrs: Record<string, any> = {
-    x,
-    y,
-    fill,
-    fontSize,
-    textAnchor: 'middle',
-    dominantBaseline: 'central',
-    // ...props,
-  }
-
-  forEach(toPairs(props), ([k, v]: [k: string, v: any]) => {
-    if (typeof v !== 'object') {
-      attrs[k] = v
-    }
-  })
-
-  if (value) {
-    // String(value)，兼容纯数字的文案
-    // TODO: 将 value 转为纯文本，移除其中 \n \r 等特殊字符，看是否应该丰富该功能
-    const rows = String(value).split(/[\r\n]/g)
-    const rowsLength = rows.length
-
-    if (overflowMode !== 'default') {
-      // 非文本节点设置了自动换行，或者边设置了自动换行并且设置了 textWidth
-      const { BaseType, modelType } = model
-      if (
-        (BaseType === ElementType.NODE && modelType !== ModelType.TEXT_NODE) ||
-        (BaseType === ElementType.EDGE && textWidth)
-      ) {
-        return renderHtmlText(props)
-      }
-    }
-
-    if (rowsLength > 1) {
-      const tSpans = rows.map((row, idx) => {
-        // 保证文字居中，文字 Y 轴偏移为当前行数对应中心行数的偏移行 * 行高
-        const tSpanLineHeight = fontSize + 2
-        const offsetY = (idx - (rowsLength - 1) / 2) * tSpanLineHeight
-        return (
-          <tspan className="lf-text-tspan" x={x} y={y + offsetY}>
-            {row}
-          </tspan>
-        )
-      })
-      return <text {...attrs}>{tSpans}</text>
-    }
-    return <text {...attrs}>{value}</text>
-  }
-  return null
-}
-
-export function renderHtmlText(props: ITextProps): h.JSX.Element {
-  const {
-    x,
-    y,
-    value,
-    model,
-    textWidth,
-    fontSize = 12,
-    lineHeight,
-    fontFamily = '',
-    wrapPadding = '0, 0',
-    overflowMode,
-  } = props
-
-  const { width, height, textHeight } = model
-  // TODO: 设置文本宽度为 textWidth 或 节点的宽度
-  const textRealWidth: number = textWidth || (width as number)
-  const rows = String(value).split(/[\r\n]/g)
-  const rowsLength = rows.length
-  const textRealHeight = getHtmlTextHeight({
-    rows,
-    style: {
-      fontSize: `${fontSize}px`,
-      width: `${textRealWidth}px`,
-      fontFamily,
-      lineHeight,
-      padding: wrapPadding,
-    },
-    rowsLength,
-    className: 'lf-get-text-height',
-  })
-
-  // 当文字超过边框时，取文字高度的实际值，也就是文字可以超过边框
-  let foreignObjectHeight: number =
-    (height as number) > textRealHeight ? (height as number) : textRealHeight
-  // 如果设置了文本高度，取设置的高度
-  if (textHeight) {
-    foreignObjectHeight = textHeight as number
-  }
-
-  const isEllipsis = overflowMode === 'ellipsis'
-  if (isEllipsis) {
-    foreignObjectHeight = fontSize + 2
-  }
-  return (
-    <g>
-      <foreignObject
-        width={textRealWidth}
-        height={foreignObjectHeight}
-        x={x - textRealWidth / 2}
-        y={y - foreignObjectHeight / 2}
-        style={{ overflow: 'visible', textAlign: 'left' }}
-      >
-        <div
-          className="lf-node-text-auto-wrap"
-          style={{
-            minHeight: foreignObjectHeight,
-            width: textRealWidth,
-            padding: wrapPadding,
-          }}
-        >
-          <div
-            className={
-              isEllipsis
-                ? 'lf-node-text-ellipsis-content'
-                : 'lf-node-text-auto-wrap-content'
-            }
-            title={isEllipsis ? rows.join('') : ''}
-            style={{ ...(props as h.JSX.CSSProperties) }}
-          >
-            {rows.map((row) => (
-              <div className="lf-node-text--auto-wrap-inner">{row}</div>
-            ))}
-          </div>
-        </div>
-      </foreignObject>
-    </g>
-  )
-}
-
-export default Text

package/src/view/shape/index.ts

@@ -1,8 +0,0 @@
-export * from './Text'
-export * from './Line'
-export * from './Rect'
-export * from './Path'
-export * from './Circle'
-export * from './Ellipse'
-export * from './Polygon'
-export * from './Polyline'

package/src/view/text/BaseText.tsx

@@ -1,134 +0,0 @@
-import classNames from 'classnames'
-import { createElement as h, Component } from 'preact/compat'
-import { ElementState, EventType } from '../../constant'
-import { GraphModel, BaseNodeModel, BaseEdgeModel } from '../../model'
-import { Text } from '../shape'
-import { IDragParams, StepDrag } from '../../util'
-
-export type IBaseTextProps = {
-  model: BaseNodeModel | BaseEdgeModel
-  graphModel: GraphModel
-  draggable: boolean
-  editable: boolean
-}
-
-export type IBaseTextState = {
-  isHovered: boolean
-}
-
-export class BaseText<
-  P extends IBaseTextProps,
-  S extends IBaseTextState,
-> extends Component<P, S> {
-  stepperDrag: StepDrag
-
-  constructor(props: P) {
-    super()
-    const { draggable } = props
-    // TODO: 确认为什么不在 new 的时候传入 model，而在下面使用的时候赋值
-    this.stepperDrag = new StepDrag({
-      onDragging: this.onDragging,
-      step: 1,
-      // model,
-      eventType: 'TEXT',
-      isStopPropagation: draggable,
-    })
-  }
-
-  getShape(): h.JSX.Element | null {
-    const { model, graphModel } = this.props
-    const { editConfigModel } = graphModel
-    const {
-      text: { value, x, y, editable, draggable },
-    } = model
-    const attr = {
-      x,
-      y,
-      className: '',
-      value,
-    }
-    // DONE: 代码优化，看是否可以引入 classnames
-    // TODO: 确认下面逻辑是否正确，确认正确后删除下面注释
-    // if (editable) {
-    //   attr.className = 'lf-element-text';
-    // } else if (draggable || editConfigModel.nodeTextDraggable) {
-    //   attr.className = 'lf-text-draggable';
-    // } else {
-    //   attr.className = 'lf-text-disabled';
-    // }
-    const style = model.getTextStyle()
-    const isDraggable = editConfigModel.nodeTextDraggable || draggable
-
-    return (
-      <Text
-        {...attr}
-        {...style}
-        className={classNames({
-          'lf-element-text': editable,
-          'lf-text-draggable': !editable && isDraggable,
-          'lf-text-disabled': !editable && !isDraggable,
-        })}
-        model={model}
-      />
-    )
-  }
-
-  mouseDownHandler = (e: PointerEvent) => {
-    const { draggable, model, graphModel } = this.props
-    const {
-      editConfigModel: { nodeTextDraggable },
-    } = graphModel
-
-    if (draggable ?? nodeTextDraggable) {
-      e.stopPropagation()
-      this.stepperDrag.model = model
-      this.stepperDrag.handleMouseDown(e)
-    }
-  }
-
-  onDragging = ({ deltaX, deltaY }: IDragParams) => {
-    const {
-      model,
-      graphModel: { transformModel },
-    } = this.props
-
-    if (deltaX || deltaY) {
-      const [curDeltaX, curDeltaY] = transformModel.fixDeltaXY(deltaX, deltaY)
-      model.moveText(curDeltaX, curDeltaY)
-    }
-  }
-
-  dbClickHandler = () => {
-    // 静默模式下，双击不更改状态，不可编辑
-    const {
-      editable,
-      graphModel: { eventCenter },
-      model,
-    } = this.props
-    if (editable) {
-      model.setElementState(ElementState.TEXT_EDIT)
-    }
-    eventCenter.emit(EventType.TEXT_DBCLICK, {
-      data: model.text,
-      model,
-    })
-  }
-
-  render(): h.JSX.Element | undefined {
-    const {
-      model: { text },
-    } = this.props
-    if (text) {
-      return (
-        <g
-          onPointerDown={this.mouseDownHandler}
-          onDblClick={this.dbClickHandler}
-        >
-          {this.getShape()}
-        </g>
-      )
-    }
-  }
-}
-
-export default BaseText