@hrspd-gss/bole-clickwizard-designer 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/WorkflowEditor.d.ts +0 -1
- package/dist/bole-clickwizard-designer.css +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +596 -557
- package/package.json +12 -13
- package/dist/style.css +0 -1
package/dist/WorkflowEditor.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.workflow-editor{border:1px solid #e0e0e0;border-radius:8px;background:#fdfdfd;font-family:sans-serif;display:flex;flex-direction:column;overflow:hidden}.workflow-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e0e0e0;background:#fff}.workflow-btn-primary{background:#007bff;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}.workflow-canvas{position:relative;width:100%;background-color:#f8f9fa;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:20px 20px;overflow:auto;cursor:grab}.workflow-canvas.canvas-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.workflow-canvas-content{position:absolute;top:0;left:0;min-width:100%;min-height:100%;pointer-events:none}.workflow-node{position:absolute;background:#fff;border:1px solid #adb5bd;border-radius:8px;box-shadow:0 2px 5px #0000001a;cursor:grab;width:200px;min-height:80px;font-size:14px;z-index:2}.workflow-node:active{cursor:grabbing;box-shadow:0 4px 10px #0003}.workflow-node-header{background-color:#e9ecef;border-bottom:1px solid #ced4da;padding:8px 12px;font-weight:700;border-top-left-radius:7px;border-top-right-radius:7px}.workflow-node-body{padding:8px 12px}.workflow-node-body p{margin:0}.workflow-node-type{font-size:12px;color:#666;margin-bottom:4px}.workflow-node-params{margin-top:4px;border-top:1px dashed #e0e0e0;padding-top:4px}.workflow-node-param{font-size:10px;color:#888;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.workflow-node-param-more{color:#aaa;font-style:italic}.workflow-editor-container{display:flex;flex-direction:column;height:100vh;border:1px solid #ccc;border-radius:8px;overflow:hidden}.workflow-body{display:flex;flex:1;overflow:hidden}.workflow-canvas{flex:1}.properties-popup-overlay{position:fixed;inset:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.properties-popup{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000040;min-width:350px;max-width:500px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.properties-popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#f8f9fa;cursor:move;-webkit-user-select:none;user-select:none;border-top-left-radius:8px;border-top-right-radius:8px}.properties-popup-header h4{margin:0;font-size:16px;color:#333;pointer-events:none}.properties-popup.dragging{opacity:.9;box-shadow:0 8px 30px #00000059}.properties-popup-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;line-height:1;transition:color .2s}.properties-popup-close:hover{color:#333}.properties-popup-content{padding:20px;overflow-y:auto;flex:1}.properties-popup-footer{padding:16px 20px;border-top:1px solid #e0e0e0;background:#f8f9fa;display:flex;justify-content:flex-end;gap:8px}.form-group{margin-bottom:12px}.form-group label{display:block;margin-bottom:4px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:14px;height:38px;line-height:1.5}.form-group input[type=checkbox]{width:auto;height:auto}.form-group select{background-color:#fff;cursor:pointer}.form-group input[readonly]{background-color:#eee;cursor:not-allowed}.workflow-node.selected{border-color:#007bff;box-shadow:0 0 10px #007bff80}.workflow-node.node-connecting-hover{border-color:#28a745;box-shadow:0 0 20px #28a745b3,0 0 40px #28a74566;transition:box-shadow .2s ease,border-color .2s ease}.workflow-node.node-connecting-hover .workflow-node-header{background-color:#d4edda;border-bottom-color:#28a745}.workflow-edge{fill:none;stroke-width:1.5px}.workflow-edge.selected{stroke-width:3px}.workflow-edge.reconnecting{opacity:.3;stroke-dasharray:5,5}.edge-label-bg{fill:#fff;stroke:#6c757d;stroke-width:1px;pointer-events:none}.edge-label-bg.selected{stroke:#007bff}.edge-label{font-size:11px;fill:#495057;pointer-events:none;font-family:sans-serif}.edge-label.selected{fill:#007bff;font-weight:500}.edge-condition-indicator{cursor:pointer}.edge-condition-bg{fill:#fff3cd;stroke:#ffc107;stroke-width:2px;transition:all .2s ease}.edge-condition-bg.selected{fill:#cce5ff;stroke:#007bff}.edge-condition-bg:hover{fill:#ffe69c}.edge-condition-icon{stroke:#856404;pointer-events:none}.edge-condition-icon.selected{stroke:#007bff}.edge-connector{fill:#fff;stroke:#6c757d;stroke-width:2px;pointer-events:none}.edge-connector.selected{stroke:#007bff}.workflow-edge-interactive{fill:none;stroke:transparent;stroke-width:15px;cursor:pointer;pointer-events:auto}.workflow-svg-layer{position:absolute;top:0;left:0;width:100%;height:100%;min-width:100%;min-height:100%;pointer-events:none;z-index:1;overflow:visible}.workflow-svg-connectors{position:absolute;top:0;left:0;width:100%;height:100%;min-width:100%;min-height:100%;pointer-events:none;z-index:3;overflow:visible}.workflow-svg-connectors .edge-connector{pointer-events:auto;cursor:pointer}.workflow-svg-edge-actions{position:absolute;top:0;left:0;width:100%;height:100%;min-width:100%;min-height:100%;pointer-events:none;z-index:100;overflow:visible}.add-node-toolbar{display:flex;align-items:center;gap:8px}.add-node-toolbar span{font-size:14px;font-weight:500}.add-node-toolbar button{background:#6c757d;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}.add-node-toolbar button:hover{background:#5a6268}.workflow-btn-secondary{background:#f0f0f0;color:#333;border:1px solid #ccc;padding:8px 14px;border-radius:6px;cursor:pointer}.workflow-btn-secondary:hover{background:#e0e0e0}.workflow-io-buttons{display:flex;gap:8px}.properties-panel-footer{margin-top:24px;padding-top:16px;border-top:1px solid #ddd;display:flex;justify-content:flex-end}.btn-danger{background-color:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}.btn-danger:hover{background-color:#c82333}.btn-primary{background-color:#007bff;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}.btn-primary:hover{background-color:#0056b3}.workflow-edge-preview{fill:none;stroke:#007bff;stroke-width:2px;stroke-dasharray:5,5}.workflow-node-preview{position:absolute;background:#ffffffe6;border:2px dashed #007bff;border-radius:6px;box-shadow:0 2px 8px #007bff4d;width:120px;min-height:50px;font-size:11px;z-index:100;pointer-events:none;transform:translate(10px,-50%);opacity:.85}.workflow-node-preview-header{background-color:#007bff26;border-bottom:1px dashed #007bff;padding:4px 8px;font-weight:700;color:#007bff;border-top-left-radius:4px;border-top-right-radius:4px;font-size:10px}.workflow-node-preview-body{padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.workflow-node-preview-hint{color:#6c757d;font-size:9px;font-style:italic}.workflow-node-preview-esc{color:#999;font-size:8px;background:#f0f0f0;padding:1px 4px;border-radius:3px;border:1px solid #ddd}.workflow-node-preview.workflow-node-preview-connect{border-color:#28a745;background:#d4eddaf2}.workflow-node-preview.workflow-node-preview-connect .workflow-node-preview-header{background-color:#28a74533;border-bottom-color:#28a745;color:#28a745}.node-active .workflow-node-header{background-color:#28a745;color:#fff}.node-active{border-color:#28a745;box-shadow:0 0 15px #28a745b3}.edge-active{stroke:#28a745;stroke-width:4px}.edge-handle{fill:#007bff;stroke:#fff;stroke-width:2px;cursor:move}.node-add-handle-container{position:absolute;display:flex;align-items:center;justify-content:center;padding:6px;background:#fffffff2;border-radius:8px;box-shadow:0 2px 8px #00000026;z-index:10}.node-add-handle-container.handle-right{top:50%;transform:translateY(-50%);right:-20px}.node-add-handle-container.handle-left{top:50%;transform:translateY(-50%);left:-20px}.node-add-handle-container.handle-bottom{left:50%;transform:translate(-50%);bottom:-20px}.node-add-handle{width:20px;height:20px;background-color:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 1px 3px #0000004d}.node-add-handle:hover{background-color:#0056b3}.handle-left{top:50%;transform:translateY(-50%);left:-11px}.handle-right{top:50%;transform:translateY(-50%);right:-10px}.handle-bottom{left:50%;transform:translate(-50%);bottom:-11px}.node-connecting-target{border-style:dashed;border-color:#28a745}.edge-condition-editor{margin-top:8px}.edge-condition-editor .form-group{margin-bottom:16px}.edge-condition-editor .form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.edge-condition-editor select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;background-color:#fff;cursor:pointer;height:38px;line-height:1.5;box-sizing:border-box}.edge-condition-editor select:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.compare-condition-editor{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:16px;margin-top:12px}.condition-value-group{margin-bottom:12px}.condition-value-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#666}.condition-value-row{display:flex;gap:8px;align-items:center}.condition-source-select{flex:0 0 100px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:14px;background-color:#fff;height:38px;line-height:1.5;box-sizing:border-box}.condition-value-input{flex:1;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:14px;height:38px;line-height:1.5;box-sizing:border-box}.condition-value-input:focus,.condition-source-select:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.edge-condition-editor textarea{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;box-sizing:border-box}.edge-condition-editor textarea:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.form-hint{display:block;margin-top:6px;font-size:11px;color:#888;line-height:1.4}.edge-action-buttons{pointer-events:auto}.edge-action-container-bg{fill:#fffffff2;stroke:#dee2e6;stroke-width:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.edge-action-btn{transition:opacity .15s ease}.edge-action-bg{fill:#007bff;stroke:#fff;stroke-width:2px;transition:fill .15s ease}.edge-action-edit .edge-action-bg{fill:#007bff}.edge-action-edit:hover .edge-action-bg{fill:#0056b3}.edge-action-reconnect .edge-action-bg{fill:#28a745}.edge-action-reconnect:hover .edge-action-bg{fill:#1e7e34}.edge-action-icon{pointer-events:none}.workflow-edge-reconnect{stroke:#28a745;stroke-width:2px;stroke-dasharray:8,4}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(A,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(A=typeof globalThis<"u"?globalThis:A||self,t(A.BoleClickwizardDesigner={},A.React))})(this,function(A,t){"use strict";const Me=t.forwardRef(({initialWorkflow:se,onChange:$,className:xe,nodeTypeConfigs:S=[]},$e)=>{const le=t.useMemo(()=>{const e=new Map;return S.forEach(n=>{e.set(n.type,n)}),e},[S]),[i,R]=t.useState(se),[d,L]=t.useState(null),[f,W]=t.useState(null),[ue,pe]=t.useState(null),[me,K]=t.useState(null),[ee,fe]=t.useState(null),[_,te]=t.useState(null),[ae,ge]=t.useState(!1),[G,U]=t.useState(null),[q,He]=t.useState(new Map),[p,O]=t.useState(null),[Ee,ie]=t.useState(null),z=t.useRef(null),B=t.useRef(null),E=t.useRef(null),Ne=t.useRef(null),Y=t.useRef(new Map);t.useEffect(()=>{R(se)},[se]);const H=e=>{R(e),$==null||$(e)};t.useEffect(()=>{const e=()=>{const o=new Map;Y.current.forEach((s,l)=>{s&&o.set(l,s.offsetHeight)});let r=!1;o.forEach((s,l)=>{q.get(l)!==s&&(r=!0)}),(r||o.size!==q.size)&&He(o)};e();const n=new ResizeObserver(()=>{e()});return Y.current.forEach(o=>{o&&n.observe(o)}),()=>{n.disconnect()}},[i.nodes]),t.useImperativeHandle($e,()=>({getWorkflow:()=>i,setWorkflow:e=>{H(e),L(null)}}));const ce=t.useCallback(()=>{if(!d)return;let e=[...i.nodes],n=[...i.edges];if(d.type==="node"){const o=i.nodes.find(r=>r.id===d.id);if((o==null?void 0:o.type)==="start"||(o==null?void 0:o.type)==="end")return;e=i.nodes.filter(r=>r.id!==d.id),n=i.edges.filter(r=>r.sourceNodeId!==d.id&&r.targetNodeId!==d.id)}else n=i.edges.filter(o=>o.id!==d.id);L(null),H({nodes:e,edges:n})},[d,i,H]);t.useEffect(()=>{const e=n=>{const o=n.target,r=o.tagName==="INPUT"||o.tagName==="TEXTAREA"||o.tagName==="SELECT"||o.isContentEditable;if(n.key==="Escape"){if(p){O(null),ie(null);return}if(f){W(null);return}if(d){G&&(R(G),$==null||$(G)),L(null),te(null),U(null);return}}d&&(n.key==="Delete"||n.key==="Backspace")&&!r&&ce()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[d,ce,G,$,f,p]);const be=(e,n)=>{const r=e.target.closest(".workflow-node").getBoundingClientRect();z.current={nodeId:n,offset:{x:e.clientX-r.left,y:e.clientY-r.top}},e.dataTransfer.effectAllowed="move"},Pe=e=>{e.preventDefault()},_e=e=>{if(e.preventDefault(),!z.current||!E.current)return;const n=E.current.getBoundingClientRect(),o={x:e.clientX-n.left+E.current.scrollLeft-z.current.offset.x,y:e.clientY-n.top+E.current.scrollTop-z.current.offset.y},r=i.nodes.map(s=>{var l;return s.id===((l=z.current)==null?void 0:l.nodeId)?{...s,position:{x:Math.max(0,o.x),y:Math.max(0,o.y)}}:s});H({...i,nodes:r}),z.current=null},Z=(e,n)=>{U(JSON.parse(JSON.stringify(i))),L({type:e,id:n})},F=(e,n)=>{if(d){if(d.type==="node"){const o=i.nodes.map(r=>{if(r.id===d.id){if(e==="type"){const l=le.get(n),a=l!=null&&l.defaultParameters?{...l.defaultParameters}:{};return{...r,type:n,parameters:a}}if(e in r&&e!=="parameters")return{...r,[e]:n};const s={...r.parameters||{},[e]:n};return{...r,parameters:s}}return r});H({...i,nodes:o})}else if(d.type==="edge"){const o=i.edges.map(r=>r.id===d.id?{...r,[e]:n}:r);H({...i,edges:o})}}},Oe=(e,n)=>{if(e.stopPropagation(),!E.current)return;const o=E.current.getBoundingClientRect(),r=i.nodes.find(c=>c.id===n);if(!r)return;const s=Y.current.get(n),l=s?s.offsetHeight:80,a={x:r.position.x+200,y:r.position.y+l/2};W({startNodeId:n,startPos:a,endPos:{x:e.clientX-o.left+E.current.scrollLeft,y:e.clientY-o.top+E.current.scrollTop}})},Ce=(e,n,o)=>{if(e.stopPropagation(),!E.current)return;const r=i.edges.find(g=>g.id===n);if(!r)return;const s=E.current.getBoundingClientRect(),l=r.sourceNodeId,a=r.targetNodeId,c=i.nodes.find(g=>g.id===l),h=i.nodes.find(g=>g.id===a);if(!c||!h)return;const u=Y.current.get(l),y=u?u.offsetHeight:80,m={x:c.position.x+200,y:c.position.y+y/2};O({edgeId:n,endpoint:o,startPos:m,endPos:{x:e.clientX-s.left+E.current.scrollLeft,y:e.clientY-s.top+E.current.scrollTop}}),K(null)},Te=e=>{if(!E.current)return;if(p){e.preventDefault();const o=E.current.getBoundingClientRect();O({...p,endPos:{x:e.clientX-o.left+E.current.scrollLeft,y:e.clientY-o.top+E.current.scrollTop}});return}if(!f)return;e.preventDefault();const n=E.current.getBoundingClientRect();W({...f,endPos:{x:e.clientX-n.left+E.current.scrollLeft,y:e.clientY-n.top+E.current.scrollTop}})},Se=(e,n)=>{if(e.stopPropagation(),p){const s=i.edges.find(u=>u.id===p.edgeId);if(!s){O(null);return}if(p.endpoint==="source"&&n===s.targetNodeId){O(null);return}if(p.endpoint==="target"&&n===s.sourceNodeId){O(null);return}const l=p.endpoint==="source"?n:s.sourceNodeId,a=p.endpoint==="target"?n:s.targetNodeId;if(i.edges.some(u=>u.id!==s.id&&u.sourceNodeId===l&&u.targetNodeId===a)){O(null);return}const h=i.edges.map(u=>u.id===p.edgeId?{...u,sourceNodeId:l,targetNodeId:a}:u);H({...i,edges:h}),O(null);return}if(!f){Z("node",n);return}if(f.startNodeId===n){W(null);return}const o={id:`edge_${Date.now()}`,sourceNodeId:f.startNodeId,targetNodeId:n};if(i.edges.some(s=>s.sourceNodeId===o.sourceNodeId&&s.targetNodeId===o.targetNodeId)){W(null);return}H({...i,edges:[...i.edges,o]}),W(null)},Le=e=>{if(p){O(null);return}if(f&&E.current){const n=E.current.getBoundingClientRect(),o=e.clientX-n.left+E.current.scrollLeft,r=e.clientY-n.top+E.current.scrollTop;U(JSON.parse(JSON.stringify(i)));const s=`node_${Date.now()}`,l=S.length>0?S[0].type:"task",a=S.length>0?S[0]:null,c=a!=null&&a.defaultParameters?{...a.defaultParameters}:{},h={id:s,name:"New Node",type:l,position:{x:Math.max(0,o-200/2),y:Math.max(0,r-80/2)},parameters:c},u={id:`edge_${Date.now()}`,sourceNodeId:f.startNodeId,targetNodeId:s},y={nodes:[...i.nodes,h],edges:[...i.edges,u]};H(y),W(null),L({type:"node",id:s});return}L(null)},Ae=e=>{var o;if(e.type==="start")return null;if(e.type==="end")return t.createElement("div",{className:"form-group",style:{display:"flex",alignItems:"center",gap:"8px",cursor:"pointer"}},t.createElement("input",{type:"checkbox",id:"end-autoclose",checked:!!((o=e.parameters)!=null&&o.autoCloseTab),onChange:r=>F("autoCloseTab",r.target.checked)}),t.createElement("label",{htmlFor:"end-autoclose",style:{margin:0,cursor:"pointer"}},"自動關閉 Tab"));const n=le.get(e.type);if((e.type==="goto"||e.type==="click")&&e.parameters){const r=e.parameters.dialogMode||"autoAccept";return t.createElement("div",null,t.createElement("div",{className:"form-group"},t.createElement("label",null,"Dialog 處理"),t.createElement("select",{value:r,onChange:s=>F("dialogMode",s.target.value)},t.createElement("option",{value:"autoAccept"},"autoAccept(自動接受 confirm,並關閉 alert)"),t.createElement("option",{value:"autoDismiss"},"autoDismiss(自動取消 confirm)"),t.createElement("option",{value:"reportOnly"},"reportOnly(僅回報)"))),n!=null&&n.renderProperties?n.renderProperties(e.parameters,F):null)}return n!=null&&n.renderProperties&&e.parameters?n.renderProperties(e.parameters,F):null},V=(e,n)=>{if(!d||d.type!=="edge")return;const o=i.edges.find(l=>l.id===d.id);if(!o)return;let r=o.condition?{...o.condition}:{type:"none"};if(e==="type")n==="none"?r=void 0:(r={type:n},n==="compare"&&(r.left={source:"variable",name:""},r.operator="==",r.right={source:"literal",value:""}));else if(r){if(e==="operator")r.operator=n;else if(e==="expression")r.expression=n;else if(e.startsWith("left.")){const l=e.substring(5);(!r.left||typeof r.left!="object")&&(r.left={source:"variable",name:""}),l==="source"?r.left={source:n}:r.left[l]=n}else if(e.startsWith("right.")){const l=e.substring(6);(!r.right||typeof r.right!="object")&&(r.right={source:"literal",value:""}),l==="source"?r.right={source:n}:r.right[l]=n}}const s=i.edges.map(l=>l.id===d.id?{...l,condition:r}:l);H({...i,edges:s})},We=t.useCallback(e=>{const n=[],o=e?i.edges.find(a=>a.id===e):null,r=o==null?void 0:o.sourceNodeId,s=new Set,l=new Set;if(r){const a=i.nodes.find(c=>c.type==="start");if(a){a.id;const c=new Map;i.edges.forEach(u=>{c.has(u.targetNodeId)||c.set(u.targetNodeId,new Set),c.get(u.targetNodeId).add(u.sourceNodeId)});const h=u=>{if(s.has(u))return;s.add(u),l.add(u);const y=c.get(u);y&&y.forEach(m=>h(m))};h(r)}}else i.nodes.forEach(a=>l.add(a.id));return i.nodes.forEach(a=>{if(l.has(a.id)&&a.parameters){const c=a.parameters.outputVariable;c&&typeof c=="string"&&c.trim()!==""&&n.push(c.trim())}}),[...new Set(n)].sort()},[i]),he=(e,n,o,r)=>{const s=(n==null?void 0:n.source)||"literal",l=We(r);return t.createElement("div",{className:"condition-value-group"},t.createElement("label",null,o),t.createElement("div",{className:"condition-value-row"},t.createElement("select",{value:s,onChange:a=>V(`${e}.source`,a.target.value),className:"condition-source-select"},t.createElement("option",{value:"literal"},"固定值"),t.createElement("option",{value:"variable"},"變數"),t.createElement("option",{value:"result"},"節點結果")),s==="literal"&&t.createElement("input",{type:"text",value:(n==null?void 0:n.value)??"",onChange:a=>V(`${e}.value`,a.target.value),placeholder:"輸入值",className:"condition-value-input"}),s==="variable"&&t.createElement(t.Fragment,null,t.createElement("input",{type:"text",list:`${e}-variable-list`,value:(n==null?void 0:n.name)??"",onChange:a=>V(`${e}.name`,a.target.value),placeholder:l.length>0?"輸入或選擇變數...":"輸入變數名稱",className:"condition-value-input"}),l.length>0&&t.createElement("datalist",{id:`${e}-variable-list`},l.map(a=>t.createElement("option",{key:a,value:a})))),s==="result"&&t.createElement("input",{type:"text",value:(n==null?void 0:n.path)??"",onChange:a=>V(`${e}.path`,a.target.value),placeholder:"結果路徑 (如: data.value)",className:"condition-value-input"})))},Ge=e=>{const n=e.condition,o=(n==null?void 0:n.type)||"none";return t.createElement("div",{className:"edge-condition-editor"},t.createElement("div",{className:"form-group"},t.createElement("label",null,"條件類型"),t.createElement("select",{value:o,onChange:r=>V("type",r.target.value)},t.createElement("option",{value:"none"},"無條件(總是執行)"),t.createElement("option",{value:"success"},"成功時執行"),t.createElement("option",{value:"failure"},"失敗時執行"),t.createElement("option",{value:"compare"},"比較條件"),t.createElement("option",{value:"expression"},"自訂表達式"),t.createElement("option",{value:"else"},"其他條件皆不成立時 (Else)"))),o==="compare"&&t.createElement("div",{className:"compare-condition-editor"},he("left",n==null?void 0:n.left,"左值",e.id),t.createElement("div",{className:"form-group"},t.createElement("label",null,"運算子"),t.createElement("select",{value:(n==null?void 0:n.operator)||"==",onChange:r=>V("operator",r.target.value)},t.createElement("option",{value:"=="},"等於 (==)"),t.createElement("option",{value:"==="},"嚴格等於 (===)"),t.createElement("option",{value:"!="},"不等於 (!=)"),t.createElement("option",{value:"!=="},"嚴格不等於 (!==)"),t.createElement("option",{value:">"},"大於 (>)"),t.createElement("option",{value:">="},"大於等於 (>=)"),t.createElement("option",{value:"<"},"小於 (<)"),t.createElement("option",{value:"<="},"小於等於 (<=)"),t.createElement("option",{value:"contains"},"包含"),t.createElement("option",{value:"startsWith"},"開頭是"),t.createElement("option",{value:"endsWith"},"結尾是"),t.createElement("option",{value:"matches"},"正則匹配"))),he("right",n==null?void 0:n.right,"右值",e.id)),o==="expression"&&t.createElement("div",{className:"form-group"},t.createElement("label",null,"表達式"),t.createElement("textarea",{value:(n==null?void 0:n.expression)||"",onChange:r=>V("expression",r.target.value),placeholder:"例如: result.success && variables.count > 0",rows:3}),t.createElement("small",{className:"form-hint"},"可用變數: result (節點結果), context (執行上下文), variables (工作流程變數)")))},Be=()=>{G&&(R(G),$==null||$(G)),L(null),te(null),U(null)},Ve=()=>{L(null),te(null),U(null)},je=e=>{if(e.target.closest("input, select, textarea, button"))return;e.preventDefault(),ge(!0);const n=Ne.current;if(!n)return;const o=n.getBoundingClientRect(),r=(_==null?void 0:_.x)??o.left,s=(_==null?void 0:_.y)??o.top;B.current={startX:e.clientX,startY:e.clientY,startPosX:r,startPosY:s}};t.useEffect(()=>{if(!ae)return;const e=o=>{if(!B.current)return;const r=o.clientX-B.current.startX,s=o.clientY-B.current.startY;te({x:B.current.startPosX+r,y:B.current.startPosY+s})},n=()=>{ge(!1),B.current=null};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n)}},[ae]);const ze=()=>{if(!d)return null;let e,n=d.type==="node";if(n?e=i.nodes.find(r=>r.id===d.id):e=i.edges.find(r=>r.id===d.id),!e)return null;S.map(r=>r.type);const o=_?{position:"fixed",left:_.x,top:_.y,transform:"none"}:{};return t.createElement("div",{className:"properties-popup-overlay",onClick:r=>r.stopPropagation()},t.createElement("div",{ref:Ne,className:`properties-popup ${ae?"dragging":""}`,style:o},t.createElement("div",{className:"properties-popup-header",onMouseDown:je},t.createElement("h4",null,"Edit: ",n?e.name:"Edge"),t.createElement("button",{className:"properties-popup-close",onClick:Be},"×")),t.createElement("div",{className:"properties-popup-content"},t.createElement("div",{className:"form-group"},t.createElement("label",null,"ID"),t.createElement("input",{type:"text",readOnly:!0,value:e.id})),n&&e.type!=="start"&&e.type!=="end"&&t.createElement(t.Fragment,null,t.createElement("div",{className:"form-group"},t.createElement("label",null,"Name"),t.createElement("input",{type:"text",value:e.name,onChange:r=>F("name",r.target.value)})),t.createElement("div",{className:"form-group"},t.createElement("label",null,"Type"),t.createElement("select",{value:e.type,onChange:r=>F("type",r.target.value)},S.map(r=>t.createElement("option",{key:r.type,value:r.type},r.label||r.type))))),n&&Ae(e),!n&&Ge(e)),t.createElement("div",{className:"properties-popup-footer"},(n&&e.type!=="start"&&e.type!=="end"||!n)&&t.createElement("button",{className:"btn-danger",onClick:ce},"Delete"),t.createElement("button",{className:"btn-primary",onClick:Ve},"OK"))))},we=new Map(i.nodes.map(e=>[e.id,e])),ve=e=>{const n=q.get(e.id);if(n&&n>0)return n;if(!e.parameters||Object.keys(e.parameters).length===0)return 80;const o=Object.entries(e.parameters).filter(([u,y])=>y!=null&&y!=="");if(o.length===0)return 80;const r=Math.min(o.length,3),s=o.length>3,l=r+(s?1:0),a=63,c=9+l*14,h=a+c;return Math.max(80,h)},ye=(e,n,o,r,s,l,a,c,h,u,y,m,g=10)=>{const j=h-5,C=u-5,M=y+5*2,I=m+5*2;for(let X=1;X<g;X++){const k=X/g,w=Math.pow(1-k,3)*e+3*Math.pow(1-k,2)*k*o+3*(1-k)*Math.pow(k,2)*s+Math.pow(k,3)*a,N=Math.pow(1-k,3)*n+3*Math.pow(1-k,2)*k*r+3*(1-k)*Math.pow(k,2)*l+Math.pow(k,3)*c;if(w>=j&&w<=j+M&&N>=C&&N<=C+I)return!0}return!1},ne=(()=>{const e=new Map,n=new Map;return i.edges.forEach(o=>{const r=[o.sourceNodeId,o.targetNodeId].sort().join("-");e.set(r,(e.get(r)||0)+1)}),i.edges.map(o=>{const r=we.get(o.sourceNodeId),s=we.get(o.targetNodeId);if(!r||!s)return null;const l=ve(r),a=ve(s),c=[o.sourceNodeId,o.targetNodeId].sort().join("-"),h=e.get(c)||1,u=n.get(c)||0;n.set(c,u+1);const g=(u-(h-1)/2)*15,Q=r.position.y+l/2,j=s.position.x+200/2,C=s.position.y+a/2,M=r.position.x+200,I=Q+g,X=j-M,k=C-I;let w,N,x;Math.abs(X)>Math.abs(k)?X>0?(w=s.position.x,N=C+g,x="left"):(w=s.position.x+200,N=C+g,x="right"):k>0?(w=j+g,N=s.position.y,x="top"):(w=j+g,N=s.position.y+a,x="bottom");const ke=j-(r.position.x+200/2),De=C-Q,Ye=Math.sqrt(ke*ke+De*De);let b=Math.max(40,Ye*.3),J=M+b,P=I,T,v;x==="left"?(T=w-b,v=N):x==="right"?(T=w+b,v=N):x==="top"?(T=w,v=N-b):(T=w,v=N+b);let de=ye(M,I,J,P,T,v,w,N,s.position.x,s.position.y,200,a);if(de){const re=a+30;if(x==="right"?(C<=I?(P=I+re,v=N+re):(P=I-re,v=N-re),J=M+b*1.5,T=w+b*1.5):(x==="top"||x==="bottom")&&(J=M+b*1.5,x==="top"?v=N-b*1.5:v=N+b*1.5),de=ye(M,I,J,P,T,v,w,N,s.position.x,s.position.y,200,a),de){const oe=a+60;C<=I?(P=Math.max(P,I+oe),v=Math.max(v,N+oe)):(P=Math.min(P,I-oe),v=Math.min(v,N-oe))}}const Fe=`M ${M},${I} C ${J},${P} ${T},${v} ${w},${N}`,Xe=(d==null?void 0:d.id)===o.id?"url(#arrowhead-selected)":"url(#arrowhead)",D=.5,Je=Math.pow(1-D,3)*M+3*Math.pow(1-D,2)*D*J+3*(1-D)*Math.pow(D,2)*T+Math.pow(D,3)*w,Ke=Math.pow(1-D,3)*I+3*Math.pow(1-D,2)*D*P+3*(1-D)*Math.pow(D,2)*v+Math.pow(D,3)*N;return{edge:o,pathData:Fe,markerId:Xe,startX:M,startY:I,endX:w,endY:N,midX:Je,midY:Ke,isSelected:(d==null?void 0:d.id)===o.id}}).filter(Boolean)})(),Ie=t.useMemo(()=>{let r=800,s=600;return i.nodes.forEach(l=>{const a=q.get(l.id)||80,c=l.position.x+200+100,h=l.position.y+a+100;c>r&&(r=c),h>s&&(s=h)}),{width:r,height:s}},[i.nodes,q]);return t.createElement("div",{className:`workflow-editor-container ${xe||""}`},t.createElement("div",{className:"workflow-body"},t.createElement("div",{ref:E,className:"workflow-canvas",onDragOver:Pe,onDrop:_e,onMouseMove:Te,onClick:Le},t.createElement("div",{className:"workflow-canvas-content",style:{width:`${Ie.width}px`,height:`${Ie.height}px`}}),t.createElement("svg",{className:"workflow-svg-layer"},t.createElement("defs",null,t.createElement("marker",{id:"arrowhead",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#495057"})),t.createElement("marker",{id:"arrowhead-selected",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#007bff"})),t.createElement("marker",{id:"arrowhead-active",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#28a745"})),ne.map(({edge:e,startX:n,startY:o,endX:r,endY:s,isSelected:l})=>t.createElement("linearGradient",{key:`gradient-${e.id}`,id:`edge-gradient-${e.id}`,gradientUnits:"userSpaceOnUse",x1:n,y1:o,x2:r,y2:s},t.createElement("stop",{offset:"0%",stopColor:l?"#007bff":"#adb5bd"}),t.createElement("stop",{offset:"100%",stopColor:l?"#0056b3":"#495057"})))),ne.map(({edge:e,pathData:n,markerId:o,midX:r,midY:s,isSelected:l})=>{e.id;const a=(p==null?void 0:p.edgeId)===e.id;return t.createElement("g",{key:e.id,onClick:c=>{c.stopPropagation(),Z("edge",e.id)},onMouseEnter:()=>K(e.id),onMouseLeave:()=>K(null)},t.createElement("path",{className:`workflow-edge ${l?"selected":""} ${a?"reconnecting":""}`,d:n,stroke:`url(#edge-gradient-${e.id})`,markerEnd:o}),t.createElement("path",{className:"workflow-edge-interactive",d:n}),e.condition&&t.createElement("g",{className:"edge-condition-indicator",onClick:c=>{c.stopPropagation(),Z("edge",e.id)},style:{cursor:"pointer"}},t.createElement("path",{d:`M ${r} ${s-10} L ${r+10} ${s} L ${r} ${s+10} L ${r-10} ${s} Z`,className:`edge-condition-bg ${l?"selected":""}`}),t.createElement("path",{d:`M ${r-4} ${s-3} L ${r} ${s+1} L ${r+4} ${s-3} M ${r} ${s+1} L ${r} ${s+4}`,className:`edge-condition-icon ${l?"selected":""}`,fill:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})))}),f&&t.createElement("path",{className:"workflow-edge-preview",d:`M ${f.startPos.x},${f.startPos.y} L ${f.endPos.x},${f.endPos.y}`,markerEnd:"url(#arrowhead)"}),p&&t.createElement("path",{className:"workflow-edge-preview workflow-edge-reconnect",d:`M ${p.startPos.x},${p.startPos.y} L ${p.endPos.x},${p.endPos.y}`,markerEnd:p.endpoint==="target"?"url(#arrowhead)":void 0,markerStart:p.endpoint==="source"?"url(#arrowhead)":void 0})),f&&!ee&&t.createElement("div",{className:"workflow-node-preview",style:{left:`${f.endPos.x}px`,top:`${f.endPos.y}px`}},t.createElement("div",{className:"workflow-node-preview-header"},"New Node"),t.createElement("div",{className:"workflow-node-preview-body"},t.createElement("span",{className:"workflow-node-preview-hint"},"點擊放置節點"),t.createElement("span",{className:"workflow-node-preview-esc"},"ESC 取消"))),f&&ee&&t.createElement("div",{className:"workflow-node-preview workflow-node-preview-connect",style:{left:`${f.endPos.x}px`,top:`${f.endPos.y}px`}},t.createElement("div",{className:"workflow-node-preview-header"},"連接節點"),t.createElement("div",{className:"workflow-node-preview-body"},t.createElement("span",{className:"workflow-node-preview-hint"},"點擊連接到此節點"),t.createElement("span",{className:"workflow-node-preview-esc"},"ESC 取消"))),i.nodes.map(e=>{const n=le.get(e.type),o=e.parameters&&Object.keys(e.parameters).length>0?Object.entries(e.parameters).filter(([m,g])=>g!=null&&g!=="").map(([m,g])=>{const Q=typeof g=="string"&&g.length>20?g.substring(0,20)+"...":String(g);return`${m}: ${Q}`}).slice(0,3):[],r=f&&f.startNodeId!==e.id,s=ee===e.id&&r,l=p?i.edges.find(m=>m.id===p.edgeId):null,a=p&&l?p.endpoint==="target"?l.targetNodeId:l.sourceNodeId:null,c=l==null?void 0:l.sourceNodeId,h=c?i.edges.filter(m=>m.sourceNodeId===c).map(m=>m.targetNodeId):[],u=p&&a!==e.id&&c!==e.id&&!h.includes(e.id),y=Ee===e.id&&u;return t.createElement("div",{key:e.id,ref:m=>{m?Y.current.set(e.id,m):Y.current.delete(e.id)},draggable:!0,onDragStart:m=>be(m,e.id),onMouseEnter:()=>{pe(e.id),f&&f.startNodeId!==e.id&&fe(e.id),u&&ie(e.id)},onMouseLeave:()=>{pe(null),ee===e.id&&fe(null),Ee===e.id&&ie(null)},onClick:m=>Se(m,e.id),"data-node-id":e.id,className:`workflow-node ${(d==null?void 0:d.id)===e.id?"selected":""} ${f?"node-connecting-target":""} ${s?"node-connecting-hover":""} ${p?"node-connecting-target":""} ${y?"node-connecting-hover":""}`,style:{top:`${e.position.y}px`,left:`${e.position.x}px`}},t.createElement("div",{className:"workflow-node-header"},e.name),t.createElement("div",{className:"workflow-node-body"},t.createElement("p",{className:"workflow-node-type"},"Type: ",(n==null?void 0:n.label)||e.type),o.length>0&&t.createElement("div",{className:"workflow-node-params"},o.map((m,g)=>t.createElement("div",{key:g,className:"workflow-node-param"},m)),e.parameters&&Object.keys(e.parameters).filter(m=>e.parameters[m]!==void 0&&e.parameters[m]!==null&&e.parameters[m]!=="").length>3&&t.createElement("div",{className:"workflow-node-param workflow-node-param-more"},"..."))),ue===e.id&&e.type!=="end"&&!f&&!p&&t.createElement("div",{className:"node-add-handle-container handle-right"},t.createElement("div",{className:"node-add-handle",onClick:m=>Oe(m,e.id)},"+")))}),t.createElement("svg",{className:"workflow-svg-connectors"},ne.map(({edge:e,startX:n,startY:o,isSelected:r})=>ue===e.sourceNodeId?null:t.createElement("circle",{key:e.id,cx:n,cy:o,r:4,className:`edge-connector ${r?"selected":""}`,onClick:s=>{s.stopPropagation(),Z("edge",e.id)}}))),t.createElement("svg",{className:"workflow-svg-edge-actions"},ne.map(({edge:e,midX:n,midY:o,isSelected:r})=>!(me===e.id||r)||p?null:t.createElement("g",{key:e.id,className:"edge-action-buttons",onMouseEnter:()=>K(e.id),onMouseLeave:()=>K(null)},t.createElement("rect",{x:n-38,y:o-18,width:76,height:36,rx:18,ry:18,className:"edge-action-container-bg"}),t.createElement("g",{className:"edge-action-btn edge-action-edit",onClick:l=>{l.stopPropagation(),Z("edge",e.id)},style:{cursor:"pointer"}},t.createElement("circle",{cx:n-16,cy:o,r:12,className:"edge-action-bg"}),t.createElement("path",{d:`M ${n-20} ${o+2} L ${n-14} ${o-4} L ${n-12} ${o-2} L ${n-18} ${o+4} Z`,className:"edge-action-icon",fill:"#fff"})),t.createElement("g",{className:"edge-action-btn edge-action-reconnect",onClick:l=>Ce(l,e.id,"target"),style:{cursor:"pointer"}},t.createElement("circle",{cx:n+16,cy:o,r:12,className:"edge-action-bg"}),t.createElement("path",{d:`M ${n+11} ${o} L ${n+21} ${o} M ${n+18} ${o-3} L ${n+21} ${o} L ${n+18} ${o+3}`,className:"edge-action-icon",fill:"none",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))))),ze())))});A.WorkflowEditor=Me,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(S,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(S=typeof globalThis<"u"?globalThis:S||self,t(S.BoleClickwizardDesigner={},S.React))})(this,(function(S,t){"use strict";const Ce=t.forwardRef(({initialWorkflow:ie,onChange:ee,className:He,nodeTypeConfigs:O=[]},Pe)=>{const ce=t.useMemo(()=>{const e=new Map;return O.forEach(o=>{e.set(o.type,o)}),e},[O]),[i,te]=t.useState(ie),[m,T]=t.useState(null),[g,A]=t.useState(null),[ge,Ee]=t.useState(null),[Ne,U]=t.useState(null),[ne,he]=t.useState(null),[J,oe]=t.useState(null),[de,ve]=t.useState(!1),[W,K]=t.useState(null),[q,_e]=t.useState(new Map),[p,H]=t.useState(null),[we,ue]=t.useState(null),[re,pe]=t.useState(!1),V=t.useRef(null),G=t.useRef(null),L=t.useRef(null),Z=t.useRef(!1),f=t.useRef(null),ye=t.useRef(null),j=t.useRef(new Map);t.useEffect(()=>{te(ie)},[ie]);const $=e=>{te(e),ee?.(e)};t.useEffect(()=>{const e=()=>{const r=new Map;j.current.forEach((s,l)=>{s&&r.set(l,s.offsetHeight)});let n=!1;r.forEach((s,l)=>{q.get(l)!==s&&(n=!0)}),(n||r.size!==q.size)&&_e(r)};e();const o=new ResizeObserver(()=>{e()});return j.current.forEach(r=>{r&&o.observe(r)}),()=>{o.disconnect()}},[i.nodes]),t.useImperativeHandle(Pe,()=>({getWorkflow:()=>i,setWorkflow:e=>{$(e),T(null)}}));const fe=t.useCallback(()=>{if(!m)return;let e=[...i.nodes],o=[...i.edges];if(m.type==="node"){const r=i.nodes.find(n=>n.id===m.id);if(r?.type==="start"||r?.type==="end")return;e=i.nodes.filter(n=>n.id!==m.id),o=i.edges.filter(n=>n.sourceNodeId!==m.id&&n.targetNodeId!==m.id)}else o=i.edges.filter(r=>r.id!==m.id);T(null),$({nodes:e,edges:o})},[m,i,$]);t.useEffect(()=>{const e=o=>{const r=o.target,n=r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable;if(o.key==="Escape"){if(p){H(null),ue(null);return}if(g){A(null);return}if(m){W&&(te(W),ee?.(W)),T(null),oe(null),K(null);return}}m&&(o.key==="Delete"||o.key==="Backspace")&&!n&&fe()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[m,fe,W,ee,g,p]);const Oe=(e,o)=>{const n=e.target.closest(".workflow-node").getBoundingClientRect();V.current={nodeId:o,offset:{x:e.clientX-n.left,y:e.clientY-n.top}},e.dataTransfer.effectAllowed="move"},Te=e=>{e.preventDefault()},Le=e=>{if(e.preventDefault(),!V.current||!f.current)return;const o=f.current.getBoundingClientRect(),r={x:e.clientX-o.left+f.current.scrollLeft-V.current.offset.x,y:e.clientY-o.top+f.current.scrollTop-V.current.offset.y},n=i.nodes.map(s=>s.id===V.current?.nodeId?{...s,position:{x:Math.max(0,r.x),y:Math.max(0,r.y)}}:s);$({...i,nodes:n}),V.current=null},Q=(e,o)=>{K(JSON.parse(JSON.stringify(i))),T({type:e,id:o})},X=(e,o)=>{if(m){if(m.type==="node"){const r=i.nodes.map(n=>{if(n.id===m.id){if(e==="type"){const l=ce.get(o),a=l?.defaultParameters?{...l.defaultParameters}:{};return{...n,type:o,parameters:a}}if(e in n&&e!=="parameters")return{...n,[e]:o};const s={...n.parameters||{},[e]:o};return{...n,parameters:s}}return n});$({...i,nodes:r})}else if(m.type==="edge"){const r=i.edges.map(n=>n.id===m.id?{...n,[e]:o}:n);$({...i,edges:r})}}},Se=(e,o)=>{if(e.stopPropagation(),!f.current)return;const r=f.current.getBoundingClientRect(),n=i.nodes.find(c=>c.id===o);if(!n)return;const s=j.current.get(o),l=s?s.offsetHeight:80,a={x:n.position.x+200,y:n.position.y+l/2};A({startNodeId:o,startPos:a,endPos:{x:e.clientX-r.left+f.current.scrollLeft,y:e.clientY-r.top+f.current.scrollTop}})},Ae=(e,o,r)=>{if(e.stopPropagation(),!f.current)return;const n=i.edges.find(E=>E.id===o);if(!n)return;const s=f.current.getBoundingClientRect(),l=n.sourceNodeId,a=n.targetNodeId,c=i.nodes.find(E=>E.id===l),h=i.nodes.find(E=>E.id===a);if(!c||!h)return;const d=j.current.get(l),y=d?d.offsetHeight:80,u={x:c.position.x+200,y:c.position.y+y/2};H({edgeId:o,endpoint:r,startPos:u,endPos:{x:e.clientX-s.left+f.current.scrollLeft,y:e.clientY-s.top+f.current.scrollTop}}),U(null)},We=e=>{const o=e.target,r=o.closest(".workflow-node")!==null,n=o.closest(".workflow-edge-interactive")!==null||o.closest(".edge-action-btn")!==null||o.closest(".edge-connector")!==null||o.closest(".node-add-handle")!==null||o.closest(".properties-popup")!==null,s=!r&&!n;e.button===0&&s&&!g&&!p&&f.current&&(pe(!0),Z.current=!1,L.current={startX:e.clientX,startY:e.clientY,scrollLeft:f.current.scrollLeft,scrollTop:f.current.scrollTop},e.preventDefault())},Ge=()=>{re&&(pe(!1),L.current=null)},Be=()=>{re&&(pe(!1),L.current=null,Z.current=!1)},Ye=e=>{if(!f.current)return;if(re&&L.current){e.preventDefault();const r=e.clientX-L.current.startX,n=e.clientY-L.current.startY;(Math.abs(r)>3||Math.abs(n)>3)&&(Z.current=!0),f.current.scrollLeft=L.current.scrollLeft-r,f.current.scrollTop=L.current.scrollTop-n;return}if(p){e.preventDefault();const r=f.current.getBoundingClientRect();H({...p,endPos:{x:e.clientX-r.left+f.current.scrollLeft,y:e.clientY-r.top+f.current.scrollTop}});return}if(!g)return;e.preventDefault();const o=f.current.getBoundingClientRect();A({...g,endPos:{x:e.clientX-o.left+f.current.scrollLeft,y:e.clientY-o.top+f.current.scrollTop}})},Ve=(e,o)=>{if(e.stopPropagation(),p){const s=i.edges.find(d=>d.id===p.edgeId);if(!s){H(null);return}if(p.endpoint==="source"&&o===s.targetNodeId){H(null);return}if(p.endpoint==="target"&&o===s.sourceNodeId){H(null);return}const l=p.endpoint==="source"?o:s.sourceNodeId,a=p.endpoint==="target"?o:s.targetNodeId;if(i.edges.some(d=>d.id!==s.id&&d.sourceNodeId===l&&d.targetNodeId===a)){H(null);return}const h=i.edges.map(d=>d.id===p.edgeId?{...d,sourceNodeId:l,targetNodeId:a}:d);$({...i,edges:h}),H(null);return}if(!g){Q("node",o);return}if(g.startNodeId===o){A(null);return}const r={id:`edge_${Date.now()}`,sourceNodeId:g.startNodeId,targetNodeId:o};if(i.edges.some(s=>s.sourceNodeId===r.sourceNodeId&&s.targetNodeId===r.targetNodeId)){A(null);return}$({...i,edges:[...i.edges,r]}),A(null)},je=e=>{if(Z.current){Z.current=!1;return}if(p){H(null);return}if(g&&f.current){const o=f.current.getBoundingClientRect(),r=e.clientX-o.left+f.current.scrollLeft,n=e.clientY-o.top+f.current.scrollTop;K(JSON.parse(JSON.stringify(i)));const s=`node_${Date.now()}`,l=O.length>0?O[0].type:"task",a=O.length>0?O[0]:null,c=a?.defaultParameters?{...a.defaultParameters}:{},h={id:s,name:"New Node",type:l,position:{x:Math.max(0,r-200/2),y:Math.max(0,n-80/2)},parameters:c},d={id:`edge_${Date.now()}`,sourceNodeId:g.startNodeId,targetNodeId:s},y={nodes:[...i.nodes,h],edges:[...i.edges,d]};$(y),A(null),T({type:"node",id:s});return}T(null)},Xe=e=>{if(e.type==="start")return null;if(e.type==="end")return t.createElement("div",{className:"form-group",style:{display:"flex",alignItems:"center",gap:"8px",cursor:"pointer"}},t.createElement("input",{type:"checkbox",id:"end-autoclose",checked:!!e.parameters?.autoCloseTab,onChange:r=>X("autoCloseTab",r.target.checked)}),t.createElement("label",{htmlFor:"end-autoclose",style:{margin:0,cursor:"pointer"}},"自動關閉 Tab"));const o=ce.get(e.type);if((e.type==="goto"||e.type==="click")&&e.parameters){const r=e.parameters.dialogMode||"autoAccept";return t.createElement("div",null,t.createElement("div",{className:"form-group"},t.createElement("label",null,"Dialog 處理"),t.createElement("select",{value:r,onChange:n=>X("dialogMode",n.target.value)},t.createElement("option",{value:"autoAccept"},"autoAccept(自動接受 confirm,並關閉 alert)"),t.createElement("option",{value:"autoDismiss"},"autoDismiss(自動取消 confirm)"),t.createElement("option",{value:"reportOnly"},"reportOnly(僅回報)"))),o?.renderProperties?o.renderProperties(e.parameters,X):null)}return o?.renderProperties&&e.parameters?o.renderProperties(e.parameters,X):null},B=(e,o)=>{if(!m||m.type!=="edge")return;const r=i.edges.find(l=>l.id===m.id);if(!r)return;let n=r.condition?{...r.condition}:{type:"none"};if(e==="type")o==="none"?n=void 0:(n={type:o},o==="compare"&&(n.left={source:"variable",name:""},n.operator="==",n.right={source:"literal",value:""}));else if(n){if(e==="operator")n.operator=o;else if(e==="expression")n.expression=o;else if(e.startsWith("left.")){const l=e.substring(5);(!n.left||typeof n.left!="object")&&(n.left={source:"variable",name:""}),l==="source"?n.left={source:o}:n.left[l]=o}else if(e.startsWith("right.")){const l=e.substring(6);(!n.right||typeof n.right!="object")&&(n.right={source:"literal",value:""}),l==="source"?n.right={source:o}:n.right[l]=o}}const s=i.edges.map(l=>l.id===m.id?{...l,condition:n}:l);$({...i,edges:s})},ze=t.useCallback(e=>{const o=[],n=(e?i.edges.find(a=>a.id===e):null)?.sourceNodeId,s=new Set,l=new Set;if(n){const a=i.nodes.find(c=>c.type==="start");if(a){a.id;const c=new Map;i.edges.forEach(d=>{c.has(d.targetNodeId)||c.set(d.targetNodeId,new Set),c.get(d.targetNodeId).add(d.sourceNodeId)});const h=d=>{if(s.has(d))return;s.add(d),l.add(d);const y=c.get(d);y&&y.forEach(u=>h(u))};h(n)}}else i.nodes.forEach(a=>l.add(a.id));return i.nodes.forEach(a=>{if(l.has(a.id)&&a.parameters){const c=a.parameters.outputVariable;c&&typeof c=="string"&&c.trim()!==""&&o.push(c.trim())}}),[...new Set(o)].sort()},[i]),Ie=(e,o,r,n)=>{const s=o?.source||"literal",l=ze(n);return t.createElement("div",{className:"condition-value-group"},t.createElement("label",null,r),t.createElement("div",{className:"condition-value-row"},t.createElement("select",{value:s,onChange:a=>B(`${e}.source`,a.target.value),className:"condition-source-select"},t.createElement("option",{value:"literal"},"固定值"),t.createElement("option",{value:"variable"},"變數"),t.createElement("option",{value:"result"},"節點結果")),s==="literal"&&t.createElement("input",{type:"text",value:o?.value??"",onChange:a=>B(`${e}.value`,a.target.value),placeholder:"輸入值",className:"condition-value-input"}),s==="variable"&&t.createElement(t.Fragment,null,t.createElement("input",{type:"text",list:`${e}-variable-list`,value:o?.name??"",onChange:a=>B(`${e}.name`,a.target.value),placeholder:l.length>0?"輸入或選擇變數...":"輸入變數名稱",className:"condition-value-input"}),l.length>0&&t.createElement("datalist",{id:`${e}-variable-list`},l.map(a=>t.createElement("option",{key:a,value:a})))),s==="result"&&t.createElement("input",{type:"text",value:o?.path??"",onChange:a=>B(`${e}.path`,a.target.value),placeholder:"結果路徑 (如: data.value)",className:"condition-value-input"})))},Fe=e=>{const o=e.condition,r=o?.type||"none";return t.createElement("div",{className:"edge-condition-editor"},t.createElement("div",{className:"form-group"},t.createElement("label",null,"條件類型"),t.createElement("select",{value:r,onChange:n=>B("type",n.target.value)},t.createElement("option",{value:"none"},"無條件(總是執行)"),t.createElement("option",{value:"success"},"成功時執行"),t.createElement("option",{value:"failure"},"失敗時執行"),t.createElement("option",{value:"compare"},"比較條件"),t.createElement("option",{value:"expression"},"自訂表達式"),t.createElement("option",{value:"else"},"其他條件皆不成立時 (Else)"))),r==="compare"&&t.createElement("div",{className:"compare-condition-editor"},Ie("left",o?.left,"左值",e.id),t.createElement("div",{className:"form-group"},t.createElement("label",null,"運算子"),t.createElement("select",{value:o?.operator||"==",onChange:n=>B("operator",n.target.value)},t.createElement("option",{value:"=="},"等於 (==)"),t.createElement("option",{value:"==="},"嚴格等於 (===)"),t.createElement("option",{value:"!="},"不等於 (!=)"),t.createElement("option",{value:"!=="},"嚴格不等於 (!==)"),t.createElement("option",{value:">"},"大於 (>)"),t.createElement("option",{value:">="},"大於等於 (>=)"),t.createElement("option",{value:"<"},"小於 (<)"),t.createElement("option",{value:"<="},"小於等於 (<=)"),t.createElement("option",{value:"contains"},"包含"),t.createElement("option",{value:"startsWith"},"開頭是"),t.createElement("option",{value:"endsWith"},"結尾是"),t.createElement("option",{value:"matches"},"正則匹配"))),Ie("right",o?.right,"右值",e.id)),r==="expression"&&t.createElement("div",{className:"form-group"},t.createElement("label",null,"表達式"),t.createElement("textarea",{value:o?.expression||"",onChange:n=>B("expression",n.target.value),placeholder:"例如: result.success && variables.count > 0",rows:3}),t.createElement("small",{className:"form-hint"},"可用變數: result (節點結果), context (執行上下文), variables (工作流程變數)")))},Ue=()=>{W&&(te(W),ee?.(W)),T(null),oe(null),K(null)},Je=()=>{T(null),oe(null),K(null)},Ke=e=>{if(e.target.closest("input, select, textarea, button"))return;e.preventDefault(),ve(!0);const o=ye.current;if(!o)return;const r=o.getBoundingClientRect(),n=J?.x??r.left,s=J?.y??r.top;G.current={startX:e.clientX,startY:e.clientY,startPosX:n,startPosY:s}};t.useEffect(()=>{if(!de)return;const e=r=>{if(!G.current)return;const n=r.clientX-G.current.startX,s=r.clientY-G.current.startY;oe({x:G.current.startPosX+n,y:G.current.startPosY+s})},o=()=>{ve(!1),G.current=null};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",o),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",o)}},[de]);const qe=()=>{if(!m)return null;let e,o=m.type==="node";if(o?e=i.nodes.find(n=>n.id===m.id):e=i.edges.find(n=>n.id===m.id),!e)return null;O.map(n=>n.type);const r=J?{position:"fixed",left:J.x,top:J.y,transform:"none"}:{};return t.createElement("div",{className:"properties-popup-overlay",onClick:n=>n.stopPropagation()},t.createElement("div",{ref:ye,className:`properties-popup ${de?"dragging":""}`,style:r},t.createElement("div",{className:"properties-popup-header",onMouseDown:Ke},t.createElement("h4",null,"Edit: ",o?e.name:"Edge"),t.createElement("button",{className:"properties-popup-close",onClick:Ue},"×")),t.createElement("div",{className:"properties-popup-content"},t.createElement("div",{className:"form-group"},t.createElement("label",null,"ID"),t.createElement("input",{type:"text",readOnly:!0,value:e.id})),o&&e.type!=="start"&&e.type!=="end"&&t.createElement(t.Fragment,null,t.createElement("div",{className:"form-group"},t.createElement("label",null,"Name"),t.createElement("input",{type:"text",value:e.name,onChange:n=>X("name",n.target.value)})),t.createElement("div",{className:"form-group"},t.createElement("label",null,"Type"),t.createElement("select",{value:e.type,onChange:n=>X("type",n.target.value)},O.map(n=>t.createElement("option",{key:n.type,value:n.type},n.label||n.type))))),o&&Xe(e),!o&&Fe(e)),t.createElement("div",{className:"properties-popup-footer"},(o&&e.type!=="start"&&e.type!=="end"||!o)&&t.createElement("button",{className:"btn-danger",onClick:fe},"Delete"),t.createElement("button",{className:"btn-primary",onClick:Je},"OK"))))},De=new Map(i.nodes.map(e=>[e.id,e])),ke=e=>{const o=q.get(e.id);if(o&&o>0)return o;if(!e.parameters||Object.keys(e.parameters).length===0)return 80;const r=Object.entries(e.parameters).filter(([d,y])=>y!=null&&y!=="");if(r.length===0)return 80;const n=Math.min(r.length,3),s=r.length>3,l=n+(s?1:0),a=63,c=9+l*14,h=a+c;return Math.max(80,h)},Me=(e,o,r,n,s,l,a,c,h,d,y,u,E=10)=>{const Y=h-5,P=d-5,M=y+10,I=u+10;for(let z=1;z<E;z++){const D=z/E,v=Math.pow(1-D,3)*e+3*Math.pow(1-D,2)*D*r+3*(1-D)*Math.pow(D,2)*s+Math.pow(D,3)*a,N=Math.pow(1-D,3)*o+3*Math.pow(1-D,2)*D*n+3*(1-D)*Math.pow(D,2)*l+Math.pow(D,3)*c;if(v>=Y&&v<=Y+M&&N>=P&&N<=P+I)return!0}return!1},se=(()=>{const e=new Map,o=new Map;return i.edges.forEach(r=>{const n=[r.sourceNodeId,r.targetNodeId].sort().join("-");e.set(n,(e.get(n)||0)+1)}),i.edges.map(r=>{const n=De.get(r.sourceNodeId),s=De.get(r.targetNodeId);if(!n||!s)return null;const l=ke(n),a=ke(s),c=[r.sourceNodeId,r.targetNodeId].sort().join("-"),h=e.get(c)||1,d=o.get(c)||0;o.set(c,d+1);const E=(d-(h-1)/2)*15,R=n.position.y+l/2,Y=s.position.x+200/2,P=s.position.y+a/2,M=n.position.x+200,I=R+E,z=Y-M,D=P-I;let v,N,x;Math.abs(z)>Math.abs(D)?z>0?(v=s.position.x,N=P+E,x="left"):(v=s.position.x+200,N=P+E,x="right"):D>0?(v=Y+E,N=s.position.y,x="top"):(v=Y+E,N=s.position.y+a,x="bottom");const $e=Y-(n.position.x+200/2),be=P-R,Ze=Math.sqrt($e*$e+be*be);let b=Math.max(40,Ze*.3),F=M+b,C=I,_,w;x==="left"?(_=v-b,w=N):x==="right"?(_=v+b,w=N):x==="top"?(_=v,w=N-b):(_=v,w=N+b);let me=Me(M,I,F,C,_,w,v,N,s.position.x,s.position.y,200,a);if(me){const le=a+30;if(x==="right"?(P<=I?(C=I+le,w=N+le):(C=I-le,w=N-le),F=M+b*1.5,_=v+b*1.5):(x==="top"||x==="bottom")&&(F=M+b*1.5,x==="top"?w=N-b*1.5:w=N+b*1.5),me=Me(M,I,F,C,_,w,v,N,s.position.x,s.position.y,200,a),me){const ae=a+60;P<=I?(C=Math.max(C,I+ae),w=Math.max(w,N+ae)):(C=Math.min(C,I-ae),w=Math.min(w,N-ae))}}const Qe=`M ${M},${I} C ${F},${C} ${_},${w} ${v},${N}`,Re=m?.id===r.id?"url(#arrowhead-selected)":"url(#arrowhead)",k=.5,et=Math.pow(1-k,3)*M+3*Math.pow(1-k,2)*k*F+3*(1-k)*Math.pow(k,2)*_+Math.pow(k,3)*v,tt=Math.pow(1-k,3)*I+3*Math.pow(1-k,2)*k*C+3*(1-k)*Math.pow(k,2)*w+Math.pow(k,3)*N;return{edge:r,pathData:Qe,markerId:Re,startX:M,startY:I,endX:v,endY:N,midX:et,midY:tt,isSelected:m?.id===r.id}}).filter(Boolean)})(),xe=t.useMemo(()=>{let n=800,s=600;return i.nodes.forEach(l=>{const a=q.get(l.id)||80,c=l.position.x+200+100,h=l.position.y+a+100;c>n&&(n=c),h>s&&(s=h)}),{width:n,height:s}},[i.nodes,q]);return t.createElement("div",{className:`workflow-editor-container ${He||""}`},t.createElement("div",{className:"workflow-body"},t.createElement("div",{ref:f,className:`workflow-canvas ${re?"canvas-dragging":""}`,onDragOver:Te,onDrop:Le,onMouseDown:We,onMouseMove:Ye,onMouseUp:Ge,onMouseLeave:Be,onClick:je},t.createElement("div",{className:"workflow-canvas-content",style:{width:`${xe.width}px`,height:`${xe.height}px`}}),t.createElement("svg",{className:"workflow-svg-layer"},t.createElement("defs",null,t.createElement("marker",{id:"arrowhead",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#495057"})),t.createElement("marker",{id:"arrowhead-selected",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#007bff"})),t.createElement("marker",{id:"arrowhead-active",viewBox:"0 0 10 10",refX:"8",refY:"5",markerWidth:"6",markerHeight:"6",orient:"auto-start-reverse"},t.createElement("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:"#28a745"})),se.map(({edge:e,startX:o,startY:r,endX:n,endY:s,isSelected:l})=>t.createElement("linearGradient",{key:`gradient-${e.id}`,id:`edge-gradient-${e.id}`,gradientUnits:"userSpaceOnUse",x1:o,y1:r,x2:n,y2:s},t.createElement("stop",{offset:"0%",stopColor:l?"#007bff":"#adb5bd"}),t.createElement("stop",{offset:"100%",stopColor:l?"#0056b3":"#495057"})))),se.map(({edge:e,pathData:o,markerId:r,midX:n,midY:s,isSelected:l})=>{e.id;const a=p?.edgeId===e.id;return t.createElement("g",{key:e.id,onClick:c=>{c.stopPropagation(),Q("edge",e.id)},onMouseEnter:()=>U(e.id),onMouseLeave:()=>U(null)},t.createElement("path",{className:`workflow-edge ${l?"selected":""} ${a?"reconnecting":""}`,d:o,stroke:`url(#edge-gradient-${e.id})`,markerEnd:r}),t.createElement("path",{className:"workflow-edge-interactive",d:o}),e.condition&&t.createElement("g",{className:"edge-condition-indicator",onClick:c=>{c.stopPropagation(),Q("edge",e.id)},style:{cursor:"pointer"}},t.createElement("path",{d:`M ${n} ${s-10} L ${n+10} ${s} L ${n} ${s+10} L ${n-10} ${s} Z`,className:`edge-condition-bg ${l?"selected":""}`}),t.createElement("path",{d:`M ${n-4} ${s-3} L ${n} ${s+1} L ${n+4} ${s-3} M ${n} ${s+1} L ${n} ${s+4}`,className:`edge-condition-icon ${l?"selected":""}`,fill:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})))}),g&&t.createElement("path",{className:"workflow-edge-preview",d:`M ${g.startPos.x},${g.startPos.y} L ${g.endPos.x},${g.endPos.y}`,markerEnd:"url(#arrowhead)"}),p&&t.createElement("path",{className:"workflow-edge-preview workflow-edge-reconnect",d:`M ${p.startPos.x},${p.startPos.y} L ${p.endPos.x},${p.endPos.y}`,markerEnd:p.endpoint==="target"?"url(#arrowhead)":void 0,markerStart:p.endpoint==="source"?"url(#arrowhead)":void 0})),g&&!ne&&t.createElement("div",{className:"workflow-node-preview",style:{left:`${g.endPos.x}px`,top:`${g.endPos.y}px`}},t.createElement("div",{className:"workflow-node-preview-header"},"New Node"),t.createElement("div",{className:"workflow-node-preview-body"},t.createElement("span",{className:"workflow-node-preview-hint"},"點擊放置節點"),t.createElement("span",{className:"workflow-node-preview-esc"},"ESC 取消"))),g&&ne&&t.createElement("div",{className:"workflow-node-preview workflow-node-preview-connect",style:{left:`${g.endPos.x}px`,top:`${g.endPos.y}px`}},t.createElement("div",{className:"workflow-node-preview-header"},"連接節點"),t.createElement("div",{className:"workflow-node-preview-body"},t.createElement("span",{className:"workflow-node-preview-hint"},"點擊連接到此節點"),t.createElement("span",{className:"workflow-node-preview-esc"},"ESC 取消"))),i.nodes.map(e=>{const o=ce.get(e.type),r=e.parameters&&Object.keys(e.parameters).length>0?Object.entries(e.parameters).filter(([u,E])=>E!=null&&E!=="").map(([u,E])=>{const R=typeof E=="string"&&E.length>20?E.substring(0,20)+"...":String(E);return`${u}: ${R}`}).slice(0,3):[],n=g&&g.startNodeId!==e.id,s=ne===e.id&&n,l=p?i.edges.find(u=>u.id===p.edgeId):null,a=p&&l?p.endpoint==="target"?l.targetNodeId:l.sourceNodeId:null,c=l?.sourceNodeId,h=c?i.edges.filter(u=>u.sourceNodeId===c).map(u=>u.targetNodeId):[],d=p&&a!==e.id&&c!==e.id&&!h.includes(e.id),y=we===e.id&&d;return t.createElement("div",{key:e.id,ref:u=>{u?j.current.set(e.id,u):j.current.delete(e.id)},draggable:!0,onDragStart:u=>Oe(u,e.id),onMouseEnter:()=>{Ee(e.id),g&&g.startNodeId!==e.id&&he(e.id),d&&ue(e.id)},onMouseLeave:()=>{Ee(null),ne===e.id&&he(null),we===e.id&&ue(null)},onClick:u=>Ve(u,e.id),"data-node-id":e.id,className:`workflow-node ${m?.id===e.id?"selected":""} ${g?"node-connecting-target":""} ${s?"node-connecting-hover":""} ${p?"node-connecting-target":""} ${y?"node-connecting-hover":""}`,style:{top:`${e.position.y}px`,left:`${e.position.x}px`}},t.createElement("div",{className:"workflow-node-header"},e.name),t.createElement("div",{className:"workflow-node-body"},t.createElement("p",{className:"workflow-node-type"},"Type: ",o?.label||e.type),r.length>0&&t.createElement("div",{className:"workflow-node-params"},r.map((u,E)=>t.createElement("div",{key:E,className:"workflow-node-param"},u)),e.parameters&&Object.keys(e.parameters).filter(u=>e.parameters[u]!==void 0&&e.parameters[u]!==null&&e.parameters[u]!=="").length>3&&t.createElement("div",{className:"workflow-node-param workflow-node-param-more"},"..."))),ge===e.id&&e.type!=="end"&&!g&&!p&&t.createElement("div",{className:"node-add-handle-container handle-right"},t.createElement("div",{className:"node-add-handle",onClick:u=>Se(u,e.id)},"+")))}),t.createElement("svg",{className:"workflow-svg-connectors"},se.map(({edge:e,startX:o,startY:r,isSelected:n})=>ge===e.sourceNodeId?null:t.createElement("circle",{key:e.id,cx:o,cy:r,r:4,className:`edge-connector ${n?"selected":""}`,onClick:s=>{s.stopPropagation(),Q("edge",e.id)}}))),t.createElement("svg",{className:"workflow-svg-edge-actions"},se.map(({edge:e,midX:o,midY:r,isSelected:n})=>!(Ne===e.id||n)||p?null:t.createElement("g",{key:e.id,className:"edge-action-buttons",onMouseEnter:()=>U(e.id),onMouseLeave:()=>U(null)},t.createElement("rect",{x:o-38,y:r-18,width:76,height:36,rx:18,ry:18,className:"edge-action-container-bg"}),t.createElement("g",{className:"edge-action-btn edge-action-edit",onClick:l=>{l.stopPropagation(),Q("edge",e.id)},style:{cursor:"pointer"}},t.createElement("circle",{cx:o-16,cy:r,r:12,className:"edge-action-bg"}),t.createElement("path",{d:`M ${o-20} ${r+2} L ${o-14} ${r-4} L ${o-12} ${r-2} L ${o-18} ${r+4} Z`,className:"edge-action-icon",fill:"#fff"})),t.createElement("g",{className:"edge-action-btn edge-action-reconnect",onClick:l=>Ae(l,e.id,"target"),style:{cursor:"pointer"}},t.createElement("circle",{cx:o+16,cy:r,r:12,className:"edge-action-bg"}),t.createElement("path",{d:`M ${o+11} ${r} L ${o+21} ${r} M ${o+18} ${r-3} L ${o+21} ${r} L ${o+18} ${r+3}`,className:"edge-action-icon",fill:"none",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))))),qe())))});S.WorkflowEditor=Ce,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
|