feat: read gallery data from gallery template object

app/src/components/AppIconButton.tsx

@@ -0,0 +1,17 @@
+import { useLocation } from "wouter";
+import { AppIcon } from "./AppIcon";
+import { Tooltip } from "@mantine/core";
+
+export const AppIconButton = () => {
+  const [, setLocation] = useLocation();
+
+  return (
+    <Tooltip label="Metagallery">
+      <div style={{ cursor: 'pointer' }} onClick={() => {
+        setLocation("/dashboard");
+      }}>
+        <AppIcon size={44} animated={false} />
+      </div>
+    </Tooltip>
+  );
+}

app/src/components/DynamicText/index.tsx

@@ -1,13 +1,16 @@
 import { Group, Text, TextInput } from '@mantine/core';
 import { IconCheck, IconPencil } from '@tabler/icons-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useHover } from '@mantine/hooks';
 import { primaryIconProps } from '@/constants';
 
-export const DynamicText = ({ value, setValue }: {
+type OnFinishEdit = (value: string) => void;
+
+export const DynamicText = ({ value, setValue, onFinishEdit }: {
   value: string;
   setValue: (value: string) => void;
+  onFinishEdit?: OnFinishEdit;
 }) => {
   const [internalValue, setInternalValue] = useState(value);
   const [editing, setEditing] = useState(false);
@@ -18,42 +21,47 @@ export const DynamicText = ({ value, setValue }: {
     setEditing(false);
   };
 
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value])
+
   return (
     <Group ref={ref} wrap="nowrap">
       {
         editing
           ? <TextInput
-              variant="text"
-              value={internalValue}
-              onChange={(e) => setInternalValue(e.currentTarget.value)}
-              size="md"
-              onBlur={() => save(internalValue)}
-              onKeyDown={(e) => e.key === 'Enter' && save(internalValue)}
-              w={180}
+            variant="filled"
+            value={internalValue}
+            onChange={(e) => setInternalValue(e.currentTarget.value)}
+            size="md"
+            onBlur={() => save(internalValue)}
+            onKeyDown={(e) => e.key === 'Enter' && save(internalValue)}
+            w={180}
           />
           : <Text
-              onDoubleClick={() => setEditing(true)}
-              w={180}
-              truncate
+            onDoubleClick={() => setEditing(true)}
+            w={180}
+            onClick={() => setEditing(true)}
+            truncate
           >
             {value}
-            </Text>
+          </Text>
       }
       {
         editing
           ? <IconCheck
-              {...primaryIconProps}
-              opacity={0.5}
-              onClick={() => save(internalValue)}
-              cursor="pointer"
-              title="Guardar"
+            {...primaryIconProps}
+            opacity={0.5}
+            onClick={() => save(internalValue)}
+            cursor="pointer"
+            title="Guardar"
           />
           : <IconPencil
-              {...primaryIconProps}
-              opacity={hovered ? 0.5 : 0}
-              onClick={() => setEditing(true)}
-              cursor="pointer"
-              title="Editar"
+            {...primaryIconProps}
+            opacity={hovered ? 0.5 : 0}
+            onClick={() => setEditing(true)}
+            cursor="pointer"
+            title="Editar"
           />
       }
     </Group>

app/src/components/FileEditor/FileEditor.tsx

@@ -1,3 +1,4 @@
+import { useMetagalleryStore } from "@/providers/MetagalleryProvider";
 import { UserContentFileElement } from "@/types";
 import { Button, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
@@ -27,6 +28,7 @@ const FileEditor = ({ element }: {
 
   const handleSubmit = form.onSubmit(async (values) => {
     await updateFileMutation.mutateAsync({ ...values, id: element.id } as any);
+    useMetagalleryStore.getState().closeModal('file-editor-modal');
   });
 
   return (
@@ -56,7 +58,7 @@ const FileEditor = ({ element }: {
           Actualizar
         </Button>
       </div>
-    </form>  
+    </form>
   )
 };
 

app/src/hooks/useApi.ts

@@ -224,13 +224,13 @@ const fetcher = async <T>(...args: ArgsType<typeof fetch>): Promise<ApiResponse<
     //         code: 200,
     //     };
     // }
-    if (path.toString().includes('gallery/')) {
-        // const gallery = path.split('/')[1];
-        return {
-            data: galleryResponse as T,
-            code: 200,
-        };
-    }
+    // if (path.toString().includes('gallery/')) {
+    //     // const gallery = path.split('/')[1];
+    //     return {
+    //         data: galleryResponse as T,
+    //         code: 200,
+    //     };
+    // }
 
     const response = await fetch(...args);
     const data = await response.json();

app/src/pages/Editor/components/GalleryCanvas2D.tsx

@@ -10,6 +10,7 @@ import { PictureSlot } from '@/pages/Editor/components/blocks/PictureSlot';
 import { Model3DSlot } from '@/pages/Editor/components/blocks/Model3DBlock';
 import { getInitialScale, getInitialXY, saveScaleToLocalStorage, saveXYToLocalStorage } from '../utils';
 import { galleryResponse, useApi } from '@/hooks/useApi';
+import { StillerGallery } from '@/types';
 
 const initialScale = getInitialScale();
 const initialXY = getInitialXY();
@@ -23,10 +24,12 @@ type GalleryCanvas2DProps = {
 
 export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DProps) => {
   const [viewport, setViewport] = useState({ x: 0, y: 0 });
-  const [image,] = useImage('/assets/examples/topview.svg');
   const draggingElem = useEditorStore((state) => state.draggingFile);
   const stageRef = useRef<Konva.Stage>(null);
-  const { response } = useApi<typeof galleryResponse>(`/gallery/${gallery}`);
+  const { response } = useApi<StillerGallery>(`/gallery/${gallery}`);
+
+  const [topViewUrl, setTopViewUrl] = useState('');
+  const [image,] = useImage(topViewUrl);
 
   const handleViewportResize = () => {
     const bounds = document.getElementById('canvas')?.getBoundingClientRect();
@@ -47,6 +50,12 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
     handleViewportResize();
   }, [triggerReRender]);
 
+  useEffect(() => {
+    if (response) {
+      setTopViewUrl(`https://pandadiestro.xyz/services/stiller/template/info/${response.data.templateid}/topview`);
+    }
+  }, [response]);
+
   return (
     <Box
       id="canvas"
@@ -96,17 +105,19 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
         <Layer>
           <Image image={image} />
         </Layer>
-        <Layer scale={SLOTS_SCALE} offsetX={response?.data.origin[0]} offsetY={response?.data.origin[1]}>
+        <Layer scale={SLOTS_SCALE} offsetX={response?.data.slots.origin[0]} offsetY={response?.data.slots.origin[1]}>
           {
-            response && response.data.slots.map((block, i) => {
+            response && response.data.slots.slots.map((block, i) => {
+              const res = block.res == 0 ? `https://pandadiestro.xyz/services/stiller/file/dl/${block.res}` : null;
+
               if (block.type == '2d') {
                 return (
                   <PictureSlot
                     key={i}
                     idRef={block.ref}
                     v={block.v as any}
                     props={{}}
-                    res={block.res} // TODO: make reactive
+                    res={res} // TODO: make reactive
                   />
                 );
               }
@@ -117,7 +128,7 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
                     id={i} // TODO: replace
                     v={block.v[0] as any}
                     props={block.props}
-                    res={block.res} // TODO: make reactive
+                    res={res} // TODO: make reactive
                   />
                 );
               }

app/src/pages/Editor/components/MenuBurger.tsx

@@ -5,12 +5,18 @@ import {
 } from '@tabler/icons-react';
 
 import { primaryIconProps } from '@/constants';
+import { useLocation } from 'wouter';
 
 export const MenuBurger = () => {
+  const [location, setLocation] = useLocation();
+
   const options = [
     {
       Icon: <IconLayout {...primaryIconProps} />,
-      label: 'Ver plantillas',
+      label: 'Volver al menú',
+      OnClick: () => {
+        setLocation('/dashboard');
+      }
     },
   ];
 
@@ -26,16 +32,19 @@ export const MenuBurger = () => {
         />
       </Menu.Target>
       <Menu.Dropdown>
-      {
-        options.map(option => (
-          <Menu.Item
-            key={option.label}
-            leftSection={option.Icon}
-          >
-            {option.label}
-          </Menu.Item>
-        ))
-      }
+        {
+          options.map(option => (
+            <Menu.Item
+              key={option.label}
+              leftSection={option.Icon}
+              onClick={() => {
+                option.OnClick();
+              }}
+            >
+              {option.label}
+            </Menu.Item>
+          ))
+        }
       </Menu.Dropdown>
     </Menu>
   );

app/src/pages/Editor/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { UserButton } from '@/components/UserButton';
 import { DynamicText } from '@/components/DynamicText';
 import { GalleryCanvas2D } from './components/GalleryCanvas2D';
@@ -7,18 +7,47 @@ import { MainButtons } from './components/MainButtons';
 import { EditorSidebar } from './components/ContentSidebar';
 import { DRAG_PORTAL_ID } from '@/constants';
 import { Gallery3D } from '../Gallery3D';
+import { StillerGallery } from '@/types';
+import { LoadingScreen } from '@/components/Overlays/LoadingScreen';
+import { useApi } from '@/hooks/useApi';
+import { AppIcon } from '@/components/AppIcon';
+import { useLocation } from 'wouter';
+import { AppIconButton } from '@/components/AppIconButton';
 
 export const Editor = ({ gallery }: { gallery: string }) => {
-  const [projectName, setProjectName] = useState('Nueva galería');
   const [previewOpened, setPreviewOpened] = useState(false);
+  const [location, setLocation] = useLocation();
+  const { response, isLoading, error } = useApi<StillerGallery>(`/gallery/${gallery}`);
+  const [projectName, setProjectName] = useState('Cargando galería...');
+
+  const galleryData = response?.data;
+  console.log({ galleryData, isLoading, error })
+
+  useEffect(() => {
+    if (galleryData) {
+      setProjectName(galleryData.title);
+    }
+  }, [isLoading])
+
+  if (isLoading || !galleryData) {
+    return <LoadingScreen />;
+  }
+
   return (
     <>
       <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden' }}>
         <div id={DRAG_PORTAL_ID} style={{ position: 'absolute' }}></div>
         <div style={{ display: 'flex', justifyContent: 'space-between', minHeight: '70px', maxHeight: '70px' }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', flexWrap: 'nowrap', paddingLeft: '16px' }}>
             <MenuBurger />
-            <DynamicText value={projectName} setValue={setProjectName} />
+            <a></a>
+            <AppIconButton />
+            <a></a>
+            <DynamicText
+              value={projectName}
+              setValue={setProjectName}
+            // onFinishEdit={} // not implemented
+            />
           </div>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '12px', paddingRight: '16px', }}>
             <MainButtons

app/src/pages/Gallery3D/Experience.tsx

@@ -7,9 +7,10 @@ import { BallCollider, Physics } from '@react-three/rapier';
 import { useEffect, useState } from 'react';
 import { DynamicPainting } from './components/gallery/DynamicPainting';
 import { DynamicSculpture } from './components/gallery/DynamicSculpture';
+import { StillerGallery } from '@/types';
 
 export const Experience = ({ gallery }: { gallery: string }) => {
-  const { response } = useApi<typeof galleryResponse>(`/gallery/${gallery}`);
+  const { response } = useApi<StillerGallery>(`/gallery/${gallery}`);
 
   const [gravityEnabled, setGravityEnabled] = useState(false);
 
@@ -25,25 +26,27 @@ export const Experience = ({ gallery }: { gallery: string }) => {
       <ambientLight intensity={0.6} />
       {/* <axesHelper args={[10]} /> */}
       {
-        response && response.data.slots.map((slots) => {
-          if (slots.type == '2d') {
+        response && response.data.slots.slots.map((slot) => {
+          const res = slot.res == 0 ? `https://pandadiestro.xyz/services/stiller/file/dl/${slot.res}` : null;
+
+          if (slot.type == '2d') {
             return (
               <DynamicPainting
-                key={slots.ref}
-                imageUrl={slots.res || "/assets/empty_slot.png"}
-                vertices={slots.v}
+                key={slot.ref}
+                imageUrl={res || "/assets/empty_slot.png"}
+                vertices={slot.v}
               />
             );
           }
-          if (slots.type == '3d') {
+          if (slot.type == '3d') {
             return (
               <DynamicSculpture
-                key={slots.ref}
-                position={slots.v[0] as any}
+                key={slot.ref}
+                position={slot.v[0] as any}
                 glbUrl="/assets/3d/chihiro.glb"
                 rotation={[0, Math.PI / 4, 0]}
-                scale={[slots.props.scale, slots.props.scale, slots.props.scale] as any}
-                rotate={slots.props.rotate}
+                scale={[slot.props.scale, slot.props.scale, slot.props.scale] as any}
+                rotate={slot.props.rotate as boolean}
               />
             );
           }

app/src/pages/index.tsx

@@ -40,8 +40,14 @@ export const routes = [
     href: ':gallery/edit',
     label: 'Editor',
     component: ({ params }: { params: { gallery: string } }) => {
+      const { loading, user } = useUser();
+
+      if (!loading && !user) {
+        return <Redirect to="/" />;
+      }
+
       const { gallery } = params;
-      useEditorStore.setState({ gallery });
+      useEditorStore.setState({ gallery: gallery });
       return <Editor gallery={gallery}></Editor>;
     },
   },