Added support for multilayer photos

changelog

···
 
 v0.2.6:
   - Fixed photos not being loaded if they're too low resolution
-  - Added close to tray toggle
   - Fixed "Open in folder" not selecting files on linux
-  - Remove all sync stuff
   - Fixed scroll to top button not animating out
   - Fixed scroll to top button being ontop of filters menu
   - Fixed photo ordering
   - Fixed automatic updates
   - Fixed broken legacy named photos
-  - Fixed photos being loaded with the wrong resolution
+  - Fixed photos being loaded with the wrong resolution
+
+  - Added support for multilayer photos
+  - Added close to tray toggle
+
+  - Remove all sync stuff

src/Components/Managers/PhotoListRenderingManager.tsx

···
             let photo = (el as PhotoListPhoto).Photo;
 
             // === DEBUG ===
-            ctx.strokeStyle = '#f00';
-            ctx.strokeRect((rowXPos - row.Width / 2) + canvas.width / 2, currentY - scroll, photo.scaledWidth!, row.Height);
+            // ctx.strokeStyle = '#f00';
+            // ctx.strokeRect((rowXPos - row.Width / 2) + canvas.width / 2, currentY - scroll, photo.scaledWidth!, row.Height);
 
             if(!photo.loaded)
               // If the photo is not loaded, start a new task and load it in that task

src/Components/Managers/PhotoManager.tsx

···
 
       let photo = this.Photos.find(x => x.path === data.path);
       if(!photo)return console.error('Cannot find photo.', data);
+      // NOTE: this is triggered by multilayer photo layers loading their metadata
+      //       we don't need to store metadata of those photos as they inherit this
+      //       data from the main photo.
 
       this._lastLoaded = photo.index;
 

src/Components/PhotoList.tsx

···
     })
 
     window.PhotoListRenderingManager.SetCanvas(photoContainer!);
-
     render();
   });
 

src/Components/PhotoViewer.tsx

···
 import { For, Show, createEffect, onCleanup, onMount } from "solid-js";
 import { invoke } from '@tauri-apps/api/core';
 import { WorldCache } from "./Structs/WorldCache";
-import { animate, JSAnimation, utils } from "animejs";
+import { animate, createSpring, JSAnimation, utils } from "animejs";
 
 let PhotoViewer = () => {
   let viewer: HTMLElement;
···
   let allowedToOpenTray = false;
 
   let authorProfileButton: HTMLDivElement;
+
+  let photoLayerManager!: HTMLDivElement;
 
   let switchPhotoWithKey = ( e: KeyboardEvent ) => {
     switch(e.key){
···
   }
 
   let copyImage = () => {
-    invoke('copy_image', { path: window.PhotoViewerManager.CurrentPhoto()!.path })
+    let path;
+    let photo = window.PhotoViewerManager.CurrentPhoto()!;
+
+    switch(layerManagerViewing){
+      case LayerManagerView.DEFAULT:
+        path = photo.path;
+        break;
+      case LayerManagerView.ENVIRONMENT:
+        path = photo.environmentLayer!.path;
+        break;
+      case LayerManagerView.PLAYER:
+        path = photo.playerLayer!.path;
+        break;
+    }
+
+    invoke('copy_image', { path })
       .then(() => {
         utils.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
         animate('.copy-notif', {
···
   onMount(() => {
     utils.set(photoControls, { translateX: '-50%' });
     utils.set(photoTrayCloseBtn, { translateX: '-50%', opacity: 0, scale: '0.75', bottom: '10px' });
+    utils.set(photoLayerManager, { translateY: '20px', opacity: 0, display: 'none' });
 
     window.addEventListener('keyup', switchPhotoWithKey);
 
···
           viewerContextMenu.style.display = 'none';
         }
       })
+    });
+
+    window.CloseAllPopups.push(() => {
+      layerManagerOpen = false;
+      if(layerManagerAnimation)layerManagerAnimation.cancel();
+
+      layerManagerAnimation = animate(photoLayerManager, { translateY: '20px', opacity: 0, duration: 100, onComplete: () => utils.set(photoLayerManager, { display: 'none' }) });
     });
 
     viewerContextMenuButtons[0].onclick = async () => {
···
     )
   }
 
+  enum LayerManagerView{
+    DEFAULT,
+    PLAYER,
+    ENVIRONMENT
+  }
+
+  let layerManagerOpen = false;
+  let layerManagerAnimation: null | JSAnimation = null;
+  let layerManagerViewing = LayerManagerView.DEFAULT;
+
   let toggleLayerManager = () => {
-    
+    if(layerManagerOpen){
+      // Close
+      layerManagerOpen = false;
+      if(layerManagerAnimation)layerManagerAnimation.cancel();
+
+      layerManagerAnimation = animate(photoLayerManager, { translateY: '20px', opacity: 0, duration: 100, onComplete: () => utils.set(photoLayerManager, { display: 'none' }) });
+    } else{
+      // Open
+      layerManagerOpen = true;
+      if(layerManagerAnimation)layerManagerAnimation.cancel();
+
+      utils.set(photoLayerManager, { display: 'block' });
+      layerManagerAnimation = animate(photoLayerManager, { translateY: '0px', opacity: 1, duration: 100 });
+    }
   }
 
   // TODO: Make layers selectable
 
   return (
     <div class="photo-viewer" ref={( el ) => viewer = el}>
+      <div class="photo-layer-manager" ref={photoLayerManager}>
+        <Show when={window.PhotoViewerManager.CurrentPhoto()?.playerLayer}>
+          <div class="photo-layer-manager-layer" onClick={() => {
+            let photo = window.PhotoViewerManager.CurrentPhoto()?.playerLayer;
+            if(!photo)return;
+
+            layerManagerViewing = LayerManagerView.PLAYER;
+
+            imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost/') + photo.path.split('\\').join('/') + "?full";
+            imageViewer.crossOrigin = 'anonymous';
+          }}>Player Layer</div>
+        </Show>
+        <Show when={window.PhotoViewerManager.CurrentPhoto()?.environmentLayer}>
+          <div class="photo-layer-manager-layer" onClick={() => {
+            let photo = window.PhotoViewerManager.CurrentPhoto()?.environmentLayer;
+            if(!photo)return;
+
+            layerManagerViewing = LayerManagerView.ENVIRONMENT;
+
+            imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost/') + photo.path.split('\\').join('/') + "?full";
+            imageViewer.crossOrigin = 'anonymous';
+          }}>Environment Layer</div>
+        </Show>
+        <div class="photo-layer-manager-layer" onClick={() => {
+          let photo = window.PhotoViewerManager.CurrentPhoto();
+          if(!photo)return;
+
+          layerManagerViewing = LayerManagerView.DEFAULT;
+
+          imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost/') + photo.path.split('\\').join('/') + "?full";
+          imageViewer.crossOrigin = 'anonymous';
+        }}>Default Layer</div>
+      </div>
+
       <div class="photo-context-menu" ref={( el ) => viewerContextMenu = el}>
         <div ref={( el ) => viewerContextMenuButtons.push(el)}>Open file location</div>
         <div ref={( el ) => viewerContextMenuButtons.push(el)}>Copy image</div>

src/css/tray.css

···
   left: 50%;
   transform: translate(-50%);
   color: white;
-  background: #8885;
+  background: rgba(43, 43, 43, 0.76);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: #0008 0 0 10px;

src/css/viewer.css

···
   left: 0;
   padding: 10px;
   border-radius: 5px;
-  background: #555a;
+  background: rgba(43, 43, 43, 0.76);
   color: #aaa;
   box-shadow: #0005 0 0 10px;
   opacity: 0;
···
   -webkit-user-select: none;
   cursor: pointer;
   z-index: 7;
-  box-shadow: #0008 0 0 10px;
+  background: rgba(43, 43, 43, 0.76);
 }
 
 .viewer-close{
···
   left: 50%;
   color: white;
   transform: translateX(-50%) translateY(-100px);
-  background: #8885;
+  background: rgba(43, 43, 43, 0.76);
   padding: 10px 40px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
···
   z-index: 12;
   opacity: 0;
   pointer-events: none;
+}
+
+.photo-layer-manager{
+  background: rgba(43, 43, 43, 0.76);
+  color: #fff;
+  padding: 10px;
+  backdrop-filter: blur(10px);
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  border-radius: 10px;
+}
+
+.photo-layer-manager-layer{
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  padding: 5px 20px;
+  transition: 0.1s;
+}
+
+.photo-layer-manager-layer:hover{
+  color: #bbb;
 }