feat(core): add raster layer type

commands/document.test.ts

@@ -5,6 +5,7 @@ import {
   documentAddAssetCommand,
   documentAddGroupLayerCommand,
   documentAddImageLayerCommand,
+  documentAddRasterLayerCommand,
   documentGroupLayersCommand,
   documentMoveLayerCommand,
   documentRemoveArtboardCommand,
@@ -77,6 +78,32 @@ describe("document commands", () => {
     expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["l1"]);
   });
 
+  test("adds raster layers to artboards", () => {
+    const state = documentAddArtboardCommand.execute(
+      { state: createInitialAppState("Test") },
+      { id: "a1", name: "Artboard 1", bounds: { x: 0, y: 0, w: 320, h: 240 } },
+    );
+
+    const next = documentAddRasterLayerCommand.execute(
+      { state },
+      {
+        artboardId: "a1",
+        layer: {
+          id: "r1",
+          type: "raster",
+          name: "Raster",
+          visible: true,
+          locked: false,
+          opacity: 1,
+          assetId: "asset-1",
+          transform: { position: { x: 10, y: 20 }, scale: { x: 1, y: 1 }, rotation: 0 },
+        },
+      },
+    );
+
+    expect(next.document.artboards[0]?.layers.map((layer) => layer.id)).toEqual(["r1"]);
+  });
+
   test("adds group layers", () => {
     const state = documentAddArtboardCommand.execute(
       { state: createInitialAppState("Test") },

commands/document.ts

@@ -4,6 +4,7 @@ import type { Rect } from "@core/geometry";
 import type { ArtboardId, LayerId } from "@core/id";
 import type { ImageLayer } from "@core/image-layer";
 import type { Layer } from "@core/layer";
+import type { RasterLayer } from "@core/raster-layer";
 import type { LayerGroup } from "@core/layer-group";
 import type { Command } from "./command";
 import { commandIds } from "./ids";
@@ -48,6 +49,12 @@ export type DocumentAddImageLayerPayload = {
   layer: ImageLayer;
 };
 
+export type DocumentAddRasterLayerPayload = {
+  artboardId: ArtboardId;
+  parentGroupId?: LayerId;
+  layer: RasterLayer;
+};
+
 export type DocumentAddGroupLayerPayload = {
   artboardId: ArtboardId;
   parentGroupId?: LayerId;
@@ -223,6 +230,17 @@ export const documentAddImageLayerCommand: Command<DocumentAddImageLayerPayload>
   },
 };
 
+export const documentAddRasterLayerCommand: Command<DocumentAddRasterLayerPayload> = {
+  id: commandIds.documentAddRasterLayer,
+  name: "Add raster layer",
+  execute({ state }, payload) {
+    return {
+      ...state,
+      document: insertLayer(state.document, payload.artboardId, payload.parentGroupId, payload.layer),
+    };
+  },
+};
+
 export const documentAddGroupLayerCommand: Command<DocumentAddGroupLayerPayload> = {
   id: commandIds.documentAddGroupLayer,
   name: "Add group layer",
@@ -389,6 +407,7 @@ export const documentCommands = [
   documentRenameArtboardCommand,
   documentAddAssetCommand,
   documentAddImageLayerCommand,
+  documentAddRasterLayerCommand,
   documentAddGroupLayerCommand,
   documentMoveLayerCommand,
   documentGroupLayersCommand,

commands/ids.ts

@@ -7,6 +7,7 @@ export const commandIds = {
   documentRenameArtboard: "document.renameArtboard",
   documentAddAsset: "document.addAsset",
   documentAddImageLayer: "document.addImageLayer",
+  documentAddRasterLayer: "document.addRasterLayer",
   documentAddGroupLayer: "document.addGroupLayer",
   documentMoveLayer: "document.moveLayer",
   documentGroupLayers: "document.groupLayers",

commands/index.ts

@@ -4,6 +4,7 @@ export {
   documentAddAssetCommand,
   documentAddGroupLayerCommand,
   documentAddImageLayerCommand,
+  documentAddRasterLayerCommand,
   documentCommands,
   documentGroupLayersCommand,
   documentMoveLayerCommand,
@@ -24,6 +25,7 @@ export type {
   DocumentAddAssetPayload,
   DocumentAddGroupLayerPayload,
   DocumentAddImageLayerPayload,
+  DocumentAddRasterLayerPayload,
   DocumentGroupLayersPayload,
   DocumentMoveLayerPayload,
   DocumentRemoveArtboardPayload,

commands/payloads.ts

@@ -4,6 +4,7 @@ import type {
   DocumentAddAssetPayload,
   DocumentAddGroupLayerPayload,
   DocumentAddImageLayerPayload,
+  DocumentAddRasterLayerPayload,
   DocumentGroupLayersPayload,
   DocumentMoveLayerPayload,
   DocumentRemoveArtboardPayload,
@@ -38,6 +39,7 @@ export type CommandPayloads = {
   [commandIds.documentRenameArtboard]: DocumentRenameArtboardPayload;
   [commandIds.documentAddAsset]: DocumentAddAssetPayload;
   [commandIds.documentAddImageLayer]: DocumentAddImageLayerPayload;
+  [commandIds.documentAddRasterLayer]: DocumentAddRasterLayerPayload;
   [commandIds.documentAddGroupLayer]: DocumentAddGroupLayerPayload;
   [commandIds.documentMoveLayer]: DocumentMoveLayerPayload;
   [commandIds.documentGroupLayers]: DocumentGroupLayersPayload;

core/index.ts

@@ -16,3 +16,4 @@ export type { ArtboardId, AssetId, DocumentId, LayerId } from "./id";
 export type { ImageLayer } from "./image-layer";
 export type { Layer } from "./layer";
 export type { LayerGroup } from "./layer-group";
+export type { RasterLayer } from "./raster-layer";

core/layer.ts

@@ -1,4 +1,5 @@
 import type { ImageLayer } from "./image-layer";
 import type { LayerGroup } from "./layer-group";
+import type { RasterLayer } from "./raster-layer";
 
-export type Layer = ImageLayer | LayerGroup;
+export type Layer = ImageLayer | RasterLayer | LayerGroup;

core/raster-layer.ts

@@ -0,0 +1,7 @@
+import type { BaseLayer } from "./base-layer";
+import type { AssetId } from "./id";
+
+export type RasterLayer = BaseLayer & {
+  type: "raster";
+  assetId: AssetId;
+};

editor/transform-targets.ts

@@ -45,7 +45,7 @@ function applyLayerBounds(document: ImageDocument, layerId: LayerId, bounds: Rec
 
 function applyLayerBoundsInTree(document: ImageDocument, layers: Layer[], layerId: LayerId, bounds: Rect): Layer[] {
   return layers.map((layer) => {
-    if (layer.id === layerId && layer.type === "image") {
+    if (layer.id === layerId && (layer.type === "image" || layer.type === "raster")) {
       const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
       if (!asset) return layer;
 
@@ -95,7 +95,8 @@ function resolveLayerBounds(document: ImageDocument, layer: Layer): Rect | undef
         const bounds = resolveLayerBounds(document, child);
         return bounds ? [bounds] : [];
       }));
-    case "image": {
+    case "image":
+    case "raster": {
       const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
       if (!asset) return undefined;
 

view/LayersSheet.tsx

@@ -344,12 +344,12 @@ function addLayer(document: ImageDocument, artboardId: ArtboardId, selectedLayer
       intrinsicSize: { w: width, h: height },
     },
   });
-  dispatch(commandIds.documentAddImageLayer, {
+  dispatch(commandIds.documentAddRasterLayer, {
     artboardId,
     parentGroupId: selectedLayer?.layer.type === "group" ? selectedLayer.layer.id : undefined,
     layer: {
       id: layerId,
-      type: "image",
+      type: "raster",
       name: "Layer",
       visible: true,
       locked: false,