Rework asset system

.eslintrc.json

@@ -72,17 +72,8 @@
         "@typescript-eslint/ban-ts-comment": "error",
         "@typescript-eslint/ban-tslint-comment": "error",
         "@typescript-eslint/ban-types": "error",
-        "@typescript-eslint/brace-style": [
-            "error",
-            "stroustrup",
-            {
-                "allowSingleLine": true
-            }
-        ],
         "@typescript-eslint/class-literal-property-style": "error",
-        "@typescript-eslint/comma-spacing": [
-            "error"
-        ],
+        "@typescript-eslint/comma-spacing": "error",
         "@typescript-eslint/consistent-indexed-object-style": [
             "error",
             "index-signature"
@@ -93,7 +84,12 @@
                 "prefer": "no-type-imports"
             }
         ],
-        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/dot-notation": [
+            "error",
+            {
+                "allowIndexSignaturePropertyAccess": true
+            }
+        ],
         "@typescript-eslint/explicit-function-return-type": "error",
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/func-call-spacing": "error",
@@ -223,6 +219,13 @@
             "error",
             4
         ],
+        "@stylistic/brace-style": [
+            "error",
+            "stroustrup",
+            {
+                "allowSingleLine": true
+            }
+        ],
         "@stylistic/keyword-spacing": [
             "error",
             {

src/core/Converter.ts

@@ -41,10 +41,11 @@ export class Converter {
 
         for (const id in assets) {
             const asset = assets[id];
-            const contentBlob = new Blob([asset.content], {type: "text/plain"});
+            if (!asset.data) throw new Error("");
+            const contentBlob = new Blob([asset.data], {type: "text/plain"});
 
-            const path = `asset/${id}.b64`;
-            records[asset.id] = {...asset, content: "", path};
+            const path = `asset/${id}.${asset.encoding}`;
+            records[asset.id] = {...asset, path, data: ""};
             blobs[path] = contentBlob;
         }
 
@@ -67,7 +68,8 @@ export class Converter {
 
         for (const id in data.asset) {
             const asset = data.asset[id];
-            asset.content = await files[asset.path].text();
+            if (!asset.path) throw new Error("");
+            asset.data = await files[asset.path].text();
             asset.path = "";
         }
 
@@ -101,21 +103,18 @@ export class Converter {
 
         for (const id in input) {
             const asset = input[id];
-            if (!asset.content) throw new Error();
-            const assetData = asset.content.split(/[;:,]/);
-            const base64String = assetData[3];
-            const assetDataBytes = this.base64toBytes(base64String);
-            const extension = this.media.typeToExtension(asset.mime);
+            if (!asset.data) throw new Error();
+            const assetDataBytes = this.base64toBytes(asset.data);
+            const extension = this.media.typeToExtension(asset.media);
 
             const path = `${name}/${id}.${extension}`;
             output[id] = {
                 ...asset,
-                mime: asset.mime,
                 path,
-                content: "",
+                data: "",
             };
 
-            blobs[path] = new Blob([assetDataBytes], {type: asset.mime});
+            blobs[path] = new Blob([assetDataBytes], {type: asset.media});
         }
 
         return [output, blobs];

src/core/Core.ts

@@ -1,7 +1,7 @@
 import {Invoker, Converter, Store} from "@core";
 import {WebArchiveDriver, WebImageDriver} from "@core/driver";
 import {ArchiveDriver, ImageDriver} from "@src/interface";
-import {Group, Id, Motion, Tile, Asset, Image} from "@type";
+import {Group, Tile, Image} from "@type";
 import {AssetType, EntityType, LayerName} from "@enum";
 
 export class Core {
@@ -48,9 +48,10 @@ export class Core {
         const tileIds = tiles.map((tile) => {
             const imageId = this.store.asset.add<Image>({
                 typeId: imageTypeId,
-                content: tile.base64,
+                data: tile.data,
+                media: tile.media,
+                encoding: tile.encoding,
                 path: "",
-                mime,
             });
 
             const tileId = this.store.entity.add<Tile>({
@@ -67,45 +68,4 @@ export class Core {
 
         this.store.entity.set<Group>({id: map.id, childIds: tileIds});
     }
-
-    async initProp({name, file, width, height}: {
-        name: string;
-        width: number;
-        height: number;
-        file: File;
-    }): Promise<Id> {
-        const mime = "image/png";
-        const base64 = await this.imageDriver
-            .fooImage(file, width, height, mime);
-
-        const {id: propTypeId} = this.store.type
-            .getByParams({name: AssetType.PROP})[0];
-
-        const propId = this.store.asset
-            .add({typeId: propTypeId, content: base64, path: "", mime});
-
-        return propId;
-    }
-
-    initMotion(motionData: {
-        name: string;
-        class: string;
-        source: string;
-    }): Id {
-        const mime = "text/css";
-
-        const {id: motionTypeId} = this.store.type
-            .getByParams({name: AssetType.MOTION})[0];
-
-        const motionId = this.store.asset.add<Motion>({
-            typeId: motionTypeId,
-            content: motionData.source,
-            path: "",
-            class: motionData.class,
-            name: motionData.name,
-            mime,
-        });
-
-        return motionId;
-    }
 }

src/core/driver/WebImageDriver.ts

@@ -72,13 +72,17 @@ export class WebImageDriver implements ImageDriver {
                     0, 0, tileWidth, tileHeight
                 );
 
-                const base64 = canvas.toDataURL(mime);
+                const dataUrl = canvas.toDataURL(mime);
+                const data = dataUrl.split(/[;:,]/);
+
                 tiles.push({
                     x,
                     y,
                     width: tileWidth,
                     height: tileHeight,
-                    base64,
+                    media: data[1],
+                    encoding: data[2],
+                    data: data[3],
                 });
             }
         }

src/interface/ImageDriver.ts

@@ -3,7 +3,9 @@ export type ImageTile = {
     y: number;
     width: number;
     height: number;
-    base64: string;
+    media: string;
+    encoding: string;
+    data: string;
 };
 
 export interface ImageDriver {

src/type/Asset.ts

@@ -4,7 +4,8 @@ export type Asset = {
     id: Id;
     typeId: Id | null;
 
-    mime: string;
     path: string;
-    content: string;
+    data: string;
+    media: string;
+    encoding: string;
 };

src/ui/app/utiliy/assetToSrc.ts

@@ -0,0 +1,6 @@
+import {Asset} from "@type";
+
+export function assetToSrc(asset: Asset): string {
+    return asset.path
+        || `data:${asset.media};${asset.encoding},${asset.data}`;
+}

src/ui/app/utiliy/index.ts

@@ -1 +1,3 @@
-export * from "./createLocalStorageSyncSignal";
+export * from "./createLocalStorageSyncSignal";
+export * from "./assetToSrc";
+export * from "./readFile";

src/ui/app/utiliy/readFile.ts

@@ -0,0 +1,25 @@
+export async function readFile(file: File): Promise<{
+    media: string;
+    encoding: string;
+    data: string;
+}>{
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.addEventListener("load", () => {
+            const {result} = reader;
+            if (typeof result != "string") throw new Error("");
+
+            const dataUrl = result.split(/[;:,]/);
+            resolve({
+                media: dataUrl[1],
+                encoding: dataUrl[2],
+                data: dataUrl[3],
+            });
+        });
+
+        reader.addEventListener("error", reject);
+
+        reader.readAsDataURL(file);
+    });
+}

src/ui/area/widget/AreaWidget/AreaWidget.tsx

@@ -24,7 +24,7 @@ export function AreaWidget(props: Props): JSX.Element {
 
     createEffect(on(viewerCtx.render, refetch));
 
-    const f = 4;
+    const factor = (): number => 5 / viewerCtx.mapCtx.scale;
 
     const x = (): string => {
         const data = area();
@@ -56,13 +56,14 @@ export function AreaWidget(props: Props): JSX.Element {
 
     const viewBox = (): string => {
         const data = area();
+
         if (data) {
             const x = -data.width / 2;
             const y = -data.height / 2;
             const width = data.width;
             const height = data.height;
 
-            return `${x - f} ${y - f} ${width + f * 2} ${height + f * 2}`;
+            return `${x - factor()} ${y - factor()} ${width + factor() * 2} ${height + factor() * 2}`;
         }
         else {
             return "0 0 0 0";
@@ -96,7 +97,7 @@ export function AreaWidget(props: Props): JSX.Element {
                 <circle
                     cx={point.x}
                     cy={point.y}
-                    r={f}
+                    r={factor()}
                     fill="#000f"
                 />
             )

src/ui/asset/widget/AssetForm/AssetForm.module.scss

@@ -1 +1,29 @@
-.AssetCreateDialog {}
+.Form {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    input {
+        padding: 8px;
+        color: inherit;
+
+        border: 1px solid var(--grey-60);
+        border-radius: 8px;
+        outline: none;
+    }
+
+    textarea {
+        width: 100%;
+        height: 10em;
+        border-radius: 8px;
+        padding: 8px;
+
+        border: 1px solid var(--grey-60);
+        box-shadow: none;
+        outline: none;
+    }
+}
+