@flowgram-vue/fixed-semi-materials 0.2.0

package/src/components/try-catch-collapse.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { ref, computed } from 'vue';
+import {
+  FlowNodeEntity,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+} from '@flowgram-vue/document';
+import { FlowRendererRegistry, FlowTextKey, useBaseColor } from '@flowgram-vue/renderer';
+import { usePlayground } from '@flowgram-vue/core';
+
+import { IconChevronLeft } from '../assets';
+
+defineOptions({ name: 'TryCatchCollapse' });
+
+const props = defineProps<{
+  node: FlowNodeEntity;
+}>();
+
+const { baseColor, baseActivatedColor } = useBaseColor();
+const playground = usePlayground();
+const activateData = props.node.getData(FlowNodeRenderData)!;
+const transform = props.node.getData(FlowNodeTransformData)!;
+const hoverActivated = ref(false);
+
+const width = transform?.parent
+  ? transform.inputPoint.x - transform.parent.inputPoint.x
+  : 0;
+
+const catchText = computed(() =>
+  props.node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)
+);
+
+const scrollToActivateNode = () => {
+  setTimeout(() => {
+    playground.config.scrollToView({
+      position: props.node?.getData(FlowNodeTransformData)?.inputPoint,
+      scrollToCenter: true,
+    });
+  }, 100);
+};
+
+const collapseBlock = () => {
+  transform.collapsed = true;
+  activateData.activated = false;
+  scrollToActivateNode();
+};
+
+const openBlock = () => {
+  transform.collapsed = false;
+  scrollToActivateNode();
+};
+
+const handleMouseEnter = () => {
+  hoverActivated.value = true;
+  activateData.activated = true;
+};
+
+const handleMouseLeave = () => {
+  hoverActivated.value = false;
+  activateData.activated = false;
+};
+
+const childCount = computed(
+  () =>
+    props.node.allCollapsedChildren.filter((child) => !child.hidden && child !== props.node)
+      .length
+);
+
+const badgeBg = computed(() =>
+  hoverActivated.value || activateData.lineActivated ? baseActivatedColor : baseColor
+);
+</script>
+
+<template>
+  <div
+    v-if="transform && transform.parent"
+    :style="{
+      width: `${width}px`,
+      height: '40px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '6px',
+    }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div
+      :data-label-id="props.labelId"
+      :style="{
+        fontSize: '12px',
+        color: hoverActivated || activateData.lineActivated ? baseActivatedColor : baseColor,
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        backgroundColor: 'var(--g-editor-background)',
+        lineHeight: '20px',
+      }"
+    >
+      {{ catchText }}
+    </div>
+    <div
+      v-if="transform.collapsed"
+      class="fg-collapse is-hovered"
+      :style="{ background: badgeBg }"
+      aria-hidden="true"
+      @click="openBlock"
+    >
+      {{ childCount }}
+    </div>
+    <div
+      v-else-if="hoverActivated"
+      class="fg-collapse is-hovered"
+      :style="{ background: baseActivatedColor }"
+      aria-hidden="true"
+      @click="collapseBlock"
+    >
+      <IconChevronLeft />
+    </div>
+  </div>
+</template>

package/src/composables/use-fixed-playground-tools.ts

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  EditorState,
+  type PlaygroundInteractiveType,
+  usePlayground,
+  usePlaygroundContainer,
+  useService,
+} from '@flowgram-vue/core';
+import {
+  FlowDocument,
+  FlowLayoutDefault,
+  FlowNodeRenderData,
+} from '@flowgram-vue/document';
+import { HistoryService } from '@flowgram-vue/history';
+import { DisposableCollection } from '@flowgram-vue/utils';
+import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+
+export interface FixedPlaygroundTools {
+  zoom: number;
+  zoomin: (easing?: boolean) => void;
+  zoomout: (easing?: boolean) => void;
+  updateZoom: (newZoom: number, easing?: boolean, easingDuration?: number) => void;
+  fitView: (easing?: boolean, easingDuration?: number, padding?: number) => Promise<void>;
+  isVertical: boolean;
+  changeLayout: (layout?: FlowLayoutDefault) => void;
+  interactiveType: PlaygroundInteractiveType;
+  setInteractiveType: (type: PlaygroundInteractiveType) => void;
+  canRedo: boolean;
+  canUndo: boolean;
+  redo: () => void;
+  undo: () => void;
+}
+
+export function useFixedPlaygroundTools(): FixedPlaygroundTools {
+  const playground = usePlayground();
+  const container = usePlaygroundContainer();
+  const historyService = container?.isBound?.(HistoryService)
+    ? container.get(HistoryService)
+    : undefined;
+  const doc = useService<FlowDocument>(FlowDocument);
+
+  const zoom = ref(1);
+  const layoutName = ref(doc.layout.name);
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+
+  const handleFitView = (easing?: boolean, easingDuration?: number, padding?: number) => {
+    padding = padding || 30;
+    return playground.config.fitView(doc.root.bounds, easing, padding, easingDuration);
+  };
+
+  const changeLayout = (newLayout?: FlowLayoutDefault) => {
+    const allNodes = doc.getAllNodes();
+    newLayout =
+      newLayout ||
+      (doc.layout.name === FlowLayoutDefault.HORIZONTAL_FIXED_LAYOUT
+        ? FlowLayoutDefault.VERTICAL_FIXED_LAYOUT
+        : FlowLayoutDefault.HORIZONTAL_FIXED_LAYOUT);
+    allNodes.forEach((node) => {
+      const renderData = node.getData(FlowNodeRenderData);
+      renderData.node.classList.add('gedit-transition-ease');
+    });
+    setTimeout(() => {
+      handleFitView();
+    }, 10);
+    setTimeout(() => {
+      allNodes.forEach((node) => {
+        const renderData = node.getData(FlowNodeRenderData);
+        renderData.node.classList.remove('gedit-transition-ease');
+      });
+    }, 500);
+    doc.setLayout(newLayout);
+    layoutName.value = doc.layout.name;
+  };
+
+  const dispose = new DisposableCollection();
+  dispose.push(playground.onZoom((z) => (zoom.value = z)));
+  if (historyService) {
+    dispose.push(
+      historyService.undoRedoService.onChange(() => {
+        canUndo.value = historyService.canUndo();
+        canRedo.value = historyService.canRedo();
+      })
+    );
+  }
+  onBeforeUnmount(() => dispose.dispose());
+
+  const interactiveType = computed<PlaygroundInteractiveType>(() =>
+    playground.editorState.isMouseFriendlyMode() ? 'MOUSE' : 'PAD'
+  );
+
+  return reactive({
+    zoomin: (easing?: boolean) => playground.config.zoomin(easing),
+    zoomout: (easing?: boolean) => playground.config.zoomout(easing),
+    updateZoom: (value: number, easing?: boolean, easingDuration?: number) =>
+      playground.config.updateZoom(value, easing, easingDuration),
+    zoom,
+    fitView: handleFitView,
+    isVertical: computed(() => layoutName.value === FlowLayoutDefault.VERTICAL_FIXED_LAYOUT),
+    changeLayout,
+    canRedo,
+    canUndo,
+    undo: () => historyService?.undo(),
+    redo: () => historyService?.redo(),
+    interactiveType,
+    setInteractiveType: (type: PlaygroundInteractiveType) => {
+      if (type === 'MOUSE') {
+        playground.editorState.changeState(EditorState.STATE_MOUSE_FRIENDLY_SELECT.id);
+      } else {
+        playground.editorState.changeState(EditorState.STATE_SELECT.id);
+      }
+    },
+  }) as FixedPlaygroundTools;
+}

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import './styles.css';
+
+export { defaultFixedSemiMaterials, PlaygroundTools } from './components';
+export { useFixedPlaygroundTools } from './composables/use-fixed-playground-tools';

package/src/styles.css

@@ -0,0 +1,225 @@
+.fg-fixed-chrome {
+  --fg-primary: hsl(252 62% 54.9%);
+  --fg-primary-09: hsl(252deg 62% 55% / 9%);
+  --fg-adder: rgb(143, 149, 158);
+  --fg-collapse: #bbbfc4;
+  --fg-collapse-active: #82a7fc;
+  --fg-line: #3370ff;
+}
+
+.fg-adder-wrap {
+  width: 6px;
+  height: 6px;
+  background-color: var(--fg-adder);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.fg-adder-wrap.is-hovered {
+  width: 15px;
+  height: 15px;
+}
+
+.fg-icon-plus {
+  width: 14px;
+  height: 14px;
+  color: #3370ff;
+  background: #fff;
+  border-radius: 15px;
+}
+
+.fg-popover {
+  position: absolute;
+  z-index: 20;
+  left: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 8px;
+}
+
+.fg-collapse {
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  border-radius: 9px;
+  display: flex;
+  color: #fff;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  background: var(--fg-collapse);
+}
+
+.fg-collapse.is-hovered {
+  background: var(--fg-collapse-active);
+}
+
+.fg-collapse.is-horizontal-collapse {
+  transform: rotate(-90deg);
+}
+
+.fg-branch-adder {
+  width: 28px;
+  height: 18px;
+  background: rgb(187, 191, 196);
+  display: flex;
+  border-radius: 9px;
+  justify-content: space-evenly;
+  align-items: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.fg-branch-adder.is-activated {
+  background: #82a7fc;
+}
+
+.fg-branch-adder.is-horizontal {
+  transform: rotate(90deg);
+}
+
+.fg-branch-adder .fg-branch-hit {
+  flex-grow: 1;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fg-branch-adder svg {
+  width: 12px;
+  height: 12px;
+}
+
+.fg-slot-adder {
+  display: flex;
+  background: #fff;
+}
+
+.fg-native-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 4px;
+  height: 24px;
+  min-width: 24px;
+  padding: 0 6px;
+  cursor: pointer;
+}
+
+.fg-native-btn:hover {
+  border-color: #3370ff;
+  color: #3370ff;
+}
+
+.fg-drag-node {
+  position: relative;
+  height: 32px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 19px;
+  border: 1px solid var(--fg-primary);
+  padding: 0 15px;
+  background: #fff;
+}
+
+.fg-drag-node:hover {
+  background-color: var(--fg-primary-09);
+  color: var(--fg-primary);
+}
+
+.fg-drag-counts {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  text-align: center;
+  line-height: 16px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #fff;
+  background-color: var(--fg-primary);
+}
+
+.fg-dragging-adder {
+  width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  background-color: white;
+  border: 1px dashed #b8bcc1;
+}
+
+.fg-highlight-line {
+  display: flex;
+  align-items: center;
+}
+
+.fg-highlight-bar {
+  background: #3370ff;
+}
+
+.fg-node-wrap {
+  width: 100%;
+  height: 32px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 19px;
+  padding: 0 15px;
+}
+
+.fg-node-wrap:hover {
+  background-color: var(--fg-primary-09);
+  color: var(--fg-primary);
+}
+
+.fg-node-label {
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.fg-nodes-wrap {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.fg-nodes-wrap::-webkit-scrollbar {
+  display: none;
+}
+
+.fg-tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fg-tools button,
+.fg-tools label {
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 4px;
+  height: 28px;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.fg-tools button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}