Add line opacity, size, thickness

tomkennedy22 · May 14, 2024 · f02b9a9 · f02b9a9
1 parent a0fcca2
commit f02b9a9
Show file tree

Hide file tree

Showing 16 changed files with 545 additions and 111 deletions.
diff --git a/package.json b/package.json
@@ -66,7 +66,13 @@
     "typescript-eslint": "^7.7.0",
     "vite": "^5.2.7",
     "vitest": "^1.5.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.2",
+    "@uiw/react-color-alpha": "^2.3.0",
+    "@uiw/react-color-editable-input": "^2.3.0",
+    "@uiw/react-color-editable-input-rgba": "^2.3.0",
+    "@uiw/react-color-hue": "^2.3.0",
+    "@uiw/react-color-saturation": "^2.3.0",
+    "@uiw/react-color-swatch": "^2.3.0"
   },
   "dependencies": {
     "svg-path-bbox": "1.2.5"

diff --git a/public/editor/ColorPicker.tsx b/public/editor/ColorPicker.tsx
@@ -0,0 +1,64 @@
+import { type CSSProperties } from "react";
+import { Sketch } from "./Sketch";
+import {
+  Button,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
+} from "@nextui-org/react";
+
+const rgbaObjToRgbaStr = (rgbaObj: {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}): string => {
+  return `rgba(${rgbaObj.r}, ${rgbaObj.g}, ${rgbaObj.b}, ${rgbaObj.a})`;
+};
+
+export const ColorPicker = ({
+  onClick,
+  onChange,
+  style,
+  value,
+  colorFormat = "hex",
+  allowAlpha = false,
+  presetColors,
+}: {
+  onClick?: () => void;
+  onChange: (hex: string) => void;
+  style?: CSSProperties;
+  value: string;
+  colorFormat: "hex" | "rgba";
+  allowAlpha: boolean;
+  presetColors: string[];
+}) => {
+  return (
+    <Popover showArrow placement="bottom">
+      <PopoverTrigger>
+        <Button
+          onClick={onClick}
+          className="border-2"
+          style={{
+            ...style,
+            backgroundColor: value,
+          }}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <Sketch
+          color={value}
+          allowAlpha={allowAlpha}
+          presetColors={presetColors}
+          onChange={(color) => {
+            if (colorFormat === "rgba") {
+              onChange(rgbaObjToRgbaStr(color.rgba));
+            } else {
+              onChange(color.hex);
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/public/editor/Face.tsx b/public/editor/Face.tsx
diff --git a/public/editor/FeatureGallery.tsx b/public/editor/FeatureGallery.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import override from "../../src/override";
-import { Face as FaceType } from "../../src/types";
+import { FaceConfig } from "../../src";
 import { useStateStore } from "./stateStore";
 import { Shuffle, LockSimpleOpen, LockSimple } from "@phosphor-icons/react";
 import {
@@ -23,7 +23,8 @@ import {
   newFaceConfigFromOverride,
 } from "./overrideList";
 import { CombinedState, GallerySectionConfig, OverrideListItem } from "./types";
-import { Face } from "./Face";
+import { ColorPicker } from "./ColorPicker";
+import { Face } from "../../src/Face";
 
 const inputOnChange = ({
   chosenValue,
@@ -34,7 +35,7 @@ const inputOnChange = ({
   stateStoreProps,
 }: {
   chosenValue: unknown;
-  faceConfig: FaceType;
+  faceConfig: FaceConfig;
   key: string;
   overrideList: OverrideListItem[];
   sectionIndex: number;
@@ -247,6 +248,10 @@ const FeatureSelector = ({
       });
     };
 
+    let colorFormat = gallerySectionConfig.colorFormat
+      ? gallerySectionConfig.colorFormat
+      : "hex";
+
     return (
       <div
         key={sectionIndex}
@@ -259,28 +264,37 @@ const FeatureSelector = ({
             // @ts-expect-error TS doesnt like conditional array vs string
             hasMultipleColors ? selectedVal[colorIndex] : selectedVal;
 
+          let presetColors = hasMultipleColors
+            ? gallerySectionConfig.renderOptions.valuesToRender.map(
+                (colorList: string[]) => colorList[colorIndex],
+              )
+            : gallerySectionConfig.renderOptions.valuesToRender;
+
           return (
-            <div key={colorIndex} className="w-48">
+            <div key={colorIndex} className="w-fit">
               {colorIndex === 0 ? (
                 <label className="text-xs text-foreground-600 mb-2">
                   {gallerySectionConfig.text}
                 </label>
               ) : null}
               <div key={colorIndex} className="flex gap-2">
-                <Input
-                  type="color"
-                  value={selectedColor}
-                  onValueChange={(e) => {
+                <ColorPicker
+                  onChange={(color) => {
                     colorInputOnChange({
-                      newColorValue: e,
+                      newColorValue: color,
                       hasMultipleColors,
                       colorIndex,
                     });
                   }}
+                  colorFormat={colorFormat}
+                  presetColors={presetColors}
+                  allowAlpha={gallerySectionConfig.allowAlpha}
+                  value={selectedColor}
                 />
                 <Input
                   value={selectedColor}
                   isInvalid={!inputValidationArr[colorIndex]}
+                  className="min-w-52"
                   onChange={(e) => {
                     colorInputOnChange({
                       newColorValue: e.target.value,
@@ -306,7 +320,7 @@ const updateStores = ({
   sectionIndex,
   stateStoreProps,
 }: {
-  faceConfig: FaceType;
+  faceConfig: FaceConfig;
   faceIndex: number;
   sectionIndex: number;
   stateStoreProps: CombinedState;
@@ -431,10 +445,10 @@ export const FeatureGallery = () => {
                       }}
                     >
                       <Face
-                        faceConfig={faceConfig}
+                        face={faceConfig}
                         overrides={overrideToRun.override}
-                        width={faceWidth}
-                        lazyLoad={true}
+                        style={{ width: faceWidth }}
+                        lazy
                       />
                     </div>
                   );

diff --git a/public/editor/MainFace.tsx b/public/editor/MainFace.tsx
@@ -14,7 +14,7 @@ import {
   DropdownItem,
   type useDisclosure,
 } from "@nextui-org/react";
-import { Face } from "./Face";
+import { Face } from "../../src/Face";
 import {
   downloadFacePng,
   downloadFaceSvg,
@@ -166,7 +166,7 @@ export const MainFace = ({
 
   return (
     <div className="border-5 border-slate-800 rounded-lg shadow-medium">
-      <Face faceConfig={faceConfig} maxWidth={400} ref={ref} />
+      <Face face={faceConfig} style={{ width: "400px" }} ref={ref} />
       <MainFaceActionBar modalDisclosure={modalDisclosure} faceRef={ref} />
     </div>
   );