diff --git a/pluto/src/color/Picker/Picker.tsx b/pluto/src/color/Picker/Picker.tsx index e1e502a78..a5a4ebeee 100644 --- 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 index b1866d3a3..5f652fa7b 100644 --- a/pluto/src/vis/schematic/Forms.tsx +++ b/pluto/src/vis/schematic/Forms.tsx @@ -109,6 +109,7 @@ const ColorControl: Form.FieldT = (props): ReactElement => ( value={value ?? Color.ZERO.setAlpha(1).rgba255} onChange={(v) => onChange(v.rgba255)} {...props} + bordered /> )} @@ -282,29 +283,56 @@ export const TankForm = ({ + + + path="borderRadius.x" + hideIfNull + optional + label="X Border Radius" + grow + > + {({ value, ...props }) => ( + + )} + + + path="borderRadius.y" + hideIfNull + optional + label="Y Border Radius" + grow + > + {({ value, ...props }) => ( + + )} + {includeBorderRadius && ( - <> - path="borderRadius.x" label="X Border Radius" grow> - {({ value, ...props }) => ( - - )} - - path="borderRadius.y" label="Y Border Radius" grow> - {({ value, ...props }) => ( - - )} - - + + path="borderRadius" + hideIfNull + optional + label="Border Radius" + grow + > + {({ value, ...props }) => ( + + )} + )} path="dimensions.width" label="Width" grow> {({ value, ...props }) => ( diff --git a/pluto/src/vis/schematic/Symbols.tsx b/pluto/src/vis/schematic/Symbols.tsx index 44adc6419..25346aa75 100644 --- a/pluto/src/vis/schematic/Symbols.tsx +++ b/pluto/src/vis/schematic/Symbols.tsx @@ -324,13 +324,21 @@ export const PumpPreview = (props: PumpProps): ReactElement => ( ); -export interface TankProps extends Primitives.TankProps { +export interface TankProps extends Omit { label?: LabelExtensionProps; } export const Tank = Aether.wrap>( "Tank", - ({ label, onChange, orientation, color, dimensions, borderRadius }): ReactElement => ( + ({ + backgroundColor, + label, + onChange, + orientation, + color, + dimensions, + borderRadius, + }): ReactElement => ( onChange({ dimensions: dims })} @@ -338,6 +346,7 @@ export const Tank = Aether.wrap>( color={color} dimensions={dimensions} borderRadius={borderRadius} + backgroundColor={backgroundColor} /> ), @@ -347,18 +356,29 @@ export const TankPreview = (props: TankProps): ReactElement => ( ); -export interface BoxProps extends Omit {} +export interface BoxProps extends Omit { + borderRadius?: number; +} export const Box = Aether.wrap>( "Box", - ({ label, onChange, orientation, color, dimensions }): ReactElement => ( + ({ + backgroundColor, + borderRadius, + label, + onChange, + orientation, + color, + dimensions, + }): ReactElement => ( onChange({ dimensions: dims })} orientation={orientation} color={color} dimensions={dimensions} - borderRadius={3} + boxBorderRadius={borderRadius} + backgroundColor={backgroundColor} /> ), diff --git a/pluto/src/vis/schematic/primitives/Primitives.tsx b/pluto/src/vis/schematic/primitives/Primitives.tsx index a74cdea17..76c4c88df 100644 --- 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 (
- - + {hasCornerBoundaries && ( + <> + + + + )} - - + {hasCornerBoundaries && ( + <> + + + + )} diff --git a/pluto/src/vis/schematic/registry.ts b/pluto/src/vis/schematic/registry.ts index a97ed7da4..839d19f4c 100644 --- 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 = { name: "Three Way Valve", key: "threeWayValve", @@ -366,16 +379,13 @@ const screwPump: Spec = { const tank: Spec = { 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 = { const box: Spec = { 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,