@fudanda/workflow 0.0.0-stage → 1.20261015.1-beta.1

package/vendor/coze/original/toolbar-auto-layout.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback } from 'react';
+
+import { reporter } from '@coze-arch/logger';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozAutoLayout } from '@coze-arch/coze-design/icons';
+import { IconButton, Tooltip } from '@coze-arch/coze-design';
+import { useEntity, usePlayground } from '@flowgram-adapter/free-layout-editor';
+
+import { useAutoLayout } from '../hooks';
+import { WorkflowGlobalStateEntity } from '../../../entities';
+
+export const AutoLayout = () => {
+  const runAutoLayout = useAutoLayout();
+  const playground = usePlayground();
+  const workflowState = useEntity<WorkflowGlobalStateEntity>(
+    WorkflowGlobalStateEntity,
+  );
+  const { workflowId } = workflowState;
+  const autoLayout = useCallback(async () => {
+    await runAutoLayout();
+    reporter.event({
+      eventName: 'workflow_control_auto_layout',
+      namespace: 'workflow',
+      scope: 'control', // Secondary namespace to refine specific scenarios
+      meta: {
+        workflowId,
+      }, // For other custom information, try to avoid reporting irrelevant or redundant information
+    });
+  }, [runAutoLayout, workflowId]);
+
+  if (playground.config.readonly) {
+    return <></>;
+  }
+
+  return (
+    <Tooltip content={I18n.t('workflow_detail_layout_optimization_tooltip')}>
+      <IconButton
+        onClick={autoLayout}
+        icon={<IconCozAutoLayout className="coz-fg-primary" />}
+        color="secondary"
+        data-testid="workflow.detail.toolbar.auto-layout"
+      />
+    </Tooltip>
+  );
+};

package/vendor/coze/original/toolbar-comment.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useState } from 'react';
+
+import { StandardNodeType } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozComment } from '@coze-arch/coze-design/icons';
+import { Tooltip, IconButton } from '@coze-arch/coze-design';
+import { FlowNodeTransformData } from '@flowgram-adapter/free-layout-editor';
+import {
+  WorkflowDocument,
+  type WorkflowNodeEntity,
+  type WorkflowNodeMeta,
+  WorkflowSelectService,
+  usePlayground,
+  useService,
+} from '@flowgram-adapter/free-layout-editor';
+
+import { WorkflowCustomDragService } from '@/services';
+
+export const Comment = () => {
+  const playground = usePlayground();
+  const document = useService(WorkflowDocument);
+  const selectService = useService(WorkflowSelectService);
+  const dragService = useService(WorkflowCustomDragService);
+
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  const calcNodePosition = useCallback(
+    (
+      mouseEvent: React.MouseEvent<HTMLButtonElement>,
+      containerNode?: WorkflowNodeEntity,
+    ) => {
+      const mousePosition = playground.config.getPosFromMouseEvent(mouseEvent);
+      if (!containerNode) {
+        return {
+          x: mousePosition.x,
+          y: mousePosition.y - 75,
+        };
+      }
+      const containerTransform = containerNode.getData(FlowNodeTransformData);
+      const childrenLength = containerNode.collapsedChildren.length;
+      return {
+        x:
+          containerTransform.padding.left -
+          containerTransform.padding.left +
+          childrenLength * 30,
+        y: containerTransform.padding.top + childrenLength * 30,
+      };
+    },
+    [playground],
+  );
+
+  const createComment = useCallback(
+    async (mouseEvent: React.MouseEvent<HTMLButtonElement>) => {
+      setTooltipVisible(false);
+      let containerNode: WorkflowNodeEntity | undefined;
+      if (
+        selectService.activatedNode?.getNodeMeta<WorkflowNodeMeta>().isContainer
+      ) {
+        containerNode = selectService.activatedNode;
+      }
+      const canvasPosition = calcNodePosition(mouseEvent, containerNode);
+      // Create Node
+      const node = await document.createWorkflowNodeByType(
+        StandardNodeType.Comment,
+        canvasPosition,
+        {},
+        containerNode?.id,
+      );
+      // Wait for node to render
+      setTimeout(() => {
+        if (containerNode) {
+          return;
+        }
+        // selected node
+        selectService.selectNode(node);
+        // Start dragging
+        dragService.startDragSelectedNodes(mouseEvent);
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers -- waiting for node render
+      }, 50);
+    },
+    [selectService, calcNodePosition, document, dragService],
+  );
+
+  if (playground.config.readonly) {
+    return <></>;
+  }
+
+  return (
+    <Tooltip
+      trigger="custom"
+      visible={tooltipVisible}
+      onVisibleChange={setTooltipVisible}
+      content={I18n.t('workflow_toolbar_comment_tooltips')}
+    >
+      <IconButton
+        icon={<IconCozComment className="coz-fg-primary" />}
+        color="secondary"
+        data-testid="workflow.detail.controls.comment"
+        onClick={createComment}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+      />
+    </Tooltip>
+  );
+};

package/vendor/coze/original/toolbar-container.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useToolbarHandlers } from '../hooks';
+import { Tools } from './tools';
+import { Minimap } from './minimap';
+
+import css from './tools.module.less';
+
+export const ToolbarContainer = ({
+  disableTraceAndTestRun,
+}: {
+  disableTraceAndTestRun?: boolean;
+}) => {
+  const handlers = useToolbarHandlers();
+
+  if (disableTraceAndTestRun) {
+    return <></>;
+  }
+
+  return (
+    <div className={css.tools}>
+      <div>
+        <Minimap handlers={handlers} />
+        <Tools handlers={handlers} />
+      </div>
+    </div>
+  );
+};

package/vendor/coze/original/toolbar-interactive.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { Tooltip } from '@coze-arch/coze-design';
+import { usePlaygroundTools } from '@flowgram-adapter/free-layout-editor';
+import { type InteractiveType as IdeInteractiveType } from '@flowgram-adapter/free-layout-editor';
+import {
+  GuidingPopover,
+  InteractiveType,
+  MousePadSelector,
+  getPreferInteractiveType,
+  setPreferInteractiveType,
+} from '@coze-common/mouse-pad-selector';
+
+export const Interactive = () => {
+  const tools = usePlaygroundTools();
+
+  const [interactiveType, setInteractiveType] = useState<InteractiveType>(
+    () => getPreferInteractiveType() as InteractiveType,
+  );
+
+  const [showInteractivePanel, setShowInteractivePanel] = useState(false);
+
+  const mousePadTooltip = I18n.t(
+    interactiveType === InteractiveType.Mouse
+      ? 'workflow_mouse_friendly'
+      : 'workflow_pad_friendly',
+  );
+
+  useEffect(() => {
+    tools.setMouseScrollDelta(zoom => zoom / 20);
+
+    // Read interactive mode from cache, application takes effect
+    const preferInteractiveType = getPreferInteractiveType();
+    tools.setInteractiveType(preferInteractiveType as IdeInteractiveType);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- init
+  }, []);
+
+  return (
+    <GuidingPopover>
+      <Tooltip
+        content={mousePadTooltip}
+        style={{ display: showInteractivePanel ? 'none' : 'block' }}
+      >
+        <div
+          className="workflow-toolbar-interactive"
+          data-testid="workflow.detail.toolbar.interactive"
+        >
+          <MousePadSelector
+            value={interactiveType}
+            onChange={value => {
+              setInteractiveType(value);
+              setPreferInteractiveType(value);
+              tools.setInteractiveType(value as unknown as IdeInteractiveType);
+            }}
+            onPopupVisibleChange={setShowInteractivePanel}
+            containerStyle={{
+              border: 'none',
+              height: '24px',
+              width: '38px',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: '2px',
+              padding: '4px',
+              paddingTop: '1px',
+              borderRadius: 'var(--small, 6px)',
+            }}
+            iconStyle={{
+              margin: '0',
+              width: '16px',
+              height: '16px',
+            }}
+            arrowStyle={{
+              width: '12px',
+              height: '12px',
+            }}
+          />
+        </div>
+      </Tooltip>
+    </GuidingPopover>
+  );
+};

package/vendor/coze/original/toolbar-minimap-switch.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { I18n } from '@coze-arch/i18n';
+import { IconCozRectangleMap } from '@coze-arch/coze-design/icons';
+import { Tooltip, IconButton } from '@coze-arch/coze-design';
+
+import type { ITool } from '../type';
+
+export const MinimapSwitch = (props: ITool) => {
+  const { handlers } = props;
+  const { minimapVisible, setMinimapVisible } = handlers;
+
+  return (
+    <Tooltip content={I18n.t('workflow_toolbar_minimap_tooltips')}>
+      <IconButton
+        icon={
+          <IconCozRectangleMap
+            className={minimapVisible ? undefined : 'coz-fg-primary'}
+          />
+        }
+        color={minimapVisible ? 'highlight' : 'secondary'}
+        data-testid="workflow.detail.toolbar.minimap-switch"
+        onClick={() => setMinimapVisible(!minimapVisible)}
+      />
+    </Tooltip>
+  );
+};

package/vendor/coze/original/toolbar-tools.less

@@ -0,0 +1,46 @@
+/* stylelint-disable declaration-no-important */
+.tools {
+  pointer-events: none;
+
+  position: absolute;
+  bottom: 16px;
+
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
+  min-width: 360px;
+  padding: 0 8px;
+
+  :global .minimap-panel {
+    border: 1px solid var(--coz-stroke-plus) !important;
+    box-shadow: var(--coz-shadow-small) !important;
+  }
+}
+
+.tools-wrap {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  gap: 8px;
+  align-items: center;
+}
+
+.tools-section {
+  pointer-events: auto;
+
+  display: flex;
+  column-gap: 2px;
+  align-items: center;
+
+  height: 40px;
+  padding: 0 4px;
+
+  background-color: var(--coz-bg-max);
+  border: 1px solid var(--coz-stroke-plus);
+  border-radius: 10px;
+  box-shadow: var(--coz-shadow-small);
+
+  &.test-run {
+    column-gap: 4px;
+  }
+}

package/vendor/coze/original/toolbar-tools.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRef, type RefObject } from 'react';
+
+import cls from 'classnames';
+import { usePlayground } from '@flowgram-adapter/free-layout-editor';
+import { Divider } from '@coze-arch/coze-design';
+
+import { useTemplateService } from '@/hooks/use-template-service';
+
+import type { ITool } from '../type';
+import { StartTestRunButton } from '../../test-run/test-run-button/start-test-run-button';
+import { OpenTraceButton } from '../../test-run/test-run-button/open-trace-button';
+import { RoleButton } from '../../flow-role';
+import { useGlobalState } from '../../../hooks';
+import { Zoom } from './zoom';
+import { MinimapSwitch } from './minimap-switch';
+import { Interactive } from './interactive';
+import { Comment } from './comment';
+import { AutoLayout } from './auto-layout';
+import { AddNode } from './add-node';
+
+import css from './tools.module.less';
+
+export const Tools = (props: ITool) => {
+  const templateState = useTemplateService();
+
+  const playground = usePlayground();
+  const { isChatflow } = useGlobalState();
+  const enableAddNode = !playground.config.readonly;
+  const toolbarRef = useRef<HTMLDivElement>();
+  return (
+    <div
+      className={cls(
+        css['tools-wrap'],
+        templateState.templateVisible ? 'bottom-[2px]' : 'bottom-[16px]',
+      )}
+      ref={toolbarRef as RefObject<HTMLDivElement>}
+    >
+      <div className={css['tools-section']}>
+        <Interactive />
+        <Zoom />
+        <Comment />
+        <AutoLayout />
+        <MinimapSwitch {...props} />
+        {enableAddNode ? (
+          <>
+            <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
+            <AddNode {...props} toolbarRef={toolbarRef} />
+          </>
+        ) : null}
+      </div>
+      <div className={cls(css['tools-section'], css['test-run'])}>
+        {isChatflow ? <RoleButton /> : null}
+        {/* The operation and maintenance platform does not need debugging and practice running, just need to view the information to troubleshoot problems */}
+        {IS_BOT_OP ? (
+          <OpenTraceButton />
+        ) : (
+          <>
+            {isChatflow ? (
+              <Divider
+                layout="vertical"
+                style={{ height: '16px' }}
+                margin={3}
+              />
+            ) : null}
+            {/* will support soon */}
+            {!IS_OPEN_SOURCE && <OpenTraceButton />}
+            <StartTestRunButton />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/vendor/coze/original/toolbar-zoom.tsx

@@ -0,0 +1,134 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useMemo, useState, type CSSProperties } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconCozArrowDown } from '@coze-arch/coze-design/icons';
+import { Dropdown, Divider } from '@coze-arch/coze-design';
+import { usePlaygroundTools } from '@flowgram-adapter/free-layout-editor';
+import { usePlayground } from '@flowgram-adapter/free-layout-editor';
+
+export const Zoom = () => {
+  const tools = usePlaygroundTools();
+  const playground = usePlayground();
+  const [selected, setSelected] = useState(false);
+  const zoom = useMemo(() => {
+    const zoomValue = tools.zoom * 100;
+    return zoomValue.toFixed(0);
+  }, [tools.zoom]);
+  // In order to override the style of the cozed design, you cannot use tailwind css.
+  const zoomOptionStyle: CSSProperties = {
+    padding: '8px',
+    lineHeight: '16px',
+  };
+  return (
+    <Dropdown
+      clickToHide
+      position="top"
+      trigger="custom"
+      visible={selected}
+      onClickOutSide={() => setSelected(false)}
+      onVisibleChange={setSelected}
+      render={
+        <Dropdown.Menu>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.out"
+            style={zoomOptionStyle}
+            onClick={() => tools.zoomout()}
+          >
+            {I18n.t('workflow_toolbar_zoom_out')}
+          </Dropdown.Item>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.in"
+            style={zoomOptionStyle}
+            onClick={() => tools.zoomin()}
+          >
+            {I18n.t('workflow_toolbar_zoom_in')}
+          </Dropdown.Item>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.fit"
+            style={zoomOptionStyle}
+            onClick={() => tools.fitView()}
+          >
+            {I18n.t('workflow_toolbar_zoom_fit')}
+          </Dropdown.Item>
+          <Divider className="m-[4px] w-[108px]" />
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.50"
+            style={zoomOptionStyle}
+            onClick={() => {
+              playground.config.updateZoom(0.5);
+            }}
+          >
+            {I18n.t('workflow_toolbar_zoom_to')} 50%
+          </Dropdown.Item>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.100"
+            style={zoomOptionStyle}
+            onClick={() => {
+              playground.config.updateZoom(1);
+            }}
+          >
+            {I18n.t('workflow_toolbar_zoom_to')} 100%
+          </Dropdown.Item>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.150"
+            style={zoomOptionStyle}
+            onClick={() => {
+              playground.config.updateZoom(1.5);
+            }}
+          >
+            {I18n.t('workflow_toolbar_zoom_to')} 150%
+          </Dropdown.Item>
+          <Dropdown.Item
+            data-testid="workflow.detail.toolbar.zoom.200"
+            style={zoomOptionStyle}
+            onClick={() => {
+              playground.config.updateZoom(2);
+            }}
+          >
+            {I18n.t('workflow_toolbar_zoom_to')} 200%
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      }
+    >
+      <div
+        className="workflow-toolbar-zoom flex justify-start items-center w-[70px] h-[24px] p-[2px] rounded-small border border-solid border-[var(--coz-stroke-plus)] cursor-pointer select-none"
+        data-testid="workflow.detail.toolbar.zoom"
+        onClick={() => setSelected(!selected)}
+        style={{
+          borderColor: selected
+            ? 'var(--coz-stroke-hglt)'
+            : 'var(--coz-stroke-plus)',
+        }}
+      >
+        <p className="text-[12px] flex items-center mx-[4px] w-[40px] h-[20px]">
+          {zoom}%
+        </p>
+        <div
+          className="flex items-center justify-center pr-[2px] color-[var(--coz-fg-secondary)]"
+          style={{
+            color: 'var(--coz-fg-secondary)',
+          }}
+        >
+          <IconCozArrowDown />
+        </div>
+      </div>
+    </Dropdown>
+  );
+};