aldehyde 0.2.473 → 0.2.475

package/src/aldehyde/controls/text/index.less

@@ -4,4 +4,5 @@
     text-overflow: ellipsis;
     width: fit-content;
     max-width: 100%;
+    min-width: 100%;
 }

package/src/aldehyde/controls/view-control.tsx

@@ -147,6 +147,7 @@ function renderControl(
       case "textarea":
       case "text-view":
       case "preselect":
+      case "scan-code":
         if (holderType == "table") {
           viewControl = (
             <EllipsisText

package/src/aldehyde/detail/button/edit-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DoEditParam, DtmplData, LtmplConfig } from "../../tmpl/interface";
 import { EditOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -13,26 +13,23 @@ interface EditButtonProps {
 
 const EditButton: React.FC<EditButtonProps> = (props) => {
   const { doEdit, data, ltmplConfig } = props;
+  const { classEditConfigs, buttonEditAction, editBtnTitle } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classEditConfigs) {
-    ltmplConfig.classEditConfigs.forEach((classEditConfig) => {
+  if (classEditConfigs) {
+    classEditConfigs.forEach((classEditConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classEditConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: "dashed",
+          onClick: () => doEdit({ code: data.code, mode: "update", dtmplSourceId: classEditConfig.id })
+        };
         button = (
-          <Button
-            size="small"
-            type="dashed"
-            icon={<EditOutlined />}
-            onClick={() =>
-              doEdit({
-                code: data.code,
-                mode: "update",
-                dtmplSourceId: classEditConfig.id,
-              })
-            }
-          ></Button>
+          (!editBtnTitle || editBtnTitle?.length < 4) ?
+            <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+            <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +39,20 @@ const EditButton: React.FC<EditButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonEditAction?.preposes,
+      buttonEditAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: "dashed",
+      onClick: () => doEdit({ code: data.code, mode: "update" })
+    };
     button = (
-      <Button
-        size="small"
-        type="dashed"
-        icon={<EditOutlined />}
-        onClick={() => doEdit({ code: data.code, mode: "update" })}
-      ></Button>
+      (!editBtnTitle || editBtnTitle?.length < 4) ?
+        <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+        <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
     );
   }
 

package/src/aldehyde/detail/button/view-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DtmplData, LtmplConfig, ShowViewParam } from "../../tmpl/interface";
 import { AlignCenterOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -14,25 +14,24 @@ interface ViewButtonProps {
 
 const ViewButton: React.FC<ViewButtonProps> = (props) => {
   const { showView, data, ltmplConfig, buttonType = "primary" } = props;
+  const { classViewConfigs, detailBtnTitle, buttonViewAction } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classViewConfigs) {
-    ltmplConfig.classViewConfigs.forEach((classViewConfig) => {
+  if (classViewConfigs) {
+    classViewConfigs.forEach((classViewConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classViewConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: buttonType,
+          onClick: () => showView({ code: data.code, dtmplSourceId: classViewConfig.id, })
+        };
         button = (
-          <Button
-            size="small"
-            type={buttonType}
-            icon={<AlignCenterOutlined />}
-            onClick={() =>
-              showView({
-                code: data.code,
-                dtmplSourceId: classViewConfig.id,
-              })
-            }
-          ></Button>
+          (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+            <Button {...btnProps} >
+              {detailBtnTitle || <AlignCenterOutlined />}
+            </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +41,21 @@ const ViewButton: React.FC<ViewButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonViewAction?.preposes,
+      buttonViewAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: buttonType,
+      onClick: () => showView({ code: data.code })
+    };
     button = (
-      <Button
-        size="small"
-        type={buttonType}
-        icon={<AlignCenterOutlined />}
-        onClick={() => showView({ code: data.code })}
-      ></Button>
+      (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+        <Button {...btnProps}>
+          {detailBtnTitle || <AlignCenterOutlined />}
+        </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
     );
   }
 

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

@@ -0,0 +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: move;
+      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

@@ -0,0 +1,95 @@
+import React, { DragEvent, useEffect, useMemo, useState } from 'react';
+import { Collapse, Empty, 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: '其他' }
+];
+
+const handleImgUrl = (val: string) => {
+  let src = val;
+  if (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()}`;
+  return url;
+}
+
+
+interface AssetItem {
+  body: {
+    path: string;
+    suffix: string;
+  };
+  type: string; // 组件类型
+}
+
+const AssetList = () => {
+  const [activeKey, setActiveKey] = useState<string[]>(["SVG"]);
+  const [component2D, setComponent2D] = useState<any>({});
+
+  // 拖拽
+  const handleDragStart = (e: DragEvent, item: AssetItem) => {
+    if (!item?.body) {
+      return;
+    }
+    const url = handleImgUrl(item.body.path);
+    e.dataTransfer.setData('src', url);
+    e.dataTransfer.setData('type', item.body.suffix);
+    e.dataTransfer.setData('componentType', item.type); // 组件类型
+    // e.dataTransfer.setData('points', '[]');
+  };
+
+  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> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 0 }} />
+    }));
+    return temArr || [];
+  }, [component2D]);
+
+  return (
+    <div className="asset-bar">
+      <Collapse 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

@@ -0,0 +1,21 @@
+.main-header {
+  padding: 4px 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--ant-layout-body-bg);
+
+  button {
+    padding: 4px 8px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.active {
+      background-color: var(--ant-color-primary);
+      color: #fff;
+    }
+
+  }
+}

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

@@ -0,0 +1,233 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined } from '@ant-design/icons';
+import { gzipSync, strToU8 } from 'fflate';
+import { uint8ArrayToHex } from 'uint8array-extras';
+import HcserviceV3 from "../../../../tmpl/hcservice-v3";
+import IconFont from "../../../../icon/aliIcon";
+import { Render } from '../render';
+import { GraphType, LinkType, AlignType } from '../render/types';
+import * as Draws from '../render/draws';
+import './index.less';
+
+// 布局类型
+const alignTypes = [
+  { label: '垂直居中', value: 'Middle', icon: "icon-middle-L" },
+  { label: '左对齐', value: 'Left', icon: "icon-left-L" },
+  { label: '右对齐', value: 'Right', icon: "icon-right-L" },
+  { label: '水平居中', value: 'Center', icon: "icon-center-L" },
+  { label: '上对齐', value: 'Top', icon: "icon-top-L" },
+  { label: '下对齐', value: 'Bottom', icon: "icon-bottom-L" }
+];
+
+// 连线类型
+const lineTypes = [
+  { label: '折线', value: 'curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'bezier', icon: "icon-bezier" },
+  { label: '自动', value: 'auto', icon: "icon-zhexian-auto" },
+];
+
+// 图形类型
+const graphTypes = [
+  { label: '折线', value: 'Curve', icon: "icon-zhexian" },
+  { label: '贝塞尔曲线', value: 'Bezier', icon: "icon-bezier" },
+  { label: '矩形', value: 'Rect', icon: 'icon-rect' },
+  { label: '圆', value: 'Circle', icon: 'icon-circle' },
+];
+
+interface MainHeaderProps {
+  render: Render | null;
+  graphType?: GraphType; // 图类型
+  texting?: boolean; // 添加文本状态
+  showGrid?: boolean; // 显示网格
+  showAttract?: boolean; // 显示磁吸
+  onGraphTypeChange: (type: GraphType | undefined) => void; // 更新图类型
+  onTexting: (texting: boolean) => void;
+  setShowGrid?: (show: boolean) => void;
+  setShowAttract?: (show: boolean) => void;
+  recordCode: string;
+}
+
+const MainHeader = (props: MainHeaderProps) => {
+  const { render, graphType, onGraphTypeChange, onTexting, texting, recordCode, showGrid, setShowGrid, showAttract, setShowAttract } = props;
+  const [scale, setScale] = useState<number>(100); // 缩放
+  const [history, setHistory] = useState<string[]>([]); // 历史记录
+  const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
+  const [selection, setSelection] = useState<unknown[]>([]); // 选中组件
+  const [currentLinkType, setCurrentLinkType] = useState<LinkType>("curve"); // 连接线类型
+  const [showShortCut, setShowShortCut] = useState<boolean>(false); // 快捷键显示
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // 文件导入
+  const handleRestore = useCallback(() => {
+    if (!render) return;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = async () => {
+          await render.importExportTool.restore(reader.result as string);
+          render.positionTool.positionFit();
+        }
+        reader.readAsText(file);
+      }
+    }
+    input.click();
+  }, [render]);
+
+  // 保存
+  const handleSave = async () => {
+    if (!recordCode) {
+      return;
+    }
+    setLoading(true);
+    const data = render.importExportTool.save();
+    // 1. 将普通字符串转换为 Uint8Array
+    const dataBuffer = strToU8(data);
+    // 2. 压缩为 ByteArray
+    const content = gzipSync(dataBuffer, { level: 9 });
+    // 3. 将 Uint8Array 转为 16进制字符串
+    const hexString = uint8ArrayToHex(content);
+    await HcserviceV3.postDiagram2DConfig(recordCode, hexString);
+    setLoading(false);
+  }
+
+  // 数据导出
+  const handleExport = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng', action?: "save" | "download") => {
+    if (!render) return;
+    switch (type) {
+      case 'json':
+        if (action === "save") {
+          handleSave();
+        } else {
+          download("data.json", render.importExportTool.save());
+        }
+        return;
+      case 'asset':
+        download("asset.json", render.importExportTool.getAsset());
+        return;
+      case 'png':
+        download('image.png', render.importExportTool.getAssetImage(2));
+        return;
+      case 'assetPng':
+        download('image.png', render.importExportTool.getAssetImage());
+        return;
+    }
+  }, [render]);
+
+  // 下载辅助函数
+  const download = (name: string, content: string) => {
+    const a = document.createElement('a');
+    a.download = name;
+    a.href = content.startsWith('blob:') ? content : URL.createObjectURL(new Blob([content]));
+    a.click();
+  }
+
+  // 工具操作
+  const handleAlign = useCallback((type: AlignType) => {
+    render?.alignTool.align(type);
+  }, [render])
+
+  // 更改组件连接线类型 
+  const handleLinkType = useCallback((type: LinkType) => {
+    (render?.draws[Draws.LinkDraw.name] as unknown as { changeLinkType: (t: LinkType) => void })?.changeLinkType(type);
+  }, [render])
+
+  // 重置缩放
+  const handleScale = useCallback((action: 'fit' | 'reset' | 'position') => {
+    const tool = render?.positionTool;
+    if (!tool) return;
+    action === 'fit' ? tool.positionFit() : action === 'reset' ? tool.positionZoomReset() : tool.positionReset();
+  }, [render])
+
+  // 更改图类型
+  const handleGraph = (type: GraphType) => onGraphTypeChange(graphType === type ? undefined : type);
+
+  // 绑定事件
+  useEffect(() => {
+    if (!render) return;
+    render.on('selection-change', setSelection);
+    render.on('history-change', ({ records, index }: { records: string[]; index: number }) => {
+      setHistory(records);
+      setHistoryIndex(index);
+    });
+    render.on('link-type-change', setCurrentLinkType);
+    render.on('scale-change', (v: number) => setScale(v * 100));
+    render.on('loading', setLoading);
+  }, [render]);
+
+  // 是否选中多个组件
+  const isSelects = useMemo(() => selection.length <= 1, [selection]);
+
+  // 缩放菜单选项
+  const scaleMenu = [
+    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应</a> },
+    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置及缩放</a> },
+    { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
+  ];
+
+  return (
+    <div className="main-header">
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Dropdown menu={{ items: scaleMenu }}>
+          <span style={{ cursor: "pointer" }}>{`${scale.toFixed(0)}%`}</span>
+        </Dropdown>
+        <Tooltip title="撤销">
+          <Button type="text" onClick={() => render?.prevHistory()} disabled={historyIndex <= 0} >↶</Button>
+        </Tooltip>
+        <Tooltip title="恢复">
+          <Button type="text" onClick={() => render?.nextHistory()} disabled={historyIndex >= history.length - 1} >↷</Button>
+        </Tooltip>
+        {alignTypes.map(type => (
+          <Tooltip title={type.label}>
+            <Button type="text" key={type.value} onClick={() => handleAlign(type.value as AlignType)} disabled={isSelects} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {lineTypes.map(type => (
+          <Tooltip title={`连接线：${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleLinkType(type.value as LinkType)} disabled={currentLinkType === type.value}><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        {graphTypes.map(type => (
+          <Tooltip title={`画${type.label}`}>
+            <Button type="text" key={type.value} onClick={() => handleGraph(type.value as GraphType)} className={graphType === type.value ? 'active' : ''} ><IconFont type={type.icon} /></Button>
+          </Tooltip>
+        ))}
+        <Tooltip title="插入文字">
+          <Button type="text" onClick={() => onTexting(true)} className={texting ? "active" : ""} ><IconFont type="icon-wenben" /></Button>
+        </Tooltip>
+        <Tooltip title="网格">
+          <Button type="text" onClick={() => setShowGrid(!showGrid)} className={showGrid ? "active" : ""} ><NumberOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="磁吸">
+          <Button type="text" onClick={() => setShowAttract(!showAttract)} className={showAttract ? "active" : ""} ><MergeCellsOutlined /></Button>
+        </Tooltip>
+      </Space>
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Tooltip title="快捷键">
+          <Button type="text" onClick={() => setShowShortCut(true)} ><QuestionCircleOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="导入">
+          <Button type="text" onClick={handleRestore} ><ImportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="导出">
+          <Button type="text" onClick={() => handleExport("json")} ><ExportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="保存">
+          <Button loading={loading} type="text" onClick={() => handleExport("json", "save")} ><SaveOutlined /></Button>
+        </Tooltip>
+      </Space>
+      {showShortCut &&
+        <Modal title="快捷键" width={600} footer={null} open={showShortCut} onCancel={() => setShowShortCut(false)}>
+          <p>1、复制、粘贴、多选、全选、删除、上一步、下一步等快捷键与一般文档编辑器类似；</p>
+          <p>2、放大缩小，【Win】鼠标上滚动下滚动，【Mac】触控板双指放大、缩小；</p>
+          <p>3、画布拖动，在空白处，【Win】右键按下移动，【Mac】control + 触控板三指移动；</p>
+        </Modal>}
+    </div >
+  )
+}
+
+export default MainHeader;