-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/views/flow/components/ParamsDrawer.vue b/src/views/flow/components/ParamsDrawer.vue
new file mode 100644
index 0000000..82cff94
--- /dev/null
+++ b/src/views/flow/components/ParamsDrawer.vue
@@ -0,0 +1,530 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 输入
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 输入
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 输出
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- 输入
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/views/flow/nodes/common/startNode.js b/src/views/flow/nodes/common/startNode.js
index 50621d6..2c1a70f 100644
--- a/src/views/flow/nodes/common/startNode.js
+++ b/src/views/flow/nodes/common/startNode.js
@@ -1,209 +1,200 @@
-// 导入 HtmlNode 及其模型，为后续继承做准备
-import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
-// 导入 Vue 相关方法，用于渲染组件
-import { createApp, h, nextTick } from 'vue';
-import ElementPlus from 'element-plus'
-// 导入 Vue 组件
-import StartNode from './startNode.vue';
-import OuterNode from "../../components/OuterNode.vue";
-import JsonViewer from 'vue3-json-viewer'
-
-/**
- * 定义一个 元素的 HTML 节点类，继承自 HtmlNode
- * 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
- */
-class StartNodeHtmlNode extends HtmlNode {
- resizeObserver = null;
- isMounted; // 标记组件是否已挂载
- r; // 渲染函数
- app; // Vue 应用实例
- container = null;
-
- static reusePool = new Map(); // 节点复用池
-
- /**
- * 构造函数
- * @param props 传递给节点的属性，包括模型、图模型等
- */
- constructor(props) {
- super(props);
- this.initVueApp(props)
- }
-
- initVueApp(props) {
- this.isMounted = false;
-
- this.hideAnchor = false;
- this.autoExpand = true; // 防止锚点被折叠
- this.anchorsPreset = "default"; // 重置锚点预设
- // 创建 元素的渲染函数
- this.r = h(OuterNode, {
- model: props.model,
- component: StartNode,
- properties: {
- ...props.model.getProperties()
- },
- onContentChange: this.handleContentChange.bind(this),
- onBindRef: this.handleComponentInstance.bind(this)
- });
-
- // 创建 Vue 应用实例，并指定渲染函数
- this.app = createApp({
- render: () => this.r
- });
- }
-
- /**
- * 将 HTML 内容设置到指定的根元素上
- * @param rootEl 根元素
- */
- async setHtml(rootEl) {
- const nodeId = this.props.model.id;
- if (StartNodeHtmlNode.reusePool.has(nodeId)) {
- rootEl.appendChild(StartNodeHtmlNode.reusePool.get(nodeId));
- return;
- }
-
- if (!this.isMounted) {
- this.isMounted = true;
- this.container = document.createElement('div');
- this.container.style.display = 'inline-block'; // 关键：确保容器自适应内容
-
- rootEl.appendChild(this.container);
- this.app.use(ElementPlus) // 关键：单独注册ElementPlus
- this.app.use(JsonViewer)
- this.app.mount(this.container);
- await nextTick();
- this.setupSizeObserver();
- StartNodeHtmlNode.reusePool.set(nodeId, this.container);
- } else {
- this.r.component.props.properties = this.props.model.getProperties();
- }
- }
-
- /**
- * 获取节点文本内容
- * 对于元素，返回 null，因为其内容由特定组件渲染
- * @returns {null}
- */
- getText() {
- return null;
- }
-
- handleComponentInstance(data) {
- // 将组件实例保存到节点模型
- this.props.model.setComponentInstance(data)
- }
-
- handleContentChange() {
- // 内容变化时强制更新尺寸
- this.updateNodeSize();
- }
-
- // 渲染完成后获取实际尺寸
- updateNodeSize () {
- if (this.container) {
- const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
- const node = this.container.querySelector('.node__box')
- const rect = node.getBoundingClientRect();
- this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
- }
- }
-
- setupSizeObserver() {
- // 首次渲染立即检测
- requestAnimationFrame(() => {
- this.updateNodeSize();
- // 持续监听变化
- this.resizeObserver = new ResizeObserver(() => {
- this.updateNodeSize();
- });
- this.resizeObserver.observe(this.container);
- });
- }
-
- // 组件卸载时移除监听
- onDestroy() {
- this.resizeObserver?.disconnect();
- }
-}
-
-/**
- * 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
- * 该类主要设置节点的属性和样式
- */
-class StartNodeHtmlModel extends HtmlNodeModel {
- initNodeData(data) {
- super.initNodeData(data);
- }
-
- // 保存组件实例引用
- setComponentInstance(instance) {
- this.componentInstance = instance;
- }
-
- // 验证表单
- async validateForm() {
- const result = this.componentInstance.validateForm()
- return result
- }
-
- setCustomProperties() {
- this.componentInstance.setNodeProperties()
- }
-
- /**
- * 设置节点属性
- * 包括宽度、高度、文本编辑属性等
- */
- setAttributes() {
- // 初始设置为0，后续动态更新
- this.width = 0;
- this.height = 0;
- this.text.editable = false;
- this.deletable = false; // 关键代码：禁止删除节点
- }
-
- updateSize(width, height) {
- this.width = width + 24;
- this.height = height + 50;
- this.initNodeData(this); // 触发节点重绘
- }
-
- // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
- getDefaultAnchor() {
- let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
- return [
- { x: x + width / 2 - 24, y: y - 25, name: 'right', id: "".concat(this.id, "_1"), properties: { connectionType: 'source' }, onlyAsSource: true },
- ];
- }
-
- /**
- * 获取节点轮廓样式
- * 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
- * @returns {object} 节点轮廓样式
- */
- getOutlineStyle() {
- const style = super.getOutlineStyle();
- style.stroke = 'none';
- style.hover.stroke = 'none';
- return style;
- }
-}
-
-// 导出方法注册
-export function registerStartNode(lf) {
- lf.register({
- type: "start",
- view: StartNodeHtmlNode,
- model: StartNodeHtmlModel,
- events: {
- remove: (event) => {
- // 阻止默认的删除事件
- event.preventDefault();
- // 可以在此处添加自定义的删除逻辑，例如弹出提示框
- alert('此节点不可删除');
- },
- }
- })
+// 导入 HtmlNode 及其模型，为后续继承做准备
+import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
+// 导入 Vue 相关方法，用于渲染组件
+import { createApp, h, nextTick } from 'vue';
+import ElementPlus from 'element-plus'
+// 导入 Vue 组件
+import StartNode from './startNode.vue';
+import OuterNode from "../../components/OuterNode.vue";
+import JsonViewer from 'vue3-json-viewer'
+
+/**
+ * 定义一个 元素的 HTML 节点类，继承自 HtmlNode
+ * 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
+ */
+class StartNodeHtmlNode extends HtmlNode {
+ resizeObserver = null;
+ isMounted; // 标记组件是否已挂载
+ r; // 渲染函数
+ app; // Vue 应用实例
+ container = null;
+
+ static reusePool = new Map(); // 节点复用池
+
+ /**
+ * 构造函数
+ * @param props 传递给节点的属性，包括模型、图模型等
+ */
+ constructor(props) {
+ super(props);
+ this.initVueApp(props)
+ }
+
+ initVueApp(props) {
+ this.isMounted = false;
+
+ this.hideAnchor = false;
+ this.autoExpand = true; // 防止锚点被折叠
+ this.anchorsPreset = "default"; // 重置锚点预设
+ // 创建 元素的渲染函数
+ this.r = h(OuterNode, {
+ model: props.model,
+ component: StartNode,
+ properties: {
+ ...props.model.getProperties()
+ },
+ onContentChange: this.handleContentChange.bind(this),
+ onBindRef: this.handleComponentInstance.bind(this)
+ });
+
+ // 创建 Vue 应用实例，并指定渲染函数
+ this.app = createApp({
+ render: () => this.r
+ });
+ }
+
+ /**
+ * 将 HTML 内容设置到指定的根元素上
+ * @param rootEl 根元素
+ */
+ async setHtml(rootEl) {
+ const nodeId = this.props.model.id;
+ if (StartNodeHtmlNode.reusePool.has(nodeId)) {
+ rootEl.appendChild(StartNodeHtmlNode.reusePool.get(nodeId));
+ return;
+ }
+
+ if (!this.isMounted) {
+ this.isMounted = true;
+ this.container = document.createElement('div');
+ this.container.style.display = 'inline-block'; // 关键：确保容器自适应内容
+
+ rootEl.appendChild(this.container);
+ this.app.use(ElementPlus) // 关键：单独注册ElementPlus
+ this.app.use(JsonViewer)
+ this.app.mount(this.container);
+ await nextTick();
+ this.setupSizeObserver();
+ StartNodeHtmlNode.reusePool.set(nodeId, this.container);
+ } else {
+ this.r.component.props.properties = this.props.model.getProperties();
+ }
+ }
+
+ /**
+ * 获取节点文本内容
+ * 对于元素，返回 null，因为其内容由特定组件渲染
+ * @returns {null}
+ */
+ getText() {
+ return null;
+ }
+
+ handleComponentInstance(data) {
+ // 将组件实例保存到节点模型
+ this.props.model.setComponentInstance(data)
+ }
+
+ handleContentChange() {
+ // 内容变化时强制更新尺寸
+ this.updateNodeSize();
+ }
+
+ // 渲染完成后获取实际尺寸
+ updateNodeSize () {
+ if (this.container) {
+ const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
+ const node = this.container.querySelector('.node__box')
+ const rect = node.getBoundingClientRect();
+ this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
+ }
+ }
+
+ setupSizeObserver() {
+ // 首次渲染立即检测
+ requestAnimationFrame(() => {
+ this.updateNodeSize();
+ // 持续监听变化
+ this.resizeObserver = new ResizeObserver(() => {
+ this.updateNodeSize();
+ });
+ this.resizeObserver.observe(this.container);
+ });
+ }
+
+ // 组件卸载时移除监听
+ onDestroy() {
+ this.resizeObserver?.disconnect();
+ }
+}
+
+/**
+ * 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
+ * 该类主要设置节点的属性和样式
+ */
+class StartNodeHtmlModel extends HtmlNodeModel {
+ initNodeData(data) {
+ super.initNodeData(data);
+ }
+
+ // 保存组件实例引用
+ setComponentInstance(instance) {
+ this.componentInstance = instance;
+ }
+
+ /**
+ * 设置节点属性
+ * 包括宽度、高度、文本编辑属性等
+ */
+ setAttributes() {
+ // 初始设置为0，后续动态更新
+ this.width = 0;
+ this.height = 0;
+ this.text.editable = false;
+ this.deletable = false; // 关键代码：禁止删除节点
+ }
+
+ updateSize(width, height) {
+ this.width = width + 24;
+ this.height = height + 50;
+ this.initNodeData(this); // 触发节点重绘
+ }
+
+ // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
+ getDefaultAnchor() {
+ let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+ return [
+ { x: x + width / 2 - 24, y: y - 25, name: 'right', id: "".concat(this.id, "_1"), properties: { connectionType: 'source' }, onlyAsSource: true },
+ ];
+ }
+
+ /**
+ * 获取节点轮廓样式
+ * 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
+ * @returns {object} 节点轮廓样式
+ */
+ getOutlineStyle() {
+ const style = super.getOutlineStyle();
+ style.stroke = 'none';
+ style.hover.stroke = 'none';
+ return style;
+ }
+}
+
+// 导出方法注册
+export function registerStartNode(lf) {
+ lf.register({
+ type: "start",
+ view: StartNodeHtmlNode,
+ model: StartNodeHtmlModel,
+ effect: ['status'],
+ events: {
+ remove: (event) => {
+ // 阻止默认的删除事件
+ event.preventDefault();
+ // 可以在此处添加自定义的删除逻辑，例如弹出提示框
+ alert('此节点不可删除');
+ },
+ }
+ })
}
\ No newline at end of file
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index e593359..9b0ea6f 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -16,75 +16,19 @@
-
-
-
-
-
-
-
- 输出
-
-
-
-
-
-
-
-
- 
Start
-
-
-
-
-
-
-
-
工作流的起始节点，用于设定启动工作流需要的信息
-
-
diff --git a/vite.config.js b/vite.config.js
index 5757441..723fabc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,8 +24,8 @@ export default defineConfig(({mode, command}) => {
'typescript',
],
include: [
- // 确保其他依赖被优化
- 'monaco-editor/esm/vs/language/typescript/monaco.contribution',
+ // 确保其他依赖被优化
+ 'monaco-editor/esm/vs/language/typescript/monaco.contribution',
],
},
resolve: {
-
-
-
-
- 输入
-
-
-
-
-
-
-
-
-