@flowgram-vue/free-lines-plugin 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -1,269 +1 @@
-import * as vue from 'vue';
-import { PropType, CSSProperties, Component, VNodeChild, VNode } from 'vue';
-import { WorkflowPortEntity, WorkflowLineEntity, LineRenderType, WorkflowLineRenderContributionFactory, WorkflowLineUIState, WorkflowHoverService, WorkflowSelectService, WorkflowDocument, LinePointLocation, LineCenterPoint, WorkflowLineRenderContribution, LineType, LinePoint } from '@flowgram-vue/free-layout-core';
-import * as _flowgram_vue_core from '@flowgram-vue/core';
-import { Layer, PlaygroundContainerFactory, TransformData } from '@flowgram-vue/core';
-import { FlowRendererRegistry } from '@flowgram-vue/renderer';
-import { StackingContextManager } from '@flowgram-vue/free-stack-plugin';
-import { IPoint, Rectangle } from '@flowgram-vue/utils';
-import { Bezier } from 'bezier-js';
-
-interface WorkflowPortRenderProps {
-    entity: WorkflowPortEntity;
-    className?: string;
-    style?: CSSProperties;
-    onClick?: (e: MouseEvent, port: WorkflowPortEntity) => void;
-    /** 激活状态颜色 (linked/hovered) */
-    primaryColor?: string;
-    /** 默认状态颜色 */
-    secondaryColor?: string;
-    /** 错误状态颜色 */
-    errorColor?: string;
-    /** 背景颜色 */
-    backgroundColor?: string;
-}
-declare const WorkflowPortRender: vue.DefineComponent<vue.ExtractPropTypes<{
-    entity: {
-        type: PropType<WorkflowPortEntity>;
-        required: true;
-    };
-    className: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-    };
-    onClick: {
-        type: PropType<(e: MouseEvent, port: WorkflowPortEntity) => void>;
-    };
-    primaryColor: {
-        type: StringConstructor;
-    };
-    secondaryColor: {
-        type: StringConstructor;
-    };
-    errorColor: {
-        type: StringConstructor;
-    };
-    backgroundColor: {
-        type: StringConstructor;
-    };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    entity: {
-        type: PropType<WorkflowPortEntity>;
-        required: true;
-    };
-    className: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-    };
-    onClick: {
-        type: PropType<(e: MouseEvent, port: WorkflowPortEntity) => void>;
-    };
-    primaryColor: {
-        type: StringConstructor;
-    };
-    secondaryColor: {
-        type: StringConstructor;
-    };
-    errorColor: {
-        type: StringConstructor;
-    };
-    backgroundColor: {
-        type: StringConstructor;
-    };
-}>> & Readonly<{}>, {
-    className: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-declare const LINE_OFFSET = 6;
-declare const LINE_PADDING = 12;
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-interface LineRenderProps {
-    key: string;
-    color?: string;
-    selected?: boolean;
-    hovered?: boolean;
-    line: WorkflowLineEntity;
-    lineType: LineRenderType;
-    version: string;
-    strokePrefix?: string;
-    children?: VNodeChild;
-    rendererRegistry?: FlowRendererRegistry;
-    [key: string]: any;
-}
-interface LinesLayerOptions {
-    renderInsideLine?: Component;
-    renderLine?: Component;
-    customLineProps?: (line: WorkflowLineEntity, oldProps: LineRenderProps) => LineRenderProps;
-}
-interface FreeLinesPluginOptions extends LinesLayerOptions {
-    contributions?: WorkflowLineRenderContributionFactory[];
-    defaultLineUIState?: Partial<WorkflowLineUIState>;
-    defaultLineType?: LineRenderType;
-}
-
-declare const createFreeLinesPlugin: _flowgram_vue_core.PluginCreator<FreeLinesPluginOptions>;
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-declare class WorkflowLinesLayer extends Layer<LinesLayerOptions> {
-    static type: string;
-    hoverService: WorkflowHoverService;
-    selectService: WorkflowSelectService;
-    stackContext: StackingContextManager;
-    rendererRegistry: FlowRendererRegistry;
-    playgroundContainer: PlaygroundContainerFactory;
-    readonly lines: WorkflowLineEntity[];
-    readonly ports: WorkflowPortEntity[];
-    readonly trans: TransformData[];
-    protected workflowDocument: WorkflowDocument;
-    private layerID;
-    private mountedLines;
-    private _version;
-    private rafId?;
-    /**
-     * 节点线条
-     */
-    node: HTMLDivElement;
-    onZoom(scale: number): void;
-    onReady(): void;
-    dispose(): void;
-    render(): VNode;
-    private scheduleLineRenderUpdate;
-    private bumpVersion;
-    private lineProps;
-    private lineVersion;
-    private lineComponent;
-    private renderLine;
-    private get renderElement();
-}
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-/**
- * 箭头渲染器属性接口
- */
-interface ArrowRendererProps {
-    /** 用于渐变的唯一ID */
-    id: string;
-    /** 箭头位置 */
-    pos: IPoint;
-    location: LinePointLocation;
-    /** 描边宽度 */
-    strokeWidth: number;
-    /** 是否隐藏箭头 */
-    hide?: boolean;
-    /** 线条实体，提供更多上下文信息 */
-    line: WorkflowLineEntity;
-}
-/**
- * 箭头渲染器组件类型
- */
-type ArrowRendererComponent = Component;
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-interface BezierData {
-    fromPos: IPoint;
-    toPos: IPoint;
-    bbox: Rectangle;
-    controls: IPoint[];
-    bezier: Bezier;
-    path: string;
-    center: LineCenterPoint;
-}
-declare class WorkflowBezierLineContribution implements WorkflowLineRenderContribution {
-    static type: LineType;
-    entity: WorkflowLineEntity;
-    constructor(entity: WorkflowLineEntity);
-    private data?;
-    get path(): string;
-    calcDistance(pos: IPoint): number;
-    get bounds(): Rectangle;
-    get center(): LineCenterPoint | undefined;
-    update(params: {
-        fromPos: LinePoint;
-        toPos: LinePoint;
-    }): void;
-    private calcBezier;
-    private getPath;
-}
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-interface FoldData {
-    points: IPoint[];
-    path: string;
-    bbox: Rectangle;
-    center: LineCenterPoint;
-}
-declare class WorkflowFoldLineContribution implements WorkflowLineRenderContribution {
-    static type: LineType;
-    entity: WorkflowLineEntity;
-    constructor(entity: WorkflowLineEntity);
-    private data?;
-    get path(): string;
-    calcDistance(pos: IPoint): number;
-    get bounds(): Rectangle;
-    get center(): LineCenterPoint | undefined;
-    update(params: {
-        fromPos: LinePoint;
-        toPos: LinePoint;
-    }): void;
-}
-
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-interface StraightData {
-    points: IPoint[];
-    path: string;
-    bbox: Rectangle;
-    center: LineCenterPoint;
-}
-declare class WorkflowStraightLineContribution implements WorkflowLineRenderContribution {
-    static type: LineType;
-    entity: WorkflowLineEntity;
-    constructor(entity: WorkflowLineEntity);
-    private data?;
-    get path(): string;
-    calcDistance(pos: IPoint): number;
-    get bounds(): Rectangle;
-    get center(): LineCenterPoint | undefined;
-    update(params: {
-        fromPos: LinePoint;
-        toPos: LinePoint;
-    }): void;
-}
-
-export { type ArrowRendererComponent, type ArrowRendererProps, type BezierData, type FoldData, type FreeLinesPluginOptions, LINE_OFFSET, LINE_PADDING, type LineRenderProps, WorkflowLinesLayer as LinesLayer, type LinesLayerOptions, type StraightData, WorkflowBezierLineContribution, WorkflowFoldLineContribution, WorkflowLinesLayer, WorkflowPortRender, type WorkflowPortRenderProps, WorkflowStraightLineContribution, createFreeLinesPlugin };
+export * from '../src/index';

package/dist/index.js

@@ -1,7 +1,9 @@
 import { defineComponent, h, shallowRef, watch, onBeforeUnmount, Teleport, provide, Fragment } from 'vue';
 import classNames from 'clsx';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
 import { WorkflowHoverService, WorkflowLinesManager, usePlaygroundReadonlyState, WorkflowLineRenderData, WorkflowSelectService, WorkflowLineEntity, WorkflowPortEntity, WorkflowNodeEntity, WorkflowDocument, LineType, nanoid, getLineCenter } from '@flowgram-vue/free-layout-core';
 import { useService, MouseTouchEvent, PlaygroundVueContainerKey, PlaygroundVueRefKey, Playground, PlaygroundContainerFactory, observeEntities, observeEntityDatas, TransformData, definePluginCreator, Layer } from '@flowgram-vue/core';
+import styleInject from '#style-inject';
 import { inject, injectable } from 'inversify';
 import { Point, domUtils, Rectangle } from '@flowgram-vue/utils';
 import { FlowRendererKey, FlowRendererRegistry } from '@flowgram-vue/renderer';
@@ -30,6 +32,7 @@ var CrossHair = defineComponent({
   }
 });
 var cross_hair_default = CrossHair;
+styleInject('.workflow-port-render {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  margin-top: -10px;\n  margin-left: -10px;\n  left: 50%;\n  top: 50%;\n  position: absolute;\n  border: none;\n}\n.workflow-port-render > .symbol {\n  opacity: 0;\n}\n.workflow-port-render .bg-circle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background-color: var(--g-workflow-port-color-background, #fff);\n  transform: scale(0.5);\n  transition: all 0.2s linear 0s;\n}\n.workflow-port-render .bg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: var(--g-workflow-port-color-secondary, #9197f1);\n  transform: scale(0.4, 0.4);\n  transition: all 0.2s linear 0s;\n}\n.workflow-port-render .bg.hasError {\n  background: var(--g-workflow-port-color-error, red);\n}\n.workflow-port-render .bg .symbol {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  opacity: 0;\n  pointer-events: none;\n  color: var(--g-workflow-port-color-background, #fff);\n  transition: opacity 0.2s linear 0s;\n}\n.workflow-port-render .bg .symbol > svg {\n  width: 14px;\n  height: 14px;\n}\n.workflow-port-render .focus-circle {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 8px;\n  height: 8px;\n  opacity: 0;\n  background: var(--g-workflow-port-color-secondary, #9197f1);\n  border-radius: 50%;\n  transition: opacity 0.2s linear 0s;\n}\n.workflow-port-render.linked .bg:not(.hasError) {\n  background: var(--g-workflow-port-color-primary, #4d53e8);\n}\n.workflow-port-render.hovered .bg:not(.hasError) {\n  border: none;\n  cursor: crosshair;\n  transform: scale(1, 1);\n  background: var(--g-workflow-port-color-primary, #4d53e8);\n}\n.workflow-port-render.hovered .bg:not(.hasError) > .symbol {\n  opacity: 1;\n}\n.workflow-port-render .cross-hair {\n  position: relative;\n  left: 2px;\n  top: 2px;\n}\n.workflow-port-render .cross-hair::after,\n.workflow-port-render .cross-hair::before {\n  content: "";\n  background: var(--g-workflow-port-color-background, #fff);\n  border-radius: 2px;\n  position: absolute;\n}\n.workflow-port-render .cross-hair::after {\n  left: 4px;\n  width: 2px;\n  height: 6px;\n  box-shadow: 0 4px var(--g-workflow-port-color-background, #fff);\n}\n.workflow-port-render .cross-hair::before {\n  top: 4px;\n  width: 6px;\n  height: 2px;\n  box-shadow: 4px 0 var(--g-workflow-port-color-background, #fff);\n}\n');
 
 // src/components/workflow-port-render/index.ts
 var WorkflowPortRender = defineComponent({
@@ -75,6 +78,11 @@ var WorkflowPortRender = defineComponent({
           posX.value = Math.round(newPos.x);
           posY.value = Math.round(newPos.y);
         }),
+        entity.node.getData(FlowNodeTransformData).onDataChange(() => {
+          const newPos = entity.relativePosition;
+          posX.value = Math.round(newPos.x);
+          posY.value = Math.round(newPos.y);
+        }),
         hoverService.onHoveredChange(() => {
           hovered.value = hoverService.isHovered(entity.id);
         }),
@@ -252,6 +260,7 @@ var ArrowRenderer = defineComponent({
     };
   }
 });
+styleInject(".gedit-flow-activity-edge {\n  position: absolute;\n}\n@keyframes flowingDash {\n  to {\n    stroke-dashoffset: -13;\n  }\n}\n.gedit-flow-activity-edge .dashed-line {\n  stroke-dasharray: 8, 5;\n}\n.gedit-flow-activity-edge .flowing-line {\n  animation: flowingDash 0.5s linear infinite;\n}\n");
 
 // src/components/workflow-line-render/line-svg.ts
 var PADDING = 12;