@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/options.ts

@@ -0,0 +1,173 @@
+import { assign } from 'lodash-es'
+import { createElement as h } from 'preact/compat'
+import LogicFlow from './LogicFlow'
+import { GraphModel } from './model'
+import { KeyboardDef } from './keyboard'
+import { DEFAULT_GRID_SIZE, OverlapMode } from './constant'
+
+export namespace Options {
+  import NodeData = LogicFlow.NodeData
+  import EdgeData = LogicFlow.EdgeData
+  import ExtensionConstructor = LogicFlow.ExtensionConstructor
+  import GraphData = LogicFlow.GraphData
+  export type EdgeType = 'line' | 'polyline' | 'bezier' | string
+  export type BackgroundConfig = {
+    // 背景图片地址
+    backgroundImage?: string
+    // CSS background-repeat 属性
+    backgroundRepeat?:
+      | 'repeat'
+      | 'repeat-x'
+      | 'repeat-y'
+      | 'no-repeat'
+      | 'initial'
+      | 'inherit'
+    // TODO: 根据具体情况添加各种自定义样式
+    [key: string]: any
+  }
+  export type GridOptions = {
+    // 网格格子间距
+    size?: number
+    // 网格是否可见
+    visible?: boolean
+    graphModel?: GraphModel
+    // 网格类型
+    type?: 'dot' | 'mesh'
+    config?: {
+      color: string
+      thickness?: number
+    }
+  }
+
+  export type AnimationConfig = {
+    node: boolean
+    edge: boolean
+  }
+
+  export type EdgeGeneratorType = (
+    sourceNode: LogicFlow.NodeData,
+    targetNode: LogicFlow.NodeData,
+    currentEdge?: Partial<LogicFlow.EdgeConfig>,
+  ) => any
+
+  export interface CustomAnchorLineProps {
+    sourcePoint: LogicFlow.Point
+    targetPoint: LogicFlow.Point
+
+    [key: string]: any
+  }
+
+  export interface GuardsConfig {
+    beforeClone?: (data: NodeData | GraphData) => boolean
+    beforeDelete?: (data: NodeData | EdgeData) => boolean
+  }
+
+  export interface Common {
+    container: HTMLElement
+    // REMIND: 注意，当在 SSR 框架（比如 Next.js Nuxt.js）项目中使用 LogicFlow 时，在初始化时需要设置宽高
+    width?: number
+    height?: number
+    background?: false | BackgroundConfig
+    grid?: number | boolean | GridOptions
+
+    partial?: boolean
+    keyboard?: KeyboardDef
+    style?: Partial<LogicFlow.Theme> // 主题配置
+    edgeType?: EdgeType
+    adjustEdge?: boolean
+
+    allowRotate?: boolean // 允许节点旋转
+    allowResize?: boolean // 是否允许缩放
+
+    isSilentMode?: boolean
+    stopScrollGraph?: boolean
+    stopZoomGraph?: boolean
+    stopMoveGraph?:
+      | boolean
+      | 'vertical'
+      | 'horizontal'
+      | [number, number, number, number]
+    animation?: boolean | Partial<AnimationConfig>
+    history?: boolean
+    outline?: boolean
+    snapline?: boolean
+    textEdit?: boolean
+
+    guards?: GuardsConfig
+    overlapMode?: OverlapMode
+
+    plugins?: ExtensionConstructor[]
+    pluginsOptions?: Record<string, any>
+    disabledPlugins?: string[]
+    disabledTools?: string[]
+
+    idGenerator?: (type?: string) => string
+    edgeGenerator?: EdgeGeneratorType
+
+    customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
+    [key: string]: unknown
+  }
+
+  export interface ManualBooleans {}
+
+  export interface Manual extends Partial<Common>, Partial<ManualBooleans> {}
+
+  export interface Definition extends Common {}
+}
+
+export namespace Options {
+  export function get(options: Partial<Manual>) {
+    const { grid, ...others } = options
+    const container = options.container
+    if (container != null) {
+      if (options.width == null) {
+        others.width = container.clientWidth
+      }
+      if (options.height == null) {
+        others.height = container.clientHeight
+      }
+    } else {
+      throw new Error(
+        'Ensure the container of LogicFlow is specified and valid.',
+      )
+    }
+
+    const result = assign({}, defaults, others) as Options.Definition
+
+    const defaultGrid: GridOptions = {
+      size: DEFAULT_GRID_SIZE,
+      type: 'dot',
+      visible: true,
+      config: {
+        color: '#ababab',
+        thickness: 1,
+      },
+    }
+    if (typeof grid === 'number') {
+      result.grid = {
+        ...defaultGrid,
+        size: grid,
+      }
+    } else if (typeof grid === 'boolean') {
+      result.grid = {
+        ...defaultGrid,
+        visible: grid,
+      }
+    } else {
+      result.grid = { ...defaultGrid, ...grid }
+    }
+
+    return result
+  }
+}
+
+export namespace Options {
+  export const defaults: Partial<Definition> = {
+    background: false,
+    grid: false,
+    textEdit: true,
+    snapline: true,
+    outline: false,
+    disabledTools: [],
+  }
+}

package/src/style/index.less

@@ -0,0 +1,256 @@
+.lf-graph {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  user-select: none;
+}
+
+.lf-element-text {
+  cursor: text;
+}
+
+.lf-text-disabled {
+  pointer-events: none;
+}
+
+.lf-text-draggable {
+  cursor: move;
+}
+
+.lf-node-anchor {
+  cursor: crosshair;
+}
+
+.lf-node-anchor-hover {
+  visibility: hidden;
+}
+
+.lf-anchor:hover .lf-node-anchor-hover {
+  visibility: visible;
+}
+
+.lf-edge.pointer-none {
+  pointer-events: none;
+}
+
+.lf-edge-append {
+  cursor: pointer;
+}
+
+.lf-edge-animation {
+  stroke-dashoffset: 100%;
+  animation: lf_animate_dash 5s linear infinite;
+}
+
+@keyframes lf_animate_dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* node */
+.lf-node-not-allow {
+  cursor: not-allowed;
+}
+
+.lf-polyline-append-ns-resize {
+  cursor: ns-resize;
+}
+
+.lf-polyline-append-ew-resize {
+  cursor: ew-resize;
+}
+
+.lf-dragging {
+  cursor: move;
+}
+
+.lf-dragging .lf-element-text {
+  cursor: move;
+}
+
+.lf-draggable {
+  cursor: default;
+}
+
+.lf-bezier-adjust-anchor {
+  cursor: pointer;
+}
+
+/* background */
+.lf-background,
+.lf-grid {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+.lf-background-area {
+  width: 100%;
+  height: 100%;
+}
+
+/* html-overlay */
+.lf-html-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+}
+
+.lf-html-overlay__transform > * {
+  pointer-events: all;
+}
+
+.lf-text-editable {
+  pointer-events: all;
+}
+
+.lf-text-input {
+  position: absolute;
+  box-sizing: border-box;
+  min-width: 100px;
+  min-height: 20px;
+  padding: 5px;
+  line-height: 1.2;
+  white-space: pre;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #edefed;
+  border-radius: 3px;
+  outline: none;
+  transform: translate(-50%, -50%);
+  resize: none;
+}
+
+.lf-get-text-height {
+  display: inline-block;
+  box-sizing: border-box;
+  word-break: break-all;
+  /* 为了跟输入效果保持一致，设置透明边框占位 */
+  border: 1px solid transparent;
+}
+
+.lf-node-text-auto-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* border: 1px solid transparent; */
+}
+
+.lf-node-text-auto-wrap-content {
+  width: 100%;
+  line-height: 1.2;
+  text-align: center;
+  word-break: break-all;
+  background: transparent;
+}
+
+.lf-node-text-ellipsis-content {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-align: center;
+  background: transparent;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+}
+
+.lf-node-text-ellipsis-content > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* tool-overlay */
+.lf-tool-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.lf-tool-overlay > * {
+  pointer-events: all;
+}
+
+/* modification-overlay */
+.modification-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.modification-overlay > * {
+  pointer-events: all;
+}
+
+.lf-outline,
+.lf-snapline {
+  pointer-events: none;
+}
+
+.lf-keyboard-tips {
+  float: right;
+}
+
+.lf-node-select-decorate {
+  position: absolute;
+  border: 1px dashed #343435;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.lf-multiple-select {
+  position: absolute;
+  border: 2px dashed #187dffcc;
+  box-shadow: 0 0 3px 0 #187dff80;
+  cursor: move;
+}
+
+.lf-edge-adjust-point {
+  cursor: move;
+}
+
+.lf-rotate-control {
+  cursor: grabbing;
+}
+
+.lf-resize-control-nw {
+  cursor: nw-resize;
+}
+
+.lf-resize-control-n {
+  cursor: n-resize;
+}
+
+.lf-resize-control-ne {
+  cursor: ne-resize;
+}
+
+.lf-resize-control-e {
+  cursor: e-resize;
+}
+
+.lf-resize-control-se {
+  cursor: se-resize;
+}
+
+.lf-resize-control-s {
+  cursor: s-resize;
+}
+
+.lf-resize-control-sw {
+  cursor: sw-resize;
+}
+
+.lf-resize-control-w {
+  cursor: w-resize;
+}

package/src/style/raw.ts

@@ -0,0 +1,217 @@
+/* eslint-disable */
+
+/**
+ * Auto generated file, do not modify it!
+ */
+
+export const content = `.lf-graph {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  user-select: none;
+}
+.lf-element-text {
+  cursor: text;
+}
+.lf-text-disabled {
+  pointer-events: none;
+}
+.lf-text-draggable {
+  cursor: move;
+}
+.lf-node-anchor {
+  cursor: crosshair;
+}
+.lf-node-anchor-hover {
+  visibility: hidden;
+}
+.lf-anchor:hover .lf-node-anchor-hover {
+  visibility: visible;
+}
+.lf-edge.pointer-none {
+  pointer-events: none;
+}
+.lf-edge-append {
+  cursor: pointer;
+}
+.lf-edge-animation {
+  stroke-dashoffset: 100%;
+  animation: lf_animate_dash 5s linear infinite;
+}
+@keyframes lf_animate_dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+/* node */
+.lf-node-not-allow {
+  cursor: not-allowed;
+}
+.lf-polyline-append-ns-resize {
+  cursor: ns-resize;
+}
+.lf-polyline-append-ew-resize {
+  cursor: ew-resize;
+}
+.lf-dragging {
+  cursor: move;
+}
+.lf-dragging .lf-element-text {
+  cursor: move;
+}
+.lf-draggable {
+  cursor: default;
+}
+.lf-bezier-adjust-anchor {
+  cursor: pointer;
+}
+/* background */
+.lf-background,
+.lf-grid {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+.lf-background-area {
+  width: 100%;
+  height: 100%;
+}
+/* html-overlay */
+.lf-html-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+}
+.lf-html-overlay__transform > * {
+  pointer-events: all;
+}
+.lf-text-editable {
+  pointer-events: all;
+}
+.lf-text-input {
+  position: absolute;
+  box-sizing: border-box;
+  min-width: 100px;
+  min-height: 20px;
+  padding: 5px;
+  line-height: 1.2;
+  white-space: pre;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #edefed;
+  border-radius: 3px;
+  outline: none;
+  transform: translate(-50%, -50%);
+  resize: none;
+}
+.lf-get-text-height {
+  display: inline-block;
+  box-sizing: border-box;
+  word-break: break-all;
+  /* 为了跟输入效果保持一致，设置透明边框占位 */
+  border: 1px solid transparent;
+}
+.lf-node-text-auto-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* border: 1px solid transparent; */
+}
+.lf-node-text-auto-wrap-content {
+  width: 100%;
+  line-height: 1.2;
+  text-align: center;
+  word-break: break-all;
+  background: transparent;
+}
+.lf-node-text-ellipsis-content {
+  width: 100%;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-align: center;
+  background: transparent;
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+}
+.lf-node-text-ellipsis-content > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* tool-overlay */
+.lf-tool-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow: hidden;
+  pointer-events: none;
+}
+.lf-tool-overlay > * {
+  pointer-events: all;
+}
+/* modification-overlay */
+.modification-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+.modification-overlay > * {
+  pointer-events: all;
+}
+.lf-outline,
+.lf-snapline {
+  pointer-events: none;
+}
+.lf-keyboard-tips {
+  float: right;
+}
+.lf-node-select-decorate {
+  position: absolute;
+  border: 1px dashed #343435;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.lf-multiple-select {
+  position: absolute;
+  border: 2px dashed #187dffcc;
+  box-shadow: 0 0 3px 0 #187dff80;
+  cursor: move;
+}
+.lf-edge-adjust-point {
+  cursor: move;
+}
+.lf-rotate-control {
+  cursor: grabbing;
+}
+.lf-resize-control-nw {
+  cursor: nw-resize;
+}
+.lf-resize-control-n {
+  cursor: n-resize;
+}
+.lf-resize-control-ne {
+  cursor: ne-resize;
+}
+.lf-resize-control-e {
+  cursor: e-resize;
+}
+.lf-resize-control-se {
+  cursor: se-resize;
+}
+.lf-resize-control-s {
+  cursor: s-resize;
+}
+.lf-resize-control-sw {
+  cursor: sw-resize;
+}
+.lf-resize-control-w {
+  cursor: w-resize;
+}
+`