castle-web-cli 0.4.71 → 0.4.73

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

@@ -0,0 +1,416 @@
+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: 'move-all', label: 'Move all', icon: 'move' },
+  { id: 'erase', label: 'Erase', icon: 'eraser' },
+];
+
+// 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', '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);
+  return {
+    tool,
+    setTool,
+    picking,
+    setPicking,
+    brushSize,
+    setBrushSize,
+    eraseSize,
+    setEraseSize,
+    eraseFillMode,
+    setEraseFillMode,
+    fillSwapMode,
+    setFillSwapMode,
+  };
+}
+
+// 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>
+  );
+}
+
+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
+  );
+}
+
+// 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,
+}) {
+  const {
+    tool,
+    picking,
+    setPicking,
+    brushSize,
+    eraseSize,
+    eraseFillMode,
+    fillSwapMode,
+    setBrushSize,
+    setEraseSize,
+    setEraseFillMode,
+    setFillSwapMode,
+  } = 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">
+        <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}
+        />
+        {showBrushSize || showEraseSize ? (
+          <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>
+        ) : null}
+        {tool === 'erase' ? (
+          <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>
+        ) : null}
+        {tool === 'fill' ? (
+          <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>
+        ) : 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 }) {
+  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} />
+      </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 }) {
+  const {
+    tool,
+    brushSize,
+    eraseSize,
+    eraseFillMode,
+    fillSwapMode,
+    setBrushSize,
+    setEraseSize,
+    setEraseFillMode,
+    setFillSwapMode,
+  } = 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 === 'move-all' ? (
+          <div className={styles.drawingToolHint}>Drag the canvas to shift all pixels.</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>
+  );
+}