color palette

darkroomengineering · Aug 20, 2024 · 919e732 · 919e732
1 parent d1b3d0b
commit 919e732
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 292 deletions.
diff --git a/plugins/dither/src/App.css b/plugins/dither/src/App.css
@@ -1,7 +1,7 @@
 .container {
     display: flex;
     align-items: center;
-    height: 100%;
+    /* height: 100%; */
     flex-direction: column;
     /* gap: 10px; */
     padding: 0 15px 15px 15px;
@@ -42,6 +42,15 @@ input[type="range"] {
     width: 100%;
 }
 
+body[data-framer-theme=dark] .gui-row .gui-label {
+    color: #ccc;
+}
+
+.gui {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 
 .gui-row {
     position: relative;
@@ -66,4 +75,82 @@ input[type="range"] {
 .gui-row .gui-select {
     grid-column: 2 / -1;
     width: 100%;
-}
+}
+
+.gui-row .gui-palette {
+    width: 100%;
+    grid-column: 2 / -1;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.gui-row .gui-palette .color {
+    /* width: 100%; */
+
+    /* display: grid; */
+    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
+    /* column-gap: 10px; */
+    /* display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap; */
+    /* gap: 10px; */
+
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+}
+
+.gui-row .gui-palette .color input{
+    /* grid-column: 1 / span 1;
+    width: 100%; */
+    width: auto;
+    flex-grow: 1;
+}
+
+/* .gui-palette .color {
+    width: 100%;
+} */
+
+/* .gui-palette input { */
+    /* width: 100%; */
+    /* width: 30px; */
+/* } */
+
+/* .gui-palette .list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 5px;
+    width: 100%;
+}*/
+
+.gui-palette .controls {
+    /* width: 100%; */
+    display: flex;
+    /* gap: 10px; */
+    align-items: stretch;
+    /* justify-content: flex-end; */
+} 
+
+.gui-palette .controls > * {
+    display: flex;
+    align-items: center;
+}
+
+.gui-palette .add {
+    height: 30px;
+    background-color: var(--framer-color-bg-secondary);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    cursor: pointer;
+}
+
+/* .gui-row .gui-palette input {
+    width: 30px;
+    aspect-ratio: 1;
+} */
diff --git a/plugins/dither/src/App.old.tsx b/plugins/dither/src/App.old.tsx
diff --git a/plugins/dither/src/App.tsx b/plugins/dither/src/App.tsx
@@ -1,27 +1,27 @@
-import * as comlink from "comlink"
+// import * as comlink from "comlink"
 import { ImageAsset, framer } from "framer-plugin"
 import {
-    forwardRef,
-    startTransition,
+    // forwardRef,
+    // startTransition,
     useCallback,
     useEffect,
-    useImperativeHandle,
-    useMemo,
+    // useImperativeHandle,
+    // useMemo,
     useRef,
     useState,
 } from "react"
 import "./App.css"
-import { Spinner } from "./Spinner"
+// import { Spinner } from "./Spinner"
 import { assert, bytesFromCanvas } from "./utils"
-import type { CanvasWorker } from "./worker/worker"
-import Worker from "./worker/worker?worker"
+// import type { CanvasWorker } from "./worker/worker"
+// import Worker from "./worker/worker?worker"
 import { Renderer, Camera, Transform, Plane, Program, Mesh, Texture } from "ogl"
-import { RandomDither } from "./materials/random"
+// import { RandomDither } from "./materials/random"
 import { OrderedDither } from "./materials/ordered"
 
 // const WorkerBase = comlink.wrap<typeof CanvasWorker>(new Worker())
 
-void framer.showUI({ position: "top left", width: 280, height: Infinity })
+void framer.showUI({ position: "top left", width: 280, height: 1000 })
 
 function useSelectedImage() {
     const [image, setImage] = useState<ImageAsset | null>(null)
@@ -90,7 +90,7 @@ function DitherImage({ image }: { image: ImageAsset }) {
     const [scene] = useState(() => new Transform())
     const [geometry] = useState(() => new Plane(gl))
 
-    const [type, setType] = useState(1)
+    // const [type, setType] = useState(1)
     const [program, setProgram] = useState(() => new Program(gl, {}))
 
     const [mesh] = useState(() => new Mesh(gl, { geometry, program }))
@@ -223,16 +223,16 @@ function DitherImage({ image }: { image: ImageAsset }) {
                     texture={texture}
                 />
             )} */}
-            {type === 1 && (
-                <OrderedDither
-                    ref={node => {
-                        // TODO: fix this type
-                        setProgram(node?.program)
-                    }}
-                    gl={gl}
-                    texture={texture}
-                />
-            )}
+            {/* {type === 1 && ( */}
+            <OrderedDither
+                ref={node => {
+                    // TODO: fix this type
+                    setProgram(node?.program)
+                }}
+                gl={gl}
+                texture={texture}
+            />
+            {/* )} */}
 
             <button onClick={saveImage}>Save Image</button>
         </div>