aldehyde 0.2.427 → 0.2.428

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.
Files changed (64) hide show
  1. package/lib/controls/2dEditor/2dEditor/index.d.ts +15 -0
  2. package/lib/controls/2dEditor/2dEditor/index.d.ts.map +1 -0
  3. package/lib/controls/2dEditor/2dEditor/index.js +201 -0
  4. package/lib/controls/2dEditor/2dEditor/index.js.map +1 -0
  5. package/lib/controls/2dEditor/2dEditor/index.less +6 -0
  6. package/lib/controls/2dEditor/2dView/index.d.ts +19 -0
  7. package/lib/controls/2dEditor/2dView/index.d.ts.map +1 -0
  8. package/lib/controls/2dEditor/2dView/index.js +75 -0
  9. package/lib/controls/2dEditor/2dView/index.js.map +1 -0
  10. package/lib/controls/2dEditor/2dView/index.less +9 -0
  11. package/lib/controls/2dEditor/components/card.d.ts +20 -0
  12. package/lib/controls/2dEditor/components/card.d.ts.map +1 -0
  13. package/lib/controls/2dEditor/components/card.js +66 -0
  14. package/lib/controls/2dEditor/components/card.js.map +1 -0
  15. package/lib/controls/2dEditor/components/component.less +52 -0
  16. package/lib/controls/2dEditor/components/hotspot.d.ts +17 -0
  17. package/lib/controls/2dEditor/components/hotspot.d.ts.map +1 -0
  18. package/lib/controls/2dEditor/components/hotspot.js +36 -0
  19. package/lib/controls/2dEditor/components/hotspot.js.map +1 -0
  20. package/lib/controls/2dEditor/components/html-box.d.ts +21 -0
  21. package/lib/controls/2dEditor/components/html-box.d.ts.map +1 -0
  22. package/lib/controls/2dEditor/components/html-box.js +51 -0
  23. package/lib/controls/2dEditor/components/html-box.js.map +1 -0
  24. package/lib/controls/2dEditor/components/image.d.ts +13 -0
  25. package/lib/controls/2dEditor/components/image.d.ts.map +1 -0
  26. package/lib/controls/2dEditor/components/image.js +61 -0
  27. package/lib/controls/2dEditor/components/image.js.map +1 -0
  28. package/lib/controls/2dEditor/components/line.d.ts +16 -0
  29. package/lib/controls/2dEditor/components/line.d.ts.map +1 -0
  30. package/lib/controls/2dEditor/components/line.js +42 -0
  31. package/lib/controls/2dEditor/components/line.js.map +1 -0
  32. package/lib/index.d.ts +3 -1
  33. package/lib/index.d.ts.map +1 -1
  34. package/lib/index.js +4 -1
  35. package/lib/index.js.map +1 -1
  36. package/lib/module/ltmpl-table.d.ts +1 -0
  37. package/lib/module/ltmpl-table.d.ts.map +1 -1
  38. package/lib/module/ltmpl-table.js +2 -2
  39. package/lib/module/ltmpl-table.js.map +1 -1
  40. package/lib/table/act-table.d.ts +5 -2
  41. package/lib/table/act-table.d.ts.map +1 -1
  42. package/lib/table/act-table.js +12 -9
  43. package/lib/table/act-table.js.map +1 -1
  44. package/lib/table/column/column-builder.js +2 -2
  45. package/lib/table/column/column-builder.js.map +1 -1
  46. package/lib/tmpl/interface.d.ts +2 -2
  47. package/lib/tmpl/interface.d.ts.map +1 -1
  48. package/package.json +5 -1
  49. package/src/aldehyde/controls/2dEditor/2dEditor/index.less +6 -0
  50. package/src/aldehyde/controls/2dEditor/2dEditor/index.tsx +272 -0
  51. package/src/aldehyde/controls/2dEditor/2dView/index.less +9 -0
  52. package/src/aldehyde/controls/2dEditor/2dView/index.tsx +110 -0
  53. package/src/aldehyde/controls/2dEditor/components/card.tsx +106 -0
  54. package/src/aldehyde/controls/2dEditor/components/component.less +52 -0
  55. package/src/aldehyde/controls/2dEditor/components/data.d.ts +28 -0
  56. package/src/aldehyde/controls/2dEditor/components/hotspot.tsx +81 -0
  57. package/src/aldehyde/controls/2dEditor/components/html-box.tsx +102 -0
  58. package/src/aldehyde/controls/2dEditor/components/image.tsx +100 -0
  59. package/src/aldehyde/controls/2dEditor/components/line.tsx +74 -0
  60. package/src/aldehyde/index.tsx +7 -1
  61. package/src/aldehyde/module/ltmpl-table.tsx +3 -1
  62. package/src/aldehyde/table/act-table.tsx +15 -10
  63. package/src/aldehyde/table/column/column-builder.tsx +2 -2
  64. package/src/aldehyde/tmpl/interface.tsx +2 -2
@@ -0,0 +1,102 @@
1
+ import React, { useRef, useEffect, Fragment, ReactNode } from 'react';
2
+ import { Rect, Transformer } from 'react-konva';
3
+ import { Html } from 'react-konva-utils';
4
+ import { BaseNode } from "./data";
5
+
6
+ /**
7
+ * Html盒子组件
8
+ * 包装Html组件,以设置组件宽高和旋转
9
+ */
10
+
11
+ interface Props {
12
+ node: BaseNode,
13
+ onDragMove?: (id: string, position: { x: number, y: number }) => void;
14
+ onChange?: (node: BaseNode) => void; // 更新组件配置
15
+ isSelected?: boolean; // 是否选中
16
+ onSelect?: () => void; // 设置选中
17
+ isDesignMode?: boolean; // 是否编辑模式
18
+ children: ReactNode;
19
+ }
20
+
21
+ const Index = (props: Props) => {
22
+ const { node, onChange, isSelected, onSelect, children, onDragMove, isDesignMode = true } = props;
23
+ const { position, size, draggable = true, selected = true, rotation } = node;
24
+ const rectRef = useRef(null);
25
+ const trRef = useRef(null);
26
+
27
+ useEffect(() => {
28
+ trRef.current.nodes(isDesignMode && selected && isSelected ? [rectRef.current] : []); // 选中设置可拖拽size
29
+ }, [isSelected]);
30
+
31
+ // 尺寸拖拽、旋转后执行
32
+ const onTransformEnd = () => {
33
+ const nodeCur = rectRef.current;
34
+ const scaleX = nodeCur.scaleX();
35
+ const scaleY = nodeCur.scaleY();
36
+ const rotation = nodeCur.rotation();
37
+ nodeCur.scaleX(1);
38
+ nodeCur.scaleY(1);
39
+ onChange({
40
+ ...node,
41
+ position: { x: nodeCur.x(), y: nodeCur.y() },
42
+ size: { width: Math.max(5, nodeCur.width() * scaleX), height: Math.max(nodeCur.height() * scaleY) },
43
+ rotation
44
+ });
45
+ }
46
+
47
+ const handleOnDragMove = (e) => {
48
+ if (onDragMove) {
49
+ const nodeCur = e.target;
50
+ onDragMove(node.id, { x: nodeCur.x(), y: nodeCur.y() });
51
+ }
52
+ }
53
+
54
+ return (
55
+ <Fragment key={node.id}>
56
+ <Rect // Html拖拽背景卡片
57
+ id={node.id}
58
+ ref={rectRef}
59
+ x={position.x}
60
+ y={position.y}
61
+ width={size?.width}
62
+ height={size?.height}
63
+ offsetX={size?.width / 2}
64
+ offsetY={size?.height / 2}
65
+ rotation={rotation}
66
+ draggable={isDesignMode && draggable} // 允许拖拽移动
67
+ onDragMove={handleOnDragMove}
68
+ onClick={onSelect}
69
+ onTransformEnd={onTransformEnd}
70
+ stroke="transparent"
71
+ fill={isSelected ? "rgba(0,0,0,0.1)" : "transparent"}
72
+ />
73
+ <Html
74
+ groupProps={node.position}
75
+ divProps={{
76
+ style: {
77
+ width: `${size?.width || 200}px`,
78
+ height: `${size?.height || 200}px`,
79
+ pointerEvents: 'auto', // 允许 HTML 内部交互
80
+ },
81
+ onClick: (e) => {
82
+ e.stopPropagation();
83
+ onSelect();
84
+ }
85
+ }}
86
+ >{children}</Html>
87
+ <Transformer
88
+ ref={trRef}
89
+ flipEnabled={false}
90
+ boundBoxFunc={(oldBox, newBox) => {
91
+ // limit resize
92
+ if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
93
+ return oldBox;
94
+ }
95
+ return newBox;
96
+ }}
97
+ />
98
+ </Fragment>
99
+ );
100
+ };
101
+
102
+ export default Index;
@@ -0,0 +1,100 @@
1
+ import React, { useMemo, Fragment, useRef, useEffect } from 'react';
2
+ import { Image as KonvaImage, Transformer } from 'react-konva';
3
+ import useImage from 'use-image';
4
+ import ProgramConfig from "../../../units";
5
+ import { ImageNode } from "./data";
6
+
7
+ const handleImgUrl = (val: string) => {
8
+ let src = val;
9
+ if (src.startsWith("http")) {
10
+ return src;
11
+ }
12
+ if (src.includes("@R@")) {
13
+ const text = src.split("@R@")[1];
14
+ if (text.startsWith("http")) {
15
+ return text;
16
+ }
17
+ src = text;
18
+ }
19
+ try {
20
+ src = JSON.parse(src || "{}").base?.path;
21
+ } catch { }
22
+ const url = encodeURI(ProgramConfig.joinPath(
23
+ ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
24
+ src
25
+ )) +
26
+ `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}`;
27
+ return url;
28
+ }
29
+
30
+ interface Props {
31
+ node: ImageNode; // 当前组件信息
32
+ onDragMove?: (e, id: string) => void;
33
+ isSelected?: boolean; // 是否选中
34
+ onSelect?: () => void; // 设置选中
35
+ onChange?: (node: ImageNode) => void; // 更新组件配置
36
+ isDesignMode?: boolean; // 是否编辑模式
37
+ }
38
+
39
+ const Index = (props: Props) => {
40
+ const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
41
+ const { position, size, draggable = true, selected = true, rotation } = node;
42
+ const nodeRef = useRef(null);
43
+ const trRef = useRef(null);
44
+
45
+ const imgUrl = useMemo(() => {
46
+ if (!node?.url) return "";
47
+ return handleImgUrl(node.url);
48
+ }, [node])
49
+ const [image] = useImage(imgUrl); // image渲染在画布上需要使用
50
+
51
+ useEffect(() => {
52
+ trRef.current.nodes(isDesignMode && selected && isSelected ? [nodeRef.current] : []); // 选中设置可拖拽size
53
+ }, [isSelected]);
54
+
55
+ // 尺寸拖拽、旋转后执行
56
+ const onTransformEnd = () => {
57
+ const nodeCur = nodeRef.current;
58
+ const scaleX = nodeCur.scaleX();
59
+ const scaleY = nodeCur.scaleY();
60
+ const rotation = nodeCur.rotation();
61
+ nodeCur.scaleX(1);
62
+ nodeCur.scaleY(1);
63
+ onChange({
64
+ ...node,
65
+ position: { x: nodeCur.x(), y: nodeCur.y() },
66
+ size: { width: Math.max(5, nodeCur.width() * scaleX), height: Math.max(nodeCur.height() * scaleY) },
67
+ rotation
68
+ });
69
+ }
70
+
71
+ return <Fragment>
72
+ <KonvaImage
73
+ id={node.id}
74
+ ref={nodeRef}
75
+ x={position.x}
76
+ y={position.y}
77
+ width={size?.width || 100}
78
+ height={size?.height || 100}
79
+ image={image}
80
+ draggable={isDesignMode && draggable}
81
+ onDragMove={(e) => onDragMove?.(e, node.id)}
82
+ onClick={onSelect}
83
+ onTransformEnd={onTransformEnd}
84
+ rotation={rotation || 0}
85
+ />
86
+ <Transformer
87
+ ref={trRef}
88
+ flipEnabled={false}
89
+ boundBoxFunc={(oldBox, newBox) => {
90
+ // limit resize
91
+ if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
92
+ return oldBox;
93
+ }
94
+ return newBox;
95
+ }}
96
+ />
97
+ </Fragment>;
98
+ };
99
+
100
+ export default Index;
@@ -0,0 +1,74 @@
1
+ import React, { useCallback } from 'react';
2
+ import { Line, Path } from 'react-konva';
3
+ import { theme } from "antd";
4
+ import { LineProps } from "./data";
5
+
6
+ const { useToken } = theme;
7
+
8
+ interface Props {
9
+ node: LineProps; // 当前组件信息
10
+ getNodePosition: (val: string) => { x: number, y: number }; // 获取关联组件坐标
11
+ lineType: "line" | "smooth"; // 连线类型 折线/曲线,默认折线
12
+ style?: { color?: string; }
13
+ }
14
+
15
+ const Index = (props: Props) => {
16
+ const { node, getNodePosition, lineType = "line", style } = props;
17
+ const { sourceId, targetId } = node || {};
18
+ const { token } = useToken();
19
+
20
+ if (!sourceId || !targetId) return null;
21
+ const sourcePos = getNodePosition(sourceId);
22
+ const targetPos = getNodePosition(targetId);
23
+ if (!sourcePos || !targetPos) return null;
24
+
25
+ // 计算折线
26
+ const getPolylinePoints = useCallback(() => {
27
+ const x = sourcePos.x;
28
+ const y = sourcePos.y;
29
+ const endX = targetPos.x;
30
+ const endY = targetPos.y;
31
+ const distX = endX - x;
32
+ const midX = Math.abs(distX) < 80 ? x + distX / 2 : x + (distX > 0 ? 80 : -80);
33
+ return [x, y, midX, y, midX, endY, endX, endY];
34
+ }, [sourcePos, targetPos]);
35
+
36
+ // 计算曲线
37
+ const getSmoothPathData = useCallback(() => {
38
+ const x1 = sourcePos.x;
39
+ const y1 = sourcePos.y
40
+ const x2 = targetPos.x;
41
+ const y2 = targetPos.y;
42
+ const deltaX = Math.abs(x2 - x1);
43
+ const cp1x = x1 + Math.max(50, deltaX * 0.5);
44
+ const cp1y = y1;
45
+ const cp2x = x2 - 20;
46
+ const cp2y = y2;
47
+ return `M ${x1} ${y1} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${x2} ${y2}`;
48
+ }, [sourcePos, targetPos]);
49
+
50
+ return (
51
+ lineType === "line" ?
52
+ <Line
53
+ key={node.id}
54
+ points={getPolylinePoints()}
55
+ stroke={style?.color || token.colorPrimary}
56
+ strokeWidth={2}
57
+ lineCap="round"
58
+ lineJoin="round"
59
+ listening={false}
60
+ // dash={[5, 5]}
61
+ /> : <Path
62
+ key={node.id}
63
+ data={getSmoothPathData()}
64
+ stroke={style?.color || token.colorPrimary}
65
+ strokeWidth={2}
66
+ lineCap="round"
67
+ lineJoin="round"
68
+ listening={false}
69
+ // dash={[5, 5]}
70
+ />
71
+ );
72
+ };
73
+
74
+ export default Index;
@@ -149,6 +149,10 @@ import SsoLogin from "./sso-Login";
149
149
 
150
150
  import NavigationTree from "./tree/navigation-tree";
151
151
 
152
+ // 图编辑、渲染功能
153
+ import Edit2D from "./controls/2dEditor/2dEditor";
154
+ import View2D from "./controls/2dEditor/2dView";
155
+
152
156
  export {
153
157
  ActTable,
154
158
  SelectTable,
@@ -208,5 +212,7 @@ export {
208
212
  DtmplViewDrawer,
209
213
  SplitViewLtmplRoute,
210
214
  SsoLogin,
211
- NavigationTree
215
+ NavigationTree,
216
+ Edit2D,
217
+ View2D
212
218
  };
@@ -36,6 +36,7 @@ export interface LtmplTableProps {
36
36
  defShowType?: ActTableViewModel;
37
37
  showPagination?: boolean; // 是否显示分页
38
38
  showAggregates?: boolean; // 是否显示统计卡片数据
39
+ deleteCallback?: (val: object) => void; // 删除回调
39
40
  }
40
41
 
41
42
  export interface LtmplTableState {
@@ -257,7 +258,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
257
258
  doRAction, funcMode,
258
259
  tip, title, collapsible,
259
260
  initCollapse, doCustomEdit, doCustomCreate,
260
- serverKey, rowOperatable, readOnly, defShowType, showPagination, showAggregates
261
+ serverKey, rowOperatable, readOnly, defShowType, showPagination, showAggregates, deleteCallback
261
262
  } = this.props;
262
263
  const { translate } = this.context;
263
264
 
@@ -284,6 +285,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
284
285
  defShowType={defShowType}
285
286
  showPagination={showPagination}
286
287
  showAggregates={showAggregates}
288
+ deleteCallback={deleteCallback}
287
289
  />
288
290
  {buttons.includes("detail") && showDtmplView ? (
289
291
  <ModalDtmplView
@@ -79,6 +79,7 @@ interface ActTableProps extends TmplBaseProps {
79
79
  setUserPageConfig?: (config: { [key: string]: any }) => void; // 更新用户页面配置本地缓存
80
80
  resetUserPageConfig?: () => void; // 重置用户页面配置本地缓存
81
81
  allowUserConfig?: boolean; // 是否可用户自定义配置
82
+ deleteCallback?: (val: object) => void; // 删除回调
82
83
  }
83
84
 
84
85
  interface ActTableStat {
@@ -95,6 +96,7 @@ interface ActTableStat {
95
96
  showL2ActTable?: boolean;
96
97
  showL2Chart?: boolean;
97
98
  recordCode?: string;
99
+ record?: DtmplData;
98
100
  blockMenuTreeDrawerOpen?: boolean;
99
101
  showCustomCard?: boolean;
100
102
  customButton?: CustomButton;
@@ -129,6 +131,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
129
131
  showL2ActTable: false,
130
132
  showL2Chart: false,
131
133
  recordCode: undefined,
134
+ record: undefined,
132
135
  blockMenuTreeDrawerOpen: false,
133
136
  showCustomCard: false,
134
137
  customButtonData: undefined,
@@ -663,8 +666,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
663
666
  }
664
667
  };
665
668
 
666
- doDeleteByCode = async (code: string) => {
667
- const { sourceId, serverKey, mainCode, doDelete } = this.props;
669
+ doDeleteByCode = async (record: DtmplData) => {
670
+ const { sourceId, serverKey, mainCode, doDelete, deleteCallback } = this.props;
668
671
  const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
669
672
  this.setState({
670
673
  loading: true,
@@ -672,14 +675,15 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
672
675
  let result: boolean = await HcserviceV3.deleteByCode(
673
676
  serverKey,
674
677
  sourceId,
675
- [code],
678
+ [record.code],
676
679
  mainCode
677
680
  );
678
681
  if (result) {
679
682
  //重新加载数据
680
683
  this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
681
- doDelete && doDelete(code);
682
- this.setState({ loading: false, delModalOpen: false, recordCode: undefined });
684
+ doDelete && doDelete(record.code);
685
+ deleteCallback && deleteCallback(record);
686
+ this.setState({ loading: false, delModalOpen: false, recordCode: undefined, record: undefined });
683
687
  } else {
684
688
  this.setState({ loading: false });
685
689
  }
@@ -785,6 +789,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
785
789
  this.setState({
786
790
  blockMenuTreeDrawerOpen: true,
787
791
  recordCode: record.code,
792
+ record
788
793
  })
789
794
  }
790
795
 
@@ -1391,8 +1396,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
1391
1396
  // 行内编辑end
1392
1397
 
1393
1398
  // 删除确认弹窗打开
1394
- doDelModalOpen = (code: string) => {
1395
- this.setState({ recordCode: code, delModalOpen: true });
1399
+ doDelModalOpen = (record: DtmplData) => {
1400
+ this.setState({ record, recordCode: record.code, delModalOpen: true });
1396
1401
  };
1397
1402
 
1398
1403
  // tab页切换查询
@@ -1665,7 +1670,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
1665
1670
  };
1666
1671
 
1667
1672
  render() {
1668
- let { queryKey, loading, blockMenuTreeDrawerOpen, recordCode, showRatmplSelector, delModalOpen } = this.state;
1673
+ let { queryKey, loading, blockMenuTreeDrawerOpen, recordCode, record, showRatmplSelector, delModalOpen } = this.state;
1669
1674
  let { sourceId, ltmplConfig, title, collapsible, initCollapse, tip, serverKey, mainCode } = this.props;
1670
1675
  const { strongDeleteConfirmText } = ltmplConfig || {};
1671
1676
  const { translate } = this.context;
@@ -1740,8 +1745,8 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
1740
1745
  <Modal
1741
1746
  open={delModalOpen}
1742
1747
  title={translate("${确定要[删除]此数据吗}?")}
1743
- onOk={() => delFormRef.current.validateFields().then(() => this.doDeleteByCode(recordCode)).catch(() => { })}
1744
- onCancel={() => this.setState({ recordCode: undefined, delModalOpen: false })}
1748
+ onOk={() => delFormRef.current.validateFields().then(() => this.doDeleteByCode(record)).catch(() => { })}
1749
+ onCancel={() => this.setState({ record: undefined, recordCode: undefined, delModalOpen: false })}
1745
1750
  >
1746
1751
  <AntdForm ref={delFormRef} layout="vertical">
1747
1752
  <AntdForm.Item noStyle >
@@ -687,13 +687,13 @@ export default {
687
687
  )) {
688
688
  actionButtons.push(
689
689
  strongDeleteConfirmText ?
690
- <Button size="small" type="dashed" danger onClick={() => doDelModalOpen(record.code)}>
690
+ <Button size="small" type="dashed" danger onClick={() => doDelModalOpen(record)}>
691
691
  <DeleteOutlined />
692
692
  </Button> :
693
693
  <Popconfirm
694
694
  placement="rightBottom"
695
695
  title={translate("${确定要[删除]此数据吗}?")}
696
- onConfirm={() => doDeleteByCode(record.code)}
696
+ onConfirm={() => doDeleteByCode(record)}
697
697
  okText={translate("${确定}")}
698
698
  cancelText={translate("${取消}")}
699
699
  okType={"danger"}
@@ -479,12 +479,12 @@ export interface ActionRenderProps {
479
479
  doRowJump?: (jump: JumpConfig, record: DtmplData) => any,
480
480
  blockMenuTreeDrawerOpen?: (record) => any,
481
481
  doRowAction?: (actionId: string, codes: string[], params: object) => any,
482
- doDeleteByCode?: (code: string) => any, sortColumns: any,
482
+ doDeleteByCode?: (record: DtmplData) => any, sortColumns: any,
483
483
  editRowEdit?: (code: string) => void, // 行内编辑
484
484
  cancelRowEdit?: (code: string) => void,
485
485
  saveRowData?: (data: DtmplData) => void,
486
486
  editings?: string[],
487
- doDelModalOpen?: (code: string) => any,
487
+ doDelModalOpen?: (record: DtmplData) => any,
488
488
  }
489
489
 
490
490
  export interface FileRule {