ttrpg-tools/src/components/md-deck/CardLayer.tsx

import { createMemo, For, Show } from 'solid-js';
import { parseMarkdown } from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { CardData, CardSide, LayerConfig } from './types';
import { DeckStore } from "./hooks/deckStore";
import { processVariables } from "../utils/csv-loader";
import { resolvePath } from "../utils/path";
import type { LayerInteractionHandlers } from './hooks/useLayerInteraction';

export interface CardLayerProps {
  cardData: CardData;
  store: DeckStore;
  side?: CardSide;
  interaction?: LayerInteractionHandlers;
}

export function CardLayer(props: CardLayerProps) {
  const side = () => props.side || 'front';
  const layers = createMemo(() => 
    side() === 'front' 
      ? props.store.state.frontLayerConfigs.filter((l) => l.visible)
      : props.store.state.backLayerConfigs.filter((l) => l.visible)
  );
  const dimensions = () => props.store.state.dimensions!;
  const showBounds = () => props.store.state.isEditing;
  const selectedLayer = () => props.store.state.selectedLayer;
  const draggingState = () => props.store.state.draggingState;

  function renderLayerContent(content: string) {
    const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath ?? "./assets");
    return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
  }

  const getAlignStyle = (align?: 'l' | 'c' | 'r') => {
    if (align === 'l') return 'left';
    if (align === 'r') return 'right';
    return 'center';
  };

  const isLayerSelected = (layer: LayerConfig) => selectedLayer() === layer.prop;

  const getFrameBounds = (layer: LayerConfig) => {
    const dims = dimensions();
    const left = (layer.x1 - 1) * dims.cellWidth;
    const top = (layer.y1 - 1) * dims.cellHeight;
    const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
    const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
    return { left, top, width, height };
  };

  const handleLayerClick = (layerProp: string, e: MouseEvent) => {
    if (props.interaction) {
      props.interaction.onLayerClick(layerProp, e);
    }
  };

  const handleFrameMouseDown = (
    action: 'drag' | 'resize-corner' | 'resize-edge',
    anchor?: 'nw' | 'ne' | 'sw' | 'se',
    edge?: 'n' | 's' | 'e' | 'w',
    e?: MouseEvent
  ) => {
    if (props.interaction) {
      props.interaction.onFrameMouseDown(action, anchor, edge, e);
    }
  };

  return (
    <For each={layers()}>
      {(layer) => {
        const bounds = () => getFrameBounds(layer);
        const isSelected = () => isLayerSelected(layer);
        
        return (
          <>
            <article
              class="absolute flex flex-col items-stretch justify-center prose prose-sm cursor-pointer"
              classList={{ 
                'ring-2 ring-blue-500 ring-offset-1': isSelected() && !draggingState()
              }}
              style={{
                ...getLayerStyle(layer, dimensions()),
                'font-size': `${layer.fontSize || 3}mm`,
                'text-align': getAlignStyle(layer.align)
              }}
              innerHTML={renderLayerContent(props.cardData[layer.prop])}
              onClick={(e) => handleLayerClick(layer.prop, e)}
            />
            <Show when={showBounds() && !isSelected()}>
              <div
                class="absolute border-2 border-blue-500/50 pointer-events-none select-none"
                style={{
                  left: `${(layer.x1 - 1) * dimensions().cellWidth}mm`,
                  top: `${(layer.y1 - 1) * dimensions().cellHeight}mm`,
                  width: `${(layer.x2 - layer.x1 + 1) * dimensions().cellWidth}mm`,
                  height: `${(layer.y2 - layer.y1 + 1) * dimensions().cellHeight}mm`
                }}
              />
            </Show>
            <Show when={isSelected()}>
              <div
                class="absolute border-2 border-blue-500 pointer-events-none"
                style={{
                  left: `${bounds().left}mm`,
                  top: `${bounds().top}mm`,
                  width: `${bounds().width}mm`,
                  height: `${bounds().height}mm`
                }}
              />
              <div
                class="absolute pointer-events-auto"
                style={{
                  left: `${bounds().left}mm`,
                  top: `${bounds().top}mm`,
                  width: `${bounds().width}mm`,
                  height: `${bounds().height}mm`
                }}
                onMouseDown={(e) => handleFrameMouseDown('drag', undefined, undefined, e)}
              />
              <Show when={!draggingState() || draggingState()?.action !== 'drag'}>
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left - 2}mm`,
                    top: `${bounds().top - 2}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'nw', undefined, e)}
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left + bounds().width - 2}mm`,
                    top: `${bounds().top - 2}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'ne', undefined, e)}
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left - 2}mm`,
                    top: `${bounds().top + bounds().height - 2}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'sw', undefined, e)}
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left + bounds().width - 2}mm`,
                    top: `${bounds().top + bounds().height - 2}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'se', undefined, e)}
                />
                <div
                  class="absolute h-2 cursor-ns-resize pointer-events-auto"
                  style={{
                    left: `${bounds().left}mm`,
                    top: `${bounds().top - 1}mm`,
                    width: `${bounds().width}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'n', e)}
                />
                <div
                  class="absolute h-2 cursor-ns-resize pointer-events-auto"
                  style={{
                    left: `${bounds().left}mm`,
                    top: `${bounds().top + bounds().height - 1}mm`,
                    width: `${bounds().width}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 's', e)}
                />
                <div
                  class="absolute w-2 cursor-ew-resize pointer-events-auto"
                  style={{
                    left: `${bounds().left - 1}mm`,
                    top: `${bounds().top}mm`,
                    height: `${bounds().height}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'w', e)}
                />
                <div
                  class="absolute w-2 cursor-ew-resize pointer-events-auto"
                  style={{
                    left: `${bounds().left + bounds().width - 1}mm`,
                    top: `${bounds().top}mm`,
                    height: `${bounds().height}mm`
                  }}
                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'e', e)}
                />
              </Show>
            </Show>
          </>
        );
      }}
    </For>
  );
}