km-card-layout-core 0.1.11 → 0.1.14

package/ops/changeBackground.ts

@@ -0,0 +1,179 @@
+import type { CardElement, CardLayoutSchema } from '../interface';
+import type { TemplateBackground } from '../interface/data/payload';
+
+type BackgroundColorMap = {
+  name: string | string[];
+  color: string;
+};
+
+type CoreBackgroundConfig = {
+  id?: string | number;
+  name?: string;
+  imageUrl?: string;
+  mainColor?: string;
+  specialColors?: BackgroundColorMap[];
+};
+
+const toNameArray = (name?: string | string[]) => {
+  if (Array.isArray(name)) return name.filter(Boolean);
+  if (!name) return [];
+  return `${name}`
+    .split(',')
+    .map(n => n.trim())
+    .filter(Boolean);
+};
+
+export function backgroundChange(
+  bg: TemplateBackground,
+  layout: CardLayoutSchema
+): CardLayoutSchema {
+  const applySpecialColor = (el: CardElement): CardElement => {
+    const extras = bg.fontColorExtra || [];
+    if (!extras.length) return el;
+
+    const keys: string[] = [];
+    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?.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: CardElement[] = []): CardElement[] =>
+    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 || []),
+  };
+}
+
+export const DEFAULT_DECOR_COLOR = '#94a3b8';
+
+export const resolveSpecialStyle = (
+  element: CardElement,
+  background?: CoreBackgroundConfig | null
+) => {
+  if (!background) return {};
+  const keys: string[] = [];
+  if (element.binding) keys.push(String(element.binding));
+  if (element.id) keys.push(String(element.id));
+  if (element.type === 'icon') keys.push('icon');
+  if (element.type === 'custom') keys.push('decor');
+
+  const matched = background.specialColors?.find(sc => {
+    const names = toNameArray(sc.name);
+    return names.some(n => keys.some(k => k?.startsWith(n)));
+  });
+
+  if (!matched) return {};
+  if (element.type === 'custom') {
+    return { backgroundColor: matched.color };
+  }
+  return { color: matched.color };
+};
+
+export const applySpecialStyle = (
+  el: CardElement,
+  background: CoreBackgroundConfig | null = null,
+  options: { overrideExisting?: boolean; defaultDecorColor?: string } = {}
+): CardElement => {
+  const specialStyle = resolveSpecialStyle(el, background);
+  const baseStyle = { ...(el.style || {}) };
+  const isCustom = el.type === 'custom';
+  const hasExplicit = isCustom
+    ? Boolean(baseStyle.backgroundColor || baseStyle.background)
+    : baseStyle.color !== undefined && baseStyle.color !== null;
+
+  const overrideExisting = options.overrideExisting === true;
+  const hasSpecial = Object.keys(specialStyle).length > 0;
+  const defaultDecorColor = options.defaultDecorColor || DEFAULT_DECOR_COLOR;
+
+  if (hasSpecial) {
+    if (hasExplicit && !overrideExisting) return el;
+    return { ...el, style: { ...baseStyle, ...specialStyle } };
+  }
+
+  if (overrideExisting && hasExplicit) {
+    const nextStyle = { ...baseStyle };
+    if (isCustom) {
+      nextStyle.backgroundColor = background?.mainColor || defaultDecorColor;
+    } else {
+      delete nextStyle.color;
+    }
+    return { ...el, style: nextStyle };
+  }
+
+  return el;
+};
+
+export const applyBackground = (
+  layout: CardLayoutSchema,
+  background: CoreBackgroundConfig,
+  _options: {
+    previousBackground?: CoreBackgroundConfig | null;
+    defaultDecorColor?: string;
+  } = {}
+): CardLayoutSchema => {
+  const bgId = Number(background.id);
+  const payload: TemplateBackground = {
+    id: Number.isFinite(bgId) ? bgId : 0,
+    name: background.name!,
+    imgUrl: background.imageUrl!,
+    fontColor: background.mainColor,
+    fontColorExtra:
+      background.specialColors?.map(sc => ({
+        name: sc.name,
+        color: sc.color,
+      })) || [],
+  };
+  return backgroundChange(payload, layout);
+};
+
+export const updateElementsStyle = (
+  layout: CardLayoutSchema,
+  targetIds: string[],
+  updates: Record<string, any>
+): CardLayoutSchema => {
+  const targets = new Set(targetIds);
+  return {
+    ...layout,
+    children: layout.children.map(el =>
+      targets.has(el.id)
+        ? { ...el, style: { ...(el.style || {}), ...updates } }
+        : el
+    ),
+  };
+};
+
+export const setElementVisible = (
+  layout: CardLayoutSchema[],
+  key: string,
+  visible: boolean
+): CardLayoutSchema[] => {
+  return layout.map(la => ({
+    ...la,
+    children: la.children.map(el => (el.id === key ? { ...el, visible } : el)),
+  }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "km-card-layout-core",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "Shared render helpers for CardMaster layout JSON (binding resolution, layout normalization).",
   "main": "dist/index.js",
   "types": "types.d.ts",

package/render/builder.ts

@@ -0,0 +1,287 @@
+import type {
+  CardElement,
+  IconElement,
+  ImageElement,
+  LayoutPanelElement,
+  TextElement,
+} from '../interface/elements';
+import type { CardLayoutSchema, CardLayoutInput } from '../interface/layout';
+import type {
+  BindingContext,
+  RenderNode,
+  RenderResult,
+} from '../interface/render';
+import { addUnit, styleObjectToString } from '../helpers';
+import { getAbsLayout, normalizeLayout } from '../layout';
+import { resolveBindingValue } from '../data';
+
+const buildCardStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
+  styleObjectToString(
+    {
+      width: addUnit(layout.width, unit),
+      height: addUnit(layout.height, unit),
+      color: layout.fontColor,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      padding:
+        layout.padding !== undefined ? addUnit(layout.padding, unit) : undefined,
+      position: 'relative',
+      overflow: 'hidden',
+      boxSizing: 'border-box',
+      backgroundColor: 'transparent',
+    },
+    unit
+  );
+
+const buildBackgroundStyle = (layout: CardLayoutSchema, unit: 'px' | 'rpx') =>
+  styleObjectToString(
+    {
+      zIndex: layout.backgroundZIndex,
+      borderRadius:
+        layout.borderRadius !== undefined
+          ? addUnit(layout.borderRadius, unit)
+          : undefined,
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+    },
+    unit
+  );
+
+const buildWrapperStyle = (el: CardElement, unit: 'px' | 'rpx'): string => {
+  const abs = getAbsLayout(el);
+  if (!abs) return '';
+  return styleObjectToString(
+    {
+      position: 'absolute',
+      left: addUnit(abs.x, unit),
+      top: addUnit(abs.y, unit),
+      width: addUnit(abs.width, unit),
+      height: addUnit(abs.height, unit),
+      zIndex: abs.zIndex,
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+};
+
+const buildPanelContentStyle = (
+  el: LayoutPanelElement,
+  unit: 'px' | 'rpx'
+) =>
+  styleObjectToString(
+    {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
+      ...(el.style || {}),
+    },
+    unit
+  );
+
+const buildTextContentStyle = (el: TextElement, unit: 'px' | 'rpx') => {
+  const textAlign =
+    (el.style?.textAlign as string | undefined) || el.align || undefined;
+  const style: Record<string, any> = {
+    ...(el.style || {}),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    lineHeight:
+      el.style?.lineHeight !== undefined && el.style?.lineHeight !== null
+        ? el.style.lineHeight
+        : '1',
+  };
+  if (textAlign) style.textAlign = textAlign;
+  return styleObjectToString(style, unit);
+};
+
+const buildBaseContentStyle = (el: CardElement, unit: 'px' | 'rpx') =>
+  styleObjectToString(
+    {
+      ...(el.style || {}),
+      boxSizing: 'border-box',
+    },
+    unit
+  );
+
+const buildImageContentStyle = (el: ImageElement, unit: 'px' | 'rpx') => {
+  const style: Record<string, any> = { ...(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 styleObjectToString(style, unit);
+};
+
+const buildTextIcon = (
+  el: TextElement,
+  unit: 'px' | 'rpx'
+): RenderNode['icon'] | undefined => {
+  const icon = el.icon;
+  if (!icon || icon.enable === false) return undefined;
+  
+  const style = icon.style || 'fill';
+  // el.extra.icon || 
+  const baseName = el.key || el.binding || el.id;
+  let name: string | undefined;
+  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
+      : (el.style?.fontSize as any);
+  const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
+  const color =
+    icon.color ??
+    ((typeof el.style?.color === 'string' ? el.style.color : undefined) as
+      | string
+      | undefined);
+
+  return {
+    name: `${name}`,
+    text: `${name}`,
+    size: addUnit(size as any, unit),
+    gap: addUnit(gap as any, unit),
+    color: color as any,
+    align: icon.align || 'left',
+    wrapperStyle: styleObjectToString(
+      {
+        height: el.style?.lineHeight || el.style?.fontSize,
+      },
+      unit
+    ),
+  };
+};
+
+const buildNode = (
+  el: CardElement,
+  rootData: Record<string, any>,
+  unit: 'px' | 'rpx',
+  context: BindingContext
+): RenderNode | null => {
+  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 as LayoutPanelElement, unit),
+      children: buildRenderNodes(el.children || [], rootData, unit, context),
+    };
+  }
+
+  const baseStyle = buildBaseContentStyle(el, unit);
+  if (el.type === 'text') {
+    const value =
+      resolveBindingValue(el.binding, rootData, context) ??
+      el.defaultValue ??
+      '';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildTextContentStyle(el as TextElement, unit),
+      text: `${value}`,
+      visible: el.visible,
+      icon: buildTextIcon(el as TextElement, unit),
+    };
+  }
+
+  if (el.type === 'image') {
+    const src =
+      resolveBindingValue(el.binding, rootData, context) ??
+      (el as ImageElement).defaultUrl ??
+      el.defaultValue ??
+      '';
+    const mode =
+      (el as ImageElement).fit === 'contain' ? 'aspectFit' : 'aspectFill';
+    return {
+      id: el.id,
+      type: el.type,
+      wrapperStyle,
+      contentStyle: buildImageContentStyle(el as ImageElement, unit),
+      src,
+      mode,
+      visible: el.visible,
+    };
+  }
+
+  if (el.type === 'icon') {
+    const name =
+      resolveBindingValue(el.binding, rootData, context) ??
+      (el as IconElement).name ??
+      el.defaultValue ??
+      '';
+    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;
+};
+
+export const buildRenderNodes = (
+  children: CardElement[],
+  rootData: Record<string, any>,
+  unit: 'px' | 'rpx' = 'px',
+  context: BindingContext = {}
+): RenderNode[] => {
+  if (!Array.isArray(children)) return [];
+
+  const nodes: RenderNode[] = [];
+  children.forEach(el => {
+    if (!el || el.visible === false) return;
+    const node = buildNode(el, rootData, unit, context);
+    if (node) nodes.push(node);
+  });
+
+  return nodes;
+};
+
+export const buildRenderResult = (
+  layoutInput: CardLayoutInput,
+  dataInput: Record<string, any>,
+  unit: 'px' | 'rpx' = 'px'
+): RenderResult => {
+  const layouts = normalizeLayout(layoutInput);
+  return layouts.map(layout => {
+    const cardStyle = buildCardStyle(layout, unit);
+    const bgStyle = buildBackgroundStyle(layout, unit);
+    const renderTree = buildRenderNodes(layout.children || [], dataInput || {}, unit);
+    return {
+      renderTree,
+      cardStyle,
+      backgroundImage: layout.backgroundImage || '',
+      backgroundStyle: bgStyle,
+    };
+  });
+};

package/types.d.ts

@@ -12,8 +12,6 @@ import type {
   CardLayoutSchema,
   RenderNode,
   RenderResult,
-  TemplateBackground,
-  TemplateItem,
 } from './interface';
 
 export function addUnit(
@@ -26,8 +24,37 @@ export function styleObjectToString(
   unit?: 'px' | 'rpx'
 ): string;
 
+export function toNumber(value: unknown): number | undefined;
+
+export function isObject(
+  val: unknown
+): val is Record<string, any> | any[];
+
 export function normalizeLayout(layout: CardLayoutInput): CardLayoutSchema[];
 
+export function sanitizeLayout(layout: CardLayoutSchema): CardLayoutSchema;
+
+export function sanitizeElement(element: CardElement): CardElement;
+
+export function roundToInt(value: number): number;
+
+export function getAbsLayout(
+  el: CardElement
+): import('./interface/elements').AbsoluteLayoutDefinition | null;
+
+export function collectBindings(elements?: CardElement[]): string[];
+
+export function normalizeId(
+  id?: string | number | null
+): number | string | undefined;
+
+export function parseLayout(input: unknown): CardLayoutSchema | null;
+
+export function areChildrenEqual(
+  a?: CardLayoutSchema | null,
+  b?: CardLayoutSchema | null
+): boolean;
+
 export function resolveBindingValue(
   binding: string | undefined,
   rootData: Record<string, any>,
@@ -40,9 +67,76 @@ export function stripLayoutBindings(
 
 export function applyItemCollectBindings(
   layouts: CardLayoutSchema[],
-  items?: TemplateItem[]
+  items?: import('./interface/data/payload').TemplateItem[]
 ): CardLayoutSchema[];
 
+export function getTemplateItems(
+  ids: string,
+  items: import('./interface/data/payload').TemplateItem[]
+): import('./interface/data/payload').TemplateItem[];
+
+export function getTemplateBackgrounds(
+  ids: string,
+  items: import('./interface/data/payload').TemplateBackground[]
+): import('./interface/data/payload').TemplateBackground[];
+
+export function backgroundChange(
+  bg: import('./interface/data/payload').TemplateBackground,
+  layout: CardLayoutSchema
+): CardLayoutSchema;
+
+export const DEFAULT_DECOR_COLOR: string;
+
+export function resolveSpecialStyle(
+  element: CardElement,
+  background?: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  } | null
+): Record<string, any>;
+
+export function applySpecialStyle(
+  element: CardElement,
+  background?: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  } | null,
+  options?: { overrideExisting?: boolean; defaultDecorColor?: string }
+): CardElement;
+
+export function applyBackground(
+  layout: CardLayoutSchema,
+  background: {
+    id?: string | number;
+    name?: string;
+    imageUrl?: string;
+    mainColor?: string;
+    specialColors?: { name: string | string[]; color: string }[];
+  },
+  options?: {
+    previousBackground?: {
+      id?: string | number;
+      name?: string;
+      imageUrl?: string;
+      mainColor?: string;
+      specialColors?: { name: string | string[]; color: string }[];
+    } | null;
+    defaultDecorColor?: string;
+  }
+): CardLayoutSchema;
+
+export function updateElementsStyle(
+  layout: CardLayoutSchema,
+  targetIds: string[],
+  updates: Record<string, any>
+): CardLayoutSchema;
+
 export function buildRenderNodes(
   children: CardElement[],
   data: Record<string, any>,
@@ -55,7 +149,3 @@ export function buildRenderResult(
   data: Record<string, any>,
   unit?: 'px' | 'rpx'
 ): RenderResult;
-
-export function getTemplateItems(ids: string, items: TemplateItem[]): TemplateItem[];
-
-export function getTemplateBackgrounds(ids: string, items: TemplateBackground[]) : TemplateBackground[];