create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/pixel-art/src/update.ts

@@ -0,0 +1,469 @@
+import { Array, Match as M, Option } from 'effect'
+import { Command, Update } from 'foldkit'
+import { evo } from 'foldkit/struct'
+
+import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
+
+import { ExportPng, saveCanvas } from './command'
+import { DEFAULT_COLOR_INDEX } from './constant'
+import {
+  createEmptyGrid,
+  erasePixels,
+  floodFill,
+  getMirroredPositions,
+  isGridEmpty,
+  pushHistory,
+  setPixels,
+} from './grid'
+import { Message } from './message'
+import {
+  type Model,
+  type PaletteIndex,
+  type Tool,
+  paletteIndexFromValue,
+} from './model'
+import { PALETTE_THEMES } from './palette'
+import {
+  GridSizeRadioGroup,
+  PaletteRadioGroup,
+  ThemeListbox,
+  ToolRadioGroup,
+} from './view/toolbar'
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const withUpdateReturn = M.withReturnType<UpdateReturn>()
+
+const applyEraser = (model: Model, x: number, y: number) => {
+  const positions = getMirroredPositions(x, y, model.gridSize, model.mirrorMode)
+  return erasePixels(model.grid, positions)
+}
+
+const applyBrush = (model: Model, x: number, y: number) => {
+  const positions = getMirroredPositions(x, y, model.gridSize, model.mirrorMode)
+  return setPixels(model.grid, positions, model.selectedColorIndex)
+}
+
+const applyFill = (model: Model, x: number, y: number) => {
+  const positions = getMirroredPositions(x, y, model.gridSize, 'None')
+  return Array.reduce(positions, model.grid, (currentGrid, [fillX, fillY]) =>
+    floodFill(currentGrid, fillX, fillY, model.selectedColorIndex),
+  )
+}
+
+const foldErrorDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Opened: () => model => [model, []],
+    Closed: () => model => [
+      evo(model, { maybeExportError: () => Option.none() }),
+      [],
+    ],
+  }),
+)
+
+const foldErrorDialog = Update.foldChild({
+  update: Dialog.update,
+  read: (model: Model) => Option.some(model.errorDialog),
+  write: (model, nextErrorDialog) =>
+    evo(model, { errorDialog: () => nextErrorDialog }),
+  toParentMessage: message => Message.GotErrorDialogMessage({ message }),
+  foldOutMessage: foldErrorDialogOutMessage,
+})
+
+const foldThemeListboxOutMessage: (
+  outMessage: Listbox.OutMessage,
+) => Update.Step<Model, Message> = M.type<Listbox.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => {
+        const themeIndex = Number(value)
+        const maybeNextTheme = Array.get(PALETTE_THEMES, themeIndex)
+        if (Option.isNone(maybeNextTheme)) {
+          return [model, []]
+        }
+        const nextModel = evo(model, {
+          paletteThemeIndex: () => themeIndex,
+          selectedColorIndex: () => DEFAULT_COLOR_INDEX,
+        })
+        return [nextModel, [saveCanvas(nextModel)]]
+      },
+  }),
+)
+
+const foldThemeListbox = Update.foldChild({
+  update: ThemeListbox.update,
+  read: (model: Model) => Option.some(model.themeListbox),
+  write: (model, nextThemeListbox) =>
+    evo(model, { themeListbox: () => nextThemeListbox }),
+  toParentMessage: message => Message.GotThemeListboxMessage({ message }),
+  foldOutMessage: foldThemeListboxOutMessage,
+})
+
+const foldGridSizeConfirmDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Opened: () => model => [model, []],
+    Closed: () => model => [
+      evo(model, { maybePendingGridSize: () => Option.none() }),
+      [],
+    ],
+  }),
+)
+
+const foldGridSizeConfirmDialog = Update.foldChild({
+  update: Dialog.update,
+  read: (model: Model) => Option.some(model.gridSizeConfirmDialog),
+  write: (model, nextGridSizeConfirmDialog) =>
+    evo(model, { gridSizeConfirmDialog: () => nextGridSizeConfirmDialog }),
+  toParentMessage: message =>
+    Message.GotGridSizeConfirmDialogMessage({ message }),
+  foldOutMessage: foldGridSizeConfirmDialogOutMessage,
+})
+
+const selectTool = (model: Model, tool: Tool): UpdateReturn => [
+  evo(model, { tool: () => tool }),
+  [],
+]
+
+const selectColor = (model: Model, colorIndex: PaletteIndex): UpdateReturn => {
+  const nextModel = evo(model, { selectedColorIndex: () => colorIndex })
+  return [nextModel, [saveCanvas(nextModel)]]
+}
+
+const foldToolRadioGroupOutMessage = M.type<RadioGroup.OutMessage<Tool>>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model =>
+        selectTool(model, value),
+  }),
+)
+
+const foldToolRadioGroup = Update.foldChild({
+  update: ToolRadioGroup.update,
+  read: (model: Model) => Option.some(model.toolRadioGroup),
+  write: (model, nextToolRadioGroup) =>
+    evo(model, { toolRadioGroup: () => nextToolRadioGroup }),
+  toParentMessage: message => Message.GotToolRadioGroupMessage({ message }),
+  foldOutMessage: foldToolRadioGroupOutMessage,
+})
+
+const foldGridSizeRadioGroupOutMessage = M.type<RadioGroup.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model =>
+        requestGridSizeChange(model, Number(value)),
+  }),
+)
+
+const foldGridSizeRadioGroup = Update.foldChild({
+  update: GridSizeRadioGroup.update,
+  read: (model: Model) => Option.some(model.gridSizeRadioGroup),
+  write: (model, nextGridSizeRadioGroup) =>
+    evo(model, { gridSizeRadioGroup: () => nextGridSizeRadioGroup }),
+  toParentMessage: message => Message.GotGridSizeRadioGroupMessage({ message }),
+  foldOutMessage: foldGridSizeRadioGroupOutMessage,
+})
+
+const foldPaletteRadioGroupOutMessage = M.type<RadioGroup.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model =>
+        selectColor(
+          model,
+          paletteIndexFromValue(value, model.selectedColorIndex),
+        ),
+  }),
+)
+
+const foldPaletteRadioGroup = Update.foldChild({
+  update: PaletteRadioGroup.update,
+  read: (model: Model) => Option.some(model.paletteRadioGroup),
+  write: (model, nextPaletteRadioGroup) =>
+    evo(model, { paletteRadioGroup: () => nextPaletteRadioGroup }),
+  toParentMessage: message => Message.GotPaletteRadioGroupMessage({ message }),
+  foldOutMessage: foldPaletteRadioGroupOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    PressedCell: ({ x, y }) =>
+      M.value(model.tool).pipe(
+        withUpdateReturn,
+        M.when('Brush', () => [
+          evo(model, {
+            grid: () => applyBrush(model, x, y),
+            undoStack: () => pushHistory(model.undoStack, model.grid),
+            redoStack: () => [],
+            isDrawing: () => true,
+          }),
+          [],
+        ]),
+        M.when('Fill', () => {
+          const nextModel = evo(model, {
+            grid: () => applyFill(model, x, y),
+            undoStack: () => pushHistory(model.undoStack, model.grid),
+            redoStack: () => [],
+          })
+          return [nextModel, [saveCanvas(nextModel)]]
+        }),
+        M.when('Eraser', () => [
+          evo(model, {
+            grid: () => applyEraser(model, x, y),
+            undoStack: () => pushHistory(model.undoStack, model.grid),
+            redoStack: () => [],
+            isDrawing: () => true,
+          }),
+          [],
+        ]),
+        M.exhaustive,
+      ),
+
+    EnteredCell: ({ x, y }) => {
+      const withHover = evo(model, {
+        maybeHoveredCell: () => Option.some({ x, y }),
+      })
+
+      if (model.isDrawing && model.tool === 'Brush') {
+        return [evo(withHover, { grid: () => applyBrush(model, x, y) }), []]
+      }
+
+      if (model.isDrawing && model.tool === 'Eraser') {
+        return [evo(withHover, { grid: () => applyEraser(model, x, y) }), []]
+      }
+
+      return [withHover, []]
+    },
+
+    LeftCanvas: () => [
+      evo(model, { maybeHoveredCell: () => Option.none() }),
+      [],
+    ],
+
+    ReleasedMouse: () => {
+      if (!model.isDrawing) {
+        return [model, []]
+      }
+      const nextModel = evo(model, { isDrawing: () => false })
+      return [nextModel, [saveCanvas(nextModel)]]
+    },
+
+    SelectedColor: ({ colorIndex }) => selectColor(model, colorIndex),
+
+    SelectedTool: ({ tool }) => selectTool(model, tool),
+
+    SelectedGridSize: ({ size }) => requestGridSizeChange(model, size),
+
+    GotToolRadioGroupMessage: ({ message }) =>
+      foldToolRadioGroup(model, message),
+
+    GotGridSizeRadioGroupMessage: ({ message }) =>
+      foldGridSizeRadioGroup(model, message),
+
+    GotPaletteRadioGroupMessage: ({ message }) =>
+      foldPaletteRadioGroup(model, message),
+
+    ToggledMirrorHorizontal: () => {
+      const nextMirrorMode = M.value(model.mirrorMode).pipe(
+        M.when('None', () => 'Horizontal' as const),
+        M.when('Horizontal', () => 'None' as const),
+        M.when('Vertical', () => 'Both' as const),
+        M.when('Both', () => 'Vertical' as const),
+        M.exhaustive,
+      )
+      return [evo(model, { mirrorMode: () => nextMirrorMode }), []]
+    },
+
+    ToggledMirrorVertical: () => {
+      const nextMirrorMode = M.value(model.mirrorMode).pipe(
+        M.when('None', () => 'Vertical' as const),
+        M.when('Vertical', () => 'None' as const),
+        M.when('Horizontal', () => 'Both' as const),
+        M.when('Both', () => 'Horizontal' as const),
+        M.exhaustive,
+      )
+      return [evo(model, { mirrorMode: () => nextMirrorMode }), []]
+    },
+
+    ClickedUndo: () =>
+      Array.match(model.undoStack, {
+        onEmpty: () => [model, []],
+        onNonEmpty: nonEmptyUndoStack => {
+          const nextModel = evo(model, {
+            grid: () => Array.lastNonEmpty(nonEmptyUndoStack),
+            undoStack: () => Array.initNonEmpty(nonEmptyUndoStack),
+            redoStack: () => [...model.redoStack, model.grid],
+          })
+          return [nextModel, [saveCanvas(nextModel)]]
+        },
+      }),
+
+    ClickedRedo: () =>
+      Array.match(model.redoStack, {
+        onEmpty: () => [model, []],
+        onNonEmpty: nonEmptyRedoStack => {
+          const nextModel = evo(model, {
+            grid: () => Array.lastNonEmpty(nonEmptyRedoStack),
+            undoStack: () => [...model.undoStack, model.grid],
+            redoStack: () => Array.initNonEmpty(nonEmptyRedoStack),
+          })
+          return [nextModel, [saveCanvas(nextModel)]]
+        },
+      }),
+
+    ClickedHistoryStep: ({ stepIndex }) => {
+      const targetGrid = model.undoStack[stepIndex]
+      if (targetGrid === undefined) {
+        return [model, []]
+      }
+
+      const statesAfterTarget = Array.drop(model.undoStack, stepIndex + 1)
+
+      const nextModel = evo(model, {
+        grid: () => targetGrid,
+        undoStack: () => Array.take(model.undoStack, stepIndex),
+        redoStack: () => [
+          ...model.redoStack,
+          model.grid,
+          ...Array.reverse(statesAfterTarget),
+        ],
+      })
+
+      return [nextModel, [saveCanvas(nextModel)]]
+    },
+
+    ClickedRedoStep: ({ stepIndex }) => {
+      const targetGrid = model.redoStack[stepIndex]
+      if (targetGrid === undefined) {
+        return [model, []]
+      }
+
+      const statesBetweenCurrentAndTarget = Array.drop(
+        model.redoStack,
+        stepIndex + 1,
+      )
+
+      const nextModel = evo(model, {
+        grid: () => targetGrid,
+        undoStack: () => [
+          ...model.undoStack,
+          model.grid,
+          ...Array.reverse(statesBetweenCurrentAndTarget),
+        ],
+        redoStack: () => Array.take(model.redoStack, stepIndex),
+      })
+
+      return [nextModel, [saveCanvas(nextModel)]]
+    },
+
+    ClickedClear: () => {
+      const nextModel = evo(model, {
+        grid: () => createEmptyGrid(model.gridSize),
+        undoStack: () => pushHistory(model.undoStack, model.grid),
+        redoStack: () => [],
+      })
+      return [nextModel, [saveCanvas(nextModel)]]
+    },
+
+    ClickedExport: () => [
+      model,
+      [
+        ExportPng({
+          grid: model.grid,
+          gridSize: model.gridSize,
+          paletteThemeIndex: model.paletteThemeIndex,
+        }),
+      ],
+    ],
+
+    SucceededExportPng: () => [model, []],
+
+    CompletedSaveCanvas: () => [model, []],
+
+    FailedExportPng: ({ error }) => {
+      const [nextErrorDialog, errorDialogCommands] = Dialog.open(
+        model.errorDialog,
+      )
+
+      return [
+        evo(model, {
+          maybeExportError: () => Option.some(error),
+          errorDialog: () => nextErrorDialog,
+        }),
+        Command.mapMessages(errorDialogCommands, dialogMessage =>
+          Message.GotErrorDialogMessage({ message: dialogMessage }),
+        ),
+      ]
+    },
+
+    GotErrorDialogMessage: ({ message }) => foldErrorDialog(model, message),
+
+    GotThemeListboxMessage: ({ message }) => foldThemeListbox(model, message),
+
+    ConfirmedGridSizeChange: () =>
+      Option.match(model.maybePendingGridSize, {
+        onNone: () => [model, []],
+        onSome: pendingSize => {
+          const [nextDialog, dialogCommands] = Dialog.close(
+            model.gridSizeConfirmDialog,
+          )
+          const mappedDialogCommands = Command.mapMessages(
+            dialogCommands,
+            dialogMessage =>
+              Message.GotGridSizeConfirmDialogMessage({
+                message: dialogMessage,
+              }),
+          )
+          const [resizedModel] = applyGridSizeChange(model, pendingSize)
+          const nextModel = evo(resizedModel, {
+            gridSizeConfirmDialog: () => nextDialog,
+            maybePendingGridSize: () => Option.none(),
+          })
+          return [nextModel, [...mappedDialogCommands, saveCanvas(nextModel)]]
+        },
+      }),
+
+    GotGridSizeConfirmDialogMessage: ({ message }) =>
+      foldGridSizeConfirmDialog(model, message),
+  })
+
+const applyGridSizeChange = (model: Model, size: number): UpdateReturn => [
+  evo(model, {
+    grid: () => createEmptyGrid(size),
+    gridSize: () => size,
+    undoStack: () => [],
+    redoStack: () => [],
+    isDrawing: () => false,
+    maybeHoveredCell: () => Option.none(),
+  }),
+  [],
+]
+
+const requestGridSizeChange = (model: Model, size: number): UpdateReturn => {
+  if (size === model.gridSize) {
+    return [model, []]
+  }
+
+  if (isGridEmpty(model.grid)) {
+    return applyGridSizeChange(model, size)
+  }
+
+  const [nextDialog, dialogCommands] = Dialog.open(model.gridSizeConfirmDialog)
+  return [
+    evo(model, {
+      maybePendingGridSize: () => Option.some(size),
+      gridSizeConfirmDialog: () => nextDialog,
+    }),
+    Command.mapMessages(dialogCommands, dialogMessage =>
+      Message.GotGridSizeConfirmDialogMessage({ message: dialogMessage }),
+    ),
+  ]
+}

package/dist/templates/examples/pixel-art/src/view/canvas.ts

@@ -0,0 +1,134 @@
+import { Array, Equal, Option, pipe } from 'effect'
+import { type Html, type HtmlBuilder, createKeyedLazy } from 'foldkit/html'
+
+import { EMPTY_COLOR } from '../constant'
+import { floodFill, getMirroredPositions } from '../grid'
+import { Message } from '../message'
+import type { Cell, Grid, HexColor, Model, PaletteIndex } from '../model'
+import { type PaletteTheme, resolveColor } from '../palette'
+
+const lazyRow = createKeyedLazy()
+
+export const EMPTY_PREVIEW_POSITIONS: ReadonlyArray<readonly [number, number]> =
+  []
+
+export const computePreviewPositions = (
+  model: Model,
+): ReadonlyArray<readonly [number, number]> => {
+  if (model.isDrawing) {
+    return EMPTY_PREVIEW_POSITIONS
+  }
+  return Option.match(model.maybeHoveredCell, {
+    onNone: () => EMPTY_PREVIEW_POSITIONS,
+    onSome: ({ x, y }) => {
+      if (model.tool === 'Brush' || model.tool === 'Eraser') {
+        return getMirroredPositions(x, y, model.gridSize, model.mirrorMode)
+      }
+      if (model.tool === 'Fill') {
+        return computeFillPreview(model.grid, x, y, model.selectedColorIndex)
+      }
+      return EMPTY_PREVIEW_POSITIONS
+    },
+  })
+}
+
+export const computeFillPreview = (
+  grid: Grid,
+  startX: number,
+  startY: number,
+  fillColorIndex: PaletteIndex,
+): ReadonlyArray<readonly [number, number]> => {
+  const filledGrid = floodFill(grid, startX, startY, fillColorIndex)
+  const positions: Array<readonly [number, number]> = []
+  Array.forEach(filledGrid, (row, y) => {
+    Array.forEach(row, (cell, x) => {
+      if (!Equal.equals(cell, grid[y]?.[x])) {
+        positions.push([x, y])
+      }
+    })
+  })
+  return positions.length === 0 ? EMPTY_PREVIEW_POSITIONS : positions
+}
+
+export const canvasView = (
+  model: Model,
+  theme: PaletteTheme,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const previewPositions = computePreviewPositions(model)
+  const previewColor =
+    model.tool === 'Eraser'
+      ? EMPTY_COLOR
+      : (theme.colors[model.selectedColorIndex] ?? EMPTY_COLOR)
+
+  return h.div(
+    [
+      h.Class(
+        'flex flex-col items-center gap-4 min-w-0 self-start col-span-full min-[480px]:col-span-full md:col-span-1 -order-1 md:order-none',
+      ),
+    ],
+    [
+      h.div(
+        [h.OnMouseLeave(Message.LeftCanvas()), h.Class('w-full max-w-lg')],
+        [
+          h.div(
+            [
+              h.Class('cursor-crosshair select-none w-full aspect-square'),
+              h.Style({
+                display: 'flex',
+                'flex-direction': 'column',
+                backgroundColor: '#ffffff',
+              }),
+            ],
+            Array.map(model.grid, (row, y) => {
+              const rowPreviewPositions = pipe(
+                previewPositions,
+                Array.filter(([, positionY]) => positionY === y),
+                Array.match({
+                  onEmpty: () => EMPTY_PREVIEW_POSITIONS,
+                  onNonEmpty: filtered => filtered,
+                }),
+              )
+              // oxlint-disable-next-line foldkit/no-array-index-view-keys -- a fixed positional grid; the row index is the stable identity
+              return lazyRow(`${y}`, rowView, [
+                row,
+                y,
+                previewColor,
+                rowPreviewPositions,
+                theme,
+                h,
+              ])
+            }),
+          ),
+        ],
+      ),
+    ],
+  )
+}
+
+export const rowView = (
+  row: ReadonlyArray<Cell>,
+  y: number,
+  previewColor: HexColor,
+  previewPositions: ReadonlyArray<readonly [number, number]>,
+  theme: PaletteTheme,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Style({ display: 'flex', flex: '1' })],
+    Array.map(row, (cell, x) => {
+      const isPreview = previewPositions.some(
+        ([previewX, previewY]) => previewX === x && previewY === y,
+      )
+      const displayColor = isPreview ? previewColor : resolveColor(cell, theme)
+
+      return h.div([
+        h.OnMouseDown(Message.PressedCell({ x, y })),
+        h.OnMouseEnter(Message.EnteredCell({ x, y })),
+        h.Style({
+          flex: '1',
+          backgroundColor: displayColor,
+        }),
+      ])
+    }),
+  )