aldehyde 0.2.511 → 0.2.513

package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less

@@ -1,36 +1,36 @@
-.asset-bar {
-  background-color: #f5f5f5;
-  width: 200px;
-  min-height: 100%;
-
-  .asset-list {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 4px;
-    margin: 0;
-    list-style: none;
-
-    &>li {
-      width: 20%;
-      padding-top: 20%;
-      flex-shrink: 0;
-      cursor: pointer;
-      position: relative;
-      border-radius: 4px;
-
-      &:hover {
-        background-color: #ddd;
-      }
-
-      &>img {
-        position: absolute;
-        top: 6px;
-        left: 6px;
-        object-fit: contain;
-        width: calc(~"100% - 12px");
-        height: calc(~"100% - 12px");
-        pointer-events: none;
-      }
-    }
-  }
+.asset-bar {
+  background-color: #f5f5f5;
+  width: 200px;
+  min-height: 100%;
+
+  .asset-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 4px;
+    margin: 0;
+    list-style: none;
+
+    &>li {
+      width: 20%;
+      padding-top: 20%;
+      flex-shrink: 0;
+      cursor: pointer;
+      position: relative;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: #ddd;
+      }
+
+      &>img {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        object-fit: contain;
+        width: calc(~"100% - 12px");
+        height: calc(~"100% - 12px");
+        pointer-events: none;
+      }
+    }
+  }
 }

package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx

@@ -1,110 +1,110 @@
-import React, { DragEvent, useEffect, useMemo, useState } from 'react';
-import { Collapse, Tooltip } from "antd";
-import { ProgramConfig } from "../../../index";
-import './index.less';
-
-// 组件分组配置
-const assetGroups = [
-  { key: 'SVG', label: '矢量图' },
-  { key: 'picture', label: '图片' },
-  { key: 'gif', label: 'GIF' },
-  // { key: 'composite', label: '图形组合 (JSON)' },
-  { key: 'other', label: '其他' }
-];
-
-export const handleImgUrl = (val: string) => {
-  let src = val;
-  if (!src || src.startsWith("http")) {
-    return src;
-  }
-  if (src.includes("@R@")) {
-    const text = src.split("@R@")[1];
-    if (text.startsWith("http")) {
-      return text;
-    }
-    src = text;
-  }
-  const url = encodeURI(ProgramConfig.joinPath(
-    ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-    src
-  )) +
-    `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
-  return url;
-}
-
-// 不显示连接线的组件类型
-const noLinkToolType = ["workstation"];
-
-interface AssetItem {
-  body: {
-    path: string;
-    suffix: string;
-  };
-  type: string; // 组件类型
-  config?: string; // 组件配置
-}
-
-const AssetList = () => {
-  const [activeKey, setActiveKey] = useState<string[]>(["SVG"]);
-  const [component2D, setComponent2D] = useState<any>({});
-
-  // 拖拽
-  const handleDragStart = (e: DragEvent, item: AssetItem) => {
-    if (!item?.body) {
-      return;
-    }
-    let defValues = {};
-    try {
-      const config = JSON.parse(item.config || "[]");
-      config.forEach(item => {
-        item.groups.forEach(r => r.fields?.forEach(i => {
-          if (i.defaultValue || i.defaultValue === 0) {
-            defValues[i.id] = i.defaultValue;
-          }
-        }));
-      });
-    } catch { defValues = {} }
-    e.dataTransfer.setData('defaultValues', JSON.stringify(defValues)); // 默认值配置
-    e.dataTransfer.setData('componentItem', JSON.stringify(item)); // 整体配置信息
-    e.dataTransfer.setData('src', item.body.path); // 组件地址
-    e.dataTransfer.setData('type', item.body.suffix);
-    e.dataTransfer.setData('componentType', item.type || ''); // 组件类型
-    e.dataTransfer.setData('showPoints', noLinkToolType.includes(item.type) ? "false" : "true");
-  };
-
-  const get2DComponent = async () => {
-    if (!activeKey?.length) {
-      return;
-    }
-    const res = await ProgramConfig.get2DComponent(activeKey);
-    setComponent2D(res);
-  }
-
-  useEffect(() => {
-    get2DComponent();
-  }, [activeKey])
-
-  // 组件渲染
-  const assetNodes = useMemo(() => {
-    const temArr = assetGroups?.map(r => ({
-      ...r,
-      children: component2D[r.key]?.length ? <ul className="asset-list">
-        {component2D[r.key].map((item, idx) => {
-          const temDom = <li key={idx} draggable onDragStart={(e) => handleDragStart(e, item)}>
-            <img src={handleImgUrl(item?.body?.path)} alt="" />
-          </li>;
-          return item.title ? <Tooltip title={item.title}>{temDom}</Tooltip> : temDom;
-        })}
-      </ul> : null
-    }))?.filter(r => r.children);
-    return temArr || [];
-  }, [component2D]);
-
-  return (
-    <div className="asset-bar">
-      <Collapse styles={{ body: { padding: "4px 8px 8px" } }} size="small" onChange={setActiveKey} bordered={false} items={assetNodes} activeKey={activeKey} />
-    </div>
-  )
-};
-
-export default AssetList;
+import React, { DragEvent, useEffect, useMemo, useState } from 'react';
+import { Collapse, Tooltip } from "antd";
+import { ProgramConfig } from "../../../index";
+import './index.less';
+
+// 组件分组配置
+const assetGroups = [
+  { key: 'SVG', label: '矢量图' },
+  { key: 'picture', label: '图片' },
+  { key: 'gif', label: 'GIF' },
+  // { key: 'composite', label: '图形组合 (JSON)' },
+  { key: 'other', label: '其他' }
+];
+
+export const handleImgUrl = (val: string) => {
+  let src = val;
+  if (!src || src.startsWith("http")) {
+    return src;
+  }
+  if (src.includes("@R@")) {
+    const text = src.split("@R@")[1];
+    if (text.startsWith("http")) {
+      return text;
+    }
+    src = text;
+  }
+  const url = encodeURI(ProgramConfig.joinPath(
+    ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+    src
+  )) +
+    `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
+  return url;
+}
+
+// 不显示连接线的组件类型
+const noLinkToolType = ["workstation"];
+
+interface AssetItem {
+  body: {
+    path: string;
+    suffix: string;
+  };
+  type: string; // 组件类型
+  config?: string; // 组件配置
+}
+
+const AssetList = () => {
+  const [activeKey, setActiveKey] = useState<string[]>(["SVG"]);
+  const [component2D, setComponent2D] = useState<any>({});
+
+  // 拖拽
+  const handleDragStart = (e: DragEvent, item: AssetItem) => {
+    if (!item?.body) {
+      return;
+    }
+    let defValues = {};
+    try {
+      const config = JSON.parse(item.config || "[]");
+      config.forEach(item => {
+        item.groups.forEach(r => r.fields?.forEach(i => {
+          if (i.defaultValue || i.defaultValue === 0) {
+            defValues[i.id] = i.defaultValue;
+          }
+        }));
+      });
+    } catch { defValues = {} }
+    e.dataTransfer.setData('defaultValues', JSON.stringify(defValues)); // 默认值配置
+    e.dataTransfer.setData('componentItem', JSON.stringify(item)); // 整体配置信息
+    e.dataTransfer.setData('src', item.body.path); // 组件地址
+    e.dataTransfer.setData('type', item.body.suffix);
+    e.dataTransfer.setData('componentType', item.type || ''); // 组件类型
+    e.dataTransfer.setData('showPoints', noLinkToolType.includes(item.type) ? "false" : "true");
+  };
+
+  const get2DComponent = async () => {
+    if (!activeKey?.length) {
+      return;
+    }
+    const res = await ProgramConfig.get2DComponent(activeKey);
+    setComponent2D(res);
+  }
+
+  useEffect(() => {
+    get2DComponent();
+  }, [activeKey])
+
+  // 组件渲染
+  const assetNodes = useMemo(() => {
+    const temArr = assetGroups?.map(r => ({
+      ...r,
+      children: component2D[r.key]?.length ? <ul className="asset-list">
+        {component2D[r.key].map((item, idx) => {
+          const temDom = <li key={idx} draggable onDragStart={(e) => handleDragStart(e, item)}>
+            <img src={handleImgUrl(item?.body?.path)} alt="" />
+          </li>;
+          return item.title ? <Tooltip title={item.title}>{temDom}</Tooltip> : temDom;
+        })}
+      </ul> : null
+    }))?.filter(r => r.children);
+    return temArr || [];
+  }, [component2D]);
+
+  return (
+    <div className="asset-bar">
+      <Collapse styles={{ body: { padding: "4px 8px 8px" } }} size="small" onChange={setActiveKey} bordered={false} items={assetNodes} activeKey={activeKey} />
+    </div>
+  )
+};
+
+export default AssetList;

package/src/aldehyde/draw-canvas-edit/components/main-header/index.less

@@ -1,24 +1,24 @@
-.main-header {
-  min-height: 40px;
-  padding: 4px 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--ant-layout-body-bg);
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  button {
-    padding: 4px 8px;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.active {
-      background-color: var(--ant-color-primary);
-      color: #fff;
-    }
-
-  }
+.main-header {
+  min-height: 40px;
+  padding: 4px 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--ant-layout-body-bg);
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  button {
+    padding: 4px 8px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.active {
+      background-color: var(--ant-color-primary);
+      color: #fff;
+    }
+
+  }
 }