feat: add asset handling in drawable components

.github/workflows/label-sync.yml

@@ -16,7 +16,7 @@ jobs:
     if: github.repository_owner == 'NanoForge-dev'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
 
       - name: Label sync
         uses: crazy-max/ghaction-github-labeler@v6

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
     if: github.repository_owner == 'NanoForge-dev'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
 
       - name: Prepare
         uses: ./.github/actions/prepare
@@ -30,7 +30,7 @@ jobs:
         run: nf login -k ${{ secrets.NF_REGISTRY_KEY }}
 
       - name: Release packages
-        uses: ./node_modules/@nanoforge-dev/actions/dist/release-nanoforge-packages
+        uses: ./node_modules/@nanoforge-dev/actions/actions/release-nanoforge-packages
         with:
           package: "all"
           exclude: ""

.github/workflows/tests.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v7
 
       - name: Prepare
         uses: ./.github/actions/prepare

.husky/commit-msg

@@ -1 +1 @@
-pnpm --no-install commitlint --edit "$1"
+pnpm commitlint --edit "$1"

.husky/pre-commit

@@ -1 +1 @@
-pnpm --no-install lint-staged
+pnpm lint-staged

package.json

@@ -62,7 +62,7 @@
     "typescript": "catalog:core",
     "vitest": "catalog:test"
   },
-  "packageManager": "pnpm@10.33.0",
+  "packageManager": "pnpm@11.9.0",
   "engines": {
     "node": "25"
   },

packages/nf-drawable-circle-2d.component/index.ts

@@ -1,3 +1,4 @@
+import type { NfFile } from "@nanoforge-dev/common";
 import { type EditorComponentManifest } from "@nanoforge-dev/ecs-lib";
 import { Circle, type Layer } from "@nanoforge-dev/graphics-2d";
 
@@ -18,7 +19,7 @@ export class DrawableCircle2D {
     offsetX?: number,
     offsetY?: number,
     fillColor?: string,
-    private _fillPatternImage?: string,
+    private _fillPatternImage?: NfFile,
     fillPatternX?: number,
     fillPatternY?: number,
     fillPatternOffsetX?: number,
@@ -42,7 +43,7 @@ export class DrawableCircle2D {
       offsetY,
       fill: fillColor,
       fillPatternImage: _fillPatternImage
-        ? Object.assign(new Image(), { src: _fillPatternImage })
+        ? Object.assign(new Image(), { src: _fillPatternImage.path })
         : undefined,
       fillPatternX,
       fillPatternY,
@@ -139,11 +140,11 @@ export class DrawableCircle2D {
     this.shape.fill(v);
     this.redraw();
   }
-  get fillPatternImage(): string {
-    return this._fillPatternImage || "";
+  get fillPatternImage(): NfFile | undefined {
+    return this._fillPatternImage;
   }
-  set fillPatternImage(v: string) {
-    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+  set fillPatternImage(v: NfFile) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v.path }) : undefined);
     this.redraw();
   }
   get fillPatternX() {
@@ -307,7 +308,7 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
     },
     {
       name: "fillPatternImage",
-      type: "string",
+      type: "asset",
       description: "Image element to use as a tiling pattern fillt",
       optional: true,
     },

packages/nf-drawable-rect-2d.component/index.ts

@@ -1,3 +1,4 @@
+import type { NfFile } from "@nanoforge-dev/common";
 import { type EditorComponentManifest } from "@nanoforge-dev/ecs-lib";
 import { type Layer, Rect } from "@nanoforge-dev/graphics-2d";
 
@@ -20,7 +21,7 @@ export class DrawableRect2D {
     offsetX?: number,
     offsetY?: number,
     fillColor?: string,
-    private _fillPatternImage?: string,
+    private _fillPatternImage?: NfFile,
     fillPatternX?: number,
     fillPatternY?: number,
     fillPatternOffsetX?: number,
@@ -46,7 +47,7 @@ export class DrawableRect2D {
       offsetY,
       fill: fillColor,
       fillPatternImage: _fillPatternImage
-        ? Object.assign(new Image(), { src: _fillPatternImage })
+        ? Object.assign(new Image(), { src: _fillPatternImage.path })
         : undefined,
       fillPatternX,
       fillPatternY,
@@ -156,11 +157,11 @@ export class DrawableRect2D {
     this.shape.fill(v);
     this.redraw();
   }
-  get fillPatternImage(): string {
-    return this._fillPatternImage || "";
+  get fillPatternImage(): NfFile | undefined {
+    return this._fillPatternImage;
   }
-  set fillPatternImage(v: string) {
-    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+  set fillPatternImage(v: NfFile) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v.path }) : undefined);
     this.redraw();
   }
   get fillPatternX() {
@@ -338,7 +339,7 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
     },
     {
       name: "fillPatternImage",
-      type: "string",
+      type: "asset",
       description: "Image element to use as a tiling pattern fillt",
       optional: true,
     },

packages/nf-drawable-text-2d.component/index.ts

@@ -1,3 +1,4 @@
+import type { NfFile } from "@nanoforge-dev/common";
 import { type EditorComponentManifest } from "@nanoforge-dev/ecs-lib";
 import { type Layer, Text } from "@nanoforge-dev/graphics-2d";
 
@@ -34,7 +35,7 @@ export class DrawableText2D {
     offsetX?: number,
     offsetY?: number,
     fillColor?: string,
-    private _fillPatternImage?: string,
+    private _fillPatternImage?: NfFile,
     fillPatternX?: number,
     fillPatternY?: number,
     fillPatternOffsetX?: number,
@@ -74,7 +75,7 @@ export class DrawableText2D {
       offsetY,
       fill: fillColor,
       fillPatternImage: _fillPatternImage
-        ? Object.assign(new Image(), { src: _fillPatternImage })
+        ? Object.assign(new Image(), { src: _fillPatternImage.path })
         : undefined,
       fillPatternX,
       fillPatternY,
@@ -267,11 +268,11 @@ export class DrawableText2D {
     this.shape.fill(v);
     this.redraw();
   }
-  get fillPatternImage(): string {
-    return this._fillPatternImage || "";
+  get fillPatternImage(): NfFile | undefined {
+    return this._fillPatternImage;
   }
-  set fillPatternImage(v: string) {
-    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+  set fillPatternImage(v: NfFile) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v.path }) : undefined);
     this.redraw();
   }
   get fillPatternX() {
@@ -534,7 +535,7 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
     },
     {
       name: "fillPatternImage",
-      type: "string",
+      type: "asset",
       description: "Image element to use as a tiling pattern fillt",
       optional: true,
     },