castle-web-cli 0.4.83 → 0.4.85

package/kits/physics-2d/editors/pixelInspector.jsx

@@ -0,0 +1,633 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { RESOLUTION_STEPS } from '../engine/pxart';
+import { cx, Icon, IconButton, Panel, styles } from '../engine/ui';
+
+// Brush/erase diameters offered by the pixel editors' size sliders.
+export const BRUSH_SIZES = [1, 2, 3, 4, 6, 8, 12, 16, 24, 32];
+
+// The tool strip for the pixel (PxArt) editor. Eyedropper is not in the strip —
+// it lives in the palette panel / popover action button.
+export const PIXEL_TOOLS = [
+  { id: 'brush', label: 'Brush', icon: 'pencil' },
+  { id: 'fill', label: 'Fill', icon: 'fill' },
+  { id: 'shape', label: 'Shape', icon: 'shapes' },
+  { id: 'select', label: 'Select', icon: 'marquee' },
+  { id: 'move-all', label: 'Move all', icon: 'move' },
+  { id: 'erase', label: 'Erase', icon: 'eraser' },
+];
+
+// Sub-modes for the shape tool. Each drags out an axis-aligned box: line draws
+// the diagonal, square the rectangle, circle the inscribed ellipse, triangle an
+// isosceles triangle. `filled` (a separate toggle) applies to the closed three.
+export const SHAPE_MODES = [
+  { id: 'line', label: 'Line', icon: 'slash' },
+  { id: 'square', label: 'Square', icon: 'square' },
+  { id: 'circle', label: 'Circle', icon: 'circle' },
+  { id: 'triangle', label: 'Triangle', icon: 'triangle' },
+];
+
+// Momentary transform actions the move tool exposes (it has no persistent
+// settings). Each `id` maps to a handler on the editor's `moveActions`.
+export const MOVE_ACTIONS = [
+  { id: 'flipH', label: 'Flip horizontal', icon: 'flip-h' },
+  { id: 'flipV', label: 'Flip vertical', icon: 'flip-v' },
+  { id: 'rotateCW', label: 'Rotate clockwise', icon: 'redo' },
+];
+
+// Tools whose work is driven by the active palette color, so the palette panel
+// (and its eyedropper action) shows.
+export const PALETTE_TOOLS = new Set(['brush', 'fill', 'shape', 'eyedropper']);
+
+// Shared tool-mode state for the pixel editors: the selected tool plus the
+// brush/erase sizes and the fill/erase mode toggles. The active color/key stays
+// editor-local (free hex vs fixed palette key).
+//
+// `picking` is a TRANSIENT eyedropper overlay, kept separate from `tool` so the
+// real tool (and its settings panel) never changes when the picker is engaged —
+// it just sits on top of whatever tool is active until you pick or toggle it off.
+export function usePixelToolState() {
+  const [tool, setTool] = useState('brush');
+  const [picking, setPicking] = useState(false);
+  const [brushSize, setBrushSize] = useState(1);
+  const [eraseSize, setEraseSize] = useState(4);
+  const [eraseFillMode, setEraseFillMode] = useState(false);
+  const [fillSwapMode, setFillSwapMode] = useState(false);
+  const [shapeMode, setShapeMode] = useState('line');
+  const [shapeFill, setShapeFill] = useState(false);
+  return {
+    tool,
+    setTool,
+    picking,
+    setPicking,
+    brushSize,
+    setBrushSize,
+    eraseSize,
+    setEraseSize,
+    eraseFillMode,
+    setEraseFillMode,
+    fillSwapMode,
+    setFillSwapMode,
+    shapeMode,
+    setShapeMode,
+    shapeFill,
+    setShapeFill,
+  };
+}
+
+// Vertical icon tool-strip shared by the pixel editors. `tools` is a list of
+// { id, label, icon }; `disabled` greys out the whole strip (read-only files).
+export function PixelToolStrip({ tools, tool, onSelectTool, ariaLabel, disabled = false }) {
+  return (
+    <div className={styles.drawingToolStrip} aria-label={ariaLabel}>
+      {tools.map((candidate) => (
+        <button
+          key={candidate.id}
+          type="button"
+          title={candidate.label}
+          aria-label={candidate.label}
+          aria-pressed={tool === candidate.id ? 'true' : 'false'}
+          disabled={disabled}
+          className={cx(
+            styles.drawingToolButton,
+            tool === candidate.id && styles.drawingToolSelected
+          )}
+          onClick={() => onSelectTool(candidate.id)}>
+          <Icon name={candidate.icon} />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// Compact W × H selects above the artboard (not a sidebar panel).
+export function CanvasSizeBar({ width, height, onResize }) {
+  return (
+    <div className={styles.canvasSizeBar} aria-label="Canvas size">
+      <ResolutionSelect label="Width" value={width} onChange={(w) => onResize(w, height)} />
+      <span className={styles.canvasSizeSep} aria-hidden="true">
+        ×
+      </span>
+      <ResolutionSelect label="Height" value={height} onChange={(h) => onResize(width, h)} />
+    </div>
+  );
+}
+
+// The 3 corner-radius presets offered by CornerRadiusBar. 0 is sharp/pixel;
+// the other two are "nice" rounded amounts. The file format itself isn't
+// limited to these three (any value up to MAX_CORNER_RADIUS is valid — see
+// pxart.js) — this is just the curated set the editor's segmented control
+// exposes, so hand-picking a value never means hunting a slider.
+const CORNER_RADIUS_STEPS = [
+  { value: 0, label: '0' },
+  { value: 0.25, label: '¼' },
+  { value: 0.5, label: '½' },
+];
+
+// Corner-radius segmented control, meant to sit next to CanvasSizeBar above
+// the artboard. Sets the sprite's file-level `cornerRadius` field (a property
+// of the .pxart asset — see docs/pxart-format.md — not a per-actor Sprite
+// prop). `radius` is a plain number (0 = sharp/pixel corners); highlights
+// whichever preset it exactly matches, or none if it's a value from outside
+// this set (e.g. hand-edited JSON).
+export function CornerRadiusBar({ radius, onChange }) {
+  return (
+    <div className={styles.cornerRadiusBar} aria-label="Corner rounding">
+      <span>Round</span>
+      <div className={styles.cornerRadiusSegments} role="radiogroup" aria-label="Corner radius">
+        {CORNER_RADIUS_STEPS.map((step) => (
+          <button
+            key={step.value}
+            type="button"
+            role="radio"
+            aria-checked={radius === step.value ? 'true' : 'false'}
+            className={cx(styles.cornerRadiusSegment, radius === step.value && styles.cornerRadiusSegmentOn)}
+            title={step.value === 0 ? 'Sharp (pixel) corners' : `Round corners, radius ${step.value}`}
+            onClick={() => onChange(step.value)}>
+            {step.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ResolutionSelect({ label, value, onChange }) {
+  const options = RESOLUTION_STEPS.includes(value)
+    ? RESOLUTION_STEPS
+    : [...RESOLUTION_STEPS, value].sort((a, b) => a - b);
+  return (
+    <select
+      className={styles.canvasSizeSelect}
+      aria-label={label}
+      value={value}
+      onChange={(event) => onChange(Number(event.target.value))}>
+      {options.map((step) => (
+        <option key={step} value={step}>
+          {step}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// 12-column palette grid shared by the docked sidebar and the compact popover.
+export function PaletteGrid({ keys, palette, activeKey, onSelectKey }) {
+  return (
+    <div className={styles.palette}>
+      {keys.map((key) => (
+        <button
+          key={key}
+          type="button"
+          className={cx(styles.swatch, activeKey === key && styles.swatchSelected)}
+          title={palette[key]}
+          style={{ background: palette[key] }}
+          onClick={() => onSelectKey(key)}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Anchored palette + eyedropper popover for compact/mobile paint-strip color tap.
+export function PalettePopover({ open, anchorRef, onClose, children }) {
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return;
+    const anchor = anchorRef.current.getBoundingClientRect();
+    const popoverWidth = 280;
+    const margin = 8;
+    let left = anchor.left - popoverWidth - margin;
+    if (left < margin) left = anchor.right + margin;
+    let top = anchor.top;
+    const maxTop = window.innerHeight - margin;
+    if (top + 320 > maxTop) top = Math.max(margin, maxTop - 320);
+    setPosition({ top, left });
+  }, [open, anchorRef]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    function onKeyDown(event) {
+      if (event.key === 'Escape') onClose();
+    }
+    function onPointerDown(event) {
+      if (popoverRef.current?.contains(event.target) || anchorRef.current?.contains(event.target)) {
+        return;
+      }
+      onClose();
+    }
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('pointerdown', onPointerDown);
+    };
+  }, [open, onClose, anchorRef]);
+
+  if (!open) return null;
+  return createPortal(
+    <div
+      ref={popoverRef}
+      className={styles.palettePopover}
+      style={{ top: position.top, left: position.left }}
+      role="dialog"
+      aria-label="Palette">
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+// The shape tool's sub-mode picker, shared by the compact paint strip and the
+// wide-layout settings panel. `buttonClass` styles each glyph button for its
+// host strip; `radio` switches the a11y semantics to a radiogroup.
+function ShapeModeButtons({ shapeMode, setShapeMode, buttonClass, radio = false }) {
+  return (
+    <>
+      {SHAPE_MODES.map((mode) => {
+        const selected = shapeMode === mode.id;
+        return (
+          <button
+            key={mode.id}
+            type="button"
+            role={radio ? 'radio' : undefined}
+            className={cx(buttonClass, selected && styles.drawingToolSelected)}
+            title={mode.label}
+            aria-label={mode.label}
+            aria-pressed={radio ? undefined : selected ? 'true' : 'false'}
+            aria-checked={radio ? (selected ? 'true' : 'false') : undefined}
+            onClick={() => setShapeMode(mode.id)}>
+            <Icon name={mode.icon} />
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
+// The move tool's transform actions (flip H / flip V / rotate CW), shared by the
+// compact paint strip and the wide-layout settings panel. These are momentary
+// buttons (no selected state); `buttonClass` styles them for the host strip.
+function MoveActionButtons({ moveActions, buttonClass }) {
+  return (
+    <>
+      {MOVE_ACTIONS.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          className={buttonClass}
+          title={action.label}
+          aria-label={action.label}
+          onClick={moveActions?.[action.id]}>
+          <Icon name={action.icon} />
+        </button>
+      ))}
+    </>
+  );
+}
+
+// Right-side paint strip (compact layout): color swatch, vertical size slider, and
+// tool-contextual mode toggles. Color tap opens the palette popover.
+export function PaintStrip({
+  toolState,
+  activeKey,
+  activeColor,
+  paletteOpen,
+  onTogglePalette,
+  colorButtonRef,
+  onSelectKey,
+  paletteKeys,
+  palette,
+  moveActions,
+  selectActions,
+}) {
+  const {
+    tool,
+    picking,
+    setPicking,
+    brushSize,
+    eraseSize,
+    eraseFillMode,
+    fillSwapMode,
+    shapeMode,
+    shapeFill,
+    setBrushSize,
+    setEraseSize,
+    setEraseFillMode,
+    setFillSwapMode,
+    setShapeMode,
+    setShapeFill,
+  } = toolState;
+
+  const showBrushSize = tool === 'brush';
+  const showEraseSize = tool === 'erase';
+  const size = showBrushSize ? brushSize : eraseSize;
+  const onSizeChange = showBrushSize ? setBrushSize : setEraseSize;
+  const sliderIndex = Math.max(0, BRUSH_SIZES.indexOf(size));
+  const sliderDisabled = showEraseSize && eraseFillMode;
+
+  return (
+    <>
+      <div className={styles.paintStrip} aria-label="Paint controls">
+        {PALETTE_TOOLS.has(tool) || picking ? (
+          <div className={styles.paintStripSection}>
+            <button
+              ref={colorButtonRef}
+              type="button"
+              className={styles.paintStripColor}
+              title={activeColor}
+              aria-label={`Active color ${activeColor}. Open palette.`}
+              aria-expanded={paletteOpen ? 'true' : 'false'}
+              style={{ background: activeColor }}
+              onClick={onTogglePalette}
+            />
+          </div>
+        ) : null}
+        {showBrushSize || showEraseSize ? (
+          <div className={styles.paintStripSection}>
+            <div className={styles.paintStripSlider}>
+              <input
+                className={styles.drawingSizeSliderVertical}
+                type="range"
+                min="0"
+                max={BRUSH_SIZES.length - 1}
+                step="1"
+                value={sliderIndex}
+                disabled={sliderDisabled}
+                aria-label={showBrushSize ? 'Brush size' : 'Erase size'}
+                title={`${showBrushSize ? 'Brush' : 'Erase'} size ${size}`}
+                onChange={(event) => onSizeChange(BRUSH_SIZES[Number(event.target.value)])}
+              />
+            </div>
+          </div>
+        ) : null}
+        {tool === 'shape' ? (
+          <div className={styles.paintStripSection}>
+            <ShapeModeButtons
+              shapeMode={shapeMode}
+              setShapeMode={setShapeMode}
+              buttonClass={styles.paintStripModeButton}
+            />
+          </div>
+        ) : null}
+        {tool === 'move-all' ? (
+          <div className={styles.paintStripSection}>
+            <MoveActionButtons moveActions={moveActions} buttonClass={styles.paintStripModeButton} />
+          </div>
+        ) : null}
+        {tool === 'select' ? (
+          <div className={styles.paintStripSection}>
+            <button
+              type="button"
+              className={styles.paintStripModeButton}
+              title="Delete selection"
+              aria-label="Delete selection"
+              disabled={!selectActions?.hasSelection}
+              onClick={selectActions?.deletePixels}>
+              <Icon name="trash" />
+            </button>
+          </div>
+        ) : null}
+        {tool === 'erase' ? (
+          <div className={styles.paintStripSection}>
+            <button
+              type="button"
+              className={cx(
+                styles.paintStripModeButton,
+                eraseFillMode && styles.drawingToolSelected
+              )}
+              title="Fill mode"
+              aria-label="Fill mode"
+              aria-pressed={eraseFillMode ? 'true' : 'false'}
+              onClick={() => setEraseFillMode(!eraseFillMode)}>
+              <Icon name="fill" />
+            </button>
+          </div>
+        ) : null}
+        {tool === 'fill' ? (
+          <div className={styles.paintStripSection}>
+            <button
+              type="button"
+              className={cx(
+                styles.paintStripModeButton,
+                fillSwapMode && styles.drawingToolSelected
+              )}
+              title="Swap mode"
+              aria-label="Swap mode"
+              aria-pressed={fillSwapMode ? 'true' : 'false'}
+              onClick={() => setFillSwapMode(!fillSwapMode)}>
+              <Icon name="rotate" />
+            </button>
+          </div>
+        ) : null}
+        {tool === 'shape' ? (
+          <div className={styles.paintStripSection}>
+            <button
+              type="button"
+              className={cx(
+                styles.paintStripModeButton,
+                shapeFill && styles.drawingToolSelected
+              )}
+              title="Fill shape"
+              aria-label="Fill shape"
+              aria-pressed={shapeFill ? 'true' : 'false'}
+              onClick={() => setShapeFill(!shapeFill)}>
+              <Icon name="fill" />
+            </button>
+          </div>
+        ) : null}
+      </div>
+      <PalettePopover open={paletteOpen} anchorRef={colorButtonRef} onClose={() => onTogglePalette(false)}>
+        <div className={styles.palettePopoverHeader}>
+          <span className={styles.palettePopoverTitle}>Palette</span>
+          <IconButton
+            icon="eyedropper"
+            label="Pick color"
+            active={picking}
+            aria-pressed={picking ? 'true' : 'false'}
+            onClick={() => setPicking(!picking)}
+          />
+        </div>
+        <PaletteGrid
+          keys={paletteKeys}
+          palette={palette}
+          activeKey={activeKey}
+          onSelectKey={(key) => {
+            onSelectKey(key);
+            onTogglePalette(false);
+          }}
+        />
+      </PalettePopover>
+    </>
+  );
+}
+
+// Wide-layout docked inspector: palette (when relevant) + tool settings only.
+export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteKeys, palette, moveActions, selectActions }) {
+  const { tool, picking, setPicking } = toolState;
+  return (
+    <aside className={cx(styles.pxArtInspector, styles.drawingToolsPanel)}>
+      <div className={cx(styles.sheetBody, styles.inspectorBody, styles.drawingSettingsColumn)}>
+        {PALETTE_TOOLS.has(tool) || picking ? (
+          <Panel
+            title="Palette"
+            action={
+              <IconButton
+                icon="eyedropper"
+                label="Pick color"
+                active={picking}
+                aria-pressed={picking ? 'true' : 'false'}
+                onClick={() => setPicking(!picking)}
+              />
+            }>
+            <PaletteGrid
+              keys={paletteKeys}
+              palette={palette}
+              activeKey={activeKey}
+              onSelectKey={onSelectKey}
+            />
+          </Panel>
+        ) : null}
+        <ToolSettingsPanel toolState={toolState} moveActions={moveActions} selectActions={selectActions} />
+      </div>
+    </aside>
+  );
+}
+
+// A labeled on/off switch used for the editors' boolean tool modes.
+export function ModeToggle({ label, active, onChange }) {
+  return (
+    <div className={styles.drawingModeRow}>
+      <span>{label}</span>
+      <button
+        type="button"
+        role="switch"
+        className={cx(styles.drawingSwitch, active && styles.drawingSwitchOn)}
+        aria-checked={active ? 'true' : 'false'}
+        onClick={() => onChange(!active)}>
+        <span className={styles.drawingSwitchKnob} />
+      </button>
+    </div>
+  );
+}
+
+// The "Tool Settings" panel for the pixel editor: brush/erase size sliders plus
+// the per-tool mode toggle / hint. It reads the whole usePixelToolState bundle
+// to keep callers from re-spreading the same prop list.
+export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
+  const {
+    tool,
+    brushSize,
+    eraseSize,
+    eraseFillMode,
+    fillSwapMode,
+    shapeMode,
+    shapeFill,
+    setBrushSize,
+    setEraseSize,
+    setEraseFillMode,
+    setFillSwapMode,
+    setShapeMode,
+    setShapeFill,
+  } = toolState;
+  return (
+    <Panel title="Tool Settings">
+      <div className={styles.drawingToolSettings}>
+        <ToolSizePicker
+          label="Brush"
+          value={brushSize}
+          visible={tool === 'brush'}
+          onChange={setBrushSize}
+        />
+        <ToolSizePicker
+          label="Erase"
+          value={eraseSize}
+          visible={tool === 'erase'}
+          onChange={setEraseSize}
+          fill={eraseFillMode}
+          onFillChange={setEraseFillMode}
+        />
+        {tool === 'fill' ? (
+          <ModeToggle label="Swap Mode" active={fillSwapMode} onChange={setFillSwapMode} />
+        ) : null}
+        {tool === 'shape' ? (
+          <div className={styles.drawingSizePicker}>
+            <div className={styles.drawingSizeLabel}>
+              <span>Shape</span>
+            </div>
+            <div className={styles.drawingShapeModeRow} role="radiogroup" aria-label="Shape">
+              <ShapeModeButtons
+                shapeMode={shapeMode}
+                setShapeMode={setShapeMode}
+                buttonClass={styles.drawingToolButton}
+                radio
+              />
+            </div>
+            <ModeToggle label="Fill Shape" active={shapeFill} onChange={setShapeFill} />
+          </div>
+        ) : null}
+        {tool === 'move-all' ? (
+          <div className={styles.drawingSizePicker}>
+            <div className={styles.drawingSizeLabel}>
+              <span>Transform</span>
+            </div>
+            <div className={styles.drawingShapeModeRow}>
+              <MoveActionButtons moveActions={moveActions} buttonClass={styles.drawingToolButton} />
+            </div>
+          </div>
+        ) : null}
+        {tool === 'select' ? (
+          <div className={styles.drawingSizePicker}>
+            <div className={styles.drawingSizeLabel}>
+              <span>Selection</span>
+            </div>
+            <div className={styles.drawingShapeModeRow}>
+              <button
+                type="button"
+                className={styles.drawingToolButton}
+                title="Delete selection"
+                aria-label="Delete selection"
+                disabled={!selectActions?.hasSelection}
+                onClick={selectActions?.deletePixels}>
+                <Icon name="trash" />
+              </button>
+            </div>
+          </div>
+        ) : null}
+        {tool === 'eyedropper' ? (
+          <div className={styles.drawingToolHint}>Click a pixel to make it the active color.</div>
+        ) : null}
+      </div>
+    </Panel>
+  );
+}
+
+// Discrete brush/erase size slider (steps through BRUSH_SIZES). Hidden unless
+// `visible`. An optional fill toggle disables the slider when fill mode is on.
+export function ToolSizePicker({ label, value, visible, onChange, fill = false, onFillChange }) {
+  if (!visible) return null;
+  const sliderIndex = Math.max(0, BRUSH_SIZES.indexOf(value));
+  return (
+    <div className={styles.drawingSizePicker}>
+      <div className={styles.drawingSizeLabel}>
+        <span>{label} size</span>
+        <span>{value}</span>
+      </div>
+      <div className={styles.drawingSizeControlRow}>
+        <input
+          className={styles.drawingSizeSlider}
+          type="range"
+          min="0"
+          max={BRUSH_SIZES.length - 1}
+          step="1"
+          value={sliderIndex}
+          disabled={fill}
+          onChange={(event) => onChange(BRUSH_SIZES[Number(event.target.value)])}
+        />
+      </div>
+      {onFillChange ? <ModeToggle label="Fill Mode" active={fill} onChange={onFillChange} /> : null}
+    </div>
+  );
+}