@flowgram-vue/renderer 0.2.0

package/src/layers/flow-labels-layer.ts

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Fragment, h, type VNode } from 'vue';
+import { throttle } from 'lodash-es';
+import { inject, injectable, optional } from 'inversify';
+import { domUtils } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowDocumentOptions,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeTransitionData,
+  FlowRendererStateEntity,
+} from '@flowgram-vue/document';
+import { Layer, observeEntity, observeEntityDatas, PlaygroundContainerFactory } from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../layer-vue-provide';
+import { getBaseColor } from '../hooks/use-base-color';
+import { FlowRendererRegistry } from '../flow-renderer-registry';
+import { createLabels } from '../components/LabelsRenderer';
+
+@injectable()
+export class FlowLabelsLayer extends Layer {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @inject(FlowRendererRegistry) readonly rendererRegistry: FlowRendererRegistry;
+
+  @inject(PlaygroundContainerFactory) readonly playgroundContainer: PlaygroundContainerFactory;
+
+  @optional()
+  @inject(FlowDocumentOptions)
+  readonly documentOptions?: FlowDocumentOptions;
+
+  node = domUtils.createDivWithClass('gedit-flow-labels-layer');
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
+  @observeEntity(FlowRendererStateEntity)
+  readonly flowRenderState: FlowRendererStateEntity;
+
+  /**
+   * 监听 transition 变化
+   */
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransitionData)
+  _transitions: FlowNodeTransitionData[];
+
+  get transitions(): FlowNodeTransitionData[] {
+    return this.document.getRenderDatas<FlowNodeTransitionData>(FlowNodeTransitionData);
+  }
+
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale: number) {
+    this.node!.style.transform = `scale(${scale})`;
+  }
+
+  /**
+   * 可视区域变化
+   */
+  onViewportChange: ReturnType<typeof throttle> = throttle(() => {
+    this.render();
+  }, 100);
+
+  onReady() {
+    // 图层顺序调整：节点 > label > 线条
+    // 节点 z-index: 10
+    this.node.style.zIndex = '9';
+  }
+
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+
+  render() {
+    const labels: VNode[] = [];
+    if (this.documentTransformer?.loading) return null;
+    this.documentTransformer?.refresh?.();
+    const { baseActivatedColor, baseColor } = getBaseColor(this.documentOptions);
+    const isViewportVisible = this.config.isViewportVisible.bind(this.config);
+    this.transitions.forEach((transition) => {
+      createLabels({
+        data: transition,
+        rendererRegistry: this.rendererRegistry,
+        isViewportVisible,
+        labelsSave: labels,
+        getLabelColor: (activated) => (activated ? baseActivatedColor : baseColor),
+      });
+    });
+    return wrapLayerRender(this.playgroundContainer, h(Fragment, null, labels));
+  }
+}

package/src/layers/flow-lines-layer.ts

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type VNode } from 'vue';
+import { groupBy, throttle } from 'lodash-es';
+import { inject, injectable } from 'inversify';
+import { domUtils } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeTransitionData,
+  FlowRendererStateEntity,
+  FlowDragService,
+} from '@flowgram-vue/document';
+import { Layer, observeEntity, observeEntityDatas, PlaygroundContainerFactory } from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../layer-vue-provide';
+import { FlowRendererRegistry } from '../flow-renderer-registry';
+import { createLines } from '../components/LinesRenderer';
+
+@injectable()
+export class FlowLinesLayer extends Layer {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @inject(FlowDragService)
+  protected readonly dragService: FlowDragService;
+
+  @inject(FlowRendererRegistry) readonly rendererRegistry: FlowRendererRegistry;
+
+  @inject(PlaygroundContainerFactory) readonly playgroundContainer: PlaygroundContainerFactory;
+
+  node = domUtils.createDivWithClass('gedit-flow-lines-layer');
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
+  @observeEntity(FlowRendererStateEntity)
+  readonly flowRenderState: FlowRendererStateEntity;
+
+  /**
+   * 监听 transition 变化
+   */
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransitionData)
+  _transitions: FlowNodeTransitionData[];
+
+  get transitions(): FlowNodeTransitionData[] {
+    return this.document.getRenderDatas<FlowNodeTransitionData>(FlowNodeTransitionData);
+  }
+
+  /**
+   * 可视区域变化
+   */
+  onViewportChange: ReturnType<typeof throttle> = throttle(() => {
+    this.render();
+  }, 100);
+
+  onZoom() {
+    const svgContainer = this.node!.querySelector('svg.flow-lines-container')!;
+    svgContainer?.setAttribute?.('viewBox', this.viewBox);
+  }
+
+  onReady() {
+    this.node.style.zIndex = '1';
+  }
+
+  get viewBox(): string {
+    const ratio = 1000 / this.config.finalScale;
+    return `0 0 ${ratio} ${ratio}`;
+  }
+
+  render() {
+    const allLines: VNode[] = [];
+    const isViewportVisible = this.config.isViewportVisible.bind(this.config);
+    if (this.documentTransformer.loading) return null;
+    this.documentTransformer.refresh();
+
+    this.transitions.forEach((transition) => {
+      createLines({
+        data: transition,
+        rendererRegistry: this.rendererRegistry,
+        isViewportVisible,
+        linesSave: allLines,
+        dragService: this.dragService,
+      });
+    });
+
+    const { activateLines = [], normalLines = [] } = groupBy(allLines, (line) =>
+      line.props?.activated ? 'activateLines' : 'normalLines'
+    );
+    const resultLines = [...normalLines, ...activateLines];
+
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(
+        'svg',
+        {
+          class: 'flow-lines-container',
+          width: '1000',
+          height: '1000',
+          overflow: 'visible',
+          viewBox: this.viewBox,
+          xmlns: 'http://www.w3.org/2000/svg',
+        },
+        resultLines
+      )
+    );
+  }
+}

package/src/layers/flow-nodes-content-layer.ts

@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, Fragment, h, onMounted, provide, Teleport, type Component } from 'vue';
+import { inject, injectable } from 'inversify';
+import { Cache, type CacheOriginItem, domUtils } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import {
+  Layer,
+  observeEntity,
+  observeEntityDatas,
+  PlaygroundContainerFactory,
+  PlaygroundEntityContextKey,
+} from '@flowgram-vue/core';
+
+import { wrapLayerRender } from '../layer-vue-provide';
+import { FlowRendererKey, FlowRendererRegistry } from '../flow-renderer-registry';
+
+interface NodePortal extends CacheOriginItem {
+  id: string;
+  Portal: Component;
+}
+
+/**
+ * 渲染节点内容
+ */
+@injectable()
+export class FlowNodesContentLayer extends Layer {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @inject(FlowRendererRegistry) readonly rendererRegistry: FlowRendererRegistry;
+
+  @inject(PlaygroundContainerFactory) readonly playgroundContainer: PlaygroundContainerFactory;
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
+  @observeEntityDatas(FlowNodeEntity, FlowNodeRenderData)
+  _renderStates: FlowNodeRenderData[];
+
+  get renderStatesVisible(): FlowNodeRenderData[] {
+    return this.document.getRenderDatas<FlowNodeRenderData>(FlowNodeRenderData, false);
+  }
+
+  private renderMemoCache = new WeakMap<any, Component>();
+
+  node = domUtils.createDivWithClass('gedit-flow-nodes-layer');
+
+  getPortalRenderer(data: FlowNodeRenderData): Component {
+    const meta = data.entity.getNodeMeta();
+    const renderer = this.rendererRegistry.getRendererComponent(
+      (meta.renderKey as FlowRendererKey) || FlowRendererKey.NODE_RENDER
+    );
+    const vueRenderer = renderer.renderer as Component;
+    let memoCache = this.renderMemoCache.get(vueRenderer);
+    if (!memoCache) {
+      memoCache = vueRenderer;
+      this.renderMemoCache.set(vueRenderer, memoCache);
+    }
+    return memoCache;
+  }
+
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale: number) {
+    this.node!.style.transform = `scale(${scale})`;
+  }
+
+  dispose(): void {
+    this.vuePortals.dispose();
+    super.dispose();
+  }
+
+  protected vuePortals = Cache.create<NodePortal, FlowNodeRenderData>(
+    (data?: FlowNodeRenderData) => {
+      const { node, entity } = data!;
+      const { config } = this;
+      const PortalRenderer = this.getPortalRenderer(data!);
+
+      const Portal = defineComponent({
+        name: 'FlowNodePortal',
+        setup() {
+          provide(PlaygroundEntityContextKey, entity);
+          onMounted(() => {
+            if (!entity.getNodeMeta().autoResizeDisable && node.clientWidth && node.clientHeight) {
+              const transform = entity.getData<FlowNodeTransformData>(FlowNodeTransformData);
+              if (transform)
+                transform.size = {
+                  width: node.clientWidth,
+                  height: node.clientHeight,
+                };
+            }
+          });
+          return () =>
+            h(Teleport, { to: node }, [
+              h(PortalRenderer, {
+                node: entity,
+                version: data?.version,
+                activated: data?.activated,
+                readonly: config.readonly,
+                disabled: config.disabled,
+              }),
+            ]);
+        },
+      });
+
+      return {
+        id: node.id || entity.id,
+        dispose: () => {
+          // TODO, 删除逻辑由 node 去控制了
+        },
+        Portal,
+      } as NodePortal;
+    }
+  );
+
+  onReady() {
+    this.node!.style.zIndex = '10';
+  }
+
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新节点
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+
+  getPortals(): NodePortal[] {
+    return this.vuePortals.getMoreByItems(this.renderStatesVisible);
+  }
+
+  render() {
+    if (this.documentTransformer.loading) return null;
+    this.documentTransformer.refresh();
+
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(
+        Fragment,
+        null,
+        this.getPortals().map((portal) => h(portal.Portal, { key: portal.id }))
+      )
+    );
+  }
+}

package/src/layers/flow-nodes-transform-layer.ts

@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { Cache, type Disposable, domUtils } from '@flowgram-vue/utils';
+import {
+  FlowDocument,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { Layer, observeEntity, observeEntityDatas } from '@flowgram-vue/core';
+// import { throttle } from 'lodash-es'
+
+import { FlowRendererResizeObserver } from '../flow-renderer-resize-observer';
+
+interface TransformRenderCache {
+  updateBounds(): void;
+}
+
+export interface FlowNodesTransformLayerOptions {
+  renderElement?: HTMLElement | (() => HTMLElement | undefined);
+}
+
+/**
+ * 渲染节点位置
+ */
+@injectable()
+export class FlowNodesTransformLayer extends Layer<FlowNodesTransformLayerOptions> {
+  @inject(FlowDocument) readonly document: FlowDocument;
+
+  @inject(FlowRendererResizeObserver)
+  readonly resizeObserver: FlowRendererResizeObserver;
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+  _transforms: FlowNodeTransformData[];
+
+  node = domUtils.createDivWithClass('gedit-flow-nodes-layer');
+
+  get transformVisibles(): FlowNodeTransformData[] {
+    return this.document.getRenderDatas<FlowNodeTransformData>(FlowNodeTransformData, false);
+  }
+
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale: number) {
+    this.node!.style.transform = `scale(${scale})`;
+  }
+
+  dispose(): void {
+    this.renderCache.dispose();
+    super.dispose();
+  }
+
+  // onViewportChange() {
+  //   this.throttleUpdate()
+  // }
+
+  // throttleUpdate = throttle(() => {
+  //   this.renderCache.getFromCache().forEach((cache) => cache.updateBounds())
+  // }, 100)
+
+  protected renderCache = Cache.create<TransformRenderCache, FlowNodeTransformData>(
+    (transform?: FlowNodeTransformData) => {
+      const { renderState } = transform!;
+      const { node } = renderState;
+      const { entity } = transform!;
+      node.id = entity.id;
+      let resizeDispose: Disposable | undefined;
+      const append = () => {
+        if (resizeDispose) return;
+        // 监听 dom 节点的大小变化
+        this.renderElement.appendChild(node);
+        if (!entity.getNodeMeta().autoResizeDisable) {
+          resizeDispose = this.resizeObserver.observe(node, transform!);
+        }
+      };
+      const dispose = () => {
+        if (!resizeDispose) return;
+        // 脱离文档流，但是 react 组件会保留
+        if (node.parentElement) {
+          this.renderElement.removeChild(node);
+        }
+        resizeDispose.dispose();
+        resizeDispose = undefined;
+      };
+      append();
+      return {
+        dispose,
+        updateBounds: () => {
+          const { bounds } = transform!;
+          // 保留2位小数
+          const rawX: number = parseFloat(node.style.left);
+          const rawY: number = parseFloat(node.style.top);
+          if (!this.isCoordEqual(rawX, bounds.x) || !this.isCoordEqual(rawY, bounds.y)) {
+            node.style.left = `${bounds.x}px`;
+            node.style.top = `${bounds.y}px`;
+          }
+        },
+      };
+    }
+  );
+
+  private isCoordEqual(a: number, b: number) {
+    const browserCoordEpsilon = 0.05; // 浏览器处理坐标的精度误差: 两位小数四舍五入
+    return Math.abs(a - b) < browserCoordEpsilon;
+  }
+
+  onReady() {
+    this.node!.style.zIndex = '10';
+  }
+
+  get visibeBounds() {
+    return this.transformVisibles.map((transform) => transform.bounds);
+  }
+
+  /**
+   * 更新节点的 bounds 数据
+   */
+  updateNodesBounds() {
+    this.renderCache
+      .getMoreByItems(this.transformVisibles)
+      .forEach((render) => render.updateBounds());
+  }
+
+  autorun() {
+    // 更新节点偏移数据 O(n) TODO 这个更新会从 render 里移除改成自动触发
+    if (this.documentTransformer.loading) return;
+    this.documentTransformer.refresh();
+    this.updateNodesBounds();
+  }
+
+  private get renderElement(): HTMLElement {
+    if (typeof this.options.renderElement === 'function') {
+      const element = this.options.renderElement();
+      if (element) {
+        return element;
+      }
+    } else if (typeof this.options.renderElement !== 'undefined') {
+      return this.options.renderElement as HTMLElement;
+    }
+    return this.node;
+  }
+}