@luck-design-biz/luckda 0.0.27 → 1.0.0-alpha

package/es/lowcode/painter/Design.js

@@ -1,97 +1,83 @@
-import React, { useRef, useEffect } from 'react';
-import { useEventListener } from 'ahooks';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect } from 'react';
+import { RawIntlProvider, getLocale, getIntl, localeInfo, history } from 'umi';
+import { useMemoizedFn } from 'ahooks';
+import moment from 'moment';
+import { ConfigProvider } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { getNeedPrompt } from "../engine/provider/ContextProvider";
+import DesignToolbar from "./DesignToolbar";
+import DesignOperator from "./DesignOperator";
 import Page from "../view/Page";
-import { CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
 var Design = function Design() {
-  var context = useLDContext();
-  var detectorRef = useRef(null);
-  var selectorRef = useRef(null);
+  var _localeInfo$locale;
   var simulatorRef = useRef(null);
-  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);
-    }
-  }, {
-    target: simulatorRef
+  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 unblock = useMemoizedFn(function () {
+    if (getNeedPrompt()) return confirm("".concat(formatMessage({
+      id: 'app.base.operate.comfire.leave',
+      label: '离开当前页面？'
+    }), "\n").concat(formatMessage({
+      id: 'app.base.operate.comfire.message.leave',
+      label: '系统可能不会保存您所做的更改。'
+    })));
+    return true;
   });
-  useEventListener('mouseleave', function () {
-    if (hoverCellRef.current) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+  var handleBeforeUnload = useMemoizedFn(function (event) {
+    if (getNeedPrompt()) {
+      event.preventDefault();
+      event.returnValue = null;
+      return 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();
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    history.block(function () {
+      return unblock();
+    });
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      history.block(function () {
+        return true;
+      });
     };
   }, []);
+  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');
+    }
+    setLocale(_locale);
+    setIntl(getIntl(_locale));
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "lc-detector",
-    ref: detectorRef,
-    className: styles.detector
+  }, /*#__PURE__*/React.createElement(DesignToolbar, {
+    locale: locale,
+    onLangChange: handleLangChange
   }), /*#__PURE__*/React.createElement("div", {
-    id: "lc-selector",
-    ref: selectorRef,
-    className: styles.selector
-  }), /*#__PURE__*/React.createElement(Page, {
+    className: styles['lc-painter-design-workspace']
+  }, /*#__PURE__*/React.createElement(DesignOperator, {
+    canvas: 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, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
-    className: styles.simulator
-  }));
+    className: styles['lc-painter-design-simulator']
+  })))));
 };
 export default Design;

package/es/lowcode/painter/DesignOperator.js

@@ -0,0 +1,314 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
+import { last, initial } from 'lodash';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
+import { Icon, Dropdown, message } from 'luck-design/antd';
+import { reverse, isString, isNil } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
+import { useContext, addNode, deleteNode } from "../engine/provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT, LC_FORMITEM_UNIT, CONTAINER_UNITS } from "../constants";
+import styles from "./style/design.less";
+var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
+var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
+  if (!cellNode) return {};
+  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+    pageLeft = _canvas$getBoundingCl.left,
+    pageTop = _canvas$getBoundingCl.top;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
+};
+var DesignOperator = function DesignOperator(_ref) {
+  var _getElement, _getElement2;
+  var canvas = _ref.canvas;
+  var context = useContext();
+  var size = useSize(canvas);
+  var _useState = useState(suid()),
+    _useState2 = _slicedToArray(_useState, 2),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = useSetState({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = useLatest(operatorId.selector);
+  var currentModal = useRef(null);
+  var getElement = useMemoizedFn(function (_target) {
+    var _context$componentMap;
+    return isString(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
+  });
+  var handleSelect = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
+      target: _target
+    } : null);
+  });
+  var handleHover = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
+      target: _target
+    } : null);
+  });
+  var handleDelete = useMemoizedFn(function (_ref2) {
+    var id = _ref2.id;
+    context.$publisher(context.topics.COMPONENT_DELETE, {
+      id: id
+    });
+  });
+  var addComponent = useMemoizedFn(function (data, targetId) {
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
+      var mountCompId = _ref3.id;
+      if (mountCompId === _id) {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id
+        });
+        handleSelect(_id);
+      }
+    }).watch();
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
+    addNode(targetId, _id, json);
+  });
+  var acticeProps = useCreation(function () {
+    if (!operatorId.selector) return null;
+    var _id = isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.ancestorId;
+    var levelNodes = context.componentMap.get(_id).api.getLevelNodes();
+    if (operatorId.selectorTarget) {
+      var _operatorId$selectorT = operatorId.selectorTarget,
+        id = _operatorId$selectorT.id,
+        label = _operatorId$selectorT.label;
+      levelNodes.push({
+        id: id,
+        name: label
+      });
+    }
+    return {
+      props: last(levelNodes),
+      menu: /*#__PURE__*/React.createElement("div", {
+        className: styles['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, reverse(initial(levelNodes)).map(function (m) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorName = useCreation(function () {
+    var _last;
+    return operatorId.detector && isString(operatorId.detector) ? (_last = last(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
+  }, [operatorId.detector]);
+  useEventListener('mousemove', function (event) {
+    var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      handleHover(targetFormItem);
+      return;
+    }
+    var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
+      handleHover(targetCellId);
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      handleHover();
+    }
+  }, {
+    target: canvas
+  });
+  useEventListener('mouseleave', function () {
+    if (operatorId.detector) {
+      handleHover();
+    }
+  }, {
+    target: canvas
+  });
+  useEventListener('click', function (event) {
+    var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      var _fieldName = targetFormItem.getAttribute('data-__field');
+      var _fieldLabel = targetFormItem.getAttribute('data-__label');
+      var _masterId = targetFormItem.getAttribute('data-__master');
+      var _ancestorId = targetFormItem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]")).getAttribute('id');
+      var _ancestor = context.componentMap.get(_ancestorId);
+      var ancestorData = _ancestor.api.getSelfData();
+      var blockIndex = ancestorData.props.blocks.findIndex(function (b) {
+        return b.id === _masterId;
+      });
+      var fieldIndex = ancestorData.props.blocks[blockIndex].fields.findIndex(function (f) {
+        return f.field === _fieldName;
+      });
+      var _target = {
+        element: targetFormItem,
+        id: "".concat(_ancestorId, ".").concat(_masterId, ".").concat(_fieldName),
+        field: _fieldName,
+        label: _fieldLabel,
+        masterId: _masterId,
+        ancestorId: _ancestorId,
+        keyPath: "blocks[".concat(blockIndex, "].fields[").concat(fieldIndex, "]")
+      };
+      handleHover();
+      handleSelect(_target);
+      return;
+    }
+    var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (!targetCellId || targetCellId === operatorId.selector) return;
+    handleHover();
+    handleSelect(targetCell.id);
+  }, {
+    target: canvas
+  });
+  useEffect(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
+      var data = _ref4.data;
+      if (_MODAL_COMPONENT_.includes(data.component)) {
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
+          var compId = _ref5.id;
+          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+            toggle: true,
+            id: compId
+          });
+          handleSelect(compId);
+        }).watch();
+        addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (!CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
+        message.info('该节点不支持添加子节点');
+        return;
+      }
+      addComponent(data, lastSelectorId.current);
+    }).watch();
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.target) setOperatorId({
+        detector: payload.target
+      });else setOperatorId({
+        detector: null
+      });
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.target) {
+        if (isString(payload.target)) {
+          var node = context.componentMap.get(payload.target).api.getSelfData();
+          setOperatorId({
+            selector: payload.target,
+            selectorTarget: null,
+            deletable: !node || node.props.buildIn !== true,
+            detector: null
+          });
+        } else {
+          setOperatorId({
+            selector: payload.target.id,
+            selectorTarget: payload.target,
+            deletable: false,
+            detector: null
+          });
+        }
+      } else {
+        setOperatorId({
+          selector: null,
+          selectorTarget: null
+        });
+      }
+    }).watch();
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
+      var toggle = _ref6.toggle,
+        id = _ref6.id;
+      if (toggle && id !== currentModal.current) {
+        canvas.current.style.setProperty('overflow', 'hidden');
+        var _modal = context.componentMap.get(id);
+        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
+        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
+        _modal.api.doOpen();
+        currentModal.current = id;
+      } else if (!toggle) {
+        canvas.current.style.removeProperty('overflow');
+        var _id = id || currentModal.current;
+        if (_id) {
+          var _modal2 = context.componentMap.get(_id);
+          _modal2.api.doClose();
+          currentModal.current = void 0;
+        }
+      }
+    }).watch();
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
+      var id = _ref7.id;
+      if (lastSelectorId.current === id) {
+        handleSelect();
+      }
+      deleteNode(id);
+    });
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
+    };
+  }, []);
+  useEffect(function () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey(suid());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, operatorId.detector && /*#__PURE__*/React.createElement("div", {
+    id: "lc-detector",
+    className: styles['lc-painter-design-detector'],
+    style: getOperatorStyle(canvas.current, getElement(operatorId.detector))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['lc-painter-design-detector-name'],
+    style: {
+      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
+    }
+  }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+    id: "lc-selector",
+    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
+    className: styles['lc-painter-design-selector'],
+    style: getOperatorStyle(canvas.current, getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
+  }, acticeProps && /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-borders-actions'],
+    style: acticeProps.props.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
+      top: 0
+    } : ((_getElement2 = getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "delete"
+  })))));
+};
+export default DesignOperator;