@aloudata/ink-lineage 0.0.1-beta.2 → 0.0.1-beta.3

package/src/assets/index.ts

@@ -1,14 +0,0 @@
-// 放大
-export const zoomInSVG =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImFkZC1MLWxpbmUiPgo8cGF0aCBpZD0iSWNvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS41IDExLjVWNEgxMi41VjExLjVIMjBWMTIuNUgxMi41VjIwSDExLjVWMTIuNUg0VjExLjVIMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==';
-
-// 缩小
-export const zoomOutSVG =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InN1YnRyYWN0LUwtbGluZSI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIxIDExLjVWMTIuNUgzVjExLjVIMjFaIiBmaWxsPSJibGFjayIvPgo8L2c+Cjwvc3ZnPgo=';
-
-// 重置定位
-export const resetPositionSVG =
-  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNlbnRlci1jaXJjbGUtbGluZSI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjUgNS4wMTc1OFY3SDEyLjVWNS4wMTc1OEMxNS45Njc1IDUuMjYyMyAxOC43Mzc3IDguMDMyNTEgMTguOTgyNCAxMS41SDE3VjEyLjVIMTguOTgyNEMxOC43Mzc3IDE1Ljk2NzUgMTUuOTY3NSAxOC43Mzc3IDEyLjUgMTguOTgyNFYxN0gxMS41VjE4Ljk4MjRDOC4wMzI1MSAxOC43Mzc3IDUuMjYyMyAxNS45Njc1IDUuMDE3NTggMTIuNUg3VjExLjVINS4wMTc1OEM1LjI2MjMgOC4wMzI1MSA4LjAzMjUxIDUuMjYyMyAxMS41IDUuMDE3NThaTTExLjUgNC4wMTUzN0M3LjQ3OTk5IDQuMjYzMjcgNC4yNjMyNyA3LjQ3OTk5IDQuMDE1MzcgMTEuNUgyVjEyLjVINC4wMTUzN0M0LjI2MzI3IDE2LjUyIDcuNDc5OTkgMTkuNzM2NyAxMS41IDE5Ljk4NDZWMjJIMTIuNVYxOS45ODQ2QzE2LjUyIDE5LjczNjcgMTkuNzM2NyAxNi41MiAxOS45ODQ2IDEyLjVIMjJWMTEuNUgxOS45ODQ2QzE5LjczNjcgNy40Nzk5OSAxNi41MiA0LjI2MzI3IDEyLjUgNC4wMTUzN1YySDExLjVWNC4wMTUzN1oiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==';
-
-
-export * from './big';

package/src/components/Edges/DefaultEdge.ts

@@ -1,196 +0,0 @@
-import { vec3 } from 'gl-matrix';
-import { Cursor } from '@aloudata/ink/dist/displayObjects/types';
-import {
-  Graph,
-  Group,
-  IBaseNodeConfig,
-  Path,
-  Rect,
-  BaseEdge,
-  bezierPath,
-  loopBackPath,
-  selfConnectPath,
-} from '@aloudata/ink-graph-new';
-import { InkLineageManager } from '../../manager';
-import {
-  IColResBase,
-  IEdgeConfig,
-  TDataBase,
-} from '../../types';
-
-export interface IEdgeDataConfig {
-  name: string;
-  style: {
-    path: string;
-    fill: string;
-    stroke: string;
-    strokeDasharray: number[];
-    lineWidth: number;
-    zIndex: number;
-    cursor: Cursor;
-    markerMid?: Rect;
-    markerEnd?: Path;
-    markerEndOffset?: number;
-  };
-}
-
-export class DefaultEdge extends BaseEdge {
-  static lineageManager: InkLineageManager<TDataBase<IColResBase>, IColResBase>;
-
-  edgeConfig: IEdgeDataConfig;
-
-  get lineageManager(): InkLineageManager<TDataBase<IColResBase>, IColResBase> {
-    return DefaultEdge.lineageManager;
-  }
-
-  constructor(graph: Graph, config: IEdgeConfig) {
-    super(graph, config);
-  }
-
-  // 折叠边和普通边公用部分
-  renderContent(cfg: IEdgeConfig, container: Group) {
-    const { target, source, visible, style } = cfg;
-
-    if (visible === false) return;
-
-    const srcNodeConfig = this.lineageManager.getNodeConfigById(source);
-    const dstNodeConfig = this.lineageManager.getNodeConfigById(target);
-
-    if (!srcNodeConfig || !dstNodeConfig) return;
-
-    if (!visible || !srcNodeConfig?.visible || !dstNodeConfig?.visible) return;
-
-    const isSrcRelatedColumn = srcNodeConfig.isRelatedColumn;
-    const isDstRelatedColumn = dstNodeConfig.isRelatedColumn;
-
-    container.style.zIndex = style?.zIndex || -1;
-
-    const defaultPos = 0;
-    let srcTransform: vec3;
-    let dstTransform: vec3;
-
-    const srcParentNodeConfig = this.getParentNodeConfig(srcNodeConfig);
-    const dstParentNodeConfig = this.getParentNodeConfig(dstNodeConfig);
-    if (isSrcRelatedColumn && !srcParentNodeConfig) return;
-    if (isDstRelatedColumn && !dstParentNodeConfig) return;
-
-    const srcPositionX = isSrcRelatedColumn
-      ? srcNodeConfig.position.x + srcParentNodeConfig?.position?.x
-      : srcNodeConfig.position.x;
-
-    const srcPositionY = isSrcRelatedColumn
-      ? srcNodeConfig.position.y + 100 + 8 + srcParentNodeConfig?.position?.y
-      : srcNodeConfig.position.y;
-
-    const dstPositionX = isDstRelatedColumn
-      ? dstNodeConfig.position.x + dstParentNodeConfig?.position?.x
-      : dstNodeConfig.position.x;
-
-    const dstPositionY = isDstRelatedColumn
-      ? dstNodeConfig.position.y + 100 + 8 + dstParentNodeConfig?.position?.y
-      : dstNodeConfig.position.y;
-    srcTransform =
-      vec3.fromValues(srcPositionX, srcPositionY, 0) || vec3.create();
-    dstTransform =
-      vec3.fromValues(dstPositionX, dstPositionY, 0) || vec3.create();
-
-    // 剔除rootGroup的矩阵
-    let [rootX, rootY, rootScaleX, rootScaleY] = [0, 0, 1, 1];
-    const rootGroup = this.graph.rootGroup;
-    if (rootGroup && rootGroup.transformable) {
-      const rootGroupTrans = rootGroup.transformable;
-
-      rootScaleX = rootGroupTrans.scaling[0];
-      rootScaleY = rootGroupTrans.scaling[1];
-      rootX = rootGroupTrans.position[0];
-      rootY = rootGroupTrans.position[1];
-    }
-
-    const DEFAULT_ROOT_X = srcNodeConfig?.style?.width; // 目标节点的宽度
-
-    const DEFAULT_ROOT_Y =
-      (isSrcRelatedColumn
-        ? srcNodeConfig?.style?.height
-        : (srcNodeConfig?.style?.headerHeight as number)) / 2; // 目标节点一半的高度
-
-    const startXOffset = 0;
-
-    // 起点原始位置
-    const [srcX = defaultPos, srcY = defaultPos] = [
-      (srcTransform[0] + (DEFAULT_ROOT_X + startXOffset) * rootScaleX - rootX) /
-      rootScaleX,
-      (srcTransform[1] + DEFAULT_ROOT_Y * rootScaleY - rootY) / rootScaleY,
-    ];
-
-    // 终点原始位置
-    const target_height =
-      (isDstRelatedColumn
-        ? dstNodeConfig.style.height
-        : (dstNodeConfig.style?.headerHeight as number)) / 2; // 目标节点一半的高度
-
-    const [dstX = defaultPos, dstY = defaultPos] = [
-      (dstTransform[0] - rootX) / rootScaleX,
-      (dstTransform[1] + target_height * rootScaleY - rootY) / rootScaleY,
-    ];
-
-    const arrowOffsetX = 11;
-
-    const targetX = dstX - arrowOffsetX;
-    const targetY = dstY;
-    let d = '';
-    // 自环
-    if (srcNodeConfig.id === dstNodeConfig.id) {
-      d = selfConnectPath(srcX, srcY, dstX, dstY);
-    } else if (srcX > dstX) {
-      // 回环场景
-      d = loopBackPath(srcX, srcY, targetX, targetY);
-      // d += normalArrow;
-    } else {
-      // 普通场景
-      d = bezierPath(srcX, srcY, dstX, dstY);
-      // d += normalArrow;
-    }
-
-    if (!d) return;
-
-    const arrowConfig = {
-      name: 'arrow',
-      style: {
-        path: 'M 3,3 L -3,0 L 3,-3 Z',
-        anchor: '0.5 0.5',
-        transformOrigin: 'center',
-        fill: style?.stroke || '#B1B1B1',
-        stroke: style?.stroke || '#B1B1B1',
-        strokeDasharray: style?.strokeDasharray || [0],
-        lineWidth: style?.lineWidth || 1,
-        zIndex: style?.zIndex || -1,
-        cursor: 'pointer' as Cursor,
-      },
-    };
-    this.markerEnd = new Path(arrowConfig);
-
-    this.edgeConfig = {
-      name: 'big-edge',
-      style: {
-        path: d,
-        fill: style?.fill || 'rgb(255, 255, 255,0)',
-        stroke: style?.stroke || '#B1B1B1',
-        strokeDasharray: style?.strokeDasharray || [0],
-        lineWidth: style?.lineWidth || 1,
-        zIndex: style?.zIndex || -1,
-        cursor: 'pointer' as Cursor,
-      },
-    };
-
-    if (srcNodeConfig.id !== dstNodeConfig.id) {
-      this.edgeConfig.style.markerEnd = this.markerEnd;
-      this.edgeConfig.style.markerEndOffset = -3;
-    }
-  }
-
-  getParentNodeConfig(node: IBaseNodeConfig) {
-    let parentNode = this.graph.data.nodes.find((n) => n.id === node.tableId);
-
-    return parentNode;
-  }
-}

package/src/components/Edges/FoldEdge.ts

@@ -1,97 +0,0 @@
-import {
-  Graph,
-  Group,
-  Path,
-  Rect,
-  Text,
-} from '@aloudata/ink-graph-new';
-import { DefaultEdge } from './DefaultEdge';
-import { IEdgeConfig } from '../../types';
-
-export class FoldEdge extends DefaultEdge {
-  constructor(public graph: Graph, public config: IEdgeConfig) {
-    super(graph, config);
-  }
-
-  render(cfg: IEdgeConfig, container: Group) {
-    this.renderContent(cfg, container);
-
-    if (!this.edgeConfig) return;
-
-    const markerRect = new Rect({
-      name: 'edge-marker-rect',
-      style: {
-        width: 32,
-        height: 16,
-        fill: '#FEFAF1',
-        stroke: '#F28E2C',
-        lineWidth: 1,
-        radius: 3,
-      },
-    });
-
-    const { foldNodeId, foldTableId } = this.config;
-    const { foldStatusMap, foldNodesGroupMap } = this.lineageManager.foldLineageManager;
-    const foldNodeLen = foldNodesGroupMap.get(foldNodeId)?.foldNodes.length;
-    let markerText = new Text({
-      name: 'edge-marker-text',
-      style: {
-        text: `...${foldNodeLen}`,
-        x: 16,
-        y: 8,
-        textAlign: 'center',
-        textBaseline: 'middle',
-        fontSize: 11,
-        fontFamily: 'PingFang SC',
-        fill: '#F28E2C',
-      },
-    });
-    if (foldStatusMap.get(foldNodeId || foldTableId) === false) {
-      markerText = new Text({
-        name: 'edge-marker-text',
-        style: {
-          text: '收起',
-          x: 16,
-          y: 8,
-          textAlign: 'center',
-          textBaseline: 'middle',
-          fontSize: 11,
-          fontFamily: 'PingFang SC',
-          fill: '#F28E2C',
-        },
-      });
-    }
-
-    markerRect.appendChild(markerText);
-
-    this.edgeConfig.style.markerMid = markerRect;
-    const path = new Path(this.edgeConfig);
-    path.addEventListener('click', () => {
-      this.onMarkerMidClick();
-    });
-
-    this.path = path;
-    (path as any).node = this;
-
-    container.appendChild(path);
-  }
-
-  onMarkerMidClick() {
-    const key = this.id;
-    const { foldNodeId, foldTableId } = this.config;
-    const { foldStatusMap } = this.lineageManager.foldLineageManager;
-
-    const foldGroupKey = foldNodeId || foldTableId;
-    if (foldStatusMap.get(foldGroupKey) === false) {
-      this.lineageManager.foldNodeGroup(foldGroupKey, true);
-      this.lineageManager.update();
-    } else {
-      this.lineageManager.unfoldNodeGroup(key, false);
-      this.lineageManager.update();
-    }
-  }
-
-  onMarkerMidMouseEnter() {
-    this.config?.onMarkerMidMouseEnter?.(this);
-  }
-}

package/src/components/Edges/LineageEdge.ts

@@ -1,24 +0,0 @@
-import {
-  Graph,
-  Group,
-  Path,
-} from '@aloudata/ink-graph-new';
-import { DefaultEdge } from './DefaultEdge';
-import { IEdgeConfig } from '../../types';
-
-export class LineageEdge extends DefaultEdge {
-  constructor(public graph: Graph, public config: IEdgeConfig) {
-    super(graph, config);
-  }
-
-  render(cfg: IEdgeConfig, container: Group) {
-    this.renderContent(cfg, container);
-    if (!this.edgeConfig) return;
-
-    const path = new Path(this.edgeConfig);
-    this.path = path;
-    (path as any).node = this;
-
-    container.appendChild(path);
-  }
-}

package/src/components/Edges/index.ts

@@ -1,3 +0,0 @@
-export * from './DefaultEdge';
-export * from './FoldEdge';
-export * from './LineageEdge';