feat: add crop and canvas resize workflows

platform/browser/exportArtboardPng.ts

@@ -2,6 +2,7 @@ import type { Artboard } from "@core/artboard";
 import type { Asset } from "@core/asset";
 import type { Rect } from "@core/geometry";
 import type { Layer } from "@core/layer";
+import type { Size } from "@core/geometry";
 import { getLayerMask } from "@core/layer-mask-utils";
 
 export async function downloadArtboardPng(artboard: Artboard, assets: readonly Asset[]) {
@@ -66,16 +67,25 @@ async function drawLayer(
   }
 
   const image = await loadImage(asset.source);
-  context.drawImage(
-    image,
-    layer.transform.position.x,
-    layer.transform.position.y,
-    asset.intrinsicSize.w * layer.transform.scale.x,
-    asset.intrinsicSize.h * layer.transform.scale.y,
-  );
+  const draw = resolveLayerDrawImage(layer, asset.intrinsicSize);
+  context.drawImage(image, draw.source.x, draw.source.y, draw.source.w, draw.source.h,
+    draw.destination.x, draw.destination.y, draw.destination.w, draw.destination.h);
   context.restore();
 }
 
+export function resolveLayerDrawImage(layer: Exclude<Layer, { type: "group" }>, intrinsicSize: Size) {
+  const source = layer.sourceRect ?? { x: 0, y: 0, ...intrinsicSize };
+  return {
+    source,
+    destination: {
+      x: layer.transform.position.x + source.x * layer.transform.scale.x,
+      y: layer.transform.position.y + source.y * layer.transform.scale.y,
+      w: source.w * layer.transform.scale.x,
+      h: source.h * layer.transform.scale.y,
+    },
+  };
+}
+
 async function drawMaskedLayer(
   context: CanvasRenderingContext2D,
   layer: Layer,