@luck-design-biz/luckda 0.0.24-2 → 0.0.24-3

package/es/lowcode/engine/tools/lcid.js

@@ -0,0 +1,16 @@
+import { v4 as uuidv4 } from 'uuid';
+var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+export default function generateShortUuid() {
+  var toLowerCase = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var shortBuffer = '';
+  var uuid = uuidv4().replace(/-/g, '');
+  for (var i = 0; i < 8; i++) {
+    var str = uuid.substring(i * 4, i * 4 + 4);
+    var x = parseInt(str, 16);
+    shortBuffer += chars[x % 0x3e];
+  }
+  if (toLowerCase) {
+    return shortBuffer.toLowerCase();
+  }
+  return shortBuffer;
+}

package/es/lowcode/index.js

@@ -1,5 +1,3 @@
 export { default as Painter } from "./painter";
 export { default as View } from "./view";
-// export * as dataProcess  from './engine/tools/dataProcess';
-
-export default function launcher() {}
+// export * as dataProcess  from './engine/tools/dataProcess';

package/es/lowcode/painter/Design.js

@@ -1,52 +1,97 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useState } from 'react';
-import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
-import { useMemoizedFn } from 'ahooks';
-import moment from 'moment';
-import { ConfigProvider } from 'luck-design/antd';
-import DesignToolbar from "./DesignToolbar";
-import DesignOperator from "./DesignOperator";
+import React, { useRef, useEffect } from 'react';
+import { useEventListener } from 'ahooks';
+import { useLDContext } from "../engine/provider/ContextProvider";
 import Page from "../view/Page";
+import { CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
 var Design = function Design() {
-  var _localeInfo$locale;
+  var context = useLDContext();
+  var detectorRef = useRef(null);
+  var selectorRef = useRef(null);
   var simulatorRef = useRef(null);
-  var _useState = useState(function () {
-      return getLocale();
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    locale = _useState2[0],
-    setLocale = _useState2[1];
-  var _useState3 = useState(function () {
-      return getIntl(getLocale(), true);
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    intl = _useState4[0],
-    setIntl = _useState4[1];
-  var handleLangChange = useMemoizedFn(function (_locale) {
-    if (moment !== null && moment !== void 0 && moment.locale) {
-      var _localeInfo$_locale;
-      moment.locale(((_localeInfo$_locale = localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
+  var hoverCellRef = useRef(null);
+  var activeCellRef = useRef(null);
+  useEventListener('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
+      var _id = targetCell.id;
+      hoverCellRef.current = targetCell;
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: _id,
+        cellNode: targetCell
+      });
+    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
-    setLocale(_locale);
-    setIntl(getIntl(_locale));
+  }, {
+    target: simulatorRef
+  });
+  useEventListener('mouseleave', function () {
+    if (hoverCellRef.current) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
   });
+  useEventListener('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    activeCellRef.current = targetCell;
+    hoverCellRef.current = null;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: activeCellRef.current.id,
+      cellNode: activeCellRef.current
+    });
+  }, {
+    target: simulatorRef
+  });
+  useEffect(function () {
+    var setRect = function setRect(node, cellNode) {
+      node.style.left = "".concat(cellNode.offsetLeft, "px");
+      node.style.top = "".concat(cellNode.offsetTop, "px");
+      node.style.width = "".concat(cellNode.offsetWidth, "px");
+      node.style.height = "".concat(cellNode.offsetHeight, "px");
+    };
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) {
+        detectorRef.current.style.display = 'block';
+        setRect(detectorRef.current, payload.cellNode);
+      } else {
+        detectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        selectorRef.current.style.display = 'block';
+        setRect(selectorRef.current, payload.cellNode);
+      } else {
+        selectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
-  }, /*#__PURE__*/React.createElement(DesignToolbar, {
-    locale: locale,
-    onLangChange: handleLangChange
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "lc-detector",
+    ref: detectorRef,
+    className: styles.detector
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-painter-design-workspace']
-  }, /*#__PURE__*/React.createElement(DesignOperator, {
-    target: simulatorRef
-  }), /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: ((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
-  }, /*#__PURE__*/React.createElement(RawIntlProvider, {
-    value: intl
-  }, /*#__PURE__*/React.createElement(Page, {
+    id: "lc-selector",
+    ref: selectorRef,
+    className: styles.selector
+  }), /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
-    className: styles['lc-painter-design-simulator']
-  })))));
+    pageCode: "mk2i87qb",
+    className: styles.simulator
+  }));
 };
 export default Design;

package/es/lowcode/painter/I18n.js

@@ -1,205 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _getDvaApp;
-import React, { useState } from 'react';
-import { getDvaApp } from 'umi';
-import { useAsyncEffect, useCreation, useMemoizedFn } from 'ahooks';
-import { GridTable } from 'luck-design';
-import { reduce, remove, cloneDeep, debounce } from 'lodash';
-import { Input, Button, Icon } from 'luck-design/antd';
-import { formatMessage, suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
-import { readAllLang, doAddLang, doUpdateLang, doDeleteLang } from "./services/I18n";
-var Search = Input.Search;
-var _getDvaApp$_store = (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store,
-  dispatch = _getDvaApp$_store.dispatch;
-var getLangKey = function getLangKey() {
-  return "app.lowcode.".concat(suid());
-};
-var formatDataFunc = function formatDataFunc(data) {
-  return _objectSpread(_objectSpread({}, data), reduce(data.languages, function (ret, value, key) {
-    ret[key] = value;
-    return ret;
-  }, {}));
-};
+import React from 'react';
 var I18n = function I18n() {
-  var context = useLDContext();
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dataSource = _useState4[0],
-    setDataSource = _useState4[1];
-  useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _langList;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return dispatch({
-            type: 'global/getDatadic',
-            payload: {
-              snamealias: 'base_lang'
-            },
-            format: function format(list, detail) {
-              return list.map(function (id) {
-                return {
-                  title: detail[id].sname,
-                  field: detail[id].sfactvalue,
-                  editable: true,
-                  filter: false
-                };
-              });
-            }
-          });
-        case 2:
-          _langList = _context.sent;
-          setLangList(_langList);
-          context.$publisher(context.topics.LANG_SETTING_SELECT, {
-            langList: _langList
-          });
-          doQuery();
-        case 6:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), []);
-  var doQuery = useMemoizedFn(function () {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    readAllLang(_objectSpread(_objectSpread({}, value), {}, {
-      classifyKey: '__LOWCODE__'
-    })).then(function (res) {
-      var code = res.code,
-        list = res.list,
-        detail = res.detail;
-      if (code === 1) setDataSource(list.map(function (id) {
-        return formatDataFunc(detail[id]);
-      }));
-    });
-  });
-  var actionsColumn = useCreation(function () {
-    return {
-      width: 60,
-      getActions: function getActions() {
-        return [{
-          wanted: 'update',
-          title: /*#__PURE__*/React.createElement(Icon, {
-            type: "copy"
-          }),
-          action: function action(_data) {
-            var data = {
-              languages: reduce(langList, function (result, value) {
-                result[value.field] = _data[value.field];
-                return result;
-              }, {})
-            };
-            handleAdd(data);
-          }
-        }, {
-          wanted: 'delete',
-          title: /*#__PURE__*/React.createElement(Icon, {
-            type: "delete"
-          }),
-          confirm: {
-            title: formatMessage({
-              id: 'app.base.confirm.delete'
-            })
-          },
-          action: handleDelete
-        }];
-      }
-    };
-  }, [langList]);
-  var handleAdd = useMemoizedFn(function () {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var addItems = _objectSpread(_objectSpread({}, data), {}, {
-      langKey: getLangKey(),
-      classifyKey: '__LOWCODE__'
-    });
-    doAddLang({}, addItems).then(function (res) {
-      var code = res.code,
-        list = res.list,
-        detail = res.detail;
-      if (code === 1) setDataSource([formatDataFunc(detail[list[0]])].concat(dataSource));
-    });
-  });
-  var handleValueChange = useMemoizedFn(function (field, newValue, oldValue, record) {
-    doUpdateLang({}, {
-      classifyKey: '__LOWCODE__',
-      langKey: record.langKey,
-      indocno: record.indocno,
-      languages: _objectSpread(_objectSpread({}, reduce(langList, function (result, value) {
-        result[value.field] = record[value.field];
-        return result;
-      }, {})), {}, _defineProperty({}, field, newValue))
-    });
-  });
-  var handleDelete = useMemoizedFn(function (data) {
-    doDeleteLang({}, {
-      delList: [{
-        indocno: data.indocno
-      }]
-    }).then(function (_ref2) {
-      var code = _ref2.code;
-      if (code === 1) {
-        var _data = cloneDeep(dataSource);
-        remove(_data, function (n) {
-          return n.indocno === data.indocno;
-        });
-        setDataSource(_data);
-      }
-      ;
-    });
-  });
-  var handleSearch = debounce(doQuery, 300);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100%',
-      padding: '16px 24px'
-    }
-  }, /*#__PURE__*/React.createElement(Search, {
-    placeholder: formatMessage({
-      id: 'luckda.lowcode.painter.I18n.search',
-      label: '搜索文案'
-    }),
-    onChange: function onChange(e) {
-      return handleSearch({
-        value: e.target.value
-      });
-    },
-    style: {
-      width: '100%'
-    },
-    allowClear: true
-  }), /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    ghost: true,
-    size: "small",
-    style: {
-      margin: '16px 0'
-    },
-    onClick: function onClick() {
-      return handleAdd();
-    }
-  }, formatMessage({
-    id: 'luckda.lowcode.painter.I18n.add',
-    label: '新增文案'
-  })), /*#__PURE__*/React.createElement(GridTable, {
-    height: 480,
-    columns: langList,
-    dataSource: dataSource,
-    renderIndex: false,
-    showStatusBar: false,
-    actionsColumn: actionsColumn,
-    onValueChange: handleValueChange,
-    operates: ['add', 'update', 'delete'],
-    bordered: false
-  }));
+  return /*#__PURE__*/React.createElement("div", null, "i18n");
 };
 export default I18n;

package/es/lowcode/painter/Outline.js

@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["props", "children"];
 import React, { useRef, useState, useEffect } from 'react';
-import { useMemoizedFn, useDeepCompareLayoutEffect, useLatest } from 'ahooks';
+import { useMemoizedFn, useDeepCompareLayoutEffect } from 'ahooks';
 import { uniq, split, reduce } from 'lodash';
 import classNames from 'classnames';
 import { Card, Tree, Icon } from 'luck-design/antd';
@@ -15,8 +15,10 @@ import { getPathById } from "../engine/tools/dataProcess";
 import styles from "./style/outline.less";
 var TreeNode = Tree.TreeNode;
 var PAGE_CELL = [CELL_KEY.PAGE_HEADER, CELL_KEY.PAGE_CONTENT, CELL_KEY.PAGE_FOOTER];
-var Outline = function Outline(_ref) {
-  var open = _ref.open;
+var Outline = function Outline() {
+  var modalTreeRef = useRef();
+  var pageTreeRef = useRef();
+  var openModal = useRef(void 0);
   var clickBySelf = useRef(false);
   var context = useLDContext();
   var _useState = useState(null),
@@ -35,8 +37,6 @@ var Outline = function Outline(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     pageExpandedKeys = _useState8[0],
     setPageExpandedKeys = _useState8[1];
-  var latestModalExpandedKeysRef = useLatest(modalExpandedKeys);
-  var lastPageExpandedKeysRef = useLatest(pageExpandedKeys);
   useEffect(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
@@ -44,35 +44,36 @@ var Outline = function Outline(_ref) {
         clickBySelf.current = false;
         return;
       }
-      var _split = split(getPathById(context.pageData, payload.id), '/'),
-        _split2 = _slicedToArray(_split, 1),
-        _root = _split2[0];
-      if (!PAGE_CELL.includes(_root)) {
-        setModalExpandedKeys(uniq([].concat(_toConsumableArray(latestModalExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
-      } else {
-        setPageExpandedKeys(uniq([].concat(_toConsumableArray(lastPageExpandedKeysRef.current), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
-      }
+      setModalExpandedKeys(uniq([].concat(_toConsumableArray((openModal.current ? modalTreeRef : pageTreeRef).current.props.expandedKeys), _toConsumableArray(split(getPathById(context.pageData, payload.id), '/')))));
     }).watch();
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
-  var handleSelect = useMemoizedFn(function (_key) {
+  }, []);
+  var handleSelect = function handleSelect(_key) {
     clickBySelf.current = true;
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+      id: _key,
+      cellNode: context.componentMap.get(_key).dom
     } : null);
+  };
+  var handleOpenModal = useMemoizedFn(function (_key) {
+    var _comp = context.componentMap.get(_key);
+    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
+    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
+    _comp.api.doOpen();
+    openModal.current = _key;
   });
-  var render = useMemoizedFn(function (_ref2) {
-    var props = _ref2.props,
-      children = _ref2.children,
-      childrenMap = _objectWithoutProperties(_ref2, _excluded);
+  var render = useMemoizedFn(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = _objectWithoutProperties(_ref, _excluded);
     if (props) {
       return /*#__PURE__*/React.createElement(TreeNode, {
         icon: /*#__PURE__*/React.createElement(Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: props.label,
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -83,9 +84,6 @@ var Outline = function Outline(_ref) {
     });
   });
   useDeepCompareLayoutEffect(function () {
-    if (!context.pageData) {
-      return;
-    }
     var _reduce = reduce(context.pageData.children, function (result, _id) {
         var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
         result[resultKey][_id] = context.pageData[_id];
@@ -126,7 +124,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: formatMessage({
-      id: 'luckda.lowcode.modal',
+      id: 'luckda.lowcode.model',
       label: '模态视图层'
     }),
     style: {
@@ -136,6 +134,7 @@ var Outline = function Outline(_ref) {
       padding: 0
     }
   }, /*#__PURE__*/React.createElement(Tree, {
+    ref: modalTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -143,51 +142,41 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref3, _ref4) {
-      var _ref5 = _slicedToArray(_ref3, 1),
-        _key = _ref5[0];
-      var selected = _ref4.selected,
-        node = _ref4.node;
+    onSelect: function onSelect(_ref2, _ref3) {
+      var _ref4 = _slicedToArray(_ref2, 1),
+        _key = _ref4[0];
+      var selected = _ref3.selected,
+        node = _ref3.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        // 选中节点是模态视图，则打开模态视图组件
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: _key
-        });
+        handleOpenModal(_key);
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        // 取消选中节点是模态视图，则关闭模态视图
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: false,
-          id: _key
-        });
+        var _comp = context.componentMap.get(openModal.current);
+        _comp.api.doClose();
+        openModal.current = void 0;
         handleSelect(null);
       } else {
-        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split3 = split(getPathById(context.pageData, node.props.eventKey), '/'),
-          _split4 = _slicedToArray(_split3, 1),
-          parentModal = _split4[0];
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: parentModal
-        });
+        var _split = split(getPathById(context.pageData, node.props.eventKey), '/'),
+          _split2 = _slicedToArray(_split, 1),
+          parentModal = _split2[0];
+        if (!openModal.current || openModal.current !== parentModal) {
+          handleOpenModal(parentModal);
+        }
       }
     },
     expandedKeys: modalExpandedKeys,
-    onExpand: function onExpand(_keys, _ref6) {
-      var expanded = _ref6.expanded,
-        node = _ref6.node;
+    onExpand: function onExpand(_keys, _ref5) {
+      var expanded = _ref5.expanded,
+        node = _ref5.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-          toggle: true,
-          id: node.props.eventKey
-        });
+        handleOpenModal(node.props.eventKey);
       }
       setModalExpandedKeys(_keys);
     }
-  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), open && /*#__PURE__*/React.createElement(Tree, {
+  }, pageAndModal === null || pageAndModal === void 0 ? void 0 : pageAndModal.modal)), /*#__PURE__*/React.createElement(Tree, {
+    ref: pageTreeRef,
     showLine: true,
     showIcon: true,
     blockNode: true,
@@ -195,13 +184,15 @@ var Outline = function Outline(_ref) {
       type: "down"
     }),
     selectedKeys: [selectedKey],
-    onSelect: function onSelect(_ref7, _ref8) {
-      var _ref9 = _slicedToArray(_ref7, 1),
-        _key = _ref9[0];
-      var node = _ref8.node;
-      context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-        toggle: false
-      });
+    onSelect: function onSelect(_ref6, _ref7) {
+      var _ref8 = _slicedToArray(_ref6, 1),
+        _key = _ref8[0];
+      var node = _ref7.node;
+      if (openModal.current) {
+        var _prevComp = context.componentMap.get(openModal.current);
+        _prevComp.api.doClose();
+        openModal.current = void 0;
+      }
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,