SY-1194 Adjust Box Border Radius + Tank & Box Background Color (#819)

- refactor(pluto): add border color to box and tank, new box border radius - refactor(pluto): Remove unnecessary code on tank/box form
synnaxlabs · Sep 13, 2024 · 7cc4012 · 7cc4012
1 parent 9cffb8e
commit 7cc4012
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 67 deletions.
diff --git a/pluto/src/color/Picker/Picker.tsx b/pluto/src/color/Picker/Picker.tsx
@@ -10,7 +10,7 @@
 import "@/color/Picker/Picker.css";
 
 import { type ComponentPropsWithoutRef, type ReactElement } from "react";
-import { type ColorResult,SketchPicker } from "react-color";
+import { type ColorResult, SketchPicker } from "react-color";
 
 import { color } from "@/color/core";
 import { CSS } from "@/css";

diff --git a/pluto/src/vis/schematic/Forms.tsx b/pluto/src/vis/schematic/Forms.tsx
@@ -109,6 +109,7 @@ const ColorControl: Form.FieldT<Color.Crude> = (props): ReactElement => (
         value={value ?? Color.ZERO.setAlpha(1).rgba255}
         onChange={(v) => onChange(v.rgba255)}
         {...props}
+        bordered
       />
     )}
   </Form.Field>
@@ -282,29 +283,56 @@ export const TankForm = ({
       <LabelControls path="label" />
       <Align.Space direction="x">
         <ColorControl path="color" />
+        <ColorControl path="backgroundColor" label="Background Color" />
+        <Form.Field<number>
+          path="borderRadius.x"
+          hideIfNull
+          optional
+          label="X Border Radius"
+          grow
+        >
+          {({ value, ...props }) => (
+            <Input.Numeric
+              value={value}
+              dragScale={DIMENSIONS_DRAG_SCALE}
+              bounds={DIMENSIONS_BOUNDS}
+              {...props}
+            />
+          )}
+        </Form.Field>
+        <Form.Field<number>
+          path="borderRadius.y"
+          hideIfNull
+          optional
+          label="Y Border Radius"
+          grow
+        >
+          {({ value, ...props }) => (
+            <Input.Numeric
+              value={value}
+              dragScale={DIMENSIONS_DRAG_SCALE}
+              bounds={DIMENSIONS_BOUNDS}
+              {...props}
+            />
+          )}
+        </Form.Field>
         {includeBorderRadius && (
-          <>
-            <Form.Field<number> path="borderRadius.x" label="X Border Radius" grow>
-              {({ value, ...props }) => (
-                <Input.Numeric
-                  value={value}
-                  dragScale={DIMENSIONS_DRAG_SCALE}
-                  bounds={DIMENSIONS_BOUNDS}
-                  {...props}
-                />
-              )}
-            </Form.Field>
-            <Form.Field<number> path="borderRadius.y" label="Y Border Radius" grow>
-              {({ value, ...props }) => (
-                <Input.Numeric
-                  value={value}
-                  dragScale={DIMENSIONS_DRAG_SCALE}
-                  bounds={DIMENSIONS_BOUNDS}
-                  {...props}
-                />
-              )}
-            </Form.Field>
-          </>
+          <Form.Field<number>
+            path="borderRadius"
+            hideIfNull
+            optional
+            label="Border Radius"
+            grow
+          >
+            {({ value, ...props }) => (
+              <Input.Numeric
+                value={value}
+                dragScale={DIMENSIONS_DRAG_SCALE}
+                bounds={DIMENSIONS_BOUNDS}
+                {...props}
+              />
+            )}
+          </Form.Field>
         )}
         <Form.Field<number> path="dimensions.width" label="Width" grow>
           {({ value, ...props }) => (

diff --git a/pluto/src/vis/schematic/Symbols.tsx b/pluto/src/vis/schematic/Symbols.tsx
@@ -324,20 +324,29 @@ export const PumpPreview = (props: PumpProps): ReactElement => (
   <Primitives.Pump {...props} />
 );
 
-export interface TankProps extends Primitives.TankProps {
+export interface TankProps extends Omit<Primitives.TankProps, "boxBorderRadius"> {
   label?: LabelExtensionProps;
 }
 
 export const Tank = Aether.wrap<SymbolProps<TankProps>>(
   "Tank",
-  ({ label, onChange, orientation, color, dimensions, borderRadius }): ReactElement => (
+  ({
+    backgroundColor,
+    label,
+    onChange,
+    orientation,
+    color,
+    dimensions,
+    borderRadius,
+  }): ReactElement => (
     <Labeled {...label} onChange={onChange}>
       <Primitives.Tank
         onResize={(dims) => onChange({ dimensions: dims })}
         orientation={orientation}
         color={color}
         dimensions={dimensions}
         borderRadius={borderRadius}
+        backgroundColor={backgroundColor}
       />
     </Labeled>
   ),
@@ -347,18 +356,29 @@ export const TankPreview = (props: TankProps): ReactElement => (
   <Primitives.Tank {...props} dimensions={{ width: 25, height: 50 }} />
 );
 
-export interface BoxProps extends Omit<TankProps, "borderRadius"> {}
+export interface BoxProps extends Omit<TankProps, "borderRadius"> {
+  borderRadius?: number;
+}
 
 export const Box = Aether.wrap<SymbolProps<BoxProps>>(
   "Box",
-  ({ label, onChange, orientation, color, dimensions }): ReactElement => (
+  ({
+    backgroundColor,
+    borderRadius,
+    label,
+    onChange,
+    orientation,
+    color,
+    dimensions,
+  }): ReactElement => (
     <Labeled {...label} onChange={onChange}>
       <Primitives.Tank
         onResize={(dims) => onChange({ dimensions: dims })}
         orientation={orientation}
         color={color}
         dimensions={dimensions}
-        borderRadius={3}
+        boxBorderRadius={borderRadius}
+        backgroundColor={backgroundColor}
       />
     </Labeled>
   ),

diff --git a/pluto/src/vis/schematic/primitives/Primitives.tsx b/pluto/src/vis/schematic/primitives/Primitives.tsx
@@ -678,58 +678,73 @@ export interface TankProps extends DivProps {
   borderRadius?: BorderRadius;
   color?: Color.Crude;
   onResize?: (dimensions: dimensions.Dimensions) => void;
+  boxBorderRadius?: number;
+  backgroundColor?: Color.Crude;
 }
 
 export const Tank = ({
   className,
   dimensions = DEFAULT_DIMENSIONS,
   borderRadius = DEFAULT_BORDER_RADIUS,
+  boxBorderRadius,
   color,
+  backgroundColor,
   ...props
 }: TankProps): ReactElement => {
   const detailedRadius = parseBorderRadius(borderRadius);
+  const hasCornerBoundaries = boxBorderRadius == null;
   const t = Theming.use();
   return (
     <Div
       className={CSS(className, CSS.B("tank"))}
       style={{
         ...dimensions,
-        borderRadius: cssBorderRadius(detailedRadius),
+        borderRadius: boxBorderRadius ?? cssBorderRadius(detailedRadius),
         borderColor: Color.cssString(color ?? t.colors.gray.l9),
+        backgroundColor:
+          backgroundColor == null ? backgroundColor : Color.cssString(backgroundColor),
       }}
       {...props}
     >
       <HandleBoundary>
         <Handle location="top" orientation="left" left={50} top={0} id="1" />
-        <Handle
-          location="top"
-          orientation="left"
-          left={-0.5}
-          top={detailedRadius.topLeft.y - 1}
-          id="2"
-        />
-        <Handle
-          location="top"
-          orientation="left"
-          left={101}
-          top={detailedRadius.topRight.y - 1}
-          id="3"
-        />
+        {hasCornerBoundaries && (
+          <>
+            <Handle
+              location="top"
+              orientation="left"
+              left={-0.5}
+              top={detailedRadius.topLeft.y - 1}
+              id="2"
+            />
+            <Handle
+              location="top"
+              orientation="left"
+              left={101}
+              top={detailedRadius.topRight.y - 1}
+              id="3"
+            />
+          </>
+        )}
         <Handle location="bottom" orientation="left" left={50} top={100} id="4" />
-        <Handle
-          location="bottom"
-          orientation="left"
-          left={-0.5}
-          top={100 - detailedRadius.bottomLeft.y + 1}
-          id="5"
-        />
-        <Handle
-          location="bottom"
-          orientation="left"
-          left={101}
-          top={100 - detailedRadius.bottomRight.y + 1}
-          id="6"
-        />
+        {hasCornerBoundaries && (
+          <>
+            <Handle
+              location="bottom"
+              orientation="left"
+              left={-0.5}
+              top={100 - detailedRadius.bottomLeft.y + 1}
+              id="5"
+            />
+            <Handle
+              location="bottom"
+              orientation="left"
+              left={101}
+              top={100 - detailedRadius.bottomRight.y + 1}
+              id="6"
+            />
+          </>
+        )}
         <Handle location="left" orientation="left" left={-0.5} top={50} id="7" />
         <Handle location="right" orientation="left" left={101} top={50} id="8" />
       </HandleBoundary>

diff --git a/pluto/src/vis/schematic/registry.ts b/pluto/src/vis/schematic/registry.ts
@@ -10,6 +10,7 @@
 import { type FC } from "react";
 import { z } from "zod";
 
+import { color } from "@/color/core";
 import { telem } from "@/telem/aether";
 import { control } from "@/telem/control/aether";
 import { type Theming } from "@/theming";
@@ -264,6 +265,18 @@ const zeroLabel = (label: string): zeroLabelReturn => ({
   },
 });
 
+const ZERO_DIMENSIONS = {
+  width: 100,
+  height: 100,
+};
+
+const ZERO_BOX_PROPS = {
+  dimensions: ZERO_DIMENSIONS,
+  backgroundColor: color.ZERO,
+};
+
+const ZERO_BOX_BORDER_RADIUS = 3;
+
 const threeWayValve: Spec<ThreeWayValveProps> = {
   name: "Three Way Valve",
   key: "threeWayValve",
@@ -366,16 +379,13 @@ const screwPump: Spec<ScrewPumpProps> = {
 const tank: Spec<TankProps> = {
   name: "Tank",
   key: "tank",
-  Form: () => TankForm({ includeBorderRadius: true }),
+  Form: TankForm,
   Symbol: Tank,
   defaultProps: (t) => ({
     color: t.colors.gray.l9.rgba255,
     ...zeroLabel("Tank"),
-    dimensions: {
-      width: 100,
-      height: 200,
-    },
     borderRadius: DEFAULT_BORDER_RADIUS,
+    ...ZERO_BOX_PROPS,
     ...ZERO_PROPS,
   }),
   Preview: TankPreview,
@@ -385,15 +395,13 @@ const tank: Spec<TankProps> = {
 const box: Spec<BoxProps> = {
   name: "Box",
   key: "box",
-  Form: TankForm,
+  Form: () => TankForm({ includeBorderRadius: true }),
   Symbol: Box,
   defaultProps: (t) => ({
     color: t.colors.gray.l9.rgba255,
     ...zeroLabel("Box"),
-    dimensions: {
-      width: 100,
-      height: 200,
-    },
+    borderRadius: ZERO_BOX_BORDER_RADIUS,
+    ...ZERO_BOX_PROPS,
     ...ZERO_PROPS,
   }),
   Preview: BoxPreview,