@hzab/flowlong-designer 0.0.1

package/src/index.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, Drawer } from "antd";
+
+import ScWorkflow from "./components/ScWorkflow";
+
+import { SelectContext, ISelectHandlerI } from "./components/Selector/SelectContext";
+import { getInitNodeData } from "./common/flowData";
+
+import "./index.less";
+
+/**
+ * 复制指定字符串
+ * @param str
+ */
+function copy(str) {
+  return new Promise<void>(async (resolve, reject) => {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      try {
+        await navigator.clipboard.writeText(str);
+        resolve();
+      } catch (err) {
+        console.error("Failed to write clipboard contents: ", err);
+        reject();
+      }
+    } else if (document.execCommand) {
+      const textarea = document.createElement("textarea");
+      // @ts-ignore
+      textarea.readonly = "readonly";
+      textarea.style.position = "absolute";
+      textarea.style.left = "-9999px";
+      textarea.style.zIndex = "-9999";
+      textarea.value = str;
+      document.body.appendChild(textarea);
+      textarea.select();
+      const res = document.execCommand("Copy");
+      if (res) {
+        resolve();
+      } else {
+        reject(new Error("Failed to write clipboard contents."));
+      }
+      document.body.removeChild(textarea);
+    }
+  });
+}
+
+function FlowlongDesigner(props) {
+  const { value, flowName, listModel, treeModel ,roleListModel} = props;
+  const [drawer, setDrawer] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [data, setData] = useState(Object.keys(value || {}).length > 0 ? value : getInitNodeData({ name: flowName }));
+  const [selectHandler, setSelectHandler] = useState<ISelectHandlerI>({
+    open: false,
+    type: -1,
+    value: [],
+    onSave: (s) => {},
+    listModel,
+    treeModel,
+    roleListModel
+  });
+
+  useEffect(() => {
+    value && setData(value);
+  }, [value]);
+
+  function saveAsPng() {}
+  function copyParseJson() {
+    copy(JSON.stringify(data, null, 2));
+  }
+  function copyJson() {
+    copy(JSON.stringify(data));
+  }
+
+  function onDrawerClose() {
+    setDrawer(false);
+  }
+
+  return (
+    <div className="flowlong-designer">
+      <SelectContext.Provider
+        value={{
+          selectHandler,
+          setSelectHandler(type, value, onSave) {
+            setSelectHandler({ open: true, type, value, onSave , listModel, treeModel, roleListModel});
+          },
+          onClose() {
+            setSelectHandler({ open: false, type: -1, value: [], onSave: (s) => {} , listModel, treeModel,  roleListModel});
+          },
+        }}
+      >
+        <div className="designer-affix">
+          <Button className="action-btn view-json-btn" onClick={() => setDrawer(true)}>
+            查看 JSON
+          </Button>
+          {/* <Button className="action-btn save-img-btn" onClick={saveAsPng}>
+          保存图片
+        </Button> */}
+          <Button className="action-btn zoom-in-btn" onClick={() => setZoom((z) => z - 0.1)}>
+            缩小
+          </Button>
+          <Button className="action-btn zoom-out-btn" onClick={() => setZoom((z) => z + 0.1)}>
+            放大
+          </Button>
+        </div>
+        <div className="affix-container" style={{ transformOrigin: "0 0", transform: `scale(${zoom})` }}>
+          <ScWorkflow
+            className="workflow"
+            id="content-to-capture"
+            modelValue={data.nodeConfig}
+            onChange={(val) => {
+              setData((d) => {
+                d.nodeConfig = val;
+                return { ...d };
+              });
+            }}
+          />
+          <Drawer className="drawer-wrapper" open={drawer} width={720} onClose={onDrawerClose}>
+            <div>
+              <div className="cp-parse-json-btn" onClick={copyParseJson}>
+                复制格式化后的 JSON
+              </div>
+              <div className="cp-json-btn" onClick={copyJson}>
+                复制压缩后的 JSON
+              </div>
+            </div>
+            {/* <json-editor-vue className="editor" language="zh-CN" current-mode="view" v-model="data" /> */}
+            <pre className="json-viewer">{JSON.stringify(data, null, 2)}</pre>
+          </Drawer>
+        </div>
+      </SelectContext.Provider>
+    </div>
+  );
+}
+
+export default FlowlongDesigner;