@flowgram-vue/renderer 0.2.0

package/src/components/LabelsRenderer.ts

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type CSSProperties, type Component, type VNode } from 'vue';
+import { type IPoint, Rectangle } from '@flowgram-vue/utils';
+import {
+  type CustomLabelProps,
+  type FlowNodeTransitionData,
+  type FlowTransitionLabel,
+  FlowTransitionLabelEnum,
+} from '@flowgram-vue/document';
+
+import { type FlowRendererRegistry } from '../flow-renderer-registry';
+import CollapseAdder from './CollapseAdder';
+import Collapse from './Collapse';
+import BranchDraggableRenderer from './BranchDraggableRenderer';
+import Adder from './Adder';
+
+export interface LabelOpts {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  isViewportVisible: (bounds: Rectangle) => boolean;
+  labelsSave: VNode[];
+  getLabelColor: (activated?: boolean) => string;
+}
+
+const TEXT_LABEL_STYLE: CSSProperties = {
+  fontSize: '12px',
+  color: '#8F959E',
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  backgroundColor: 'var(--g-editor-background)',
+  lineHeight: '20px',
+};
+
+const LABEL_MAX_WIDTH = 150;
+const LABEL_MAX_HEIGHT = 60;
+
+function getLabelBounds(offset: IPoint) {
+  return new Rectangle(
+    offset.x - LABEL_MAX_WIDTH / 2,
+    offset.y - LABEL_MAX_HEIGHT / 2,
+    LABEL_MAX_WIDTH,
+    LABEL_MAX_HEIGHT
+  );
+}
+
+export function createLabels(labelProps: LabelOpts): void {
+  const { data, rendererRegistry, labelsSave, getLabelColor } = labelProps;
+  const { labels, renderData } = data || {};
+  const { activated } = renderData || {};
+
+  const renderLabel = (label: FlowTransitionLabel, index: number) => {
+    const { offset, renderKey, props, rotate, origin, type } = label || {};
+    const offsetX = offset.x;
+    const offsetY = offset.y;
+
+    let child = null as VNode | string | null;
+    switch (type) {
+      case FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL:
+        child = h(BranchDraggableRenderer, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props,
+        });
+        break;
+      case FlowTransitionLabelEnum.ADDER_LABEL:
+        child = h(Adder, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props,
+        });
+        break;
+
+      case FlowTransitionLabelEnum.COLLAPSE_LABEL:
+        child = h(Collapse, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props,
+        });
+        break;
+
+      case FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL:
+        child = h(CollapseAdder, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props,
+        });
+        break;
+
+      case FlowTransitionLabelEnum.TEXT_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        const text = rendererRegistry.getText(renderKey) || renderKey;
+        child = h(
+          'div',
+          {
+            'data-label-id': label.labelId || labelProps.data.entity.id,
+            style: {
+              ...TEXT_LABEL_STYLE,
+              ...props?.style,
+              color: getLabelColor(activated),
+              transform: rotate ? `rotate(${rotate})` : undefined,
+            },
+          },
+          text
+        );
+        break;
+
+      case FlowTransitionLabelEnum.CUSTOM_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        try {
+          const renderer = rendererRegistry.getRendererComponent(renderKey);
+          child = h(renderer.renderer as Component, {
+            node: data.entity,
+            labelId: label.labelId || labelProps.data.entity.id,
+            ...props,
+          } as CustomLabelProps);
+        } catch (err) {
+          console.error(err);
+          child = renderKey;
+        }
+        break;
+      default:
+        break;
+    }
+
+    const originX = typeof origin?.[0] === 'number' ? origin?.[0] : 0.5;
+    const originY = typeof origin?.[1] === 'number' ? origin?.[1] : 0.5;
+
+    return h(
+      'div',
+      {
+        key: `${data.entity.id}${index}`,
+        'data-label-id': label.labelId || labelProps.data.entity.id,
+        style: {
+          position: 'absolute',
+          left: `${offsetX}px`,
+          top: `${offsetY}px`,
+          transform: `translate(-${originX * 100}%, -${originY * 100}%)`,
+        },
+      },
+      [child]
+    );
+  };
+
+  labels.forEach((label, index) => {
+    if (labelProps.isViewportVisible(getLabelBounds(label.offset))) {
+      const vnode = renderLabel(label, index);
+      if (vnode) labelsSave.push(vnode);
+    }
+  });
+}

package/src/components/LinesRenderer.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+import { h } from 'vue';
+import { Rectangle } from '@flowgram-vue/utils';
+import {
+  FlowDragService,
+  type FlowNodeTransitionData,
+  type FlowTransitionLine,
+  FlowTransitionLineEnum,
+  DefaultSpacingKey,
+} from '@flowgram-vue/document';
+import { getDefaultSpacing } from '@flowgram-vue/document';
+
+import { type FlowRendererRegistry } from '../flow-renderer-registry';
+import StraightLine from './StraightLine';
+import RoundedTurningLine from './RoundedTurningLine';
+import CustomLine from './CustomLine';
+
+export interface PropsType {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  isViewportVisible: (bounds: Rectangle) => boolean;
+  linesSave: VNode[];
+  dragService: FlowDragService;
+}
+
+export function createLines(props: PropsType): void {
+  const { data, rendererRegistry, linesSave, dragService } = props;
+  const { lines, entity } = data || {};
+
+  const radius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_RADIUS);
+  const xRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_X_RADIUS);
+  const yRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS);
+
+  const renderLine = (line: FlowTransitionLine, index: number) => {
+    const { renderData } = data;
+    const { isVertical } = data.entity;
+    const { lineActivated } = renderData || {};
+
+    const draggingLineHide =
+      (line.type === FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) &&
+      !dragService.isDroppableBranch(data.entity, line.side);
+
+    const draggingLineActivated =
+      (line.type === FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) &&
+      data.entity?.id === dragService.dropNodeId &&
+      line.side === dragService.labelSide;
+
+    switch (line.type) {
+      case FlowTransitionLineEnum.STRAIGHT_LINE:
+        return h(StraightLine, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          activated: lineActivated,
+          ...line,
+        });
+
+      case FlowTransitionLineEnum.DIVERGE_LINE:
+      case FlowTransitionLineEnum.DRAGGING_LINE:
+      case FlowTransitionLineEnum.MERGE_LINE:
+      case FlowTransitionLineEnum.ROUNDED_LINE:
+        return h(RoundedTurningLine, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          isHorizontal: !isVertical,
+          activated: lineActivated || draggingLineActivated,
+          radius,
+          ...line,
+          xRadius,
+          yRadius,
+          hide: draggingLineHide,
+        });
+
+      case FlowTransitionLineEnum.CUSTOM_LINE:
+        return h(CustomLine, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          ...line,
+          rendererRegistry,
+        });
+
+      default:
+        break;
+    }
+
+    return undefined;
+  };
+  lines.forEach((line, index) => {
+    const bounds = Rectangle.createRectangleWithTwoPoints(line.from, line.to).pad(10);
+    if (props.isViewportVisible(bounds)) {
+      const vnode = renderLine(line, index);
+      if (vnode) linesSave.push(vnode);
+    }
+  });
+}

package/src/components/MarkerActivatedArrow.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+
+import { useBaseColor } from '../hooks/use-base-color';
+
+export const MARK_ACTIVATED_ARROW_ID = '$marker_arrow_activated$';
+
+const MarkerActivatedArrow = defineComponent({
+  name: 'MarkerActivatedArrow',
+  props: {
+    id: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { baseActivatedColor } = useBaseColor();
+    return () =>
+      h(
+        'marker',
+        {
+          'data-line-id': props.id,
+          id: props.id || MARK_ACTIVATED_ARROW_ID,
+          markerWidth: '11',
+          markerHeight: '14',
+          refX: '10',
+          refY: '7',
+          orient: 'auto',
+        },
+        [
+          h('path', {
+            d: 'M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z',
+            fill: baseActivatedColor,
+          }),
+        ]
+      );
+  },
+});
+
+export default MarkerActivatedArrow;

package/src/components/MarkerArrow.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+
+import { useBaseColor } from '../hooks/use-base-color';
+
+export const MARK_ARROW_ID = '$marker_arrow$';
+
+const MarkerArrow = defineComponent({
+  name: 'MarkerArrow',
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { baseColor } = useBaseColor();
+    return () =>
+      h(
+        'marker',
+        {
+          'data-line-id': props.id,
+          id: props.id || MARK_ARROW_ID,
+          markerWidth: '11',
+          markerHeight: '14',
+          refX: '10',
+          refY: '7',
+          orient: 'auto',
+        },
+        [
+          h('path', {
+            d: 'M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z',
+            fill: baseColor,
+          }),
+        ]
+      );
+  },
+});
+
+export default MarkerArrow;

package/src/components/RoundedTurningLine.ts

@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, h, inject } from 'vue';
+import type { Component } from 'vue';
+import { isNil } from 'lodash-es';
+import { Point } from '@flowgram-vue/utils';
+import { type FlowTransitionLine } from '@flowgram-vue/document';
+import { PlaygroundVueContainerKey } from '@flowgram-vue/core';
+
+import { useBaseColor } from '../hooks/use-base-color';
+import { DEFAULT_LINE_ATTRS, DEFAULT_RADIUS, getHorizontalVertices, getVertices } from './utils';
+import MarkerArrow, { MARK_ARROW_ID } from './MarkerArrow';
+import MarkerActivatedArrow, { MARK_ACTIVATED_ARROW_ID } from './MarkerActivatedArrow';
+import { FlowRendererKey, FlowRendererRegistry } from '../flow-renderer-registry';
+
+interface PropsType extends FlowTransitionLine {
+  radius?: number;
+  hide?: boolean;
+  xRadius?: number;
+  yRadius?: number;
+}
+
+const MarkerDefs = defineComponent({
+  name: 'MarkerDefs',
+  props: {
+    id: { type: String, required: true },
+    activated: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const container = inject(PlaygroundVueContainerKey, null as any);
+    return () => {
+      const renderRegistry = container?.get?.(FlowRendererRegistry) as
+        | FlowRendererRegistry
+        | undefined;
+      const ArrowRenderer = renderRegistry?.tryToGetRendererComponent(
+        props.activated ? FlowRendererKey.MARKER_ACTIVATE_ARROW : FlowRendererKey.MARKER_ARROW
+      );
+      if (ArrowRenderer) {
+        return h(ArrowRenderer.renderer as Component, { id: props.id, activated: props.activated });
+      }
+      if (props.activated) {
+        return h('defs', null, [h(MarkerActivatedArrow, { id: props.id })]);
+      }
+      return h('defs', null, [h(MarkerArrow, { id: props.id })]);
+    };
+  },
+});
+
+/**
+ * 圆角转弯线
+ */
+const RoundedTurningLine = defineComponent({
+  name: 'RoundedTurningLine',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const props = attrs as unknown as PropsType;
+    const { baseActivatedColor, baseColor } = useBaseColor();
+
+    const realVertices = computed(() => {
+      const { vertices, xRadius, yRadius } = props;
+      return (
+        vertices ||
+        (props.isHorizontal
+          ? getHorizontalVertices(props, xRadius, yRadius)
+          : getVertices(props, xRadius, yRadius))
+      );
+    });
+
+    const middleStr = computed(() => {
+      const { radius = DEFAULT_RADIUS, from, to } = props;
+      const vertices = realVertices.value;
+      return vertices
+        .map((point, idx) => {
+          const prev = vertices[idx - 1] || from;
+          const next = vertices[idx + 1] || to;
+
+          const prevDelta = { x: Math.abs(prev.x - point.x), y: Math.abs(prev.y - point.y) };
+          const nextDelta = { x: Math.abs(next.x - point.x), y: Math.abs(next.y - point.y) };
+
+          const isRightAngleX = prevDelta.x === 0 && nextDelta.y === 0;
+          const isRightAngleY = prevDelta.y === 0 && nextDelta.x === 0;
+          const isRightAngle = isRightAngleX || isRightAngleY;
+
+          if (!isRightAngle) {
+            console.error(`vertex ${point.x},${point.y} is not right angle`);
+          }
+
+          const inPoint = new Point().copyFrom(point);
+          const outPoint = new Point().copyFrom(point);
+          const radiusX = isNil(point.radiusX) ? radius : point.radiusX;
+          const radiusY = isNil(point.radiusY) ? radius : point.radiusY;
+          let rx = radiusX;
+          let ry = radiusY;
+
+          if (isRightAngleX) {
+            ry = Math.min(prevDelta.y, radiusY);
+            const moveY = isNil(point.moveY) ? ry : point.moveY;
+            inPoint.y += from.y < point.y ? -moveY : +moveY;
+
+            rx = Math.min(nextDelta.x, radiusX);
+            const moveX = isNil(point.moveX) ? rx : point.moveX;
+            outPoint.x += to.x < point.x ? -moveX : +moveX;
+          }
+
+          if (isRightAngleY) {
+            rx = Math.min(prevDelta.x, radiusX);
+            const moveX = isNil(point.moveX) ? rx : point.moveX;
+            inPoint.x += from.x < point.x ? -moveX : +moveX;
+
+            ry = Math.min(nextDelta.y, radiusY);
+            const moveY = isNil(point.moveY) ? ry : point.moveY;
+            outPoint.y += to.y < point.y ? -moveY : +moveY;
+          }
+
+          if (point.radiusOverflow === 'truncate') {
+            rx = radiusX;
+            ry = radiusY;
+          }
+
+          const crossProduct =
+            (point.x - inPoint.x) * (outPoint.y - inPoint.y) -
+            (point.y - inPoint.y) * (outPoint.x - inPoint.x);
+          const isClockWise = crossProduct > 0;
+
+          return `L ${inPoint.x} ${inPoint.y} A ${rx} ${ry} 0 0 ${isClockWise ? 1 : 0} ${
+            outPoint.x
+          } ${outPoint.y}`;
+        })
+        .join(' ');
+    });
+
+    return () => {
+      const { hide, from, to, arrow, activated, style } = props;
+      if (hide) {
+        return null;
+      }
+
+      const pathStr = `M ${from.x} ${from.y} ${middleStr.value} L ${to.x} ${to.y}`;
+      const markerId = activated
+        ? `${MARK_ACTIVATED_ARROW_ID}${props.lineId}`
+        : `${MARK_ARROW_ID}${props.lineId}`;
+
+      return [
+        arrow ? h(MarkerDefs, { id: markerId, activated }) : null,
+        h('path', {
+          'data-line-id': props.lineId,
+          d: pathStr,
+          ...DEFAULT_LINE_ATTRS,
+          stroke: activated ? baseActivatedColor : baseColor,
+          ...(arrow
+            ? {
+                markerEnd: `url(#${markerId})`,
+              }
+            : {}),
+          style,
+        }),
+      ];
+    };
+  },
+});
+
+export default RoundedTurningLine;

package/src/components/StraightLine.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import type { FlowTransitionLine } from '@flowgram-vue/document';
+
+import { useBaseColor } from '../hooks/use-base-color';
+import { DEFAULT_LINE_ATTRS } from './utils';
+
+const StraightLine = defineComponent({
+  name: 'StraightLine',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const line = attrs as unknown as FlowTransitionLine;
+    const { baseColor, baseActivatedColor } = useBaseColor();
+    return () => {
+      const { from, to, activated, style } = line;
+      return h('path', {
+        'data-line-id': line.lineId,
+        d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
+        ...DEFAULT_LINE_ATTRS,
+        stroke: activated ? baseActivatedColor : baseColor,
+        style,
+      });
+    };
+  },
+});
+
+export default StraightLine;