@flowgram-vue/free-lines-plugin 0.2.0

package/src/components/workflow-port-render/index.css

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.workflow-port-render {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  border: none;
+}
+
+.workflow-port-render > .symbol {
+  opacity: 0;
+}
+
+.workflow-port-render .bg-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background-color: var(--g-workflow-port-color-background, #fff);
+  transform: scale(0.5);
+  transition: all 0.2s linear 0s;
+}
+
+.workflow-port-render .bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--g-workflow-port-color-secondary, #9197f1);
+  transform: scale(0.4, 0.4);
+  transition: all 0.2s linear 0s;
+}
+
+.workflow-port-render .bg.hasError {
+  background: var(--g-workflow-port-color-error, red);
+}
+
+.workflow-port-render .bg .symbol {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  opacity: 0;
+  pointer-events: none;
+  color: var(--g-workflow-port-color-background, #fff);
+  transition: opacity 0.2s linear 0s;
+}
+
+.workflow-port-render .bg .symbol > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.workflow-port-render .focus-circle {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 8px;
+  height: 8px;
+  opacity: 0;
+  background: var(--g-workflow-port-color-secondary, #9197f1);
+  border-radius: 50%;
+  transition: opacity 0.2s linear 0s;
+}
+
+.workflow-port-render.linked .bg:not(.hasError) {
+  background: var(--g-workflow-port-color-primary, #4d53e8);
+}
+
+.workflow-port-render.hovered .bg:not(.hasError) {
+  border: none;
+  cursor: crosshair;
+  transform: scale(1, 1);
+  background: var(--g-workflow-port-color-primary, #4d53e8);
+}
+
+.workflow-port-render.hovered .bg:not(.hasError) > .symbol {
+  opacity: 1;
+}
+
+.workflow-port-render .cross-hair {
+  position: relative;
+  left: 2px;
+  top: 2px;
+}
+
+.workflow-port-render .cross-hair::after,
+.workflow-port-render .cross-hair::before {
+  content: '';
+  background: var(--g-workflow-port-color-background, #fff);
+  border-radius: 2px;
+  position: absolute;
+}
+
+.workflow-port-render .cross-hair::after {
+  left: 4px;
+  width: 2px;
+  height: 6px;
+  box-shadow: 0 4px var(--g-workflow-port-color-background, #fff);
+}
+
+.workflow-port-render .cross-hair::before {
+  top: 4px;
+  width: 6px;
+  height: 2px;
+  box-shadow: 4px 0 var(--g-workflow-port-color-background, #fff);
+}

package/src/components/workflow-port-render/index.ts

@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  shallowRef,
+  Teleport,
+  watch,
+  type CSSProperties,
+  type PropType,
+} from 'vue';
+import classNames from 'clsx';
+import {
+  WorkflowHoverService,
+  type WorkflowPortEntity,
+  usePlaygroundReadonlyState,
+  WorkflowLinesManager,
+} from '@flowgram-vue/free-layout-core';
+import { MouseTouchEvent, useService } from '@flowgram-vue/core';
+import type { Disposable } from '@flowgram-vue/utils';
+
+import { PORT_BG_CLASS_NAME } from '../../constants/points';
+import CrossHair from './cross-hair';
+import './index.css';
+
+export interface WorkflowPortRenderProps {
+  entity: WorkflowPortEntity;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: (e: MouseEvent, port: WorkflowPortEntity) => void;
+  /** 激活状态颜色 (linked/hovered) */
+  primaryColor?: string;
+  /** 默认状态颜色 */
+  secondaryColor?: string;
+  /** 错误状态颜色 */
+  errorColor?: string;
+  /** 背景颜色 */
+  backgroundColor?: string;
+}
+
+export const WorkflowPortRender = defineComponent({
+  name: 'WorkflowPortRender',
+  props: {
+    entity: { type: Object as PropType<WorkflowPortEntity>, required: true },
+    className: { type: String, default: '' },
+    style: { type: Object as PropType<CSSProperties> },
+    onClick: {
+      type: Function as PropType<(e: MouseEvent, port: WorkflowPortEntity) => void>,
+    },
+    primaryColor: { type: String },
+    secondaryColor: { type: String },
+    errorColor: { type: String },
+    backgroundColor: { type: String },
+  },
+  setup(props) {
+    const hoverService = useService<WorkflowHoverService>(WorkflowHoverService);
+    const linesManager = useService<WorkflowLinesManager>(WorkflowLinesManager);
+    const targetElement = shallowRef(props.entity.targetElement);
+    const posX = shallowRef(props.entity.relativePosition.x);
+    const posY = shallowRef(props.entity.relativePosition.y);
+    const hovered = shallowRef(false);
+    const linked = shallowRef(Boolean(props.entity?.lines?.length));
+    const hasError = shallowRef(props.entity.hasError);
+    const readonly = usePlaygroundReadonlyState();
+
+    let disposers: Disposable[] = [];
+
+    const bindEntity = (): void => {
+      disposers.forEach((dispose) => dispose.dispose());
+      disposers = [];
+      const { entity } = props;
+      entity.validate();
+      hasError.value = entity.hasError;
+      disposers.push(
+        entity.onEntityChange(() => {
+          if (entity.targetElement) {
+            if (entity.targetElement !== targetElement.value) {
+              targetElement.value = entity.targetElement;
+            }
+            return;
+          }
+          const newPos = entity.relativePosition;
+          posX.value = Math.round(newPos.x);
+          posY.value = Math.round(newPos.y);
+        }),
+        hoverService.onHoveredChange(() => {
+          hovered.value = hoverService.isHovered(entity.id);
+        }),
+        entity.onErrorChanged(() => {
+          hasError.value = entity.hasError;
+        }),
+        linesManager.onAvailableLinesChange(() => {
+          setTimeout(() => {
+            if (linesManager.disposed || entity.disposed) return;
+            linked.value = Boolean(entity.lines.length);
+          }, 0);
+        })
+      );
+    };
+
+    watch(
+      () => [props.entity, targetElement.value],
+      () => bindEntity(),
+      { immediate: true }
+    );
+
+    onBeforeUnmount(() => {
+      disposers.forEach((dispose) => dispose.dispose());
+    });
+
+    return () => {
+      const { entity, onClick } = props;
+      const { disabled } = entity;
+      const className = classNames('workflow-port-render', props.className || '', {
+        hovered: !readonly.value && hovered.value && !disabled,
+        linked: linked.value,
+      });
+
+      const colorStyles: Record<string, string> = {};
+      if (props.primaryColor) {
+        colorStyles['--g-workflow-port-color-primary'] = props.primaryColor;
+      }
+      if (props.secondaryColor) {
+        colorStyles['--g-workflow-port-color-secondary'] = props.secondaryColor;
+      }
+      if (props.errorColor) {
+        colorStyles['--g-workflow-port-color-error'] = props.errorColor;
+      }
+      if (props.backgroundColor) {
+        colorStyles['--g-workflow-port-color-background'] = props.backgroundColor;
+      }
+
+      const combinedStyle = targetElement.value
+        ? { ...props.style, ...colorStyles }
+        : { ...props.style, ...colorStyles, left: `${posX.value}px`, top: `${posY.value}px` };
+
+      const content = h(
+        'div',
+        {
+          class: className,
+          style: combinedStyle,
+          onClick: (e: MouseEvent) => onClick?.(e, entity),
+          onTouchstart: (e: TouchEvent) => {
+            if (!onClick) {
+              return;
+            }
+            MouseTouchEvent.onTouched(e, (mouseEvent) => {
+              onClick(mouseEvent as unknown as MouseEvent, entity);
+            });
+          },
+          'data-port-entity-id': entity.id,
+          'data-port-entity-type': entity.portType,
+          'data-testid': 'sdk.workflow.canvas.node.port',
+        },
+        [
+          h('div', { class: classNames('bg-circle', 'workflow-bg-circle') }),
+          h(
+            'div',
+            {
+              class: classNames({
+                bg: true,
+                [PORT_BG_CLASS_NAME]: true,
+                'workflow-point-bg': true,
+                hasError: hasError.value,
+              }),
+            },
+            [h(CrossHair)]
+          ),
+          h('div', { class: 'focus-circle' }),
+        ]
+      );
+
+      if (targetElement.value) {
+        return h(Teleport, { to: targetElement.value }, [content]);
+      }
+      return content;
+    };
+  },
+});

package/src/constants/lines.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// 箭头宽度
+export const LINE_OFFSET = 6;
+
+export const LINE_PADDING = 12;

package/src/constants/points.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// 连接点半径
+
+export const STROKE_WIDTH_SLECTED = 3;
+
+export const STROKE_WIDTH = 2;
+
+export const PORT_BG_CLASS_NAME = 'workflow-port-bg';

package/src/contributions/bezier/bezier-controls.ts

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IPoint } from '@flowgram-vue/utils';
+import { LinePoint, LinePointLocation } from '@flowgram-vue/free-layout-core';
+
+/**
+ * Fork from: https://github.com/xyflow/xyflow/blob/main/packages/system/src/utils/edges/bezier-edge.ts
+ * MIT License
+ * Copyright (c) 2019-2024 webkid GmbH
+ */
+export function getBezierEdgeCenter(
+  fromPos: IPoint,
+  toPos: IPoint,
+  fromControl: IPoint,
+  toControl: IPoint
+): IPoint {
+  /*
+   * cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+   * https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+   */
+  const x = fromPos.x * 0.125 + fromControl.x * 0.375 + toControl.x * 0.375 + toPos.x * 0.125;
+  const y = fromPos.y * 0.125 + fromControl.y * 0.375 + toControl.y * 0.375 + toPos.y * 0.125;
+  return {
+    x,
+    y,
+  };
+}
+
+function getControlOffset(distance: number, curvature: number): number {
+  if (distance >= 0) {
+    return 0.5 * distance;
+  }
+
+  return curvature * 25 * Math.sqrt(-distance);
+}
+
+function getControlWithCurvature({
+  location,
+  x1,
+  y1,
+  x2,
+  y2,
+  curvature,
+}: {
+  location: LinePointLocation;
+  curvature: number;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+}): IPoint {
+  switch (location) {
+    case 'left':
+      return {
+        x: x1 - getControlOffset(x1 - x2, curvature),
+        y: y1,
+      };
+    case 'right':
+      return {
+        x: x1 + getControlOffset(x2 - x1, curvature),
+        y: y1,
+      };
+    case 'top':
+      return {
+        x: x1,
+        y: y1 - getControlOffset(y1 - y2, curvature),
+      };
+    case 'bottom':
+      return {
+        x: x1,
+        y: y1 + getControlOffset(y2 - y1, curvature),
+      };
+  }
+}
+
+export function getBezierControlPoints(
+  fromPos: LinePoint,
+  toPos: LinePoint,
+  curvature = 0.25
+): { controls: [IPoint, IPoint]; center: IPoint } {
+  const fromControl = getControlWithCurvature({
+    location: fromPos.location,
+    x1: fromPos.x,
+    y1: fromPos.y,
+    x2: toPos.x,
+    y2: toPos.y,
+    curvature,
+  });
+  const toControl = getControlWithCurvature({
+    location: toPos.location,
+    x1: toPos.x,
+    y1: toPos.y,
+    x2: fromPos.x,
+    y2: fromPos.y,
+    curvature,
+  });
+  const center = getBezierEdgeCenter(fromPos, toPos, fromControl, toControl);
+  return {
+    controls: [fromControl, toControl],
+    center,
+  };
+}

package/src/contributions/bezier/index.ts

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Bezier } from 'bezier-js';
+import { IPoint, Point, Rectangle } from '@flowgram-vue/utils';
+import {
+  WorkflowLineEntity,
+  WorkflowLineRenderContribution,
+  LinePoint,
+  LineCenterPoint,
+} from '@flowgram-vue/free-layout-core';
+import { LineType } from '@flowgram-vue/free-layout-core';
+
+import { posWithShrink, toRelative } from '../utils';
+import { getBezierControlPoints } from './bezier-controls';
+
+export interface BezierData {
+  fromPos: IPoint;
+  toPos: IPoint;
+  bbox: Rectangle; // 外围矩形
+  controls: IPoint[]; // 控制点
+  bezier: Bezier;
+  path: string;
+  center: LineCenterPoint;
+}
+
+export class WorkflowBezierLineContribution implements WorkflowLineRenderContribution {
+  public static type = LineType.BEZIER;
+
+  public entity: WorkflowLineEntity;
+
+  constructor(entity: WorkflowLineEntity) {
+    this.entity = entity;
+  }
+
+  private data?: BezierData;
+
+  public get path(): string {
+    return this.data?.path ?? '';
+  }
+
+  public calcDistance(pos: IPoint): number {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    return Point.getDistance(pos, this.data.bezier.project(pos));
+  }
+
+  public get bounds(): Rectangle {
+    if (!this.data) {
+      return Rectangle.EMPTY;
+    }
+    return this.data.bbox;
+  }
+
+  get center() {
+    return this.data?.center;
+  }
+
+  public update(params: { fromPos: LinePoint; toPos: LinePoint }): void {
+    this.data = this.calcBezier(params.fromPos, params.toPos);
+  }
+
+  private calcBezier(fromPos: LinePoint, toPos: LinePoint): BezierData {
+    const { controls, center } = getBezierControlPoints(
+      fromPos,
+      toPos,
+      this.entity.uiState.curvature
+    );
+    const bezier = new Bezier([fromPos, ...controls, toPos]);
+    const bbox = bezier.bbox();
+    const bboxBounds = new Rectangle(
+      bbox.x.min,
+      bbox.y.min,
+      bbox.x.max - bbox.x.min,
+      bbox.y.max - bbox.y.min
+    );
+    const centerPoint = toRelative(center, bboxBounds);
+
+    const path = this.getPath({ bbox: bboxBounds, fromPos, toPos, controls });
+
+    this.data = {
+      fromPos,
+      toPos,
+      bezier,
+      bbox: bboxBounds,
+      controls,
+      path,
+      center: {
+        ...center,
+        labelX: centerPoint.x,
+        labelY: centerPoint.y,
+      },
+    };
+    return this.data;
+  }
+
+  private getPath(params: {
+    bbox: Rectangle;
+    fromPos: LinePoint;
+    toPos: LinePoint;
+    controls: [IPoint, IPoint];
+  }): string {
+    const { bbox } = params;
+    // 相对位置转换函数
+    const fromPos = toRelative(params.fromPos, bbox);
+    const toPos = toRelative(params.toPos, bbox);
+
+    const controls = params.controls.map((c) => toRelative(c, bbox));
+    const shrink = this.entity.uiState.shrink;
+
+    const renderFromPos: IPoint = posWithShrink(fromPos, params.fromPos.location, shrink);
+
+    const renderToPos: IPoint = posWithShrink(toPos, params.toPos.location, shrink);
+
+    const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(',');
+    return `M${renderFromPos.x} ${renderFromPos.y} C ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+  }
+}