@logicflow/core 2.2.0 → 2.2.1

package/src/options.ts

@@ -1,145 +0,0 @@
-import type { TransformModel } from './model'
-
-import { assign } from 'lodash-es'
-import { createElement as h } from 'preact/compat'
-import LogicFlow from './LogicFlow'
-import { KeyboardDef } from './keyboard'
-import { OverlapMode, TextMode } from './constant'
-import { Grid } from './view/overlay'
-
-import GridOptions = Grid.GridOptions
-
-export namespace Options {
-  import NodeData = LogicFlow.NodeData
-  import EdgeData = LogicFlow.EdgeData
-  import GraphData = LogicFlow.GraphData
-  import ExtensionType = LogicFlow.ExtensionType
-  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 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 网格配置
-     */
-    grid?: number | boolean | GridOptions
-
-    partial?: boolean
-    keyboard?: KeyboardDef
-    style?: Partial<LogicFlow.Theme> // 主题配置
-    edgeType?: EdgeType
-    adjustEdge?: boolean
-
-    // 元素文本类型：text or label
-    textMode?: TextMode
-    edgeTextMode?: TextMode
-    nodeTextMode?: TextMode
-
-    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
-    snaplineEpsilon?: number
-    textEdit?: boolean
-
-    guards?: GuardsConfig
-    overlapMode?: OverlapMode
-
-    plugins?: ExtensionType[]
-    pluginsOptions?: Record<string, any>
-    disabledPlugins?: string[]
-    disabledTools?: string[]
-
-    idGenerator?: (type?: string) => string
-    edgeGenerator?: EdgeGeneratorType
-
-    customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
-    themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
-
-    parentTransform?: TransformModel // 父级变换模型，用于嵌套变换
-
-    [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 { ...others } = options
-    const container = options.container
-    if (!container) {
-      throw new Error(
-        'Ensure the container of LogicFlow is specified and valid.',
-      )
-    }
-
-    return assign({}, defaults, others) as Options.Definition
-  }
-}
-
-export namespace Options {
-  export const defaults: Partial<Definition> = {
-    background: false,
-    grid: false,
-    textEdit: true,
-    snapline: true,
-    outline: false,
-    disabledTools: [],
-  }
-}

package/src/style/index.less

@@ -1,261 +0,0 @@
-.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;
-}
-
-// 在元素focus时浏览器会给元素outline设置一个5像素宽的默认样式，这里先全局禁用一下，后续再根据需要再做调整
-*:focus {
-  outline: none;
-}
-
-.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

@@ -1,220 +0,0 @@
-/* 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;
-}
-*:focus {
-  outline: none;
-}
-.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;
-}
-`