@nitrohe/webtopo-sdk 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitrohe/webtopo-sdk",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "topo",
   "keywords": [
     "konva",
@@ -13,6 +13,7 @@
   "type": "module",
   "main": "./webtopo.umd.js",
   "module": "./webtopo.es.js",
+  "types": "types/Render/types.d.ts",
   "sideEffects": false,
   "author": "nitrohe@163.com",
   "contributors": [],

package/types/Render/types.d.ts

@@ -0,0 +1,261 @@
+import Konva from 'konva';
+export type ValueOf<T> = T[keyof T];
+export interface RenderConfig {
+    width: number;
+    height: number;
+    showBg?: boolean;
+    showRuler?: boolean;
+    showRefLine?: boolean;
+    showPreview?: boolean;
+    showContextmenu?: boolean;
+    attractResize?: boolean;
+    attractBg?: boolean;
+    attractNode?: boolean;
+    readonly?: boolean;
+    configJson?: string | null;
+}
+export type RenderEvents = {
+    ['history-change']: {
+        records: string[];
+        index: number;
+    };
+    ['selection-change']: Konva.Node[];
+    ['debug-change']: boolean;
+    ['link-type-change']: LinkType;
+    ['scale-change']: number;
+    ['loading']: boolean;
+    ['graph-type-change']: GraphType | undefined;
+    ['texting-change']: boolean;
+    ['page-settings-change']: PageSettings;
+    ['link-selection-change']: Konva.Line | undefined;
+    ['asset-position-change']: Konva.Node[];
+    ['asset-rotation-change']: Konva.Node[];
+};
+export interface Handler {
+    handlers?: {
+        stage?: {
+            [index: string]: (e?: any) => void | boolean;
+        };
+        dom?: {
+            [index: string]: (e?: any) => void;
+        };
+        transformer?: {
+            [index: string]: (e?: any) => void;
+        };
+    };
+    transformerConfig?: {
+        anchorDragBoundFunc?: (oldPos: Konva.Vector2d, newPos: Konva.Vector2d, e: MouseEvent) => Konva.Vector2d;
+        dragBoundFunc?: (newPos: Konva.Vector2d, e: MouseEvent) => Konva.Vector2d;
+    };
+}
+export declare enum MouseButton {
+    左键 = 0,
+    右键 = 2
+}
+export interface Draw {
+    readonly layer: Konva.Layer;
+    option: {
+        [index: string]: any;
+    };
+    init: () => void;
+    draw: () => void;
+    clear: () => void;
+}
+export declare class BaseDraw {
+    protected render: any;
+    readonly layer: Konva.Layer;
+    protected group: Konva.Group;
+    constructor(render: any, layer: Konva.Layer);
+    init(): void;
+    draw(): void;
+    clear(): void;
+}
+export interface AssetInfoPoint {
+    x: number;
+    y: number;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    alias?: string;
+}
+export interface AssetInfo {
+    url: string;
+    avatar?: string;
+    points?: Array<AssetInfoPoint>;
+}
+export declare enum MoveKey {
+    上 = "ArrowUp",
+    左 = "ArrowLeft",
+    右 = "ArrowRight",
+    下 = "ArrowDown"
+}
+export declare enum ShutcutKey {
+    删除 = "Delete",
+    C = "KeyC",
+    V = "KeyV",
+    Z = "KeyZ",
+    A = "KeyA",
+    R = "KeyR",
+    Esc = "Escape",
+    Backspace = "Backspace",
+    Enter = "Enter"
+}
+export declare enum AlignType {
+    垂直居中 = "Middle",
+    左对齐 = "Left",
+    右对齐 = "Right",
+    水平居中 = "Center",
+    上对齐 = "Top",
+    下对齐 = "Bottom"
+}
+export declare enum LinkType {
+    'auto' = "auto",
+    'straight' = "straight",// 直线
+    'manual' = "manual",// 折线
+    'curve' = "curve",// 曲线
+    'bezier' = "bezier"
+}
+/**
+ * 连接对
+ */
+export interface LinkDrawPair {
+    id: string;
+    from: {
+        groupId: string;
+        pointId: string;
+        rawGroupId?: string;
+    };
+    to: {
+        groupId: string;
+        pointId: string;
+        rawGroupId?: string;
+    };
+    disabled?: boolean;
+    linkType?: LinkType;
+    style?: Konva.LineConfig & LinkSettings;
+}
+/**
+ * 连接点
+ */
+export interface LinkDrawPoint {
+    id: string;
+    groupId: string;
+    rawGroupId?: string;
+    visible: boolean;
+    pairs: LinkDrawPair[];
+    x: number;
+    y: number;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    alias?: string;
+}
+/**
+ * 连接线 拐点
+ */
+export interface ManualPoint {
+    x: number;
+    y: number;
+}
+/**
+ * 连接线 拐点 表
+ */
+export interface ManualPointsMap {
+    [index: string]: ManualPoint[];
+}
+/**
+ * 直线、折线 拐点
+ */
+export interface LineManualPoint {
+    x: number;
+    y: number;
+    index: number;
+}
+/**
+ * 图形类型
+ */
+export declare enum GraphType {
+    Line = "Line",// 直线
+    Curve = "Curve",// 曲线
+    Rect = "Rect",// 矩形
+    Circle = "Circle",// 圆/椭圆形
+    Bezier = "Bezier"
+}
+/**
+ * 图形 的 调整点 信息
+ */
+export interface GraphAnchor {
+    type?: GraphType;
+    adjustType: string;
+    name?: string;
+    groupId?: string;
+    adjusted?: boolean;
+}
+/**
+ * 图形 的 调整点 图形、锚点关系
+ */
+export interface GraphAnchorShape {
+    shape: Konva.Shape;
+    anchorShadow: Konva.Circle;
+}
+/**
+ * 素材类型
+ */
+export declare enum AssetType {
+    'Image' = "Image",
+    'Json' = "Json",
+    'Graph' = "Graph",
+    'Text' = "Text"
+}
+/**
+ * 图片类型
+ */
+export declare enum ImageType {
+    'svg' = "svg",
+    'gif' = "gif",
+    'other' = "other"
+}
+/**
+ * 对齐信息
+ */
+export interface SortItem {
+    id?: number;
+    value: number;
+}
+/**
+ * 页面设置
+ */
+export interface PageSettings {
+    background: string;
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+    linkStroke: string;
+    linkStrokeWidth: number;
+    fontSize: number;
+    textFill: string;
+}
+/**
+ * 素材设置
+ */
+export interface AssetSettings {
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+    arrowStart: boolean;
+    arrowEnd: boolean;
+    fontSize: number;
+    textFill: string;
+    text: string;
+    x: number;
+    y: number;
+    rotation: number;
+    tension: number;
+}
+/**
+ * 连接线设置
+ */
+export interface LinkSettings {
+    stroke: string;
+    strokeWidth: number;
+    arrowStart: boolean;
+    arrowEnd: boolean;
+    tension: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/types/Render/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Render/types.ts"],"names":[],"mappings":"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"}

package/webtopo.es.js

@@ -7429,6 +7429,86 @@ const _LinkDraw = class _LinkDraw extends BaseDraw {
     this.state.linkType = linkType;
     this.render.emit("link-type-change", this.state.linkType);
   }
+  setPipeLineAnimation(pipePoints, group) {
+    function parsePolylineToSegments(points) {
+      const segments2 = [];
+      let totalLength2 = 0;
+      for (let i = 0; i < points.length - 2; i += 2) {
+        const x1 = points[i], y1 = points[i + 1];
+        const x2 = points[i + 2], y2 = points[i + 3];
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const length = Math.sqrt(dx * dx + dy * dy);
+        totalLength2 += length;
+        segments2.push({ x1, y1, x2, y2, dx, dy, length });
+      }
+      return { segments: segments2, totalLength: totalLength2 };
+    }
+    function calculateSingleLineLength(points) {
+      let totalLength2 = 0;
+      for (let i = 0; i < points.length - 2; i += 2) {
+        const x1 = points[i];
+        const y1 = points[i + 1];
+        const x2 = points[i + 2];
+        const y2 = points[i + 3];
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        totalLength2 += Math.sqrt(dx * dx + dy * dy);
+      }
+      return totalLength2;
+    }
+    const { segments, totalLength } = parsePolylineToSegments(pipePoints);
+    const flowSpeed = 60;
+    const flowCount = Math.ceil(calculateSingleLineLength(pipePoints) / (20 * 2));
+    const flowItems = [];
+    for (let i = 0; i < flowCount; i++) {
+      const flowItem = new Konva.Rect({
+        width: 20,
+        // 胶囊长度 (长条)
+        height: 6,
+        // 胶囊粗细，略小于管道strokeWidth=12，刚好贴合管道
+        cornerRadius: 3,
+        // 圆角半径 = 高度/2 → 完美胶囊形状，无棱角
+        fill: "#00D2FF",
+        // 你的原始填充色
+        opacity: 0.8,
+        // 你的原始透明度
+        // shadowColor: '#FF3333', // 你的原始阴影色
+        // shadowBlur: 10, // 你的原始阴影模糊度
+        shadowOpacity: 0.7,
+        //你的原始阴影透明度
+        offsetX: 10,
+        // 锚点X居中 = width/2
+        offsetY: 3
+        // 锚点Y居中 = height/2 → 旋转中心在胶囊正中间
+      });
+      group.add(flowItem);
+      flowItems.push({ node: flowItem, offset: i / flowCount });
+    }
+    const anim = new Konva.Animation((frame) => {
+      const totalTime = totalLength / (flowSpeed / 1e3);
+      flowItems.forEach((item) => {
+        let progress = (frame.time / totalTime + item.offset) % 1;
+        let currentLength = progress * totalLength;
+        let currentX, currentY, currentSeg;
+        for (const seg of segments) {
+          if (currentLength <= seg.length) {
+            const ratio = currentLength / seg.length;
+            currentX = seg.x1 + seg.dx * ratio;
+            currentY = seg.y1 + seg.dy * ratio;
+            currentSeg = seg;
+            break;
+          } else {
+            currentLength -= seg.length;
+          }
+        }
+        item.node.position({ x: currentX, y: currentY });
+        const angle = Math.atan2(currentSeg.dy, currentSeg.dx) * 180 / Math.PI;
+        item.node.rotation(angle);
+      });
+    }, this.render.layer);
+    anim.start();
+  }
   // TODO: 优化
   // *思路：此 draw 弃用“整体 redraw”的方式，改为“局部更新”的方式:
   // 循环 pair 的时候查找 link-line、manualing-line、link-manual-point 等实例是否存在
@@ -7723,6 +7803,9 @@ const _LinkDraw = class _LinkDraw extends BaseDraw {
               });
             }
             this.group.add(linkLine);
+            if (this.render.config.readonly && this.render.getLinkSettings(linkLine).animation) {
+              this.setPipeLineAnimation(lodash.flatten(linkPoints), this.group);
+            }
             if (!this.render.config.readonly) {
               const manualingLine = new Konva.Arrow({
                 name: "manualing-line",