Merge pull request #241 from Dumb-Code/photoshop-groups

Added Photoshop support to texture groups

Author: Wyn-Price

src/components/ClickableInput.tsx

@@ -1,63 +1,25 @@
 import { PropsWithChildren } from "react"
-import { useTooltipRef } from "../contexts/TooltipContext"
-import { createReadableFile, createReadableFileExtended, FileSystemsAccessApi, ReadableFile } from "../studio/files/FileTypes"
+import { FileInputClickOptions, getFilesFromClick } from "../studio/files/FileInputClick"
 
-type Props = PropsWithChildren<{
-  description: string
-  accept: string[]
+type Props = PropsWithChildren<FileInputClickOptions & {
   disabled?: boolean
-  multiple?: boolean
-  onFile: (file: ReadableFile) => void
   className?: string
   tooltip?: string
 }>
 
-const ClickableInput = (props: Props) => {
-  const ref = useTooltipRef<HTMLInputElement>(props.tooltip !== undefined ? () => props.tooltip : null)
+const ClickableInput = ({ disabled, className, tooltip, children, accept, description, onFile, multiple }: Props) => {
 
   const onClick = () => {
-    if (!FileSystemsAccessApi) {
-      ref.current?.click()
+    if (disabled) {
       return
     }
-    window.showOpenFilePicker({
-      multiple: props.multiple ?? false,
-      types: [{
-        description: props.description,
-        accept: {
-          "custom/dumbcode": props.accept
-        }
-      }]
-    }).then(res => {
-      res.forEach(handle => props.onFile(createReadableFileExtended(handle)))
-    }).catch(() => { })
+    getFilesFromClick({ accept, description, multiple, onFile })
   }
 
   return (
-    <>
-      <input
-        disabled={props.disabled}
-        ref={ref}
-        onChange={e => {
-          const files = e.currentTarget.files
-          if (files !== null) {
-            for (let i = 0; i < files.length; i++) {
-              const file = files.item(i)
-              if (file !== null) {
-                props.onFile(createReadableFile(file))
-              }
-            }
-          }
-        }}
-        className="hidden"
-        accept={props.accept.join(",")}
-        type="file"
-        multiple={props.multiple ?? false}
-      />
-      <button disabled={props.disabled} className={props.className} onClick={onClick}>
-        {props.children}
-      </button>
-    </>
+    <button disabled={disabled} className={className} onClick={onClick}>
+      {children}
+    </button>
   )
 }
 export default ClickableInput

src/components/Icons.tsx

@@ -64,6 +64,14 @@ export const SVGChevronDown = (props: SVGProps<SVGSVGElement>) => {
     )
 }
 
+export const SVGCaretDown = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" clipRule="evenodd" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" viewBox="0 0 24 24" stroke="currentColor" fill="currentColor" {...props}>
+            <path xmlns="http://www.w3.org/2000/svg" d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z" />
+        </svg>
+    )
+}
+
 export const SVGCube = (props: SVGProps<SVGSVGElement>) => {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
@@ -404,7 +412,7 @@ export const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => (
 export const SvgPhotoshop = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="150 100 400 400"
+        viewBox="200 100 300 400"
         {...props}
     >
         <path
@@ -418,6 +426,20 @@ export const SvgPhotoshop = (props: SVGProps<SVGSVGElement>) => (
     </svg>
 );
 
+export const SVGChain = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24" height="24"
+        viewBox="0 0 24 24"
+        {...props}
+    >
+        <path
+            fill="currentColor"
+            d="M6.188 8.719c.439-.439.926-.801 1.444-1.087 2.887-1.591 6.589-.745 8.445 2.069l-2.246 2.245c-.644-1.469-2.243-2.305-3.834-1.949-.599.134-1.168.433-1.633.898l-4.304 4.306c-1.307 1.307-1.307 3.433 0 4.74 1.307 1.307 3.433 1.307 4.74 0l1.327-1.327c1.207.479 2.501.67 3.779.575l-2.929 2.929c-2.511 2.511-6.582 2.511-9.093 0s-2.511-6.582 0-9.093l4.304-4.306zm6.836-6.836l-2.929 2.929c1.277-.096 2.572.096 3.779.574l1.326-1.326c1.307-1.307 3.433-1.307 4.74 0 1.307 1.307 1.307 3.433 0 4.74l-4.305 4.305c-1.311 1.311-3.44 1.3-4.74 0-.303-.303-.564-.68-.727-1.051l-2.246 2.245c.236.358.481.667.796.982.812.812 1.846 1.417 3.036 1.704 1.542.371 3.194.166 4.613-.617.518-.286 1.005-.648 1.444-1.087l4.304-4.305c2.512-2.511 2.512-6.582.001-9.093-2.511-2.51-6.581-2.51-9.092 0z"
+        />
+    </svg>
+);
+
 export const SvgPoweredByVercel = (props: SVGProps<SVGSVGElement>) => (
     <svg
       width={212}
@@ -456,4 +478,4 @@ export const SvgGithub = (props: SVGProps<SVGSVGElement>) => (
         d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
       />
     </svg>
-  );
+  );

src/contexts/ToastContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, ReactNode, useCallback, useContext, useLayoutEffect, useMemo, useState } from "react"
 import { v4 } from "uuid"
 import { LO, useListenableObject } from "../studio/listenableobject/ListenableObject"
+import UnsafeOperations from "../studio/util/UnsafeOperations"
 import { useCreatePortal } from "./CreatePortalContext"
 
 //Info IS used btw
@@ -72,6 +73,8 @@ const ToastContext = ({ children }: { children: ReactNode }) => {
     }, duration)
   }, [])
 
+  UnsafeOperations._unsafe_AddToast = addToast
+
   // // Uncomment this to test the toasts
   // useEffect(() => {
   //   const test = setInterval(() => {

src/studio/files/FileInputClick.ts

@@ -0,0 +1,49 @@
+import { createReadableFile, createReadableFileExtended, FileSystemsAccessApi, ReadableFile } from "./FileTypes"
+
+export type FileInputClickOptions = {
+  description: string
+  accept: string[]
+  multiple?: boolean
+  onFile: (file: ReadableFile) => void
+}
+
+export const getFilesFromClick = ({ description, accept, multiple, onFile }: FileInputClickOptions) => {
+  if (FileSystemsAccessApi) {
+    getFileSystemApiFilesFromClick({ description, accept, multiple, onFile })
+  } else {
+    getOldFilesFromClick({ description, accept, multiple, onFile })
+  }
+}
+
+const getFileSystemApiFilesFromClick = async ({ description, accept, multiple, onFile }: FileInputClickOptions) => {
+  const files = await window.showOpenFilePicker({
+    multiple: multiple ?? false,
+    types: [{
+      description: description,
+      accept: {
+        "custom/dumbcode": accept
+      }
+    }]
+  })
+  for (const file of files) {
+    onFile(createReadableFileExtended(file))
+  }
+}
+
+const getOldFilesFromClick = ({ description, accept, multiple, onFile }: FileInputClickOptions) => {
+  const element = document.createElement("input")
+  element.type = "file"
+  element.accept = accept.join(",")
+  element.multiple = multiple ?? false
+  element.addEventListener("change", e => {
+    const files = element.files
+    if (files !== null) {
+      for (let i = 0; i < files.length; i++) {
+        const file = files.item(i)
+        if (file !== null) {
+          onFile(createReadableFile(file))
+        }
+      }
+    }
+  })
+}

src/studio/files/FileTypes.ts

@@ -31,6 +31,7 @@ export type ReadableFile = {
 
 export type WritableFile = {
   write: (name: string, blob: Blob | PromiseLike<Blob>, types?: FilePickerAcceptType[]) => Promise<string>
+  asReadable: () => ReadableFile | null
 } & ListenableFile
 
 export type OpenableFolder = {
@@ -50,13 +51,14 @@ export const downloadBlob: WritableFile['write'] = async (name, blob) => {
 
 export const defaultWritable: WritableFile = {
   write: async (name, blob) => downloadBlob(name, await blob),
-  startListening: () => null
+  startListening: () => null,
+  asReadable: () => null,
 }
 
 //Gets the writeable file for where nothing has been defined.
 export const getUndefinedWritable = (description: string, ...accept: string[]): WritableFile & {
   unlink?: () => void,
-  getName?: () => string | undefined
+  getName?: () => string | undefined,
 } => {
   if (!FileSystemsAccessApi) {
     return defaultWritable
@@ -92,8 +94,8 @@ export const getUndefinedWritable = (description: string, ...accept: string[]):
       file = null
       readable = null
     },
-    getName: () => saveName ?? undefined
-
+    getName: () => saveName ?? undefined,
+    asReadable: () => readable,
   }
 }
 
@@ -135,7 +137,7 @@ export const createReadableFile = (file: File): ReadableFile => {
 export const createReadableFileExtended = (handle: FileSystemFileHandle): ReadableFile => {
   const startListening: ListenableFile['startListening'] = listener => listener.addFile(() => handle.getFile())
 
-  return {
+  const readableFile: ReadableFile = {
     asFile: () => handle.getFile(),
     asWritable: () => {
       return {
@@ -145,12 +147,15 @@ export const createReadableFileExtended = (handle: FileSystemFileHandle): Readab
           await writable.close()
           return handle.name
         },
-        startListening
+        startListening,
+        asReadable: () => readableFile,
       }
     },
     name: handle.name,
     startListening
   }
+
+  return readableFile
 }
 
 

src/studio/formats/project/DcProjectLoader.ts

@@ -6,8 +6,8 @@ import { imgSourceToElement, writeImgToBlob } from "../../util/Utils";
 import { loadUnknownAnimation, writeDCAAnimation } from "../animations/DCALoader";
 import { loadModelUnknown, writeModel } from "../model/DCMLoader";
 import { DCMCube } from "../model/DcmModel";
-import { loadFromPsdFile, saveToPhotoshopFile } from "../textures/PhotoshopManager";
 import { TextureGroup } from "../textures/TextureManager";
+import { loadFromPsdFile, saveToPhotoshopFile } from "../textures/TexturePhotoshopManager";
 import { wrapFolder } from './../../files/FileTypes';
 import { NumArray } from './../../util/NumArray';
 import { KeyframeLayerData } from './../animations/DcaAnimation';