feat: support opening local file

src/Canvas/Layer.tsx

@@ -0,0 +1,10 @@
+import { Sprite } from '@inlet/react-pixi';
+import { observer } from 'mobx-react-lite';
+import { ILayer } from '@store/Layer';
+
+export default observer(({ layer }: { layer: ILayer }) => {
+  if (layer.visible && layer.image) {
+    return <Sprite image={layer.image} />;
+  }
+  return null;
+});

src/Canvas/index.tsx

@@ -1,10 +1,13 @@
 import { useMeasure } from 'react-use';
 import { Stage } from '@inlet/react-pixi';
 import { View } from '@adobe/react-spectrum';
+import { observer } from 'mobx-react-lite';
+import store from '@store';
 import Viewport from './Viewport';
 import Background from './Background';
+import Layer from './Layer';
 
-export default function Canvas() {
+export default observer(() => {
   const [ref, canvasContainerRect] = useMeasure();
 
   return (
@@ -30,9 +33,12 @@ export default function Canvas() {
         >
           <Viewport>
             <Background />
+            {store.activeDocument?.layers.map(layer => (
+              <Layer key={layer.id} layer={layer} />
+            ))}
           </Viewport>
         </Stage>
       )}
     </View>
   );
-}
+});

src/Home/index.tsx

@@ -9,12 +9,37 @@ import {
 } from '@adobe/react-spectrum';
 import Upload from '@spectrum-icons/illustrations/Upload';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import store from '@store';
 import CreateDocument from './CreateDocument';
 
 export default function Home() {
   const { t } = useTranslation();
   const [isCreatingDocument, setCreatingDocumentStatus] = useState(false);
+  const onPickFile = useCallback((event: Event) => {
+    const input = event.target;
+    if (!(input instanceof HTMLInputElement)) return;
+    const file = input.files?.[0];
+    if (!file) return;
+    const image = new Image();
+    const url = URL.createObjectURL(file);
+    image.src = url;
+    image.onload = () => {
+      store.addDocument({
+        name: file.name,
+        width: image.width,
+        height: image.height,
+        image: url,
+      });
+    };
+  }, []);
+  const [fileInput] = useState(() => {
+    const fileInputElement = document.createElement('input');
+    fileInputElement.type = 'file';
+    fileInputElement.accept = 'image/png,image/jpeg';
+    fileInputElement.onchange = onPickFile;
+    return fileInputElement;
+  });
 
   if (isCreatingDocument)
     return <CreateDocument onCancel={() => setCreatingDocumentStatus(false)} />;
@@ -37,7 +62,14 @@ export default function Home() {
                 <Button variant="secondary" onPress={() => setCreatingDocumentStatus(true)}>
                   {t('newFile')}
                 </Button>
-                <Button variant="secondary">{t('openImage')}</Button>
+                <Button
+                  variant="secondary"
+                  onPress={() => {
+                    fileInput.click();
+                  }}
+                >
+                  {t('openImage')}
+                </Button>
               </ButtonGroup>
             </Content>
           </IllustratedMessage>

src/store/Layer.ts

@@ -6,6 +6,7 @@ const Layer = types
     name: types.string,
     visible: true,
     opacity: 1,
+    image: types.maybe(types.string),
   })
   .actions(self => ({
     setName(value: string) {

src/store/Root.ts

@@ -8,8 +8,14 @@ const Root = types
     documents: types.optional(types.array(Document), []),
   })
   .actions(self => ({
-    addDocument(document: Omit<IDocumentSnapshotOut, 'id' | 'layers'>) {
-      const newDocument = Document.create({ id: nanoid(), ...document });
+    addDocument(document: Omit<IDocumentSnapshotOut, 'id' | 'layers'> & { image?: string }) {
+      const newDocument = Document.create({
+        id: nanoid(),
+        ...document,
+        ...(document.image
+          ? { layers: [{ id: nanoid(), name: document.name, image: document.image }] }
+          : {}),
+      });
       self.documents.push(newDocument);
       self.activeDocument = newDocument;
     },