@flowgram-vue/fixed-semi-materials 0.2.0

package/src/components/adder.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { ref } from 'vue';
+import { nanoid } from 'nanoid';
+import {
+  FlowNodeTransformData,
+  FlowOperationBaseService,
+  type FlowNodeEntity,
+} from '@flowgram-vue/document';
+import { usePlayground, useService } from '@flowgram-vue/core';
+
+import { IconPlus } from '../assets';
+import NodesPicker from './nodes.vue';
+
+defineOptions({ name: 'Adder' });
+
+const props = defineProps<{
+  from: FlowNodeEntity;
+  to?: FlowNodeEntity;
+  hoverActivated?: boolean;
+}>();
+
+const visible = ref(false);
+const playground = usePlayground();
+const flowOperationService = useService(FlowOperationBaseService);
+
+const add = (addProps: { type: string; blocks?: () => unknown }) => {
+  const block = flowOperationService.addFromNode(props.from, {
+    id: addProps.type + nanoid(5),
+    type: addProps.type,
+    blocks: addProps.blocks ? (addProps.blocks() as never) : undefined,
+  });
+  setTimeout(() => {
+    playground.scrollToView({
+      bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,
+      scrollToCenter: true,
+    });
+  }, 10);
+  visible.value = false;
+};
+
+const onMouseDown = (e: MouseEvent) => e.stopPropagation();
+</script>
+
+<template>
+  <div
+    v-if="!playground.config.readonlyOrDisabled"
+    class="fg-fixed-chrome"
+    style="position: relative"
+  >
+    <div
+      class="fg-adder-wrap"
+      :class="{ 'is-hovered': props.hoverActivated }"
+      @mousedown="onMouseDown"
+      @click.stop="visible = !visible"
+    >
+      <IconPlus v-if="props.hoverActivated" />
+    </div>
+    <div v-if="visible" class="fg-popover" @mousedown.stop>
+      <NodesPicker :on-select="add" />
+    </div>
+  </div>
+</template>

package/src/components/branch-adder.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { nanoid } from 'nanoid';
+import {
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  FlowOperationBaseService,
+  type FlowNodeEntity,
+} from '@flowgram-vue/document';
+import { usePlayground, useService } from '@flowgram-vue/core';
+
+import { IconPlus } from '../assets';
+
+defineOptions({ name: 'BranchAdder' });
+
+const props = defineProps<{
+  activated?: boolean;
+  node: FlowNodeEntity;
+}>();
+
+const nodeData = props.node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);
+const playground = usePlayground();
+const flowOperationService = useService(FlowOperationBaseService);
+const isVertical = props.node.isVertical;
+
+function addBranch() {
+  const block = flowOperationService.addBlock(props.node, { id: nanoid(5) });
+  setTimeout(() => {
+    playground.scrollToView({
+      bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,
+      scrollToCenter: true,
+    });
+  }, 10);
+}
+</script>
+
+<template>
+  <div
+    v-if="!playground.config.readonlyOrDisabled"
+    class="fg-branch-adder"
+    :class="{
+      'is-activated': props.activated || nodeData?.hovered,
+      'is-horizontal': !isVertical,
+    }"
+    @mouseenter="nodeData?.toggleMouseEnter()"
+    @mouseleave="nodeData?.toggleMouseLeave()"
+  >
+    <div class="fg-branch-hit" aria-hidden="true" @click="addBranch">
+      <IconPlus />
+    </div>
+  </div>
+</template>

package/src/components/collapse.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  FlowNodeEntity,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { usePlayground } from '@flowgram-vue/core';
+import type { CSSProperties } from 'vue';
+
+import { Arrow } from '../assets';
+
+defineOptions({ name: 'Collapse' });
+
+const props = defineProps<{
+  node: FlowNodeEntity;
+  collapseNode: FlowNodeEntity;
+  activateNode?: FlowNodeEntity;
+  forceVisible?: boolean;
+  hoverActivated?: boolean;
+  style?: CSSProperties;
+}>();
+
+const playground = usePlayground();
+const activateData = props.activateNode?.getData(FlowNodeRenderData);
+const transform = props.collapseNode.getData(FlowNodeTransformData);
+
+const scrollToActivateNode = () => {
+  setTimeout(() => {
+    playground.config.scrollToView({
+      position: props.activateNode?.getData(FlowNodeTransformData)?.outputPoint,
+      scrollToCenter: true,
+    });
+  }, 100);
+};
+
+const collapseBlock = () => {
+  if (!transform) {
+    return;
+  }
+  transform.collapsed = true;
+  activateData?.toggleMouseLeave();
+  scrollToActivateNode();
+};
+
+const openBlock = () => {
+  if (!transform) {
+    return;
+  }
+  transform.collapsed = false;
+  scrollToActivateNode();
+};
+
+const childCount = transform
+  ? transform.collapsed
+    ? props.collapseNode.allCollapsedChildren.filter(
+        (child) => !child.hidden && child !== props.activateNode
+      ).length
+    : 0
+  : 0;
+
+const circleColor = '#fff';
+const color = props.hoverActivated ? '#82A7FC' : '#BBBFC4';
+</script>
+
+<template>
+  <div
+    v-if="transform"
+    class="fg-collapse"
+    :class="{
+      'is-hovered': props.hoverActivated,
+      'is-horizontal-collapse': !props.activateNode?.isVertical && !transform.collapsed,
+    }"
+    aria-hidden="true"
+    :style="props.style"
+    @click="transform.collapsed ? openBlock() : collapseBlock()"
+  >
+    <template v-if="transform.collapsed">{{ childCount }}</template>
+    <Arrow v-else :color="color" :circle-color="circleColor" />
+  </div>
+</template>

package/src/components/constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export const primary = 'hsl(252 62% 54.9%)';
+export const primaryOpacity09 = 'hsl(252deg 62% 55% / 9%)';

package/src/components/drag-highlight-adder.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { FlowNodeTransformData, type FlowNodeEntity } from '@flowgram-vue/document';
+
+import { Ellipse } from '../assets';
+
+defineOptions({ name: 'DragHighlightAdder' });
+
+const props = defineProps<{
+  node: FlowNodeEntity;
+}>();
+
+const getMinSize = (preWidth: number, nextWidth: number): number => {
+  if (!preWidth || preWidth < 0) {
+    return 0;
+  }
+  if (!nextWidth || nextWidth < 0) {
+    return preWidth;
+  }
+  return Math.min(preWidth, nextWidth) || 0;
+};
+
+const transformBounds = props.node.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds;
+const isVertical = props.node.isVertical;
+
+let barWidth = 0;
+let barHeight = 0;
+if (isVertical) {
+  const preWidth = (transformBounds?.width || 0) - 16;
+  const nextNodeBounds =
+    props.node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.width;
+  const nextWidth = (nextNodeBounds || 0) - 16;
+  barWidth = getMinSize(preWidth, nextWidth);
+  barHeight = 2;
+} else {
+  const preHeight = (transformBounds?.height || 0) - 16;
+  const nextNodeBounds =
+    props.node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.height;
+  const nextHeight = (nextNodeBounds || 0) - 16;
+  barWidth = 2;
+  barHeight = getMinSize(preHeight, nextHeight);
+}
+</script>
+
+<template>
+  <div class="fg-highlight-line" :style="{ flexDirection: isVertical ? 'row' : 'column' }">
+    <Ellipse />
+    <div class="fg-highlight-bar" :style="{ width: `${barWidth}px`, height: `${barHeight}px` }" />
+    <Ellipse />
+  </div>
+</template>

package/src/components/drag-node.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import type { FlowNodeEntity, FlowNodeJSON } from '@flowgram-vue/document';
+
+defineOptions({ name: 'DragNode' });
+
+const props = defineProps<{
+  dragStart?: FlowNodeEntity;
+  dragJSON?: FlowNodeJSON;
+  dragNodes: FlowNodeEntity[];
+}>();
+
+const dragLength = (props.dragNodes || [])
+  .map((_node) =>
+    _node.allCollapsedChildren.length
+      ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length
+      : 1
+  )
+  .reduce((acm, curr) => acm + curr, 0);
+
+const label = props.dragStart?.id || props.dragJSON?.id;
+</script>
+
+<template>
+  <div class="fg-drag-node">
+    {{ label }}
+    <template v-if="dragLength > 1">
+      <div class="fg-drag-counts">{{ dragLength }}</div>
+      <div
+        class="fg-drag-node"
+        :style="{
+          position: 'absolute',
+          top: '5px',
+          right: '-5px',
+          left: '5px',
+          bottom: '-5px',
+          opacity: 0.5,
+        }"
+      />
+    </template>
+  </div>
+</template>

package/src/components/dragging-adder.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed } from 'vue';
+import { usePlayground } from '@flowgram-vue/core';
+import { FlowDragLayer } from '@flowgram-vue/renderer';
+import type { FlowNodeEntity } from '@flowgram-vue/document';
+
+defineOptions({ name: 'DraggingAdder' });
+
+const props = defineProps<{
+  from?: FlowNodeEntity;
+}>();
+
+const playground = usePlayground();
+const layer = playground.getLayer(FlowDragLayer);
+
+const canShow = computed(() => {
+  if (!layer) {
+    return false;
+  }
+  if (
+    layer.options.canDrop &&
+    !layer.options.canDrop({
+      dragNodes: layer.dragEntities || [],
+      dropNode: props.from as FlowNodeEntity,
+      isBranch: false,
+    })
+  ) {
+    return false;
+  }
+  return true;
+});
+</script>
+
+<template>
+  <div v-if="canShow" class="fg-dragging-adder" />
+</template>

package/src/components/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowRendererKey } from '@flowgram-vue/renderer';
+
+import { Ellipse } from '../assets';
+import Adder from './adder.vue';
+import BranchAdder from './branch-adder.vue';
+import Collapse from './collapse.vue';
+import DragHighlightAdder from './drag-highlight-adder.vue';
+import DragNode from './drag-node.vue';
+import DraggingAdder from './dragging-adder.vue';
+import SlotAdder from './slot-adder.vue';
+import SlotCollapse from './slot-collapse.vue';
+import TryCatchCollapse from './try-catch-collapse.vue';
+
+export { default as PlaygroundTools } from './playground-tools.vue';
+
+export const defaultFixedSemiMaterials = {
+  [FlowRendererKey.ADDER]: Adder,
+  [FlowRendererKey.COLLAPSE]: Collapse,
+  [FlowRendererKey.TRY_CATCH_COLLAPSE]: TryCatchCollapse,
+  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,
+  [FlowRendererKey.DRAG_NODE]: DragNode,
+  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
+  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
+  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,
+  [FlowRendererKey.SLOT_COLLAPSE]: SlotCollapse,
+  [FlowRendererKey.SLOT_ADDER]: SlotAdder,
+};

package/src/components/metadata.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type Component } from 'vue';
+import { nanoid } from 'nanoid';
+
+import {
+  BiBootstrapReboot,
+  BiCloud,
+  FeAlignCenter,
+  IconParkRightBranch,
+  IconStyleBorder,
+  PhCircleBold,
+} from '../assets';
+
+export interface NodeMeta {
+  type: string;
+  label: string;
+  icon: Component;
+  schemaType?: string;
+  branchEnd?: boolean;
+  blocks?: () => Array<{ id: string }>;
+}
+
+const metadata = {
+  nodes: [
+    {
+      type: 'start',
+      label: 'Start',
+      icon: IconStyleBorder,
+    },
+    {
+      type: 'dynamicSplit',
+      label: 'Split Branch',
+      icon: IconParkRightBranch,
+      blocks() {
+        return [{ id: nanoid(5) }, { id: nanoid(5) }];
+      },
+    },
+    {
+      type: 'end',
+      label: 'Branch End',
+      icon: FeAlignCenter,
+      branchEnd: true,
+    },
+    {
+      type: 'loop',
+      schemaType: 'loop',
+      label: 'Loop',
+      icon: BiBootstrapReboot,
+    },
+    {
+      type: 'tryCatch',
+      schemaType: 'tryCatch',
+      label: 'TryCatch',
+      icon: IconParkRightBranch,
+      blocks() {
+        return [
+          { id: `try_${nanoid(5)}` },
+          { id: `catch_${nanoid(5)}` },
+          { id: `catch_${nanoid(5)}` },
+        ];
+      },
+    },
+    {
+      type: 'noop',
+      label: 'Noop Node',
+      icon: BiCloud,
+    },
+    {
+      type: 'end',
+      label: 'End',
+      icon: PhCircleBold,
+    },
+  ] as NodeMeta[],
+  find(type: string) {
+    return metadata.nodes.find((m) => m.type === type);
+  },
+};
+
+export function renderMetaIcon(icon: Component) {
+  return h(icon);
+}
+
+export default metadata;

package/src/components/nodes.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import type { FlowNodeEntity } from '@flowgram-vue/document';
+import metadata from './metadata';
+
+defineOptions({ name: 'NodesPicker' });
+
+defineProps<{
+  onSelect: (meta: (typeof metadata.nodes)[number]) => void;
+}>();
+
+const addings = metadata.nodes.filter((node) => node.type !== 'start');
+</script>
+
+<template>
+  <div class="fg-nodes-wrap" :style="{ width: `${80 * 2 + 20}px` }">
+    <div
+      v-for="(n, i) in addings"
+      :key="i"
+      class="fg-node-wrap"
+      @click="onSelect(n)"
+    >
+      <div style="font-size: 14px">
+        <component :is="n.icon" />
+      </div>
+      <div class="fg-node-label">{{ n.label }}</div>
+    </div>
+  </div>
+</template>

package/src/components/playground-tools.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed } from 'vue';
+
+import { useFixedPlaygroundTools } from '../composables/use-fixed-playground-tools';
+
+defineOptions({ name: 'PlaygroundTools' });
+
+const props = defineProps<{
+  layoutText?: string;
+}>();
+
+const tools = useFixedPlaygroundTools();
+const zoomLabel = computed(() => `${Math.floor(tools.zoom * 100)}%`);
+</script>
+
+<template>
+  <div class="fg-tools">
+    <label>
+      <input type="checkbox" :checked="!tools.isVertical" @change="tools.changeLayout()" />
+      {{ props.layoutText || 'isHorizontal' }}
+    </label>
+    <button type="button" title="fit view" @click="tools.fitView()">fit</button>
+    <button type="button" title="zoom out" @click="tools.zoomout()">-</button>
+    <button type="button" title="zoom in" @click="tools.zoomin()">+</button>
+    <button type="button" title="undo" :disabled="!tools.canUndo" @click="tools.undo()">undo</button>
+    <button type="button" title="redo" :disabled="!tools.canRedo" @click="tools.redo()">redo</button>
+    <span>{{ zoomLabel }}</span>
+  </div>
+</template>

package/src/components/slot-adder.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { nanoid } from 'nanoid';
+import {
+  FlowDocument,
+  FlowNodeRenderData,
+  type FlowNodeEntity,
+} from '@flowgram-vue/document';
+import { useService } from '@flowgram-vue/core';
+
+import { IconPlus } from '../assets';
+
+defineOptions({ name: 'SlotAdder' });
+
+const props = defineProps<{
+  node: FlowNodeEntity;
+}>();
+
+const nodeData = props.node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);
+const document = useService(FlowDocument) as FlowDocument;
+
+function addPort() {
+  document.addNode({
+    id: nanoid(5),
+    type: 'custom',
+    parent: props.node,
+  });
+}
+</script>
+
+<template>
+  <div
+    class="fg-slot-adder"
+    @mouseenter="nodeData?.toggleMouseEnter()"
+    @mouseleave="nodeData?.toggleMouseLeave()"
+  >
+    <button type="button" class="fg-native-btn" @click="addPort">
+      <IconPlus />
+    </button>
+  </div>
+</template>

package/src/components/slot-collapse.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { ref, computed } from 'vue';
+import {
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  type FlowNodeEntity,
+} from '@flowgram-vue/document';
+
+import Collapse from './collapse.vue';
+
+defineOptions({ name: 'SlotCollapse' });
+
+const props = defineProps<{
+  node: FlowNodeEntity;
+}>();
+
+const hoverActivated = ref(false);
+const icon = props.node.firstChild!;
+const iconActivated = icon.getData(FlowNodeRenderData).activated;
+const iconHeight = icon.getData(FlowNodeTransformData).size.height;
+const isChildVisible = computed(
+  () => props.node.collapsed || hoverActivated.value || iconActivated
+);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: '30px',
+      height: `${iconHeight || 100}px`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }"
+    @mouseenter="hoverActivated = true"
+    @mouseleave="hoverActivated = false"
+  >
+    <Collapse
+      v-if="isChildVisible"
+      :style="
+        !props.node.collapsed
+          ? { transform: props.node.isVertical ? 'rotate(-90deg)' : 'rotate(90deg)' }
+          : {}
+      "
+      :node="props.node"
+      :activate-node="icon"
+      :collapse-node="props.node"
+      :hover-activated="hoverActivated"
+    />
+  </div>
+</template>