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

package/miniprogram_dist/vendor/wxml2canvas-2d/index.js

@@ -0,0 +1,169 @@
+import Element from './element';
+import Canvas from './canvas';
+
+/**
+ * 绘制 wxml 元素
+ * @param {Canvas} canvas 画布对象
+ * @param {Element} element wxml 元素
+ * @param {PageObject} page 页面实例对象
+ * @param {ComponentObject} component 组件实例对象
+ */
+const drawElement = async (canvas, element, page, component) => {
+  // 设置画布的当前 wxml 元素上下文（必要）
+  canvas.setElement(element);
+
+  canvas.setTransform();
+  canvas.drawBoxShadow();
+  canvas.drawBackgroundColor();
+  await canvas.drawBackgroundImage();
+  if ('src' in element) {
+    if ('objectFit' in element) {
+      await canvas.drawVideo();
+    } else {
+      await canvas.drawImage();
+    }
+  } else if ('text' in element.dataset || 'icon' in element.dataset) {
+    canvas.drawText();
+  } else if ('canvasId' in element) {
+    await canvas.drawCanvas(component ?? page);
+  }
+  canvas.drawBorder();
+  canvas.resetTransform();
+  canvas.restoreContext();
+};
+
+Component({
+  externalClasses: ['box-class'],
+  properties: {
+    // 根节点（容器）样式类名称
+    containerClass: {
+      type: String,
+      value: 'wxml2canvas-container',
+    },
+    // 内部节点样式类名称
+    itemClass: {
+      type: String,
+      value: 'wxml2canvas-item',
+    },
+    // 画布缩放比例
+    scale: {
+      type: Number,
+      value: 1,
+    },
+    // 是否使用离屏画布
+    offscreen: Boolean,
+  },
+  data: {
+    // 画布宽度
+    canvasWidth: 300,
+    // 画布高度
+    canvasHeight: 150,
+  },
+  methods: {
+    /**
+     * setData 同步版
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    setDataSync(data) {
+      return new Promise((resolve) => {
+        this.setData(data, resolve);
+      });
+    },
+    /**
+     * 绘制画布内容
+     * @param {PageObject} page 页面实例对象，默认当前页面实例
+     * @param {ComponentObject} component 组件实例对象
+     */
+    async draw(page, component) {
+      // 获取当前页面实例、组件实例
+      if (page && !page.route && !component) {
+        component = page;
+      } if (!page || !page.route) {
+        [page] = getCurrentPages().slice(-1);
+      }
+
+      const {
+        containerClass, itemClass, scale, offscreen,
+      } = this.data;
+      const fields = {
+        id: true,
+        size: true,
+        rect: true,
+        dataset: true,
+        properties: [
+          ...Element.COMMON_PROPERTIES,
+          ...Element.TEXT_PROPERTIES,
+          ...Element.IMAGE_PROPERTIES,
+          ...Element.VIDEO_PROPERTIES,
+          ...Element.CANVAS_PROPERTIES,
+          ...Element.RICHTEXT_PROPERTIES,
+        ],
+        computedStyle: [
+          ...Element.COMMON_COMPUTED_STYLE,
+          ...Element.TEXT_COMPUTED_STYLE,
+          ...Element.IMAGE_COMPUTED_STYLE,
+          ...Element.VIDEO_COMPUTED_STYLE,
+          ...Element.CANVAS_COMPUTED_STYLE,
+          ...Element.RICHTEXT_COMPUTED_STYLE,
+        ],
+      };
+      const [container] = await Element.getNodesRef(`.${containerClass}`, fields, page, component);
+      await this.setDataSync({
+        canvasWidth: container.width * scale,
+        canvasHeight: container.height * scale,
+      });
+      const nodes = await Element.getNodesRef(`.${containerClass} .${itemClass}`, fields, page, component);
+
+      const canvas = this.canvas = new Canvas(...(offscreen ? [this] : [this, '#wxml2canvas']));
+      await canvas.init(container, scale);
+
+      nodes.unshift(container);
+      await this.drawElements(nodes, fields, component ?? page);
+    },
+    /**
+     * 绘制元素节点合集
+     * @param {Array} elements 元素节点合集
+     * @param {Object} fields 元素节点相关信息
+     * @param {Object} parent 父节点实例
+     */
+    async drawElements(elements, fields, parent) {
+      const { itemClass } = this.data;
+      // 绘制内层各 wxml 元素
+      // eslint-disable-next-line no-restricted-syntax
+      for (const item of elements) {
+        const itemElement = new Element(item);
+        if (item.dataset.component) {
+          const child = parent.selectComponent(`#${item.id}`);
+          const childElements = await Element.getNodesRef(`.${itemClass}`, fields, child);
+          await this.drawElements(childElements, fields, child);
+        } else {
+          await drawElement(this.canvas, itemElement, parent);
+        }
+      }
+    },
+    /**
+     * 把画布内容导出生成图片
+     * @param {Boolean} original 是否使用实机表现作为导出图片的尺寸
+     * @returns {Promise<String>} 图片临时路径
+     */
+    async toTempFilePath(original = true) {
+      const tempFilePath = await this.canvas.toTempFilePath(original);
+      return tempFilePath;
+    },
+    /**
+     * 导出画布至 Data URI
+     * @returns {String} Data URI
+     */
+    toDataURL() {
+      return this.canvas.toDataURL();
+    },
+    /**
+     * 获取画布的像素数据
+     * @returns {ImageData} imageData
+     */
+    getImageData() {
+      return this.canvas.getImageData();
+    },
+  },
+});

package/miniprogram_dist/vendor/wxml2canvas-2d/index.json

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

package/miniprogram_dist/vendor/wxml2canvas-2d/index.wxml

@@ -0,0 +1,7 @@
+<canvas
+  wx:if="{{!offscreen}}"
+  type="2d"
+  id="wxml2canvas"
+  class="wxml2canvas box-class"
+  style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;"
+/>

package/miniprogram_dist/vendor/wxml2canvas-2d/index.wxss

@@ -0,0 +1,5 @@
+.wxml2canvas {
+  position: fixed;
+  left: 9999px;
+  top: -9999px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-component-miniprogram",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "miniprogram": "miniprogram_dist",

package/src/components/card-layout/elements/custom-element/index.wxml

@@ -1,5 +1,7 @@
-<view class="km-node km-node--custom" style="{{wrapperStyle}}">
-  <view class="km-node__custom" style="{{contentStyle}}">
-    <slot name="{{element.id}}"></slot>
+<template name="custom-element">
+  <view class="km-node km-node--custom" style="{{wrapperStyle}}">
+    <view class="km-node__custom" style="{{contentStyle}}">
+      <slot name="{{element.id}}"></slot>
+    </view>
   </view>
-</view>
+</template>

package/src/components/card-layout/elements/icon-element/index.wxml

@@ -1,5 +1,7 @@
-<view class="km-node km-node--icon" style="{{wrapperStyle}}">
-  <view class="km-node__icon icon" style="{{contentStyle}}">
-    {{iconText}}
+<template name="icon-element">
+  <view class="km-node km-node--icon" style="{{wrapperStyle}}">
+    <view class="km-node__icon icon" style="{{contentStyle}}">
+      {{iconText}}
+    </view>
   </view>
-</view>
+</template>

package/src/components/card-layout/elements/image-element/index.wxml

@@ -1,8 +1,10 @@
-<view class="km-node" style="{{wrapperStyle}}">
-  <image
-    class="km-node__image"
-    style="{{contentStyle}}"
-    src="{{imageSrc}}"
-    mode="{{mode}}"
-  />
-</view>
+<template name="image-element">
+  <view class="km-node" style="{{wrapperStyle}}">
+    <image
+      class="km-node__image"
+      style="{{contentStyle}}"
+      src="{{imageSrc}}"
+      mode="{{mode}}"
+    />
+  </view>
+</template>

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

@@ -1,3 +1,4 @@
+<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')}}">
@@ -40,3 +41,4 @@
     </block>
   </view>
 </view>
+</template>

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

@@ -3,10 +3,6 @@
   color: inherit;
 }
 
-.km-node--text {
-  /* overflow hidden if needed */
-}
-
 .km-node--text text {
   display: inline;
 }

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

@@ -1,9 +1,3 @@
 {
-  "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"
-  }
+  "component": true
 }

package/src/components/card-layout/index.ts

@@ -2,23 +2,42 @@ import type {
   CardElement,
   CardLayoutInput,
   CardLayoutSchema,
+  CustomElement,
+  IconElement,
+  ImageElement,
   LayoutPanelElement,
+  TextElement,
 } from '../../vendor/km-card-layout-core/index';
 import {
   buildBackgroundStyle,
+  buildBaseContentStyle,
   buildCardStyle,
+  buildImageContentStyle,
   buildPanelContentStyle,
+  buildTextContentStyle,
+  buildTextIconMeta,
   buildWrapperStyle,
+  getIconName,
+  getImageSrc,
+  getTextValue,
   normalizeLayout,
   processCardLayout,
   styleObjectToString,
 } from '../../vendor/km-card-layout-core/index';
+import { ICON_CODE_MAP } from './icon-map';
 
 type CompanyDuty = {
   company: string;
   duty: string;
 };
 
+const mapIconGlyph = (name?: string, fallback?: string) => {
+  if (!name) return fallback;
+  const glyph = ICON_CODE_MAP[name];
+  if (glyph) return String.fromCharCode(parseInt(glyph, 16));
+  return fallback || name;
+};
+
 
 
 const EMPTY_COMPANY_DUTY: CompanyDuty = {
@@ -85,14 +104,23 @@ const handleSpecialFields = (data: { user: Record<string, any> }) => {
   };
 };
 
+type RenderElement = CardElement & {
+  wrapperStyle?: string;
+  contentStyle?: string;
+  imageSrc?: string;
+  mode?: string;
+  iconText?: string;
+  textValue?: string;
+  iconMeta?: any;
+  children?: RenderElement[];
+};
+
 type PanelElement = LayoutPanelElement & {
   wrapperStyle: string;
   contentStyle: string;
   children?: RenderElement[];
 };
 
-type RenderElement = CardElement | PanelElement;
-
 type RenderCard = {
   id: string;
   cardStyle: string;
@@ -111,27 +139,91 @@ const pickCardId = (layout: any, idx: number) => {
   return `card-${idx}`;
 };
 
-const decorateElements = (children: CardElement[] = []): RenderElement[] =>
-  (children || []).map(el => {
-    if (el.type === 'layout-panel') {
-      const panel = el as LayoutPanelElement;
-      return {
-        ...panel,
-        wrapperStyle: styleObjectToString(buildWrapperStyle(panel, 'rpx'), 'rpx'),
-        contentStyle: styleObjectToString(buildPanelContentStyle(panel, 'rpx'), 'rpx'),
-        children: decorateElements(panel.children || []),
-      };
+const decorateElements = (
+  children: CardElement[] = [],
+  rootData: Record<string, any>
+): RenderElement[] => {
+  const data = rootData || {};
+
+  return (children || []).map(el => {
+    const wrapperStyle = styleObjectToString(buildWrapperStyle(el, 'rpx'), 'rpx');
+
+    switch (el.type) {
+      case 'layout-panel': {
+        const panel = el as LayoutPanelElement;
+        return {
+          ...panel,
+          wrapperStyle,
+          contentStyle: styleObjectToString(buildPanelContentStyle(panel, 'rpx'), 'rpx'),
+          children: decorateElements(panel.children || [], rootData),
+        } as PanelElement;
+      }
+      case 'image': {
+        const imageEl = el as ImageElement;
+        const contentStyle = styleObjectToString(buildImageContentStyle(imageEl), 'rpx');
+        const imageSrc = getImageSrc(imageEl, data);
+        const mode = imageEl.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+        return {
+          ...imageEl,
+          wrapperStyle,
+          contentStyle,
+          imageSrc,
+          mode,
+        };
+      }
+      case 'icon': {
+        const iconEl = el as IconElement;
+        const contentStyle = styleObjectToString(buildBaseContentStyle(iconEl), 'rpx');
+        const name = getIconName(iconEl);
+        const iconText = mapIconGlyph(name, name || '');
+        return {
+          ...iconEl,
+          wrapperStyle,
+          contentStyle,
+          iconText,
+        };
+      }
+      case 'custom': {
+        const customEl = el as CustomElement;
+        const contentStyle = styleObjectToString(buildBaseContentStyle(customEl), 'rpx');
+        return {
+          ...customEl,
+          wrapperStyle,
+          contentStyle,
+        };
+      }
+      default: {
+        const textEl = el as TextElement;
+        const contentStyle = styleObjectToString(buildTextContentStyle(textEl, 'rpx'), 'rpx');
+        const textValue = getTextValue(textEl, data);
+        const iconRaw = buildTextIconMeta(textEl, 'rpx');
+        const iconMeta =
+          iconRaw && iconRaw.name
+            ? {
+                ...iconRaw,
+                text: mapIconGlyph(iconRaw.name, iconRaw.name),
+                wrapperStyle: styleObjectToString(iconRaw.wrapperStyle, 'rpx'),
+              }
+            : iconRaw;
+        return {
+          ...textEl,
+          wrapperStyle,
+          contentStyle,
+          textValue,
+          iconMeta,
+        };
+      }
     }
-    return el;
   });
+};
 
-const buildCards = (layouts: CardLayoutSchema[]) => {
+const buildCards = (layouts: CardLayoutSchema[], rootData: Record<string, any>) => {
   return layouts.map((layout, idx) => ({
     id: pickCardId(layouts[idx], idx),
     cardStyle: styleObjectToString(buildCardStyle(layout, 'rpx'), 'rpx'),
     backgroundImage: layout.backgroundImage || '',
     backgroundStyle: styleObjectToString(buildBackgroundStyle(layout, 'rpx'), 'rpx'),
-    elements: decorateElements(layout.children || []),
+    elements: decorateElements(layout.children || [], rootData),
   }));
 };
 
@@ -209,7 +301,7 @@ Component({
         return;
       }
       const normalizedLayouts = normalizeLayout(layoutInput);
-      const cards = buildCards(normalizedLayouts);
+      const cards = buildCards(normalizedLayouts, rootData);
       this.setData({ cards, rootData });
     },
   },

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

@@ -1,3 +1,8 @@
+<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">
@@ -19,10 +24,16 @@
 
 <template name="render-element">
   <block wx:if="{{el.type === 'image'}}">
-    <image-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="image-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, imageSrc: el.imageSrc, mode: el.mode}}"
+    />
   </block>
   <block wx:elif="{{el.type === 'icon'}}">
-    <icon-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="icon-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, iconText: el.iconText}}"
+    />
   </block>
   <block wx:elif="{{el.type === 'layout-panel'}}">
     <view class="km-node" style="{{el.wrapperStyle}}">
@@ -34,9 +45,15 @@
     </view>
   </block>
   <block wx:elif="{{el.type === 'custom'}}">
-    <custom-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="custom-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, element: el}}"
+    />
   </block>
   <block wx:else>
-    <text-element element="{{el}}" rootData="{{rootData}}" />
+    <template
+      is="text-element"
+      data="{{wrapperStyle: el.wrapperStyle, contentStyle: el.contentStyle, textValue: el.textValue, iconMeta: el.iconMeta, element: el}}"
+    />
   </block>
 </template>

package/src/components/card-layout/index.wxss

@@ -36,7 +36,90 @@
   box-sizing: border-box;
 }
 
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.km-node--text text {
+  display: inline;
+}
+
+.km-node__text {
+  width: 100%;
+  height: 100%;
+  display: block;
+  box-sizing: border-box;
+  text-align: inherit;
+}
+
+.km-node__text-content {
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.km-node__text-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__text-value {
+  display: inline-block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+.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{
+  display: inline-block;
+}
+
+
+.km-node--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
+.km-node--custom {
+  box-sizing: border-box;
+}
+
+.km-node__custom {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}