castle-web-cli 0.4.75 → 0.4.77

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

@@ -11,13 +11,33 @@ export const BRUSH_SIZES = [1, 2, 3, 4, 6, 8, 12, 16, 24, 32];
 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', 'eyedropper']);
+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
@@ -33,6 +53,8 @@ export function usePixelToolState() {
   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,
@@ -46,6 +68,10 @@ export function usePixelToolState() {
     setEraseFillMode,
     fillSwapMode,
     setFillSwapMode,
+    shapeMode,
+    setShapeMode,
+    shapeFill,
+    setShapeFill,
   };
 }
 
@@ -175,6 +201,54 @@ export function PalettePopover({ open, anchorRef, onClose, children }) {
   );
 }
 
+// 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({
@@ -187,6 +261,8 @@ export function PaintStrip({
   onSelectKey,
   paletteKeys,
   palette,
+  moveActions,
+  selectActions,
 }) {
   const {
     tool,
@@ -196,10 +272,14 @@ export function PaintStrip({
     eraseSize,
     eraseFillMode,
     fillSwapMode,
+    shapeMode,
+    shapeFill,
     setBrushSize,
     setEraseSize,
     setEraseFillMode,
     setFillSwapMode,
+    setShapeMode,
+    setShapeFill,
   } = toolState;
 
   const showBrushSize = tool === 'brush';
@@ -212,59 +292,112 @@ export function PaintStrip({
   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}
-        />
+        {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.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 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' ? (
-          <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 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' ? (
-          <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 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)}>
@@ -293,7 +426,7 @@ export function PaintStrip({
 }
 
 // Wide-layout docked inspector: palette (when relevant) + tool settings only.
-export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteKeys, palette }) {
+export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteKeys, palette, moveActions, selectActions }) {
   const { tool, picking, setPicking } = toolState;
   return (
     <aside className={cx(styles.pxArtInspector, styles.drawingToolsPanel)}>
@@ -318,7 +451,7 @@ export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteK
             />
           </Panel>
         ) : null}
-        <ToolSettingsPanel toolState={toolState} />
+        <ToolSettingsPanel toolState={toolState} moveActions={moveActions} selectActions={selectActions} />
       </div>
     </aside>
   );
@@ -344,17 +477,21 @@ export function ModeToggle({ label, active, onChange }) {
 // 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 }) {
+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">
@@ -376,8 +513,49 @@ export function ToolSettingsPanel({ toolState }) {
         {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.drawingToolHint}>Drag the canvas to shift all pixels.</div>
+          <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>

package/kits/basic-2d/editors/pxArtTools.js

@@ -1,5 +1,11 @@
 import { EDG64, KEY_ALPHABET, normalizeHex, TRANSPARENT } from '../engine/pxart';
-import { forEachDab, forEachLinePoint } from './pixelGeometry';
+import {
+  forEachDab,
+  forEachEllipseCells,
+  forEachLinePoint,
+  forEachRectCells,
+  forEachTriangleCells,
+} from './pixelGeometry';
 
 // The PxArt editor paints over the FIXED full Endesga-64 palette (no free color
 // picking). Each palette color gets a stable single-char key (KEY_ALPHABET, 64
@@ -46,6 +52,9 @@ export function editorKeyForHex(hex) {
   return bestKey;
 }
 
+// The swatch the editor opens on: Endesga-64's lead bright red (#ff0040).
+export const DEFAULT_KEY = editorKeyForHex('#ff0040');
+
 function isInside(cells, x, y) {
   return y >= 0 && y < cells.length && x >= 0 && x < (cells[0]?.length ?? 0);
 }
@@ -75,6 +84,28 @@ export function paintLine(cells, from, to, key, size = 1) {
   return changed ? next : cells;
 }
 
+// Draw a shape with `key` into a copy of `cells`, defined by the drag from
+// `from` to `to`. `mode` selects line / square / circle / triangle; `filled`
+// applies to the closed shapes (the line ignores it). Returns a new matrix when
+// anything changed, else the original (so callers can skip no-op commits).
+export function paintShape(cells, from, to, key, mode, filled = false) {
+  const next = copyCells(cells);
+  let changed = false;
+  const write = (x, y) => {
+    changed = writeCell(next, x, y, key) || changed;
+  };
+  if (mode === 'line') {
+    forEachLinePoint(from, to, write);
+  } else if (mode === 'square') {
+    forEachRectCells(from, to, filled, write);
+  } else if (mode === 'circle') {
+    forEachEllipseCells(from, to, filled, write);
+  } else if (mode === 'triangle') {
+    forEachTriangleCells(from, to, filled, write);
+  }
+  return changed ? next : cells;
+}
+
 // Both region tools share the same guard: bail when the start is out of bounds
 // or already the target key, else return a working copy plus the key to replace.
 function beginKeyReplace(cells, start, key) {
@@ -122,3 +153,80 @@ export function swapKey(cells, start, key) {
 export function sampleKey(cells, point) {
   return isInside(cells, point.x, point.y) ? cells[point.y][point.x] : TRANSPARENT;
 }
+
+// Mirror the canvas-window matrix left-to-right (dimensions unchanged).
+export function flipCellsH(cells) {
+  return cells.map((row) => row.slice().reverse());
+}
+
+// Mirror the canvas-window matrix top-to-bottom (dimensions unchanged).
+export function flipCellsV(cells) {
+  return cells.slice().reverse().map((row) => row.slice());
+}
+
+// Clear a rectangular region of the canvas-window matrix to transparent (the
+// marquee delete). `rect` is { x, y, w, h } in canvas cells. Returns a new
+// matrix when anything changed, else the original.
+export function clearRegion(cells, rect) {
+  const next = copyCells(cells);
+  let changed = false;
+  for (let y = rect.y; y < rect.y + rect.h; y++) {
+    for (let x = rect.x; x < rect.x + rect.w; x++) {
+      changed = writeCell(next, x, y, TRANSPARENT) || changed;
+    }
+  }
+  return changed ? next : cells;
+}
+
+// Lift the pixels in `rect`, clear that source region to transparent, then stamp
+// the lifted OPAQUE pixels back at (dx, dy) offset — the marquee move's lift &
+// float, applied as one combined result. Transparent cells in the lifted region
+// don't erase the destination (they let underlying art show through). Pixels
+// pushed outside the canvas window are clipped. Returns the original matrix on a
+// zero delta (so a click-without-drag records no history); otherwise a new copy.
+export function moveRegion(cells, rect, dx, dy) {
+  if (dx === 0 && dy === 0) return cells;
+  const buffer = [];
+  for (let y = 0; y < rect.h; y++) {
+    const row = [];
+    for (let x = 0; x < rect.w; x++) {
+      const sx = rect.x + x;
+      const sy = rect.y + y;
+      row.push(isInside(cells, sx, sy) ? cells[sy][sx] : TRANSPARENT);
+    }
+    buffer.push(row);
+  }
+  const next = copyCells(cells);
+  for (let y = 0; y < rect.h; y++) {
+    for (let x = 0; x < rect.w; x++) writeCell(next, rect.x + x, rect.y + y, TRANSPARENT);
+  }
+  for (let y = 0; y < rect.h; y++) {
+    for (let x = 0; x < rect.w; x++) {
+      const key = buffer[y][x];
+      if (key !== TRANSPARENT) writeCell(next, rect.x + x + dx, rect.y + y + dy, key);
+    }
+  }
+  return next;
+}
+
+// Rotate the canvas-window matrix 90° clockwise about the canvas center, keeping
+// the same width × height window (so it merges back through withCellsAt). For a
+// square canvas this is the exact lossless rotation; on a non-square canvas the
+// rotated corners that fall outside the window are clipped (filled transparent).
+export function rotateCellsCW(cells) {
+  const height = cells.length;
+  const width = height ? cells[0].length : 0;
+  const cx = (width - 1) / 2;
+  const cy = (height - 1) / 2;
+  const out = [];
+  for (let oy = 0; oy < height; oy++) {
+    const row = [];
+    for (let ox = 0; ox < width; ox++) {
+      const sx = Math.round(cx + (oy - cy));
+      const sy = Math.round(cy - (ox - cx));
+      row.push(sy >= 0 && sy < height && sx >= 0 && sx < width ? cells[sy][sx] : TRANSPARENT);
+    }
+    out.push(row);
+  }
+  return out;
+}