km-card-layout-core 0.1.0 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # km-card-layout-core
 
-纯函数渲染核心：负责将布局 JSON 与数据合成渲染树，处理绑定路径、repeatable-group 展开、样式单位（px/rpx）等。
+纯函数渲染核心：负责将布局 JSON 与数据合成渲染树，处理绑定路径、样式单位（px/rpx）等。
 
 ## API
 

package/dist/index.js

@@ -25,7 +25,6 @@ __exportStar(require("./interface"), exports);
 /** ---------- 常量 ---------- */
 const DEFAULT_CARD_WIDTH = 343; // 默认卡片宽度（像素）
 const DEFAULT_CARD_HEIGHT = 210; // 默认卡片高度（像素）
-const DEFAULT_GROUP_GAP = 22; // repeatable-item 默认纵向间距
 const DIMENSION_PROPS = new Set([
     'width',
     'height',
@@ -51,7 +50,6 @@ const DIMENSION_PROPS = new Set([
     'gap',
     'rowGap',
     'columnGap',
-    'flexBasis',
 ]);
 /** ---------- 基础工具 ---------- */
 /**
@@ -125,9 +123,6 @@ const isObject = (val) => Boolean(val) && typeof val === 'object';
 const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
     ? el.layout
     : null;
-const getFlexLayout = (el) => el.layout && el.layout.mode === 'flex'
-    ? el.layout
-    : null;
 /** ---------- 布局与数据解析 ---------- */
 /**
  * 归一化布局输入（对象或 JSON 字符串），补齐宽高/容器/children 默认值。
@@ -188,30 +183,12 @@ const readByPath = (data, path) => {
     return cursor;
 };
 /**
- * 解析元素 binding 对应的数据：
- * - 全局 binding：直接基于根数据；
- * - repeatable-group：binding 等于/前缀 dataPath 或以 `$item.` 开头时，改用当前条目数据。
+ * Resolve element binding against provided data.
  */
 const resolveBindingValue = (binding, rootData, context) => {
     if (!binding)
         return undefined;
-    const { contextBinding, contextData } = context || {};
-    let target = rootData;
-    let path = binding;
-    // repeatable-group: binding 等于 dataPath 或以其为前缀时，切换到当前条目数据
-    if (contextBinding &&
-        (binding === contextBinding || binding.startsWith(`${contextBinding}.`))) {
-        target = contextData;
-        path =
-            binding === contextBinding
-                ? ''
-                : binding.slice(contextBinding.length + 1);
-    }
-    else if (binding.startsWith('$item.')) {
-        target = contextData;
-        path = binding.slice('$item.'.length);
-    }
-    const value = readByPath(target, path);
+    const value = readByPath(rootData, binding);
     return value === undefined ? undefined : value;
 };
 exports.resolveBindingValue = resolveBindingValue;
@@ -220,7 +197,7 @@ exports.resolveBindingValue = resolveBindingValue;
  * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
  */
 const buildWrapperStyle = (el, unit) => {
-    var _a, _b;
+    var _a;
     const abs = getAbsLayout(el);
     if (abs) {
         const textAlign = (_a = el === null || el === void 0 ? void 0 : el.style) === null || _a === void 0 ? void 0 : _a.textAlign;
@@ -235,65 +212,18 @@ const buildWrapperStyle = (el, unit) => {
             textAlign,
         }, unit);
     }
-    const flex = getFlexLayout(el);
-    if (!flex)
-        return '';
-    const item = flex.item || {};
-    return (0, exports.styleObjectToString)({
-        width: (0, exports.addUnit)(flex.width, unit),
-        height: (0, exports.addUnit)(flex.height, unit),
-        order: item.order,
-        flexGrow: item.flexGrow,
-        flexShrink: item.flexShrink,
-        flexBasis: item.flexBasis,
-        alignSelf: item.alignSelf,
-        boxSizing: 'border-box',
-        textAlign: (_b = el === null || el === void 0 ? void 0 : el.style) === null || _b === void 0 ? void 0 : _b.textAlign,
-    }, unit);
+    return '';
 };
 /**
  * padding 数组/数字转 CSS 缩写字符串。
  */
-const formatPadding = (padding, unit) => {
-    if (padding === undefined || padding === null)
-        return undefined;
-    if (typeof padding === 'number')
-        return (0, exports.addUnit)(padding, unit);
-    if (Array.isArray(padding)) {
-        const list = padding
-            .filter(v => v !== undefined && v !== null)
-            .map(v => (0, exports.addUnit)(v, unit));
-        if (!list.length)
-            return undefined;
-        if (list.length === 2)
-            return `${list[0]} ${list[1]}`;
-        if (list.length === 3)
-            return `${list[0]} ${list[1]} ${list[2]}`;
-        if (list.length >= 4)
-            return `${list[0]} ${list[1]} ${list[2]} ${list[3]}`;
-    }
-    return undefined;
-};
 /**
- * 构建 layout-panel 的容器样式（flex）。
+ * 构建 layout-panel 的容器样式（绝对布局容器）。
  */
 const buildPanelStyle = (el, unit) => {
-    const options = (el.container && el.container.options) || {};
     const style = {
-        display: 'flex',
-        flexDirection: options.direction || 'row',
-        flexWrap: options.wrap || 'nowrap',
-        justifyContent: options.justifyContent,
-        alignItems: options.alignItems,
-        padding: formatPadding(options.padding, unit),
+        display: 'block',
     };
-    if (options.gap && typeof options.gap === 'number') {
-        style.gap = (0, exports.addUnit)(options.gap, unit);
-    }
-    else if (options.gap && isObject(options.gap)) {
-        style.rowGap = (0, exports.addUnit)(options.gap.row, unit);
-        style.columnGap = (0, exports.addUnit)(options.gap.column, unit);
-    }
     return (0, exports.styleObjectToString)(style, unit);
 };
 /**
@@ -304,106 +234,47 @@ const normalizeElementStyle = (style, unit) => {
         return '';
     return (0, exports.styleObjectToString)(style, unit);
 };
-/** ---------- Repeatable 相关 ---------- */
-/**
- * 通过前两条 item 的布局推断间距，不足则回落 DEFAULT_GROUP_GAP。
- */
-const inferGroupGap = (group) => {
-    const items = group.items || [];
-    if (items.length >= 2) {
-        const first = (items[0].elements || []).map(getAbsLayout).find(Boolean);
-        const second = (items[1].elements || []).map(getAbsLayout).find(Boolean);
-        if (first &&
-            second &&
-            typeof first.y === 'number' &&
-            typeof second.y === 'number') {
-            return Math.abs(second.y - first.y);
-        }
-    }
-    return DEFAULT_GROUP_GAP;
-};
-/**
- * 展开 repeatable-group 为具体元素实例，并附带条目数据。
- * 优先使用设计器保存的 `items`；否则按推断间距克隆 `itemTemplate`。
- */
-const materializeRepeatableItems = (group, rootData) => {
-    const result = [];
-    const dataset = (0, exports.resolveBindingValue)(group.dataPath, rootData, {}) || [];
-    const dataList = Array.isArray(dataset) ? dataset : [];
-    const maxItems = group.maxItems ||
-        dataList.length ||
-        (group.items || []).length ||
-        (group.itemTemplate || []).length;
-    const template = (group.items && group.items[0] && group.items[0].elements) ||
-        group.itemTemplate ||
-        [];
-    const gap = inferGroupGap(group);
-    // Use saved items (from designer) first
-    if (group.items && group.items.length) {
-        group.items.slice(0, maxItems).forEach((item, idx) => {
-            const payload = dataList[idx] !== undefined ? dataList[idx] : item.data;
-            (item.elements || []).forEach(el => {
-                result.push({
-                    element: el,
-                    contextData: payload,
-                    contextBinding: group.dataPath,
-                });
-            });
-        });
-        return result;
-    }
-    // Otherwise clone from template by gap
-    dataList.slice(0, maxItems).forEach((payload, idx) => {
-        template.forEach(el => {
-            const abs = getAbsLayout(el);
-            const cloned = abs
-                ? {
-                    ...el,
-                    layout: { ...abs, y: abs.y + idx * gap },
-                }
-                : el;
-            result.push({
-                element: cloned,
-                contextData: payload,
-                contextBinding: group.dataPath,
-            });
-        });
-    });
-    return result;
+const buildTextIcon = (el, unit) => {
+    var _a, _b, _c;
+    const icon = el.icon;
+    if (!icon || icon.enable === false)
+        return undefined;
+    const style = icon.style || 'fill';
+    const baseName = el.key || el.binding || el.id;
+    let name;
+    if (style === 'dot')
+        name = 'round';
+    else if (style === 'line')
+        name = baseName ? `${baseName}-line` : undefined;
+    else
+        name = baseName || undefined;
+    if (!name)
+        return undefined;
+    const size = icon.size !== undefined && icon.size !== null
+        ? icon.size
+        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
+    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+    const color = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
+    return {
+        name: `${name}`,
+        text: `${name}`,
+        size: (0, exports.addUnit)(size, unit),
+        gap: (0, exports.addUnit)(gap, unit),
+        color: color,
+        align: icon.align || 'left',
+    };
 };
 /** ---------- 渲染树构建 ---------- */
 /**
- * 将 children 展开为渲染节点，处理 repeatable-group 展开与 mutualExcludes 隐藏。
+ * 将 children 展开为渲染节点。
  */
 const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
     if (!Array.isArray(children))
         return [];
-    // Mark mutually exclusive bindings to hide them when repeatable-group is present
-    const excluded = new Set();
-    children.forEach(el => {
-        if (el && el.type === 'repeatable-group' && !!el.visible) {
-            (el.mutualExcludes || []).forEach(b => excluded.add(b));
-        }
-    });
     const nodes = [];
     children.forEach(el => {
         if (!el || el.visible === false)
             return;
-        if (el.type === 'repeatable-group') {
-            const instances = materializeRepeatableItems(el, rootData);
-            instances.forEach(({ element, contextData, contextBinding }) => {
-                const node = buildNode(element, rootData, unit, {
-                    ...context,
-                    contextData,
-                    contextBinding,
-                });
-                if (node)
-                    nodes.push(node);
-            });
-            return;
-        }
-        if (el.binding && excluded.has(el.binding))
-            return;
         const node = buildNode(el, rootData, unit, context);
         if (node)
             nodes.push(node);
@@ -441,6 +312,7 @@ const buildNode = (el, rootData, unit, context) => {
             contentStyle: textStyle,
             text: `${value}`,
             visible: !!el.visible,
+            icon: buildTextIcon(el, unit),
         };
     }
     if (el.type === 'image') {
@@ -477,15 +349,7 @@ const buildNode = (el, rootData, unit, context) => {
             visible: !!el.visible,
         };
     }
-    // Unknown type fallback to simple text node
-    return {
-        id: el.id,
-        type: 'text',
-        wrapperStyle,
-        contentStyle: baseStyle,
-        text: el.defaultValue || '',
-        visible: !!el.visible,
-    };
+    return null;
 };
 /**
  * 主入口：合并布局 Schema 与数据，生成供前端使用的渲染结果。
@@ -521,4 +385,3 @@ const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
     });
 };
 exports.buildRenderResult = buildRenderResult;
-__exportStar(require("./utils"), exports);

package/dist/utils.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backgroundChange = backgroundChange;
+exports.stripLayoutBindings = stripLayoutBindings;
+exports.applyItemCollectBindings = applyItemCollectBindings;
 function backgroundChange(bg, layout) {
     const toNameArray = (name) => {
         if (Array.isArray(name))
@@ -43,16 +45,6 @@ function backgroundChange(bg, layout) {
                 children: traverse(el.children || []),
             };
         }
-        if (el.type === 'repeatable-group') {
-            return {
-                ...el,
-                itemTemplate: traverse(el.itemTemplate || []),
-                items: (el.items || []).map(item => ({
-                    ...item,
-                    elements: traverse(item.elements || []),
-                })),
-            };
-        }
         return applySpecialColor(el);
     });
     return {
@@ -62,3 +54,68 @@ function backgroundChange(bg, layout) {
         children: traverse(layout.children || []),
     };
 }
+function stripLayoutBindings(layouts = []) {
+    const targetLayouts = Array.isArray(layouts) ? layouts : [];
+    const stripElement = (el) => {
+        const { binding: _b, defaultValue: _d, ...rest } = el;
+        if (el.type === 'layout-panel') {
+            return {
+                ...rest,
+                children: (el.children || []).map(stripElement),
+            };
+        }
+        return rest;
+    };
+    return targetLayouts.map(layout => ({
+        ...layout,
+        children: (layout.children || []).map(stripElement),
+    }));
+}
+/**
+ * 应用元素数据绑定字段
+ * @param layouts 布局
+ * @param items 绑定元素数据
+ * @returns
+ */
+function applyItemCollectBindings(layouts = [], items = []) {
+    const targetLayouts = Array.isArray(layouts) ? layouts : [];
+    const metaMap = new Map();
+    const metaList = Array.isArray(items) ? items : [];
+    metaList.forEach(item => {
+        if (item && item.id !== undefined && item.id !== null) {
+            metaMap.set(String(item.id), item);
+        }
+    });
+    const assignBinding = (el) => {
+        const meta = metaMap.get(String(el.id));
+        const binding = meta && meta.bind !== undefined && meta.bind !== null
+            ? meta.bind
+            : el.binding;
+        const defaultValue = meta && meta.default !== undefined ? meta.default : el.defaultValue;
+        const key = meta && meta.key !== undefined ? meta.key : el.key;
+        const base = { ...el };
+        if (binding !== undefined)
+            base.binding = binding;
+        else
+            delete base.binding;
+        if (defaultValue !== undefined)
+            base.defaultValue = defaultValue;
+        else
+            delete base.defaultValue;
+        if (key !== undefined)
+            base.key = key;
+        else
+            delete base.key;
+        if (el.type === 'layout-panel') {
+            return {
+                ...base,
+                children: (el.children || []).map(assignBinding),
+            };
+        }
+        return base;
+    };
+    return targetLayouts.map(layout => ({
+        ...layout,
+        children: (layout.children || []).map(assignBinding),
+    }));
+}