add effects primitives

add blur effect
add default spring values
improve values ui

app/src/components/Properties/Primitives.tsx

@@ -9,7 +9,7 @@ import {
 import { Paint, PaintStyle, PaintStyleType } from "primitives/Paint";
 import { FC } from "react";
 import { z } from "zod";
-import { AnimatedVec2Properties, ColorProperties } from "./Values";
+import { ColorProperties } from "./Values";
 import { PropertiesProps } from "./common";
 import { useFontsStore } from "stores/fonts.store";
 import {
@@ -57,7 +57,7 @@ export const PaintProperties: FC<PaintPropertiesProps> = ({
           <SelectTrigger>
             <SelectValue placeholder="Choose a paint style" />
           </SelectTrigger>
-          <SelectContent className="overflow-hidden">
+          <SelectContent id="paint-style-type" className="overflow-hidden">
             {Object.keys(PaintStyleType.Values).map((paintStyleType) => (
               <SelectItem value={paintStyleType}>{paintStyleType}</SelectItem>
             ))}

app/src/components/Properties/Values.tsx

@@ -4,12 +4,19 @@ import { FC } from "react";
 import { z } from "zod";
 import { produce } from "immer";
 import { Interpolation, InterpolationType } from "primitives/Interpolation";
-import { Color } from "primitives/Paint";
+import { Color, PaintStyle, PaintStyleType } from "primitives/Paint";
 import { parseCssColor } from "@tempblade/common";
 import { rgbToHex } from "utils";
 import { SpringInterpolation } from "primitives/Interpolation";
 import FloatInput from "components/Inputs/FloatInput";
 import { Keyframe } from "primitives/Keyframe";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "components/Inputs/Select";
 
 const SpringInterpolationProperties: FC<
   PropertiesProps<z.input<typeof SpringInterpolation>>
@@ -25,22 +32,29 @@ export const InterpolationProperties: FC<
       <label className="label" htmlFor="interpolation-type">
         Interpolation Type
       </label>
-      <select
-        id="interpolation-type"
-        onChange={(e) => {
-          onUpdate({
-            ...entity,
-            type: e.target.value as any,
-          });
+      <Select
+        defaultValue={entity.type}
+        onValueChange={(value) => {
+          if (entity.type !== value) {
+            const interpolation = { type: value };
+
+            const parsedInterpolation = Interpolation.parse(interpolation);
+
+            onUpdate(parsedInterpolation);
+          }
         }}
-        value={entity.type}
       >
-        {Object.keys(InterpolationType.Values).map((key) => (
-          <option key={key} value={key}>
-            {key}
-          </option>
-        ))}
-      </select>
+        <SelectTrigger>
+          <SelectValue placeholder="Choose an interpolation type" />
+        </SelectTrigger>
+        <SelectContent id="interpolation-type" className="overflow-hidden">
+          {Object.keys(InterpolationType.Values).map((interpolationType) => (
+            <SelectItem key={interpolationType} value={interpolationType}>
+              {interpolationType}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </fieldset>
   );
 };
@@ -129,35 +143,35 @@ export const ColorProperties: FC<
 > = ({ entity, onUpdate, mode = "Picker" }) => {
   if (mode === "Picker") {
     return (
-      <label className="flex flex-col items-start">
-        <span className="label">Color</span>
-        <div className="flex flex-row gap-3">
-          <input
-            value={rgbToHex(entity.value[0], entity.value[1], entity.value[2])}
-            type="color"
-            style={{
-              width: 32,
-              height: 32,
-              backgroundColor: rgbToHex(
-                entity.value[0],
-                entity.value[1],
-                entity.value[2]
-              ),
-            }}
-            onChange={(e) =>
-              onUpdate(
-                produce(entity, (draft) => {
-                  const color = parseCssColor(e.target.value);
+      <fieldset>
+        <label htmlFor="color">Color</label>
+        <input
+          id="color"
+          value={rgbToHex(entity.value[0], entity.value[1], entity.value[2])}
+          type="color"
+          style={{
+            border: "none",
+            width: 32,
+            height: 32,
+            backgroundColor: rgbToHex(
+              entity.value[0],
+              entity.value[1],
+              entity.value[2]
+            ),
+          }}
+          onChange={(e) =>
+            onUpdate(
+              produce(entity, (draft) => {
+                const color = parseCssColor(e.target.value);
 
-                  if (color) {
-                    draft.value = [...color, 1.0];
-                  }
-                })
-              )
-            }
-          />
-        </div>
-      </label>
+                if (color) {
+                  draft.value = [...color, 1.0];
+                }
+              })
+            )
+          }
+        />
+      </fieldset>
     );
   }
 

app/src/drawers/effects/blur.ts

@@ -0,0 +1,27 @@
+import { Canvas, CanvasKit, Surface } from "canvaskit-wasm";
+import { BlurEffectLayer } from "primitives/Effects";
+import { z } from "zod";
+
+export default function applyBlur(
+  CanvasKit: CanvasKit,
+  canvas: Canvas,
+  surface: Surface,
+  options: z.input<typeof BlurEffectLayer>
+) {
+  const image = surface.makeImageSnapshot();
+
+  if (image) {
+    const blurFilter = CanvasKit.ImageFilter.MakeBlur(
+      options.amountX,
+      options.amountY,
+      CanvasKit.TileMode[options.tileMode],
+      null
+    );
+
+    const paint = new CanvasKit.Paint();
+
+    paint.setImageFilter(blurFilter);
+
+    canvas.drawImage(image, 0, 0, paint);
+  }
+}

app/src/primitives/Effects.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+export const EffectTypeOptions = ["Blur", "Erode", "Displace"] as const;
+
+export const TileModeOptions = ["Clamp", "Decal", "Mirror", "Repeat"] as const;
+
+export const EffectType = z.enum(EffectTypeOptions);
+export const TileMode = z.enum(TileModeOptions);
+
+export const EffectLayer = z.object({
+  entityId: z.string().uuid(),
+});
+
+export const BlurEffectLayer = EffectLayer.extend({
+  type: z.literal(EffectType.enum.Blur),
+  amountX: z.number().min(0),
+  amountY: z.number().min(0),
+  tileMode: TileMode,
+});

app/src/primitives/Interpolation.ts

@@ -36,13 +36,13 @@ export const LinearInterpolation = z.object({
 
 export const EasingFunctionInterpolation = z.object({
   type: z.literal(InterpolationType.Enum.EasingFunction),
-  easing_function: EasingFunction,
+  easing_function: EasingFunction.default("CircOut"),
 });
 
 export const SpringInterpolation = z.object({
-  mass: z.number(),
-  damping: z.number(),
-  stiffness: z.number(),
+  mass: z.number().default(1),
+  damping: z.number().default(15),
+  stiffness: z.number().default(200),
   type: z.literal(InterpolationType.Enum.Spring),
 });
 

app/src/styles.css

@@ -131,7 +131,7 @@ label {
 }
 
 fieldset {
-  @apply mb-2 flex flex-col items-start w-16;
+  @apply mb-2 flex flex-col items-start;
 }
 
 :root {