@luck-design-biz/luckda 0.0.25-1 → 0.0.25-10

package/es/lowcode/painter/Panel.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -5,13 +6,12 @@ import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Breadcrumb } from 'luck-design/antd';
 import classNames from 'classnames';
-import { takeRight, cloneDeep, isNil, reduce, get, set } from 'lodash';
+import { takeRight, isNil, reduce, get, isString } from 'lodash';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useContext, usePageData } from "../engine/provider/ContextProvider";
+import { useContext, useTask, addNode, deleteNode } from "../engine/provider/ContextProvider";
 import AttrsPanel from "./components/AttrsPanel";
 import StylePanel from "./panel-section/StylePanel";
 import AdvancePanel from "./components/AdvancePanel";
-import { modifyById, add, deleteById } from "../engine/tools/dataProcess";
 import styles from "./style/panel.less";
 import { LC_BUILDIN_UNIT_KEY } from "../constants";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
@@ -35,6 +35,7 @@ var _TAB_LIST_ = [{
   key: 'advance'
 }];
 var Panel = function Panel() {
+  var _activeNode$$target;
   var activeTabRef = useRef(null);
   var underLineRef = useRef(null);
   var _useState = useState(null),
@@ -46,74 +47,106 @@ var Panel = function Panel() {
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
   var context = useContext();
-  var _usePageData = usePageData(),
-    _usePageData2 = _slicedToArray(_usePageData, 2),
-    pageData = _usePageData2[0],
-    setPageData = _usePageData2[1].setPageData;
+  var task = useTask('modify');
   var meta = useCreation(function () {
+    if (isNil(activeNode)) return null;
     try {
-      return isNil(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+      var _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+      if (!isNil(activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target)) {
+        var setValueKey = function setValueKey(items) {
+          items.forEach(function (item) {
+            if (item.next) {
+              setValueKey(item.next.props);
+            } else if (item.props) {
+              setValueKey(item.props);
+            } else {
+              item.valueKey = "".concat(activeNode.$target.keyPath, ".").concat(item.key);
+            }
+          });
+        };
+        setValueKey(_meta.props);
+      }
+      return _meta;
     } catch (e) {
       return null;
     }
   }, [activeNode]);
-  var handleChange = useMemoizedFn(function (field, value, repositioning) {
-    var cloneData = cloneDeep(pageData);
+  var handleChange = useMemoizedFn(function (field, value) {
+    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      repositioning = _ref.repositioning,
+      before = _ref.before;
     if (field === 'enableHeader') {
       if (value) {
         var headerMeta = require("../engine/meta/pageheader.props.default.json");
-        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
+        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_HEADER, _objectSpread(_objectSpread({}, headerMeta), {}, {
           buildIn: true
         }));
       } else {
-        deleteById(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
       }
     } else if (field === 'enableFooter') {
       if (value) {
         var footerMeta = require("../engine/meta/pagefooter.props.default.json");
-        add(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
+        addNode(LC_BUILDIN_UNIT_KEY.PAGE_ROOT, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, _objectSpread(_objectSpread({}, footerMeta), {}, {
           buildIn: true
         }));
       } else {
-        deleteById(cloneData, LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
+        deleteNode(LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
       }
     }
-    var component = context.componentMap.get(activeNode.node.id);
-    var _component$api$getSel = component.api.getSelfAndParentLCData(),
-      node = _component$api$getSel.node;
+    var targetId = isNil(activeNode.$target) ? activeNode.node.id : activeNode.$target.ancestorId;
+    var component = context.componentMap.get(targetId);
+    var node = component.api.getSelfData();
     var oldValue = _defineProperty({}, field, get(node.props, field));
-    var newNodeData = set(node.props, field, value);
-    modifyById(cloneData, activeNode.node.id, newNodeData);
-    setPageData(cloneData).then(function (newData) {
+    var newValue = _defineProperty({}, field, value);
+    if (before) {
+      before(handleChange);
+    }
+    task(targetId, newValue).then(function () {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
-        id: activeNode.node.id,
-        pageData: cloneDeep(newData),
+        id: targetId,
         oldValue: oldValue,
-        newValue: _defineProperty({}, field, value)
+        newValue: newValue
       });
       if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
-        id: activeNode.node.id
+        id: targetId
       });
     });
   });
   useEffect(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+    var tid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       setActiveTabKey('attrs');
-      if (!payload.id) {
+      if (!payload.target) {
         setActiveNode(null);
         return;
       }
-      var component = context.componentMap.get(payload.id);
-      var _component$api$getSel2 = component.api.getSelfAndParentLCData(),
-        node = _component$api$getSel2.node;
-      var levelNodes = takeRight(component.api.getLevelNodes(), 4);
-      setActiveNode({
-        node: node.props,
-        level: levelNodes
-      });
+      if (isString(payload.target)) {
+        var component = context.componentMap.get(payload.target);
+        var node = component.api.getSelfData();
+        var levelNodes = takeRight(component.api.getLevelNodes(), 4);
+        setActiveNode({
+          node: node.props,
+          level: levelNodes
+        });
+      } else {
+        var _component = payload.target.element.getAttribute('data-__component');
+        var ancestor = context.componentMap.get(payload.target.ancestorId);
+        var _levelNodes = takeRight(ancestor.api.getLevelNodes(), 3);
+        setActiveNode({
+          node: {
+            id: payload.target.id,
+            component: _component
+          },
+          level: [].concat(_toConsumableArray(_levelNodes), [{
+            id: payload.target.id,
+            name: payload.target.label
+          }]),
+          $target: payload.target
+        });
+      }
     }).watch();
     return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, tid);
     };
   }, []);
   useLayoutEffect(function () {
@@ -128,16 +161,16 @@ var Panel = function Panel() {
     style: {
       fontSize: 12
     }
-  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref) {
-    var id = _ref.id,
-      name = _ref.name;
+  }, activeNode === null || activeNode === void 0 ? void 0 : activeNode.level.map(function (_ref2) {
+    var id = _ref2.id,
+      name = _ref2.name;
     return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
       key: id,
       className: classNames(_defineProperty({}, styles['active-node-level'], id !== activeNode.node.id)),
       onMouseEnter: function onMouseEnter() {
         if (id === activeNode.node.id) return;
         context.$publisher(context.topics.COMPONENT_HOVER, {
-          id: id
+          target: id
         });
       },
       onMouseLeave: function onMouseLeave() {
@@ -147,7 +180,7 @@ var Panel = function Panel() {
       onClick: function onClick() {
         if (id === activeNode.node.id) return;
         context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: id
+          target: id
         });
       }
     }, name);
@@ -177,21 +210,26 @@ var Panel = function Panel() {
     ref: underLineRef,
     className: styles.underline
   })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/React.createElement(AttrsPanel, {
+    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    ancestorId: activeNode === null || activeNode === void 0 || (_activeNode$$target = activeNode.$target) === null || _activeNode$$target === void 0 ? void 0 : _activeNode$$target.ancestorId,
     meta: meta,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
-    onChange: function onChange(field, value, repositioning) {
-      return handleChange(field, value, repositioning);
+    onChange: function onChange(field, value, params) {
+      return handleChange(field, value, params);
     }
   }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/React.createElement(StylePanel, {
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.css,
+    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
     onChange: function onChange(_, newCss) {
       return handleChange('css', newCss);
     }
   }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/React.createElement(AdvancePanel, {
+    key: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    nodeId: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.id,
+    target: activeNode === null || activeNode === void 0 ? void 0 : activeNode.$target,
     meta: meta,
-    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.advance,
     onChange: function onChange(val) {
-      return handleChange('advance', val);
+      return handleChange(isNil(activeNode.$target) ? 'advance' : "".concat(activeNode.$target.keyPath, ".advance"), val);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames(styles['lc-painter-panel-empty'], _defineProperty({}, styles.hidden, !!activeNode))

package/es/lowcode/painter/components/ActionBindModal.js

@@ -1,16 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState } from 'react';
-import { useMemoizedFn, useLatest, useCreation, useMap, useUpdateEffect } from 'ahooks';
+import { useMemoizedFn, useLatest, useCreation, useMap, useUpdateEffect, useDebounceFn } from 'ahooks';
 import { Modal, Icon, Input, Checkbox, Tooltip } from 'luck-design/antd';
 import classNames from 'classnames';
-import { debounce, reduce } from 'lodash';
+import { reduce } from 'lodash';
 import { formatMessage } from '@luck-design-biz/base/utils';
 import { useRemoteSource } from "../../engine/provider/ContextProvider";
 import { useContext } from "../../engine/provider/ContextProvider";
 import JSEditor from "./code-editor/JSEditor";
-import JsonEditor from "./code-editor/JsonEditor";
 import styles from "../style/action-bind-modal.less";
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
 var _ACTION_CATEGORY_ = [{
@@ -32,10 +30,11 @@ var _ACTION_CATEGORY_ = [{
     label: '自定义动作'
   })
 }];
-var _DEFAULT_JSON_CODE_ = '{"datasetCode": "","params":{},"body":{}}';
+var _DEFAULT_JSON_CODE_ = '{"params":{},"data":{}}';
 var _DEFAULT_JS_CODE_ = 'function todo() {\n\n}';
 var ActionBindModal = function ActionBindModal(_ref) {
-  var event = _ref.event,
+  var nodeId = _ref.nodeId,
+    event = _ref.event,
     _ref$defaultCode = _ref.defaultCode,
     defaultCode = _ref$defaultCode === void 0 ? _DEFAULT_JS_CODE_ : _ref$defaultCode,
     onComfirm = _ref.onComfirm,
@@ -82,7 +81,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
           target = _ref3[1];
         ret.push({
           key: key,
-          label: "".concat(target.api.getSelfAndParentLCData().node.props.name, "(").concat(key, ")")
+          label: "".concat(target.api.getSelfData().props.name, "(").concat(key, ")")
         });
         return ret;
       }, []);
@@ -99,28 +98,30 @@ var ActionBindModal = function ActionBindModal(_ref) {
   }, [category]);
   useUpdateEffect(function () {
     if (activeKey) {
+      var _editorRef$current;
       var action = get(activeKey);
-      editorRef.current.editor.setValue(action.code);
+      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.editor.setValue(action === null || action === void 0 ? void 0 : action.code);
     }
-  }, [activeKey]);
+  }, [category, activeKey]);
   useUpdateEffect(function () {
     setAll(event === null || event === void 0 ? void 0 : event.actionPool);
   }, [event]);
-  var handleEditorValueChange = useRef(debounce(function (code) {
-    if (latestActiveKey.current) {
-      var action = get(latestActiveKey.current);
-      action.code = code;
-    }
-  }, 400));
+  var _useDebounceFn = useDebounceFn(function (code) {
+      if (latestActiveKey.current) {
+        var action = get(latestActiveKey.current);
+        action.code = code;
+      }
+    }, {
+      wait: 500
+    }),
+    handleEditorValueChange = _useDebounceFn.run;
   var handleOptionClick = useMemoizedFn(function (key) {
     setActiveKey(key);
     var action;
     if (actionPool.has(key)) {
       action = get(key);
     } else {
-      var code = category === 'custom' ? event.func || defaultCode : JSON.stringify(_objectSpread({
-        moduleCode: module.moduleCode
-      }, JSON.parse(_DEFAULT_JSON_CODE_)), null, '\t');
+      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
       action = {
         category: category,
         key: key,
@@ -134,9 +135,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
       if (activeKey !== key) {
         setActiveKey(key);
       }
-      var code = category === 'custom' ? event.func || defaultCode : JSON.stringify(_objectSpread({
-        moduleCode: module.moduleCode
-      }, JSON.parse(_DEFAULT_JSON_CODE_)), null, '\t');
+      var code = event.func || (category === 'custom' ? defaultCode : "".concat(defaultCode.slice(0, -1), "\n\treturn ").concat(_DEFAULT_JSON_CODE_, " \n}"));
       set(key, {
         category: category,
         key: key,
@@ -166,9 +165,9 @@ var ActionBindModal = function ActionBindModal(_ref) {
       marginTop: 0,
       padding: '4px 24px'
     },
-    title: event === null || event === void 0 ? void 0 : event.name,
+    title: "".concat(event === null || event === void 0 ? void 0 : event.name, "(").concat(nodeId, ")"),
     visible: !!event,
-    width: 960,
+    width: "70vw",
     closable: false,
     maskClosable: false,
     getContainer: function getContainer() {
@@ -196,7 +195,19 @@ var ActionBindModal = function ActionBindModal(_ref) {
       className: classNames(_defineProperty({}, styles.active, key === category)),
       onClick: function onClick() {
         setCategory(key);
-        setActiveKey(void 0);
+        if ('custom' === key) {
+          var _activeKey = 'coding';
+          setActiveKey(_activeKey);
+          if (!actionPool.has(_activeKey)) {
+            set(_activeKey, {
+              category: key,
+              key: _activeKey,
+              code: event.func || defaultCode
+            });
+          }
+        } else {
+          setActiveKey(void 0);
+        }
       }
     }, label, key === category && /*#__PURE__*/React.createElement(Icon, {
       type: "check",
@@ -271,9 +282,9 @@ var ActionBindModal = function ActionBindModal(_ref) {
     type: "exclamation-circle"
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles['code-box']
-  }, activeKey ? /*#__PURE__*/React.createElement(JsonEditor, {
+  }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
     ref: editorRef,
-    onChange: handleEditorValueChange.current
+    onChange: handleEditorValueChange
   }) : formatMessage({
     id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
     label: '请在右侧选择行为项'
@@ -284,7 +295,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
     className: styles['code-box']
   }, activeKey ? /*#__PURE__*/React.createElement(JSEditor, {
     ref: editorRef,
-    onChange: handleEditorValueChange.current
+    onChange: handleEditorValueChange
   }) : formatMessage({
     id: "".concat(_I18N_PREFIX_, ".noActionSelected"),
     label: '请在右侧选择行为项'

package/es/lowcode/painter/components/AdvancePanel.js

@@ -8,7 +8,8 @@ import React, { useState } from 'react';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { Menu, Dropdown, Button, Tooltip, Icon } from 'luck-design/antd';
 import styled from 'styled-components';
-import { keyBy, keys, omit } from 'lodash';
+import { isNil, keyBy, keys, omit, reduce } from 'lodash';
+import { useGet } from "../../engine/provider/ContextProvider";
 import { formatMessage } from '@luck-design-biz/base/utils';
 import Collapse from "./Collapse";
 import ActionBindModal from "./ActionBindModal";
@@ -19,8 +20,16 @@ var EventItem = styled.div.withConfig({
 })(["display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #e5e6e8;border-radius:6px;margin-bottom:6px;font-size:12px;i{color:rgba(0,0,0,0.4);cursor:pointer;}i:not(:last-child){margin-right:6px;}"]);
 var AdvancePanel = function AdvancePanel(_ref) {
   var meta = _ref.meta,
-    value = _ref.value,
+    nodeId = _ref.nodeId,
+    target = _ref.target,
     onChange = _ref.onChange;
+  var value = useGet(isNil(target) ? {
+    id: nodeId,
+    path: 'props.advance'
+  } : {
+    id: target.ancestorId,
+    path: "props.".concat(target.keyPath, ".advance")
+  });
   var _useState = useState((value === null || value === void 0 ? void 0 : value.events) || {}),
     _useState2 = _slicedToArray(_useState, 2),
     events = _useState2[0],
@@ -66,24 +75,28 @@ var AdvancePanel = function AdvancePanel(_ref) {
       style: {
         fontSize: 12
       }
-    }, (_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 || (_meta$advance2 = _meta$advance2.events) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.map(function (event) {
-      return /*#__PURE__*/React.createElement(Menu.Item, {
-        key: event.key,
-        payload: event
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        title: event.desc || event.name,
-        placement: "left",
-        getPopupContainer: function getPopupContainer() {
-          return document.getElementById('lc-design-workspace');
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: '100%',
-          fontSize: 12
-        }
-      }, event.name)));
-    }));
-  }, []);
+    }, reduce((_meta$advance2 = meta.advance) === null || _meta$advance2 === void 0 ? void 0 : _meta$advance2.events, function (ret, event) {
+      var _value$events;
+      if (!(value !== null && value !== void 0 && (_value$events = value.events) !== null && _value$events !== void 0 && _value$events[event.key])) {
+        ret.push( /*#__PURE__*/React.createElement(Menu.Item, {
+          key: event.key,
+          payload: event
+        }, /*#__PURE__*/React.createElement(Tooltip, {
+          title: event.desc || event.name,
+          placement: "left",
+          getPopupContainer: function getPopupContainer() {
+            return document.getElementById('lc-design-workspace');
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '100%',
+            fontSize: 12
+          }
+        }, event.name))));
+      }
+      return ret;
+    }, []));
+  }, [value]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Collapse, {
     field: "events",
     label: formatMessage({
@@ -94,7 +107,9 @@ var AdvancePanel = function AdvancePanel(_ref) {
       padding: '12px 16px'
     }
   }, keys(events).map(function (ek) {
-    return /*#__PURE__*/React.createElement(EventItem, null, /*#__PURE__*/React.createElement("span", null, metaMap[ek].name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/React.createElement(EventItem, {
+      key: ek
+    }, /*#__PURE__*/React.createElement("span", null, metaMap[ek].name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
       title: formatMessage({
         id: 'luckda.lowcode.painter.edit',
         label: '编辑'
@@ -130,6 +145,7 @@ var AdvancePanel = function AdvancePanel(_ref) {
     id: "".concat(_I18N_PREFIX_, ".addEventAction"),
     label: '添加事件动作'
   })))), /*#__PURE__*/React.createElement(ActionBindModal, {
+    nodeId: nodeId,
     event: event,
     onComfirm: handleComfirm,
     onClose: function onClose() {

package/es/lowcode/painter/components/AttrsPanel.js

@@ -8,7 +8,7 @@ import { useBoolean, useCreation, useMemoizedFn } from 'ahooks';
 import { Drawer, Icon } from 'luck-design/antd';
 import classNames from 'classnames';
 import { startsWith, isNil, get } from 'lodash';
-import { useContext } from "../../engine/provider/ContextProvider";
+import { useGet } from "../../engine/provider/ContextProvider";
 import PanelItemFactory from "../../engine/factory/panel-item-factory";
 import PanelItem from "./PanelItem";
 import Collapse from "./Collapse";
@@ -16,7 +16,8 @@ import styles from "../style/panel-attrs.less";
 var AttrsPanel = function AttrsPanel(_ref) {
   var _nextRef$current2, _nextRef$current3;
   var meta = _ref.meta,
-    value = _ref.value,
+    nodeId = _ref.nodeId,
+    ancestorId = _ref.ancestorId,
     onChange = _ref.onChange;
   var nextRef = useRef(null);
   var factory = useRef(new PanelItemFactory());
@@ -26,10 +27,18 @@ var AttrsPanel = function AttrsPanel(_ref) {
     _useBoolean2$ = _useBoolean2[1],
     setTrue = _useBoolean2$.setTrue,
     setFalse = _useBoolean2$.setFalse;
-  var context = useContext();
-  var handleChange = useMemoizedFn(function (field, val, repositioning) {
+  var node = useGet({
+    id: isNil(ancestorId) ? nodeId : ancestorId,
+    path: 'props'
+  });
+  var handleChange = useMemoizedFn(function (field, val, _ref2) {
     var _nextRef$current;
-    onChange(field, val, repositioning);
+    var repositioning = _ref2.repositioning,
+      before = _ref2.before;
+    onChange(field, val, {
+      repositioning: repositioning,
+      before: before
+    });
     if ((_nextRef$current = nextRef.current) !== null && _nextRef$current !== void 0 && _nextRef$current.autoClose) {
       setFalse();
     }
@@ -44,55 +53,57 @@ var AttrsPanel = function AttrsPanel(_ref) {
     setTrue();
   });
   var renderPanelItems = useMemoizedFn(function (items, dynamicProps) {
-    var _context$componentMap = context.componentMap.get(value.id).api.getSelfAndParentLCData(),
-      node = _context$componentMap.node;
-    return items.map(function (_ref2) {
-      var type = _ref2.type,
-        key = _ref2.key,
-        valueKey = _ref2.valueKey,
-        name = _ref2.name,
-        desc = _ref2.desc,
-        defaultValue = _ref2.default,
-        props = _ref2.props,
-        wrapper = _ref2.wrapper,
-        wrapperProps = _ref2.wrapperProps,
-        _next2 = _ref2.next,
-        repositioning = _ref2.repositioning,
-        rest = _objectWithoutProperties(_ref2, _excluded);
+    return items.map(function (_ref3) {
+      var type = _ref3.type,
+        key = _ref3.key,
+        valueKey = _ref3.valueKey,
+        name = _ref3.name,
+        desc = _ref3.desc,
+        defaultValue = _ref3.default,
+        props = _ref3.props,
+        wrapper = _ref3.wrapper,
+        wrapperProps = _ref3.wrapperProps,
+        next = _ref3.next,
+        repositioning = _ref3.repositioning,
+        rest = _objectWithoutProperties(_ref3, _excluded);
       var Comp = factory.current.getPanelItemFor(startsWith(type, '_') ? 'dynamic' : type, type);
+      var _valueKey = (dynamicProps === null || dynamicProps === void 0 ? void 0 : dynamicProps.valueKey) || valueKey;
       if (type === 'group') {
         return /*#__PURE__*/React.createElement(Comp, {
-          nodeId: value.id,
+          nodeId: nodeId,
           key: key,
           field: key,
           label: name,
-          next: _next2 ? function (_dp) {
-            return goNext(_next2, _dp);
+          next: next ? function (_dp) {
+            return goNext(next, _dp);
           } : null,
           defaultCollapsed: defaultValue,
           desc: desc
         }, renderPanelItems(props || [], dynamicProps));
       }
-      var _originalVal = get(node.props, valueKey || key);
+      var _originalVal = get(node, _valueKey || key);
       var comp = Comp && /*#__PURE__*/React.createElement(Comp, _extends({
-        nodeId: value.id,
+        nodeId: nodeId,
         key: key,
         defaultValue: isNil(_originalVal) ? defaultValue : _originalVal,
-        next: function next(_dp) {
-          return goNext(_next2, _dp);
-        },
-        onChange: function onChange(val) {
-          return handleChange(valueKey || key, val, repositioning);
+        next: next !== null && next !== void 0 && next.props ? function (_dp) {
+          return goNext(next, _dp);
+        } : null,
+        onChange: function onChange(val, before) {
+          return handleChange(_valueKey || key, val, {
+            repositioning: repositioning,
+            before: before
+          });
         },
         size: "small",
-        settings: node.props,
+        settings: node,
         renderPanelItems: renderPanelItems
       }, rest, dynamicProps));
       if (wrapper === 'hidden') return comp;
       var Wrapper = wrapper === 'collapse' ? Collapse : PanelItem;
       return /*#__PURE__*/React.createElement(Wrapper, _extends({
         key: key,
-        nodeId: value.id,
+        nodeId: nodeId,
         field: key,
         label: name,
         desc: desc
@@ -105,7 +116,7 @@ var AttrsPanel = function AttrsPanel(_ref) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     return renderPanelItems(meta.props);
-  }, [value]);
+  }, [nodeId]);
   useEffect(function () {
     if (!open) {
       nextRef.current = null;
@@ -113,7 +124,7 @@ var AttrsPanel = function AttrsPanel(_ref) {
   }, [open]);
   return /*#__PURE__*/React.createElement("div", {
     id: "lc-painter-panel-attrs-container",
-    className: classNames(styles['lc-painter-panel-attrs'], _defineProperty(_defineProperty({}, styles.hidden, !value), styles.showNext, open))
+    className: classNames(styles['lc-painter-panel-attrs'], _defineProperty(_defineProperty({}, styles.hidden, !nodeId), styles.showNext, open))
   }, PropsComps, /*#__PURE__*/React.createElement(Drawer, {
     visible: open,
     width: 320,

package/es/lowcode/painter/components/DragDrop/DragDropContext.js

@@ -61,7 +61,7 @@ export default function (_ref) {
 }
 function pubEvent(event, eventName, ctx) {
   if (event.active && event.over && event.active.data.current.id !== event.over.data.current.id) {
-    var parentNode = ctx.componentMap.get(event.over.data.current.id).api.getSelfAndParentLCData().parent;
+    var parentNode = ctx.componentMap.get(event.over.data.current.id).api.getSelfAndParentData().parent;
 
     // console.log('event.over.data.current.type', event.over.data.current.type)
     var actionSide = getAction(event.over.data.current.type, event.over.data.current.component.component, event.active.rect.current.translated, event.over.rect, parentNode);

package/es/lowcode/painter/components/DragDrop/DragDropWrapper.js

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { cloneElement, useEffect } from 'react';
+import { useCreation } from 'ahooks';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { useContext } from "../../../engine/provider/ContextProvider";
-import { useCreation } from 'ahooks';
 import { Action } from "./DragDropContext";
 import { NO_DRAGABLE, NO_DROPABLE } from "../../../constants";
 export default function (_ref) {
@@ -33,6 +33,9 @@ export default function (_ref) {
       }
     }),
     setDropRef = _useDroppable.setNodeRef;
+  var _memoListeners = useCreation(function () {
+    return listeners;
+  }, []);
   useEffect(function () {
     var dom = getTargetDom();
     if (dom) {
@@ -41,7 +44,7 @@ export default function (_ref) {
     }
   }, []);
   var comp = useCreation(function () {
-    return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), listeners), attributes));
+    return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), _memoListeners), attributes));
   }, [id, children]);
   return comp;
 }