km-card-layout-core 0.1.10 → 0.1.12

package/dist/render/builder.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRenderResult = exports.buildRenderNodes = void 0;
+const helpers_1 = require("../helpers");
+const layout_1 = require("../layout");
+const data_1 = require("../data");
+const buildCardStyle = (layout, unit) => (0, helpers_1.styleObjectToString)({
+    width: (0, helpers_1.addUnit)(layout.width, unit),
+    height: (0, helpers_1.addUnit)(layout.height, unit),
+    color: layout.fontColor,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    padding: layout.padding !== undefined ? (0, helpers_1.addUnit)(layout.padding, unit) : undefined,
+    position: 'relative',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    backgroundColor: 'transparent',
+}, unit);
+const buildBackgroundStyle = (layout, unit) => (0, helpers_1.styleObjectToString)({
+    zIndex: layout.backgroundZIndex,
+    borderRadius: layout.borderRadius !== undefined
+        ? (0, helpers_1.addUnit)(layout.borderRadius, unit)
+        : undefined,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+}, unit);
+const buildWrapperStyle = (el, unit) => {
+    const abs = (0, layout_1.getAbsLayout)(el);
+    if (!abs)
+        return '';
+    return (0, helpers_1.styleObjectToString)({
+        position: 'absolute',
+        left: (0, helpers_1.addUnit)(abs.x, unit),
+        top: (0, helpers_1.addUnit)(abs.y, unit),
+        width: (0, helpers_1.addUnit)(abs.width, unit),
+        height: (0, helpers_1.addUnit)(abs.height, unit),
+        zIndex: abs.zIndex,
+        boxSizing: 'border-box',
+    }, unit);
+};
+const buildPanelContentStyle = (el, unit) => (0, helpers_1.styleObjectToString)({
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    boxSizing: 'border-box',
+    ...(el.style || {}),
+}, unit);
+const buildTextContentStyle = (el, unit) => {
+    var _a, _b, _c;
+    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
+    const style = {
+        ...(el.style || {}),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        lineHeight: ((_b = el.style) === null || _b === void 0 ? void 0 : _b.lineHeight) !== undefined && ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== null
+            ? el.style.lineHeight
+            : '1',
+    };
+    if (textAlign)
+        style.textAlign = textAlign;
+    return (0, helpers_1.styleObjectToString)(style, unit);
+};
+const buildBaseContentStyle = (el, unit) => (0, helpers_1.styleObjectToString)({
+    ...(el.style || {}),
+    boxSizing: 'border-box',
+}, unit);
+const buildImageContentStyle = (el, unit) => {
+    const style = { ...(el.style || {}) };
+    const borderWidth = Number(style.borderWidth);
+    if (Number.isFinite(borderWidth) && borderWidth > 0) {
+        if (!style.borderStyle)
+            style.borderStyle = 'solid';
+        if (!style.borderColor)
+            style.borderColor = '#000000';
+    }
+    return (0, helpers_1.styleObjectToString)(style, unit);
+};
+const buildTextIcon = (el, unit) => {
+    var _a, _b, _c, _d;
+    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, helpers_1.addUnit)(size, unit),
+        gap: (0, helpers_1.addUnit)(gap, unit),
+        color: color,
+        align: icon.align || 'left',
+        wrapperStyle: (0, helpers_1.styleObjectToString)({
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) || '1',
+        }, unit),
+    };
+};
+const buildNode = (el, rootData, unit, context) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!el || el.visible === false)
+        return null;
+    const wrapperStyle = buildWrapperStyle(el, unit);
+    if (el.type === 'layout-panel') {
+        return {
+            id: el.id,
+            type: el.type,
+            visible: el.visible,
+            wrapperStyle,
+            contentStyle: buildPanelContentStyle(el, unit),
+            children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
+        };
+    }
+    const baseStyle = buildBaseContentStyle(el, unit);
+    if (el.type === 'text') {
+        const value = (_b = (_a = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildTextContentStyle(el, unit),
+            text: `${value}`,
+            visible: el.visible,
+            icon: buildTextIcon(el, unit),
+        };
+    }
+    if (el.type === 'image') {
+        const src = (_e = (_d = (_c = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== null && _c !== void 0 ? _c : el.defaultUrl) !== null && _d !== void 0 ? _d : el.defaultValue) !== null && _e !== void 0 ? _e : '';
+        const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: buildImageContentStyle(el, unit),
+            src,
+            mode,
+            visible: el.visible,
+        };
+    }
+    if (el.type === 'icon') {
+        const name = (_h = (_g = (_f = (0, data_1.resolveBindingValue)(el.binding, rootData, context)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: baseStyle,
+            name: `${name}`,
+            text: `${name}`,
+            visible: el.visible,
+        };
+    }
+    if (el.type === 'custom') {
+        return {
+            id: el.id,
+            type: el.type,
+            wrapperStyle,
+            contentStyle: baseStyle,
+            visible: el.visible,
+        };
+    }
+    return null;
+};
+const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
+    if (!Array.isArray(children))
+        return [];
+    const nodes = [];
+    children.forEach(el => {
+        if (!el || el.visible === false)
+            return;
+        const node = buildNode(el, rootData, unit, context);
+        if (node)
+            nodes.push(node);
+    });
+    return nodes;
+};
+exports.buildRenderNodes = buildRenderNodes;
+const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
+    const layouts = (0, layout_1.normalizeLayout)(layoutInput);
+    return layouts.map(layout => {
+        const cardStyle = buildCardStyle(layout, unit);
+        const bgStyle = buildBackgroundStyle(layout, unit);
+        const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
+        return {
+            renderTree,
+            cardStyle,
+            backgroundImage: layout.backgroundImage || '',
+            backgroundStyle: bgStyle,
+        };
+    });
+};
+exports.buildRenderResult = buildRenderResult;

package/dist/utils.js

@@ -1,131 +1,25 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.backgroundChange = backgroundChange;
-exports.stripLayoutBindings = stripLayoutBindings;
-exports.applyItemCollectBindings = applyItemCollectBindings;
-exports.getTemplateItems = getTemplateItems;
-exports.getTemplateBackgrounds = getTemplateBackgrounds;
-function backgroundChange(bg, layout) {
-    const toNameArray = (name) => {
-        if (Array.isArray(name))
-            return name.filter(Boolean);
-        if (!name)
-            return [];
-        return `${name}`
-            .split(',')
-            .map(n => n.trim())
-            .filter(Boolean);
-    };
-    const applySpecialColor = (el) => {
-        const extras = bg.fontColorExtra || [];
-        if (!extras.length)
-            return el;
-        const keys = [];
-        if (el.binding)
-            keys.push(String(el.binding));
-        if (el.id)
-            keys.push(String(el.id));
-        if (el.type === 'icon')
-            keys.push('icon');
-        if (el.type === 'custom')
-            keys.push('decor');
-        const matched = extras.find(sc => toNameArray(sc.name).some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n))));
-        if (!matched)
-            return el;
-        const baseStyle = { ...(el.style || {}) };
-        if (el.type === 'custom') {
-            return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
-        }
-        return { ...el, style: { ...baseStyle, color: matched.color } };
-    };
-    const traverse = (children = []) => children.map(el => {
-        if (!el)
-            return el;
-        if (el.type === 'layout-panel') {
-            return {
-                ...el,
-                children: traverse(el.children || []),
-            };
-        }
-        return applySpecialColor(el);
-    });
-    return {
-        ...layout,
-        backgroundImage: bg.imgUrl,
-        fontColor: bg.fontColor || layout.fontColor,
-        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),
-    }));
-}
-function getTemplateItems(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}
-function getTemplateBackgrounds(ids, items) {
-    const idArray = ids.split(',').map(id => id.trim());
-    return items.filter(item => idArray.includes(String(item.id)));
-}
+exports.DEFAULT_DECOR_COLOR = exports.resolveSpecialStyle = exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.backgroundChange = void 0;
+__exportStar(require("./bindings"), exports);
+var changeBackground_1 = require("./ops/changeBackground");
+Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
+Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
+Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
+Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
+Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: function () { return changeBackground_1.resolveSpecialStyle; } });
+Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });

package/helpers.ts

@@ -0,0 +1,76 @@
+const DIMENSION_PROPS = new Set([
+  'width',
+  'height',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'padding',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'margin',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'fontSize',
+  'lineHeight',
+  'borderRadius',
+  'borderWidth',
+  'letterSpacing',
+  'gap',
+  'rowGap',
+  'columnGap',
+]);
+
+export const toNumber = (value: unknown): number | undefined => {
+  const num = Number(value);
+  return Number.isFinite(num) ? num : undefined;
+};
+
+const toKebab = (key: string): string =>
+  key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+export const addUnit = (
+  value: string | number | undefined | null,
+  unit: 'px' | 'rpx'
+): string | undefined => {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') {
+    const ratio = unit === 'rpx' ? 2 : 1;
+    return `${value * ratio}${unit}`;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      const ratio = unit === 'rpx' ? 2 : 1;
+      return `${parsed * ratio}${unit}`;
+    }
+  }
+  return `${value}`;
+};
+
+export const styleObjectToString = (
+  style?: Record<string, any>,
+  unit: 'px' | 'rpx' = 'px'
+): string => {
+  if (!style) return '';
+  const pairs: string[] = [];
+  Object.keys(style).forEach(key => {
+    const value = style[key];
+    if (value === undefined || value === null || value === '') return;
+    const useUnit = DIMENSION_PROPS.has(key)
+      ? addUnit(value as any, unit)
+      : value;
+    if (useUnit === undefined || useUnit === null || useUnit === '') return;
+    pairs.push(`${toKebab(key)}:${useUnit}`);
+  });
+  return pairs.join(';');
+};
+
+export const isObject = (
+  val: unknown
+): val is Record<string, any> | any[] =>
+  Boolean(val) && typeof val === 'object';