feat: blur (#78)

QuiiBz · Apr 1, 2024 · 6766eeb · 6766eeb
1 parent 0157ff1
commit 6766eeb
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 32 deletions.
diff --git a/apps/dashboard/src/components/EditorTitle.tsx b/apps/dashboard/src/components/EditorTitle.tsx
@@ -19,7 +19,7 @@ export function EditorTitle() {
       top="0"
     >
       <Text as="p" size="1">
-        {selectedImage.name}(1200x630)
+        {selectedImage.name} (1200x630)
       </Text>
     </Box>
   );

diff --git a/apps/dashboard/src/components/Element.tsx b/apps/dashboard/src/components/Element.tsx
@@ -282,7 +282,30 @@ export function Element({ element }: ElementProps) {
     element,
   ]);
 
-  const style = useMemo(() => createElementStyle(element), [element]);
+  const style = useMemo(() => {
+    const styles = createElementStyle(element);
+    const elementStyle: typeof styles = {
+      outlineColor: "var(--accent-track)",
+      position: "absolute",
+      top: styles.top,
+      left: styles.left,
+      width: styles.width,
+      height: styles.height,
+      transform: styles.transform,
+    };
+    const tagStyle: typeof styles = {
+      ...styles,
+      position: "relative",
+      top: undefined,
+      left: undefined,
+      width: "100%",
+      height: "100%",
+      transform: undefined,
+      pointerEvents: "none",
+    };
+
+    return { elementStyle, tagStyle };
+  }, [element]);
 
   if (!element.visible) {
     return null;
@@ -291,37 +314,39 @@ export function Element({ element }: ElementProps) {
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
-        <Tag
+        <div
           className={clsx(
             "element cursor-default select-none outline-1 outline-offset-[3px] hover:outline",
             { "outline cursor-move": isSelected },
             { "!outline !cursor-text": isEditing },
             { "!outline-dashed": element.tag === "span" },
           )}
-          style={{ ...style, outlineColor: "var(--accent-track)" }}
           id={`element-${element.id}`}
+          style={style.elementStyle}
           // @ts-expect-error wtf?
           ref={elementRef}
         >
-          {element.tag === "p" ? element.content : null}
-          {element.tag === "span" ? "Dynamic text" : null}
-          {element.tag === "div" && element.backgroundImage ? (
-            <img
-              alt=""
-              src={element.backgroundImage}
-              style={{
-                pointerEvents: "none",
-                ...createImgElementStyle(element),
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : null}
+          <Tag style={style.tagStyle}>
+            {element.tag === "p" ? element.content : null}
+            {element.tag === "span" ? "Dynamic text" : null}
+            {element.tag === "div" && element.backgroundImage ? (
+              <img
+                alt=""
+                src={element.backgroundImage}
+                style={{
+                  pointerEvents: "none",
+                  ...createImgElementStyle(element),
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+            ) : null}
+          </Tag>
           {isSelected ? (
             <>
               <Box
                 as="span"
-                className="handle top-left"
+                className="handle top-left filter-none"
                 height="10px"
                 position="absolute"
                 style={{
@@ -333,7 +358,7 @@ export function Element({ element }: ElementProps) {
               />
               <Box
                 as="span"
-                className="handle top-right"
+                className="handle top-right filter-none"
                 height="10px"
                 position="absolute"
                 style={{
@@ -345,7 +370,7 @@ export function Element({ element }: ElementProps) {
               />
               <Box
                 as="span"
-                className="handle bottom-left"
+                className="handle bottom-left filter-none"
                 height="10px"
                 position="absolute"
                 style={{
@@ -357,7 +382,7 @@ export function Element({ element }: ElementProps) {
               />
               <Box
                 as="span"
-                className="handle bottom-right"
+                className="handle bottom-right filter-none"
                 height="10px"
                 position="absolute"
                 style={{
@@ -369,7 +394,7 @@ export function Element({ element }: ElementProps) {
               />
               <Box
                 as="span"
-                className="handle top-center"
+                className="handle top-center filter-none"
                 height="10px"
                 position="absolute"
                 style={{
@@ -381,7 +406,7 @@ export function Element({ element }: ElementProps) {
               />
             </>
           ) : null}
-        </Tag>
+        </div>
       </ContextMenu.Trigger>
       <ContextMenu.Content variant="soft">
         <ContextMenu.Item

diff --git a/apps/dashboard/src/components/LeftPanel/ElementRow.tsx b/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useState } from "react";
+import { memo, useState } from "react";
 import { Button, Flex, IconButton, TextField } from "@radix-ui/themes";
 import type { OGElement } from "../../lib/types";
 import { NotVisibleIcon } from "../icons/NotVisibleIcon";
@@ -17,16 +17,23 @@ interface ElementRowProps {
   element: OGElement;
 }
 
-export function ElementRow({ element }: ElementRowProps) {
+// eslint-disable-next-line react/display-name -- todo
+export const ElementRow = memo(({ element }: ElementRowProps) => {
   const selectedElementId = useElementsStore(
     (state) => state.selectedElementId,
   );
   const setSelectedElementId = useElementsStore(
     (state) => state.setSelectedElementId,
   );
   const updateElement = useElementsStore((state) => state.updateElement);
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id: element.id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: element.id });
   const [isEditing, setIsEditing] = useState(false);
 
   const style = {
@@ -80,7 +87,9 @@ export function ElementRow({ element }: ElementRowProps) {
     >
       <Button
         className="grow justify-start"
-        color={selectedElementId === element.id ? undefined : "gray"}
+        color={
+          selectedElementId === element.id || isDragging ? undefined : "gray"
+        }
         disabled={!element.visible}
         ml="2"
         mr="4"
@@ -97,7 +106,7 @@ export function ElementRow({ element }: ElementRowProps) {
         }}
         size="2"
         type="button"
-        variant="ghost"
+        variant={isDragging ? "surface" : "ghost"}
       >
         {element.tag === "p" ? <TextIcon height="1.4em" width="1.4em" /> : null}
         {element.tag === "div" && element.backgroundImage ? (
@@ -153,4 +162,4 @@ export function ElementRow({ element }: ElementRowProps) {
       </IconButton>
     </Flex>
   );
-}
+});
diff --git a/apps/dashboard/src/components/RightPanel/MiscellanousSection.tsx b/apps/dashboard/src/components/RightPanel/MiscellanousSection.tsx
@@ -5,6 +5,7 @@ import { RotateIcon } from "../icons/RotateIcon";
 import { useElementsStore } from "../../stores/elementsStore";
 import { MagicWandIcon } from "../icons/MagicWandIcon";
 import { TextIcon } from "../icons/TextIcon";
+import { BlurIcon } from "../icons/BlurIcon";
 
 interface MiscellanousSectionProps {
   selectedElement: OGElement;
@@ -38,6 +39,26 @@ export function MiscellanousSection({
           </TextField.Slot>
           <TextField.Slot>deg</TextField.Slot>
         </TextField.Root>
+        <TextField.Root
+          color="gray"
+          max={99}
+          min={0}
+          onChange={(event) => {
+            updateElement({
+              ...selectedElement,
+              blur: event.target.valueAsNumber,
+            });
+          }}
+          step={0.1}
+          type="number"
+          value={selectedElement.blur}
+          variant="soft"
+        >
+          <TextField.Slot>
+            <BlurIcon />
+          </TextField.Slot>
+          <TextField.Slot>px</TextField.Slot>
+        </TextField.Root>
         {selectedElement.tag === "div" ? (
           <TextField.Root
             color="gray"
@@ -77,7 +98,7 @@ export function MiscellanousSection({
             }}
             variant="soft"
           >
-            <MagicWandIcon /> Turn in Dynamic text
+            <MagicWandIcon /> Turn into Dynamic text
           </Button>
         ) : null}
         {selectedElement.tag === "span" ? (

diff --git a/apps/dashboard/src/components/icons/BlurIcon.tsx b/apps/dashboard/src/components/icons/BlurIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function BlurIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3 14.5q-.2 0-.35-.15T2.5 14q0-.2.15-.35T3 13.5q.2 0 .35.15t.15.35q0 .2-.15.35T3 14.5m0-4q-.2 0-.35-.15T2.5 10q0-.2.15-.35T3 9.5q.2 0 .35.15t.15.35q0 .2-.15.35T3 10.5M6 19q-.425 0-.712-.288T5 18q0-.425.288-.712T6 17q.425 0 .713.288T7 18q0 .425-.288.713T6 19m0-4q-.425 0-.712-.288T5 14q0-.425.288-.712T6 13q.425 0 .713.288T7 14q0 .425-.288.713T6 15m0-4q-.425 0-.712-.288T5 10q0-.425.288-.712T6 9q.425 0 .713.288T7 10q0 .425-.288.713T6 11m0-4q-.425 0-.712-.288T5 6q0-.425.288-.712T6 5q.425 0 .713.288T7 6q0 .425-.288.713T6 7m4 8.5q-.625 0-1.062-.437T8.5 14q0-.625.438-1.062T10 12.5q.625 0 1.063.438T11.5 14q0 .625-.437 1.063T10 15.5m0-4q-.625 0-1.062-.437T8.5 10q0-.625.438-1.062T10 8.5q.625 0 1.063.438T11.5 10q0 .625-.437 1.063T10 11.5m0 7.5q-.425 0-.712-.288T9 18q0-.425.288-.712T10 17q.425 0 .713.288T11 18q0 .425-.288.713T10 19m0-12q-.425 0-.712-.288T9 6q0-.425.288-.712T10 5q.425 0 .713.288T11 6q0 .425-.288.713T10 7m0 14.5q-.2 0-.35-.15T9.5 21q0-.2.15-.35t.35-.15q.2 0 .35.15t.15.35q0 .2-.15.35t-.35.15m0-18q-.2 0-.35-.15T9.5 3q0-.2.15-.35T10 2.5q.2 0 .35.15t.15.35q0 .2-.15.35T10 3.5m4 12q-.625 0-1.062-.437T12.5 14q0-.625.438-1.062T14 12.5q.625 0 1.063.438T15.5 14q0 .625-.437 1.063T14 15.5m0-4q-.625 0-1.062-.437T12.5 10q0-.625.438-1.062T14 8.5q.625 0 1.063.438T15.5 10q0 .625-.437 1.063T14 11.5m0 7.5q-.425 0-.712-.288T13 18q0-.425.288-.712T14 17q.425 0 .713.288T15 18q0 .425-.288.713T14 19m0-12q-.425 0-.712-.288T13 6q0-.425.288-.712T14 5q.425 0 .713.288T15 6q0 .425-.288.713T14 7m0 14.5q-.2 0-.35-.15T13.5 21q0-.2.15-.35t.35-.15q.2 0 .35.15t.15.35q0 .2-.15.35t-.35.15m0-18q-.2 0-.35-.15T13.5 3q0-.2.15-.35T14 2.5q.2 0 .35.15t.15.35q0 .2-.15.35T14 3.5M18 19q-.425 0-.712-.288T17 18q0-.425.288-.712T18 17q.425 0 .713.288T19 18q0 .425-.288.713T18 19m0-4q-.425 0-.712-.288T17 14q0-.425.288-.712T18 13q.425 0 .713.288T19 14q0 .425-.288.713T18 15m0-4q-.425 0-.712-.288T17 10q0-.425.288-.712T18 9q.425 0 .713.288T19 10q0 .425-.288.713T18 11m0-4q-.425 0-.712-.288T17 6q0-.425.288-.712T18 5q.425 0 .713.288T19 6q0 .425-.288.713T18 7m3 7.5q-.2 0-.35-.15T20.5 14q0-.2.15-.35t.35-.15q.2 0 .35.15t.15.35q0 .2-.15.35t-.35.15m0-4q-.2 0-.35-.15T20.5 10q0-.2.15-.35T21 9.5q.2 0 .35.15t.15.35q0 .2-.15.35t-.35.15"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ export function EditorTitle() { @@
           top="0"
         >
           <Text as="p" size="1">
-            {selectedImage.name}(1200x630)
+            {selectedImage.name} (1200x630)
           </Text>
         </Box>
       );
@@ Expand Down @@