function MainComponent() { React.useEffect(()=>{ const components = document.querySelectorAll('.p-2.cursor-move'); const canvas = document.getElementById('canvas'); components.forEach((component)=>{ component.addEventListener('dragstart', dragStart); }); canvas.addEventListener('dragover', dragOver); canvas.addEventListener('drop', drop); function dragStart(e) { e.dataTransfer.setData('text/plain', null); } function dragOver(e) { e.preventDefault(); } function drop(e) { e.preventDefault(); const component = e.target.closest('.p-2.cursor-move'); if (component) { const clone = component.cloneNode(true); clone.classList.add('flow-component'); canvas.appendChild(clone); } } }, []); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333] text-[#fff] p-2", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-arial", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "AIワークフロービルダー")), /*#__PURE__*/ React.createElement("div", { className: "flex h-[calc(100vh-50px)]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] bg-[#f1f1f1] overflow-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "p-2 font-arial", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "コンポーネント"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "開始ノード"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "APIコール"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "データ変換"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "条件分岐"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "ループ"), /*#__PURE__*/ React.createElement("div", { className: "p-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "タスク実行")), /*#__PURE__*/ React.createElement("div", { id: "canvas", className: "ml-[200px] p-2 h-[calc(100vh-50px)] overflow-auto bg-[#e9e9e9]", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-[#fff] border border-[#ccc] mb-2 cursor-move", draggable: "true", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "開始ノード")))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); }