@idraw/core 0.4.0-beta.9 → 0.4.0

package/dist/esm/{middleware → middlewares}/selector/util.js

@@ -1,4 +1,4 @@
-import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, limitAngle } from '@idraw/util';
+import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
 function parseRadian(angle) {
     return (angle * Math.PI) / 180;
 }
@@ -9,11 +9,11 @@ function changeMoveDistDirect(moveDist, moveDirect) {
     return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
 }
 export function isPointInViewActiveVertexes(p, opts) {
-    const { ctx, viewScaleInfo, viewSizeInfo, vertexes } = opts;
-    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo, viewSizeInfo });
-    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo, viewSizeInfo });
-    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo, viewSizeInfo });
-    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo, viewSizeInfo });
+    const { ctx, viewScaleInfo, vertexes } = opts;
+    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo });
+    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo });
+    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo });
+    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo });
     ctx.beginPath();
     ctx.moveTo(v0.x, v0.y);
     ctx.lineTo(v1.x, v1.y);
@@ -39,7 +39,7 @@ export function isPointInViewActiveGroup(p, opts) {
     return isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo });
 }
 export function getPointTarget(p, opts) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const target = {
         type: null,
         elements: [],
@@ -49,8 +49,11 @@ export function getPointTarget(p, opts) {
     };
     const { ctx, data, calculator, selectedElements, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, selectedElementController } = opts;
     if (selectedElementController) {
-        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight } = selectedElementController;
+        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
         const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
+        if ((selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) === 1 && ((_b = (_a = selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.rotatable) !== false) {
+            ctrls.push(rotate);
+        }
         for (let i = 0; i < ctrls.length; i++) {
             const ctrl = ctrls[i];
             if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
@@ -58,6 +61,7 @@ export function getPointTarget(p, opts) {
                 if (selectedElements && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) > 0) {
                     target.groupQueue = groupQueue || [];
                     target.elements = [selectedElements[0]];
+                    return target;
                 }
                 break;
             }
@@ -65,7 +69,7 @@ export function getPointTarget(p, opts) {
     }
     if (groupQueue && Array.isArray(groupQueue) && groupQueue.length > 0) {
         const lastGroup = groupQueue[groupQueue.length - 1];
-        if (((_a = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _a === void 0 ? void 0 : _a.children) && Array.isArray((_b = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _b === void 0 ? void 0 : _b.children)) {
+        if (((_c = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _c === void 0 ? void 0 : _c.children) && Array.isArray((_d = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _d === void 0 ? void 0 : _d.children)) {
             for (let i = lastGroup.detail.children.length - 1; i >= 0; i--) {
                 const child = lastGroup.detail.children[i];
                 const vertexes = calcElementVertexesInGroup(child, { groupQueue });
@@ -94,7 +98,7 @@ export function getPointTarget(p, opts) {
     }
     if (data) {
         const { index, element } = calculator.getPointElement(p, { data, viewScaleInfo, viewSizeInfo });
-        if (index >= 0 && element && ((_c = element === null || element === void 0 ? void 0 : element.operations) === null || _c === void 0 ? void 0 : _c.invisible) !== true) {
+        if (index >= 0 && element && ((_e = element === null || element === void 0 ? void 0 : element.operations) === null || _e === void 0 ? void 0 : _e.invisible) !== true) {
             target.elements = [element];
             target.type = 'over-element';
             return target;
@@ -410,7 +414,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX + centerMoveVerticalDist * Math.sin(radian);
                     centerY = centerY - centerMoveVerticalDist * Math.cos(radian);
@@ -545,7 +550,8 @@ export function resizeElement(elem, opts) {
                 let centerY = elemCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-                    moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
+                    moveHorizontalDist =
+                        0 - changeMoveDistDirect(moveHorizontalDist, limitRatio ? 0 - moveVerticalDist : moveHorizontalX);
                     const radian = parseRadian(angle);
                     const centerMoveVerticalDist = moveVerticalDist / 2;
                     centerX = centerX - centerMoveVerticalDist * Math.sin(radian);
@@ -671,11 +677,29 @@ export function resizeElement(elem, opts) {
     }
     return { x, y, w, h, angle: elem.angle };
 }
+export function rotateElement(elem, opts) {
+    const { x, y, w, h, angle = 0 } = elem;
+    const { center, start, end, viewScaleInfo } = opts;
+    const elemCenter = calcViewPointSize(center, {
+        viewScaleInfo
+    });
+    const startAngle = limitAngle(angle);
+    const changedRadian = calcRadian(elemCenter, start, end);
+    const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
+    return {
+        x,
+        y,
+        w,
+        h,
+        angle: endAngle
+    };
+}
 export function getSelectedListArea(data, opts) {
+    var _a;
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { calculator, viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
         return { indexes, uuids, elements };
     }
@@ -683,8 +707,12 @@ export function getSelectedListArea(data, opts) {
     const endX = Math.max(start.x, end.x);
     const startY = Math.min(start.y, end.y);
     const endY = Math.max(start.y, end.y);
-    data.elements.forEach((elem, idx) => {
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    for (let idx = 0; idx < data.elements.length; idx++) {
+        const elem = data.elements[idx];
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) === true) {
+            continue;
+        }
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
@@ -702,7 +730,7 @@ export function getSelectedListArea(data, opts) {
                 }
             }
         }
-    });
+    }
     return { indexes, uuids, elements };
 }
 export function calcSelectedElementsArea(elements, opts) {
@@ -711,14 +739,14 @@ export function calcSelectedElementsArea(elements, opts) {
         return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo } = opts;
     let prevElemSize = null;
     for (let i = 0; i < elements.length; i++) {
         const elem = elements[i];
         if ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
             continue;
         }
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
         if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
             const ves = rotateElementVertexes(elemSize);
             if (ves.length === 4) {
@@ -762,28 +790,3 @@ export function isElementInGroup(elem, group) {
     }
     return false;
 }
-export function calcMoveInGroup(start, end, groupQueue) {
-    let moveX = end.x - start.x;
-    let moveY = end.y - start.y;
-    const pointGroupQueue = [];
-    groupQueue.forEach((group) => {
-        const { x, y, w, h, angle = 0 } = group;
-        pointGroupQueue.push({
-            x,
-            y,
-            w,
-            h,
-            angle: 0 - angle
-        });
-    });
-    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-        const startInGroup = rotatePointInGroup(start, pointGroupQueue);
-        const endInGroup = rotatePointInGroup(end, pointGroupQueue);
-        moveX = endInGroup.x - startInGroup.x;
-        moveY = endInGroup.y - startInGroup.y;
-    }
-    return {
-        moveX,
-        moveY
-    };
-}

package/dist/esm/middlewares/text-editor/index.d.ts

@@ -0,0 +1,20 @@
+import type { Middleware, CoreEventMap, Element, ViewScaleInfo, ElementPosition } from '@idraw/types';
+import { coreEventKeys } from '../../config';
+type TextEditEvent = {
+    element: Element<'text'>;
+    position: ElementPosition;
+    groupQueue: Element<'group'>[];
+    viewScaleInfo: ViewScaleInfo;
+};
+type TextChangeEvent = {
+    element: {
+        uuid: string;
+        detail: {
+            text: string;
+        };
+    };
+    position: ElementPosition;
+};
+type ExtendEventMap = Record<typeof coreEventKeys.TEXT_EDIT, TextEditEvent> & Record<typeof coreEventKeys.TEXT_CHANGE, TextChangeEvent>;
+export declare const MiddlewareTextEditor: Middleware<ExtendEventMap, CoreEventMap & ExtendEventMap>;
+export {};

package/dist/esm/middlewares/text-editor/index.js

@@ -0,0 +1,286 @@
+import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy, updateElementInList } from '@idraw/util';
+import { coreEventKeys } from '../../config';
+const defaultElementDetail = getDefaultElementDetailConfig();
+export const MiddlewareTextEditor = (opts) => {
+    const { eventHub, boardContent, viewer, sharer, calculator } = opts;
+    const canvas = boardContent.boardContext.canvas;
+    const container = opts.container || document.body;
+    let textarea = document.createElement('div');
+    textarea.setAttribute('contenteditable', 'true');
+    let canvasWrapper = document.createElement('div');
+    let mask = document.createElement('div');
+    let activeElem = null;
+    let activePosition = [];
+    let originText = '';
+    const id = `idraw-middleware-text-editor-${Math.random().toString(26).substring(2)}`;
+    mask.setAttribute('id', id);
+    canvasWrapper.appendChild(textarea);
+    canvasWrapper.style.position = 'absolute';
+    mask.appendChild(canvasWrapper);
+    mask.style.position = 'fixed';
+    mask.style.top = '0';
+    mask.style.bottom = '0';
+    mask.style.left = '0';
+    mask.style.right = '0';
+    mask.style.display = 'none';
+    container.appendChild(mask);
+    const showTextArea = (e) => {
+        resetCanvasWrapper();
+        resetTextArea(e);
+        mask.style.display = 'block';
+        originText = '';
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            sharer.setActiveOverrideElemenentMap({
+                [activeElem.uuid]: {
+                    operations: { invisible: true }
+                }
+            });
+            originText = activeElem.detail.text || '';
+            viewer.drawFrame();
+        }
+    };
+    const hideTextArea = () => {
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            const map = sharer.getActiveOverrideElemenentMap();
+            if (map) {
+                delete map[activeElem.uuid];
+            }
+            sharer.setActiveOverrideElemenentMap(map);
+            viewer.drawFrame();
+        }
+        mask.style.display = 'none';
+        activeElem = null;
+        activePosition = [];
+    };
+    const getCanvasRect = () => {
+        const clientRect = canvas.getBoundingClientRect();
+        const { left, top, width, height } = clientRect;
+        return { left, top, width, height };
+    };
+    const createBox = (opts) => {
+        const { size, parent } = opts;
+        const div = document.createElement('div');
+        const { x, y, w, h } = size;
+        const angle = limitAngle(size.angle || 0);
+        div.style.position = 'absolute';
+        div.style.left = `${x}px`;
+        div.style.top = `${y}px`;
+        div.style.width = `${w}px`;
+        div.style.height = `${h}px`;
+        div.style.transform = `rotate(${angle}deg)`;
+        parent.appendChild(div);
+        return div;
+    };
+    const resetTextArea = (e) => {
+        const { viewScaleInfo, element, groupQueue } = e;
+        const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+        if (canvasWrapper.children) {
+            Array.from(canvasWrapper.children).forEach((child) => {
+                child.remove();
+            });
+        }
+        let parent = canvasWrapper;
+        for (let i = 0; i < groupQueue.length; i++) {
+            const group = groupQueue[i];
+            const { x, y, w, h } = group;
+            const angle = limitAngle(group.angle || 0);
+            const size = {
+                x: x * scale,
+                y: y * scale,
+                w: w * scale,
+                h: h * scale,
+                angle
+            };
+            if (i === 0) {
+                size.x += offsetLeft;
+                size.y += offsetTop;
+            }
+            parent = createBox({ size, parent });
+        }
+        const detail = Object.assign(Object.assign({}, defaultElementDetail), element.detail);
+        let elemX = element.x * scale + offsetLeft;
+        let elemY = element.y * scale + offsetTop;
+        let elemW = element.w * scale;
+        let elemH = element.h * scale;
+        if (groupQueue.length > 0) {
+            elemX = element.x * scale;
+            elemY = element.y * scale;
+            elemW = element.w * scale;
+            elemH = element.h * scale;
+        }
+        let justifyContent = 'center';
+        let alignItems = 'center';
+        if (detail.textAlign === 'left') {
+            justifyContent = 'start';
+        }
+        else if (detail.textAlign === 'right') {
+            justifyContent = 'end';
+        }
+        if (detail.verticalAlign === 'top') {
+            alignItems = 'start';
+        }
+        else if (detail.verticalAlign === 'bottom') {
+            alignItems = 'end';
+        }
+        textarea.style.display = 'inline-flex';
+        textarea.style.justifyContent = justifyContent;
+        textarea.style.alignItems = alignItems;
+        textarea.style.position = 'absolute';
+        textarea.style.left = `${elemX - 1}px`;
+        textarea.style.top = `${elemY - 1}px`;
+        textarea.style.width = `${elemW + 2}px`;
+        textarea.style.height = `${elemH + 2}px`;
+        textarea.style.transform = `rotate(${limitAngle(element.angle || 0)}deg)`;
+        textarea.style.boxSizing = 'border-box';
+        textarea.style.border = '1px solid #1973ba';
+        textarea.style.resize = 'none';
+        textarea.style.overflow = 'hidden';
+        textarea.style.wordBreak = 'break-all';
+        textarea.style.borderRadius = `${(typeof detail.borderRadius === 'number' ? detail.borderRadius : 0) * scale}px`;
+        textarea.style.background = `${detail.background || 'transparent'}`;
+        textarea.style.color = `${detail.color || '#333333'}`;
+        textarea.style.fontSize = `${detail.fontSize * scale}px`;
+        textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
+        textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
+        textarea.style.fontWeight = `${detail.fontWeight}`;
+        textarea.style.padding = '0';
+        textarea.style.margin = '0';
+        textarea.style.outline = 'none';
+        textarea.innerText = detail.text || '';
+        parent.appendChild(textarea);
+    };
+    const resetCanvasWrapper = () => {
+        const { left, top, width, height } = getCanvasRect();
+        canvasWrapper.style.position = 'absolute';
+        canvasWrapper.style.overflow = 'hidden';
+        canvasWrapper.style.top = `${top}px`;
+        canvasWrapper.style.left = `${left}px`;
+        canvasWrapper.style.width = `${width}px`;
+        canvasWrapper.style.height = `${height}px`;
+    };
+    const maskClickEvent = () => {
+        hideTextArea();
+    };
+    const textareaClickEvent = (e) => {
+        e.stopPropagation();
+    };
+    const textareaInputEvent = () => {
+        if (activeElem && activePosition) {
+            activeElem.detail.text = textarea.innerText || '';
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+                element: {
+                    uuid: activeElem.uuid,
+                    detail: {
+                        text: activeElem.detail.text
+                    }
+                },
+                position: [...(activePosition || [])]
+            });
+            calculator.modifyText(activeElem);
+            viewer.drawFrame();
+        }
+    };
+    const textareaBlurEvent = () => {
+        if (activeElem && activePosition) {
+            activeElem.detail.text = textarea.innerText || '';
+            eventHub.trigger(coreEventKeys.TEXT_CHANGE, {
+                element: {
+                    uuid: activeElem.uuid,
+                    detail: {
+                        text: activeElem.detail.text
+                    }
+                },
+                position: [...activePosition]
+            });
+            const data = sharer.getActiveStorage('data') || { elements: [] };
+            const updateContent = {
+                detail: {
+                    text: activeElem.detail.text
+                }
+            };
+            updateElementInList(activeElem.uuid, updateContent, data.elements);
+            eventHub.trigger(coreEventKeys.CHANGE, {
+                selectedElements: [
+                    Object.assign(Object.assign({}, activeElem), { detail: Object.assign(Object.assign({}, activeElem.detail), updateContent.detail) })
+                ],
+                data,
+                type: 'modifyElement',
+                modifyRecord: {
+                    type: 'modifyElement',
+                    time: Date.now(),
+                    content: {
+                        method: 'modifyElement',
+                        uuid: activeElem.uuid,
+                        before: {
+                            'detail.text': originText
+                        },
+                        after: {
+                            'detail.text': activeElem.detail.text
+                        }
+                    }
+                }
+            });
+            calculator.modifyText(activeElem);
+            viewer.drawFrame();
+        }
+        hideTextArea();
+    };
+    const textareaKeyDownEvent = (e) => {
+        e.stopPropagation();
+    };
+    const textareaKeyPressEvent = (e) => {
+        e.stopPropagation();
+    };
+    const textareaKeyUpEvent = (e) => {
+        e.stopPropagation();
+    };
+    const textareaWheelEvent = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    mask.addEventListener('click', maskClickEvent);
+    textarea.addEventListener('click', textareaClickEvent);
+    textarea.addEventListener('input', textareaInputEvent);
+    textarea.addEventListener('blur', textareaBlurEvent);
+    textarea.addEventListener('keydown', textareaKeyDownEvent);
+    textarea.addEventListener('keypress', textareaKeyPressEvent);
+    textarea.addEventListener('keyup', textareaKeyUpEvent);
+    textarea.addEventListener('wheel', textareaWheelEvent);
+    const textEditCallback = (e) => {
+        var _a;
+        if ((e === null || e === void 0 ? void 0 : e.position) && (e === null || e === void 0 ? void 0 : e.element) && ((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.type) === 'text') {
+            activeElem = e.element;
+            activePosition = e.position;
+        }
+        showTextArea(e);
+    };
+    return {
+        name: '@middleware/text-editor',
+        use() {
+            eventHub.on(coreEventKeys.TEXT_EDIT, textEditCallback);
+        },
+        disuse() {
+            eventHub.off(coreEventKeys.TEXT_EDIT, textEditCallback);
+            mask.removeEventListener('click', maskClickEvent);
+            textarea.removeEventListener('click', textareaClickEvent);
+            textarea.removeEventListener('input', textareaInputEvent);
+            textarea.removeEventListener('blur', textareaBlurEvent);
+            textarea.removeEventListener('keydown', textareaKeyDownEvent);
+            textarea.removeEventListener('keypress', textareaKeyPressEvent);
+            textarea.removeEventListener('keyup', textareaKeyUpEvent);
+            textarea.removeEventListener('wheel', textareaWheelEvent);
+            canvasWrapper.removeChild(textarea);
+            mask.removeChild(canvasWrapper);
+            container.removeChild(mask);
+            textarea.remove();
+            canvasWrapper.remove();
+            mask = null;
+            textarea = null;
+            canvasWrapper = null;
+            mask = null;
+            activeElem = null;
+            activePosition = null;
+            originText = null;
+        }
+    };
+};

package/dist/esm/record.d.ts

@@ -0,0 +1,5 @@
+import type { RecursivePartial, Element, ModifyRecord } from '@idraw/types';
+export declare function getModifyElementRecord(opts: {
+    modifiedElement: RecursivePartial<Omit<Element, 'uuid'>> & Pick<Element, 'uuid'>;
+    beforeElement: Element;
+}): ModifyRecord<'modifyElement'>;

package/dist/esm/record.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { toFlattenElement, get } from '@idraw/util';
+export function getModifyElementRecord(opts) {
+    const { modifiedElement, beforeElement } = opts;
+    const { uuid } = modifiedElement, restElement = __rest(modifiedElement, ["uuid"]);
+    const after = toFlattenElement(restElement);
+    let before = {};
+    Object.keys(after).forEach((key) => {
+        let val = get(beforeElement, key);
+        if (val === undefined && /(borderRadius|borderWidth)\[[0-9]{1,}\]$/.test(key)) {
+            key = key.replace(/\[[0-9]{1,}\]$/, '');
+            val = get(beforeElement, key);
+        }
+        before[key] = val;
+    });
+    before = toFlattenElement(before);
+    const record = {
+        type: 'modifyElement',
+        time: Date.now(),
+        content: {
+            method: 'modifyElement',
+            uuid,
+            before,
+            after
+        }
+    };
+    return record;
+}