km-card-layout-component-miniprogram 0.1.19 → 0.1.20

package/miniprogram_dist/components/card-layout/elements/layout-panel-element/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+Component({
+    options: {
+        styleIsolation: "apply-shared",
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+        rootData: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: "",
+        contentStyle: "",
+    },
+    observers: {
+        element() {
+            this.rebuild();
+        },
+    },
+    methods: {
+        rebuild() {
+            const el = this.data.element;
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, "rpx"), "rpx");
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildPanelContentStyle)(el, "rpx"), "rpx");
+            this.setData({ wrapperStyle, contentStyle });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/layout-panel-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/layout-panel-element/index.wxml

@@ -0,0 +1,5 @@
+<view class="km-node itemClass" style="{{wrapperStyle}}">
+  <view class="km-node__panel itemClass" style="{{contentStyle}}">
+    <slot></slot>
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/layout-panel-element/index.wxss

@@ -0,0 +1,10 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node__panel {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

package/miniprogram_dist/components/card-layout/elements/text-element/index.js

@@ -2,17 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = require("../../../../vendor/km-card-layout-core/index");
 const icon_map_1 = require("../../icon-map");
-const mapIconGlyph = (name, fallback) => {
+const normalizeIconName = (name) => {
     if (!name)
-        return fallback;
-    const glyph = icon_map_1.ICON_CODE_MAP[name];
-    if (glyph)
-        return String.fromCharCode(parseInt(glyph, 16));
-    return fallback || name;
+        return "";
+    return name.startsWith("icon-") ? name.slice(5) : name;
+};
+const buildIconClassName = (name) => {
+    const normalized = normalizeIconName(name);
+    if (!normalized)
+        return "";
+    return `icon-${normalized}`;
+};
+const buildIconCode = (name) => {
+    const normalized = normalizeIconName(name);
+    if (!normalized)
+        return "";
+    return icon_map_1.ICON_CODE_MAP[normalized] || "";
 };
 Component({
     options: {
-        styleIsolation: 'apply-shared',
+        styleIsolation: "apply-shared",
     },
     properties: {
         element: {
@@ -25,28 +34,43 @@ Component({
         },
     },
     data: {
-        wrapperStyle: '',
-        contentStyle: '',
-        textValue: '',
+        wrapperStyle: "",
+        contentStyle: "",
+        textValue: "",
+        textStyle: "",
         iconMeta: null,
     },
     observers: {
-        element(el) {
+        element() {
+            this.rebuild();
+        },
+        rootData() {
+            this.rebuild();
+        },
+    },
+    methods: {
+        rebuild() {
+            const el = this.data.element;
             if (!el)
                 return;
             const data = this.data.rootData || {};
-            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
-            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(el, 'rpx'), 'rpx');
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, "rpx"), "rpx");
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(el, "rpx"), "rpx");
             const textValue = (0, index_1.getTextValue)(el, data);
-            const iconRaw = (0, index_1.buildTextIconMeta)(el, 'rpx');
+            const textStyle = (0, index_1.styleObjectToString)({
+                ...(0, index_1.buildTextContentStyle)(el, "rpx"),
+                ...(0, index_1.buildTextValueStyle)(el, "rpx"),
+            }, "rpx");
+            const iconRaw = (0, index_1.buildTextIconMeta)(el, "rpx");
             const iconMeta = iconRaw && iconRaw.name
                 ? {
                     ...iconRaw,
-                    text: mapIconGlyph(iconRaw.name, iconRaw.name),
-                    wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, 'rpx'),
+                    className: buildIconClassName(iconRaw.name),
+                    iconCode: buildIconCode(iconRaw.name),
+                    wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, "rpx"),
                 }
                 : iconRaw;
-            this.setData({ wrapperStyle, contentStyle, textValue, iconMeta });
+            this.setData({ wrapperStyle, contentStyle, textValue, textStyle, iconMeta });
         },
     },
 });

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxml

@@ -1,44 +1,18 @@
-<template name="text-element">
-<view class="km-node km-node--text" style="{{wrapperStyle}}">
-  <view class="km-node__text" style="{{contentStyle}}">
-    <block wx:if="{{(iconMeta && (iconMeta.name || iconMeta.text)) && (element.icon && element.icon.style !== 'text')}}">
-      <view class="km-node__text-content">
-
-        <!-- icon 在右侧 -->
-        <block wx:if="{{iconMeta && iconMeta.align === 'right'}}">
-          <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+<view class="km-node km-node--text canvas-item" style="{{wrapperStyle}}">
+  <view class="km-node__text canvas-item" style="{{contentStyle}}">
+    <block wx:if="{{iconMeta && iconMeta.name && (element.icon && element.icon.style !== 'text')}}">
+      <view class="km-node__text-content canvas-item">
           <view
-            class="km-node__text-icon--wrapper"
+            class="km-node__text-icon--wrapper canvas-item"
             style="{{iconMeta.wrapperStyle}}"
           >
-            <text
-              class="km-node__text-icon icon"
-              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
-            >{{iconMeta.text || iconMeta.name || ''}}</text>
+            <i class="km-node__text-icon icon {{iconMeta.className}} canvas-item" style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};" data-icon="{{iconMeta.iconCode}}" ></i>
           </view>
-        </block>
-
-        <!-- icon 在左侧 -->
-        <block wx:else>
-          <view
-            class="km-node__text-icon--wrapper"
-            style="{{iconMeta.wrapperStyle}}"
-          >
-            <text
-              class="km-node__text-icon icon"
-              style="font-size: {{iconMeta.size || '16px'}}; color: {{iconMeta.color || ''}}; margin-right: {{iconMeta.gap || ''}};"
-            >{{iconMeta.text || iconMeta.name || ''}}</text>
-          </view>
-          <text class="km-node__text-value">{{textValue || ''}}</text>
-        </block>
-
+          <text class="km-node__text-value canvas-item"  style="{{textStyle}}" data-text="{{textValue || ''}}">{{textValue || ''}}</text>
       </view>
     </block>
-
-    <!-- 无 icon -->
     <block wx:else>
-      <text class="km-node__text-value">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
+      <text class="km-node__text-value canvas-item"  style="{{textStyle}}" data-text="{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}">{{(element.icon && element.icon.style === 'text' && element.icon.enable) ? (element.label + '：') : ''}}{{textValue || ''}}</text>
     </block>
   </view>
 </view>
-</template>

package/miniprogram_dist/components/card-layout/elements/text-element/index.wxss

@@ -1,3 +1,5 @@
+@import "../icon-font.wxss";
+
 .km-node {
   box-sizing: border-box;
   color: inherit;
@@ -19,6 +21,7 @@
   display: inline-block;
   vertical-align: middle;
   height: 100%;
+  display: inline-flex;
 }
 
 .km-node__text-icon {
@@ -34,22 +37,6 @@
   vertical-align: middle;
 }
 
-@font-face {
-  font-family: 'km-icon';
-  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-.icon {
-  font-family: 'km-icon' !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.km-node__text-icon--wrapper{
+.km-node__text-icon--wrapper {
   display: inline-block;
-}
+}

package/miniprogram_dist/components/card-layout/index.js

@@ -2,18 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasCompanyDutyKey = exports.normalizeMoreCompany = void 0;
 const index_1 = require("../../vendor/km-card-layout-core/index");
-const icon_map_1 = require("./icon-map");
-const mapIconGlyph = (name, fallback) => {
-    if (!name)
-        return fallback;
-    const glyph = icon_map_1.ICON_CODE_MAP[name];
-    if (glyph)
-        return String.fromCharCode(parseInt(glyph, 16));
-    return fallback || name;
-};
 const EMPTY_COMPANY_DUTY = {
-    company: '',
-    duty: '',
+    company: "",
+    duty: "",
 };
 /**
  * 规范化 moreCardInfo.company，保证长度始终为 2
@@ -52,136 +43,54 @@ const handleSpecialFields = (data) => {
         ...data,
         user: {
             ...user,
-            baseCompanyDuty: user.company && user.duty
-                ? `${user.company} ${user.duty}`
-                : user.baseCompanyDuty,
+            baseCompanyDuty: user.company && user.duty ? `${user.company} ${user.duty}` : user.baseCompanyDuty,
             moreCardInfo: user.moreCardInfo
                 ? {
                     ...user.moreCardInfo,
                     company: Array.isArray(user.moreCardInfo.company)
-                        ? user.moreCardInfo.company.map(item => `${item.company} ${item.duty}`)
+                        ? user.moreCardInfo.company.map((item) => `${item.company} ${item.duty}`)
                         : user.moreCardInfo.company,
                 }
                 : user.moreCardInfo,
         },
     };
 };
-const ensureArray = (input) => {
-    if (!input)
-        return [];
-    return Array.isArray(input) ? input : [input];
-};
 const pickCardId = (layout, idx) => {
     if (layout && (layout.name || layout.id))
         return layout.name || layout.id;
     return `card-${idx}`;
 };
-const decorateElements = (children = [], rootData) => {
-    const data = rootData || {};
-    return (children || []).map(el => {
-        const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
-        switch (el.type) {
-            case 'layout-panel': {
-                const panel = el;
-                return {
-                    ...panel,
-                    wrapperStyle,
-                    contentStyle: (0, index_1.styleObjectToString)((0, index_1.buildPanelContentStyle)(panel, 'rpx'), 'rpx'),
-                    children: decorateElements(panel.children || [], rootData),
-                };
-            }
-            case 'image': {
-                const imageEl = el;
-                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildImageContentStyle)(imageEl), 'rpx');
-                const imageSrc = (0, index_1.getImageSrc)(imageEl, data);
-                const mode = imageEl.fit === 'contain' ? 'aspectFit' : 'aspectFill';
-                return {
-                    ...imageEl,
-                    wrapperStyle,
-                    contentStyle,
-                    imageSrc,
-                    mode,
-                };
-            }
-            case 'icon': {
-                const iconEl = el;
-                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(iconEl), 'rpx');
-                const name = (0, index_1.getIconName)(iconEl);
-                const iconText = mapIconGlyph(name, name || '');
-                return {
-                    ...iconEl,
-                    wrapperStyle,
-                    contentStyle,
-                    iconText,
-                };
-            }
-            case 'custom': {
-                const customEl = el;
-                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(customEl), 'rpx');
-                return {
-                    ...customEl,
-                    wrapperStyle,
-                    contentStyle,
-                };
-            }
-            default: {
-                const textEl = el;
-                const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildTextContentStyle)(textEl, 'rpx'), 'rpx');
-                const textValue = (0, index_1.getTextValue)(textEl, data);
-                const iconRaw = (0, index_1.buildTextIconMeta)(textEl, 'rpx');
-                const iconMeta = iconRaw && iconRaw.name
-                    ? {
-                        ...iconRaw,
-                        text: mapIconGlyph(iconRaw.name, iconRaw.name),
-                        wrapperStyle: (0, index_1.styleObjectToString)(iconRaw.wrapperStyle, 'rpx'),
-                    }
-                    : iconRaw;
-                return {
-                    ...textEl,
-                    wrapperStyle,
-                    contentStyle,
-                    textValue,
-                    iconMeta,
-                };
-            }
-        }
-    });
-};
-const buildCards = (layouts, rootData) => {
+const buildCards = (layouts) => {
     return layouts.map((layout, idx) => ({
         id: pickCardId(layouts[idx], idx),
-        cardStyle: (0, index_1.styleObjectToString)((0, index_1.buildCardStyle)(layout, 'rpx'), 'rpx'),
-        backgroundImage: layout.backgroundImage || '',
-        backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, 'rpx'), 'rpx'),
-        elements: decorateElements(layout.children || [], rootData),
+        cardStyle: (0, index_1.styleObjectToString)((0, index_1.buildCardStyle)(layout, "rpx"), "rpx"),
+        backgroundImage: layout.backgroundImage || "",
+        backgroundStyle: (0, index_1.styleObjectToString)((0, index_1.buildBackgroundStyle)(layout, "rpx"), "rpx"),
+        elements: layout.children || [],
     }));
 };
 const hasCompanyDutyKey = (schemas) => {
-    const TARGET_KEYS = new Set([
-        'company_duty_custom',
-        'company_duty_1',
-        'company_duty_2',
-    ]);
+    const TARGET_KEYS = new Set(["company_duty_custom", "company_duty_1", "company_duty_2"]);
     const traverse = (elements) => {
-        return elements.some(el => {
+        return elements.some((el) => {
             var _a;
             // 命中 key
             if (el.key && TARGET_KEYS.has(el.key)) {
                 return true;
             }
             // 递归 layout-panel
-            if (el.type === 'layout-panel' && ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            if (el.type === "layout-panel" && ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length)) {
                 return traverse(el.children);
             }
             return false;
         });
     };
-    return schemas.some(schema => traverse(schema.children));
+    return schemas.some((schema) => traverse(schema.children));
 };
 exports.hasCompanyDutyKey = hasCompanyDutyKey;
 Component({
     options: {
-        styleIsolation: 'apply-shared',
+        styleIsolation: "apply-shared",
     },
     properties: {
         layout: {
@@ -199,6 +108,7 @@ Component({
     data: {
         cards: [],
         rootData: {},
+        firstCard: [],
     },
     observers: {
         layout() {
@@ -216,15 +126,28 @@ Component({
     methods: {
         rebuild() {
             const data = normalizeMoreCompany(this.data.data);
-            const layoutInput = (0, exports.hasCompanyDutyKey)(this.data.layout) ? (0, index_1.processCardLayout)(this.data.layout, data) : this.data.layout;
+            const layoutInput = (0, exports.hasCompanyDutyKey)(this.data.layout)
+                ? (0, index_1.processCardLayout)(this.data.layout, data)
+                : this.data.layout;
             const rootData = handleSpecialFields(data);
             if (!layoutInput.length) {
                 this.setData({ cards: [], rootData });
                 return;
             }
             const normalizedLayouts = (0, index_1.normalizeLayout)(layoutInput);
-            const cards = buildCards(normalizedLayouts, rootData);
-            this.setData({ cards, rootData });
+            const cards = buildCards(normalizedLayouts);
+            this.setData({ cards, rootData, firstCard: [cards[0]] });
+        },
+        async handleDrawCanvas() {
+            try {
+                const canvas = this.selectComponent(`#layout-canvas`);
+                await canvas.draw(this);
+                const filePath = await canvas.toTempFilePath();
+                return filePath;
+            }
+            catch (_a) {
+                wx.showToast({ title: "保存失败", icon: "error" });
+            }
         },
     },
 });

package/miniprogram_dist/components/card-layout/index.json

@@ -1,3 +1,11 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "text-element": "./elements/text-element/index",
+    "image-element": "./elements/image-element/index",
+    "icon-element": "./elements/icon-element/index",
+    "custom-element": "./elements/custom-element/index",
+    "layout-panel-element": "./elements/layout-panel-element/index",
+    "wxml2canvas": "../../vendor/wxml2canvas-2d/index"
+  }
 }

package/miniprogram_dist/components/card-layout/index.wxml

@@ -1,59 +1,38 @@
-<import src="./elements/custom-element/index.wxml" />
-<import src="./elements/icon-element/index.wxml" />
-<import src="./elements/image-element/index.wxml" />
-<import src="./elements/text-element/index.wxml" />
-
-<view class="km-card-layout">
-  <block wx:for="{{cards}}" wx:key="id">
-    <view class="km-card-layout__item">
-      <view class="km-card" style="{{item.cardStyle}}">
-        <image
-          wx:if="{{item.backgroundImage}}"
-          class="km-card__bg"
-          style="{{item.backgroundStyle}}"
-          src="{{item.backgroundImage}}"
-          mode="aspectFill"
-        />
-        <block wx:for="{{item.elements}}" wx:key="id">
-          <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData}}" />
-        </block>
+<template name="layout-template">
+  <view class="km-card-layout layout-container">
+    <block wx:for="{{renderCards}}" wx:key="id">
+      <view class="km-card-layout__item canvas-item">
+        <view class="km-card canvas-item" style="{{item.cardStyle}}">
+          <image wx:if="{{item.backgroundImage}}" class="km-card__bg canvas-item" style="{{item.backgroundStyle}}" src="{{item.backgroundImage}}" mode="aspectFill" />
+          <block wx:for="{{item.elements}}" wx:key="id">
+            <template wx:if="{{item.visible !== false}}" is="render-element" data="{{el:item, rootData: rootData}}" />
+          </block>
+        </view>
       </view>
-    </view>
-  </block>
-</view>
-
+    </block>
+  </view>
+</template>
+<template is="layout-template" data="{{ renderCards: cards, rootData: rootData }}"></template>
+<!-- 暂时只绘制第一张卡片 -->
+<wxml2canvas id="layout-canvas" container-class="layout-container" item-class="canvas-item"></wxml2canvas>
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <template
-      is="image-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, imageSrc: el.imageSrc, mode: el.mode}}"
-    />
+    <image-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <template
-      is="icon-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, iconText: el.iconText}}"
-    />
+    <icon-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:elif="{{el.type === 'layout-panel'}}">
-    <view class="km-node" style="{{el.wrapperStyle}}">
-      <view class="km-node__panel" style="{{el.contentStyle}}">
-        <block wx:for="{{el.children}}" wx:key="id">
-          <template is="render-element" data="{{el:item, rootData: rootData}}" />
-        </block>
-      </view>
-    </view>
+    <layout-panel-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}">
+      <block wx:for="{{el.children}}" wx:key="id">
+        <template is="render-element" data="{{el:item, rootData: rootData}}" />
+      </block>
+    </layout-panel-element>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <template
-      is="custom-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, element: el}}"
-    />
+    <custom-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
   <block wx:else>
-    <template
-      is="text-element"
-      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, textValue: el.textValue, iconMeta: el.iconMeta, element: el}}"
-    />
+    <text-element id="node-{{el.id}}" class="canvas-item" data-component="{{true}}" element="{{el}}" rootData="{{rootData}}" />
   </block>
 </template>