diff --git a/commands/document.test.ts b/commands/document.test.ts index 78da0a1..1ba4574 100644 --- a/commands/document.test.ts +++ b/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") }, diff --git a/commands/document.ts b/commands/document.ts index db07118..a735f68 100644 --- a/commands/document.ts +++ b/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 }, }; +export const documentAddRasterLayerCommand: Command = { + 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 = { id: commandIds.documentAddGroupLayer, name: "Add group layer", @@ -389,6 +407,7 @@ export const documentCommands = [ documentRenameArtboardCommand, documentAddAssetCommand, documentAddImageLayerCommand, + documentAddRasterLayerCommand, documentAddGroupLayerCommand, documentMoveLayerCommand, documentGroupLayersCommand, diff --git a/commands/ids.ts b/commands/ids.ts index e38c062..1777619 100644 --- a/commands/ids.ts +++ b/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", diff --git a/commands/index.ts b/commands/index.ts index 023357f..39a02e2 100644 --- a/commands/index.ts +++ b/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, diff --git a/commands/payloads.ts b/commands/payloads.ts index 5e05dd1..4f88253 100644 --- a/commands/payloads.ts +++ b/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; diff --git a/core/index.ts b/core/index.ts index 747f5ba..9cd1d6c 100644 --- a/core/index.ts +++ b/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"; diff --git a/core/layer.ts b/core/layer.ts index 87c0871..496896e 100644 --- a/core/layer.ts +++ b/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; diff --git a/core/raster-layer.ts b/core/raster-layer.ts new file mode 100644 index 0000000..7a29fec --- /dev/null +++ b/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; +}; diff --git a/editor/transform-targets.ts b/editor/transform-targets.ts index c9145c7..ad7462a 100644 --- a/editor/transform-targets.ts +++ b/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; diff --git a/view/LayersSheet.tsx b/view/LayersSheet.tsx index 40c3bcb..2e00fa3 100644 --- a/view/LayersSheet.tsx +++ b/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,