@flowgram-vue/renderer 0.2.0

package/index.module.less

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+:root {
+  --g-selection-background: #336df4;
+  --g-editor-background: #f2f3f5;
+  --g-playground-select: var(--g-selection-background);
+  --g-playground-hover: var(--g-selection-background);
+  --g-playground-line: var(--g-selection-background);
+  --g-playground-blur: #999;
+  --g-playground-ruler-select: #3794ff;
+  --g-playground-selectBox-outline: var(--g-selection-background);
+  --g-playground-selectBox-background: rgba(51, 109, 244, 0.1);
+  --g-playground-select-hover-background: rgba(51, 109, 244, 0.1);
+  --g-playground-select-control-size: 12px;
+}
+
+:global {
+  .gedit-playground {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    overflow: hidden;
+    user-select: none;
+    outline: none;
+    box-sizing: border-box;
+    background-color: var(--g-editor-background);
+  }
+
+  .gedit-playground-scroll-right {
+    position: absolute;
+    right: 2px;
+    height: 100vh;
+    width: 7px;
+    z-index: 10;
+  }
+
+  .gedit-playground-scroll-bottom {
+    position: absolute;
+    bottom: 2px;
+    width: 100vw;
+    height: 7px;
+    z-index: 10;
+  }
+
+  .gedit-playground-scroll-right-block {
+    position: absolute;
+    opacity: 0.3;
+    border-radius: 3.5px;
+  }
+
+  .gedit-playground-scroll-right-block:hover {
+    opacity: 0.6;
+  }
+
+  .gedit-playground-scroll-bottom-block {
+    position: absolute;
+    opacity: 0.3;
+    border-radius: 3.5px;
+  }
+
+  .gedit-playground-scroll-bottom-block:hover {
+    opacity: 0.6;
+  }
+
+  .gedit-playground-scroll-hidden {
+    opacity: 0;
+  }
+
+  .gedit-playground * {
+    box-sizing: border-box;
+  }
+
+  .gedit-playground-loading {
+    position: absolute;
+    color: white;
+    left: 50%;
+    top: 50%;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: opacity 0.8s;
+    flex-direction: column;
+    text-align: center;
+    opacity: 0.8;
+  }
+
+  .gedit-hidden {
+    display: none;
+  }
+
+  .gedit-playground-pipeline {
+    position: absolute;
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .gedit-playground-pipeline::before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .gedit-playground-layer {
+    position: absolute;
+    overflow: visible;
+  }
+
+  .gedit-selector-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: 33;
+    outline: 1px solid var(--g-playground-selectBox-outline);
+    background-color: var(--g-playground-selectBox-background);
+  }
+
+  .gedit-selector-box-block {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: 9999;
+    display: none;
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .gedit-selector-bounds-background {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    outline: 1px solid var(--g-playground-selectBox-outline);
+    background-color: #f0f4ff;
+  }
+
+  .gedit-selector-bounds-foreground {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: 33;
+    background: rgba(255, 255, 255, 0);
+  }
+
+  .gedit-flow-activity-node {
+    position: absolute;
+  }
+
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@flowgram-vue/renderer",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "index.module.less"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "lodash-es": "^4.17.21",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/i18n": "0.2.0",
+    "@flowgram-vue/document": "0.2.0",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/components/Adder.ts

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, ref } from 'vue';
+import type { Component } from 'vue';
+import {
+  type AdderProps,
+  type FlowNodeTransitionData,
+  type FlowNodeEntity,
+  FlowDragService,
+} from '@flowgram-vue/document';
+import { useService } from '@flowgram-vue/core';
+
+import { FlowRendererKey, type FlowRendererRegistry } from '../flow-renderer-registry';
+import { getTransitionLabelHoverHeight, getTransitionLabelHoverWidth } from './utils';
+
+interface PropsType {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  hoverWidth?: number;
+  hoverHeight?: number;
+  [key: string]: unknown;
+}
+
+export const getFlowRenderKey = (
+  node: FlowNodeEntity,
+  { dragService }: { dragService?: FlowDragService }
+) => {
+  if (dragService && dragService.dragging && dragService.isDroppableNode(node)) {
+    if (dragService.dropNodeId === node.id) {
+      return FlowRendererKey.DRAG_HIGHLIGHT_ADDER;
+    }
+    return FlowRendererKey.DRAGGABLE_ADDER;
+  }
+
+  return FlowRendererKey.ADDER;
+};
+
+const Adder = defineComponent({
+  name: 'Adder',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const props = attrs as unknown as PropsType;
+    const hoverActivated = ref(false);
+    const dragService = useService<FlowDragService>(FlowDragService);
+
+    const handleMouseEnter = () => {
+      hoverActivated.value = true;
+    };
+    const handleMouseLeave = () => {
+      hoverActivated.value = false;
+    };
+
+    return () => {
+      const {
+        data,
+        rendererRegistry,
+        hoverHeight = getTransitionLabelHoverHeight(data),
+        hoverWidth = getTransitionLabelHoverWidth(data),
+        ...restProps
+      } = props;
+      const node = data.entity;
+      const flowRenderKey = getFlowRenderKey(node, { dragService });
+      const adder = rendererRegistry.getRendererComponent(flowRenderKey);
+      const from = node;
+      const to = data.entity.document.renderTree.getOriginInfo(node).next;
+      const renderTo = node.next;
+      const child = h(adder.renderer as Component, {
+        node,
+        from,
+        to,
+        renderTo,
+        hoverActivated: hoverActivated.value,
+        setHoverActivated: (v: boolean) => {
+          hoverActivated.value = v;
+        },
+        hoverWidth,
+        hoverHeight,
+        ...restProps,
+      } as AdderProps);
+
+      return h(
+        'div',
+        {
+          class: 'flow-canvas-adder',
+          'data-testid': 'sdk.flowcanvas.line.adder',
+          'data-from': from.id,
+          'data-to': to?.id ?? '',
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            width: `${hoverWidth}px`,
+            height: `${hoverHeight}px`,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+        },
+        [child]
+      );
+    };
+  },
+});
+
+export default Adder;

package/src/components/BranchDraggableRenderer.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import type { Component } from 'vue';
+import {
+  type AdderProps,
+  type FlowNodeTransitionData,
+  type LABEL_SIDE_TYPE,
+  FlowDragService,
+} from '@flowgram-vue/document';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+import { useService } from '@flowgram-vue/core';
+
+import { FlowRendererKey, type FlowRendererRegistry } from '../flow-renderer-registry';
+
+interface PropsType {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  hoverHeight?: number;
+  side?: LABEL_SIDE_TYPE;
+  [key: string]: unknown;
+}
+
+const getFlowRenderKey = (
+  node: FlowNodeEntity,
+  { dragService, side }: { dragService: FlowDragService; side?: LABEL_SIDE_TYPE }
+) => {
+  if (
+    dragService.isDragBranch &&
+    side &&
+    dragService.labelSide === side &&
+    dragService.isDroppableBranch(node, side)
+  ) {
+    if (dragService.dropNodeId === node.id) {
+      return FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER;
+    }
+    return FlowRendererKey.DRAGGABLE_ADDER;
+  }
+
+  return '';
+};
+
+const BranchDraggableRenderer = defineComponent({
+  name: 'BranchDraggableRenderer',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const dragService = useService<FlowDragService>(FlowDragService);
+
+    return () => {
+      const props = attrs as unknown as PropsType;
+      const { data, rendererRegistry, side, ...restProps } = props;
+      const node = data.entity;
+      const flowRenderKey = getFlowRenderKey(node, { side, dragService });
+      if (!flowRenderKey) {
+        return null;
+      }
+      const adder = rendererRegistry.getRendererComponent(flowRenderKey);
+      const from = node;
+      const to = data.entity.document.renderTree.getOriginInfo(node).next;
+      const renderTo = node.next;
+      const child = h(adder.renderer as Component, {
+        node,
+        from,
+        to,
+        renderTo,
+        ...restProps,
+      } as AdderProps);
+
+      return h('div', { class: 'flow-canvas-branch-draggable-adder' }, [child]);
+    };
+  },
+});
+
+export default BranchDraggableRenderer;

package/src/components/Collapse.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, ref } from 'vue';
+import type { Component, CSSProperties } from 'vue';
+import {
+  type CollapseProps,
+  FlowNodeRenderData,
+  type FlowNodeTransitionData,
+} from '@flowgram-vue/document';
+
+import { FlowRendererKey, type FlowRendererRegistry } from '../flow-renderer-registry';
+import { getTransitionLabelHoverHeight, getTransitionLabelHoverWidth } from './utils';
+
+interface PropsType extends Partial<CollapseProps> {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  hoverHeight?: number;
+  hoverWidth?: number;
+  wrapperStyle?: CSSProperties;
+  [key: string]: unknown;
+}
+
+const Collapse = defineComponent({
+  name: 'Collapse',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const hoverActivated = ref(false);
+
+    return () => {
+      const props = attrs as unknown as PropsType;
+      const {
+        data,
+        rendererRegistry,
+        forceVisible,
+        hoverHeight = getTransitionLabelHoverHeight(data),
+        hoverWidth = getTransitionLabelHoverWidth(data),
+        wrapperStyle,
+        ...restProps
+      } = props;
+      const { activateNode } = restProps;
+      const activateData = activateNode?.getData(FlowNodeRenderData);
+
+      const handleMouseEnter = () => {
+        hoverActivated.value = true;
+        activateData?.toggleMouseEnter();
+      };
+      const handleMouseLeave = () => {
+        hoverActivated.value = false;
+        activateData?.toggleMouseLeave();
+      };
+
+      const collapseOpener = rendererRegistry.getRendererComponent(FlowRendererKey.COLLAPSE);
+      const node = data.entity;
+      const child = h(collapseOpener.renderer as Component, {
+        node,
+        collapseNode: node,
+        ...restProps,
+        hoverActivated: hoverActivated.value,
+      } as CollapseProps);
+      const isChildVisible =
+        data.collapsed || activateData?.hovered || hoverActivated.value || forceVisible;
+
+      return h(
+        'div',
+        {
+          class: 'flow-canvas-collapse',
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            width: `${hoverWidth}px`,
+            height: `${hoverHeight}px`,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...wrapperStyle,
+          },
+        },
+        [isChildVisible ? child : null]
+      );
+    };
+  },
+});
+
+export default Collapse;

package/src/components/CollapseAdder.ts

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, ref } from 'vue';
+import {
+  type CollapseAdderProps,
+  FlowNodeRenderData,
+  type FlowNodeTransitionData,
+} from '@flowgram-vue/document';
+
+import { type FlowRendererRegistry } from '../flow-renderer-registry';
+import Collapse from './Collapse';
+import Adder from './Adder';
+
+interface PropsType extends Partial<CollapseAdderProps> {
+  data: FlowNodeTransitionData;
+  rendererRegistry: FlowRendererRegistry;
+  [key: string]: unknown;
+}
+
+const CollapseAdder = defineComponent({
+  name: 'CollapseAdder',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const hoverActivated = ref(false);
+    const handleMouseEnter = () => {
+      hoverActivated.value = true;
+    };
+    const handleMouseLeave = () => {
+      hoverActivated.value = false;
+    };
+
+    return () => {
+      const props = attrs as unknown as PropsType;
+      const { data, activateNode } = props;
+      const activateData = activateNode?.getData(FlowNodeRenderData);
+      const isVertical = activateNode?.isVertical;
+      const activated = activateData?.hovered || hoverActivated.value;
+
+      if (isVertical) {
+        return h(
+          'div',
+          {
+            class: 'flow-canvas-collapse-adder',
+            onMouseenter: handleMouseEnter,
+            onMouseleave: handleMouseLeave,
+          },
+          [
+            activated || data.collapsed
+              ? h(Collapse, {
+                  ...props,
+                  forceVisible: true,
+                  wrapperStyle: { alignItems: 'flex-end' },
+                  hoverHeight: 20,
+                })
+              : null,
+            !data.collapsed
+              ? h(Adder, { ...props, hoverHeight: activated ? 20 : 40, hoverActivated: activated })
+              : null,
+          ]
+        );
+      }
+
+      return h(
+        'div',
+        {
+          class: 'flow-canvas-collapse-adder',
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            display: data.collapsed ? 'block' : 'flex',
+          },
+        },
+        [
+          activated || data.collapsed
+            ? h(Collapse, {
+                ...props,
+                forceVisible: true,
+                wrapperStyle: { justifyContent: 'flex-end' },
+                hoverWidth: 20,
+              })
+            : null,
+          !data.collapsed
+            ? h(Adder, { ...props, hoverWidth: activated ? 20 : 40, hoverActivated: activated })
+            : null,
+        ]
+      );
+    };
+  },
+});
+
+export default CollapseAdder;

package/src/components/CustomLine.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h } from 'vue';
+import type { Component } from 'vue';
+import type { FlowTransitionLine } from '@flowgram-vue/document';
+
+import { type FlowRendererRegistry } from '../flow-renderer-registry';
+
+interface PropsType extends FlowTransitionLine {
+  rendererRegistry: FlowRendererRegistry;
+}
+
+const CustomLine = defineComponent({
+  name: 'CustomLine',
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => {
+      const props = attrs as unknown as PropsType;
+      const { renderKey, rendererRegistry, ...line } = props;
+      if (!renderKey) {
+        return null;
+      }
+      const renderer = rendererRegistry.getRendererComponent(renderKey);
+      if (!renderer) {
+        return null;
+      }
+      return h(renderer.renderer as Component, { lineId: props.lineId, ...line });
+    };
+  },
+});
+
+export default CustomLine;