Add shadow (#10)

* WIP add border shadow properties * Add shadow properties in panel * Add render of shadow * Add opacity in Rect Element shadow * add states in shadow properties --------- Co-authored-by: constant <[email protected]>
constantgillet · Jun 17, 2024 · fa95f39 · fa95f39
1 parent b096150
commit fa95f39
Show file tree

Hide file tree

Showing 5 changed files with 700 additions and 139 deletions.
diff --git a/app/components/PropertiesPanel.tsx b/app/components/PropertiesPanel.tsx
@@ -18,6 +18,7 @@ import { BorderProperties } from "./BorderProperties";
 import { Icon } from "./Icon";
 import { BlurProperties } from "./BlurProperties";
 import { TextShadowProperties } from "./TextShadowProperties";
+import { ShadowProperties } from "./ShadowProperties";
 
 const Separator = () => {
 	return (
@@ -258,6 +259,26 @@ export const PropertiesPanel = () => {
 						<Separator />
 					</>
 				)}
+			{properties?.shadowXOffset !== undefined &&
+				properties?.shadowYOffset !== undefined &&
+				properties?.shadowColor !== undefined &&
+				properties?.shadowBlur !== undefined &&
+				properties?.shadowSpread !== undefined &&
+				properties?.shadowOpacity !== undefined && (
+					<>
+						<ShadowProperties
+							properties={{
+								shadowXOffset: properties.shadowXOffset,
+								shadowYOffset: properties.shadowYOffset,
+								shadowColor: properties.shadowColor,
+								shadowBlur: properties.shadowBlur,
+								shadowSpread: properties.shadowSpread,
+								shadowOpacity: properties.shadowOpacity,
+							}}
+						/>
+						<Separator />
+					</>
+				)}
 			{
 				// If empty properties
 				!Object.keys(properties).length && (

diff --git a/app/components/RectElement.tsx b/app/components/RectElement.tsx
@@ -6,6 +6,29 @@ import type { RectElement as RectElementType } from "~/stores/elementTypes";
 type ReactElementProps = RectElementType;
 
 export const RectElement = (props: ReactElementProps) => {
+	//Create boxShadow string with border and shadow properties
+	const shadowValue =
+		props.shadowXOffset &&
+		props.shadowYOffset &&
+		props.shadowBlur &&
+		props.shadowSpread &&
+		props.shadowColor
+			? `${props.shadowXOffset}px ${props.shadowYOffset}px ${
+					props.shadowBlur
+				}px ${props.shadowSpread}px ${addAlphaToHex(
+					props.shadowColor,
+					props.shadowOpacity || 1,
+				)}`
+			: undefined;
+	const borderValue =
+		props.borderColor && props.borderType && props.borderWidth
+			? `0px 0px 0px ${props.borderWidth}px ${
+					props.borderType === "inside" ? "inset" : ""
+				} ${props.borderColor}`
+			: undefined;
+
+	const shadowList = [shadowValue, borderValue].filter(Boolean).join(", ");
+
 	return (
 		<div
 			className={cx(
@@ -33,12 +56,7 @@ export const RectElement = (props: ReactElementProps) => {
 				borderTopRightRadius: `${props.borderTopRightRadius}px`,
 				borderBottomLeftRadius: `${props.borderBottomLeftRadius}px`,
 				borderBottomRightRadius: `${props.borderBottomRightRadius}px`,
-				boxShadow:
-					props.borderColor && props.borderType && props.borderWidth
-						? `0px 0px 0px ${props.borderWidth}px ${
-								props.borderType === "inside" ? "inset" : ""
-							} ${props.borderColor}`
-						: "none",
+				boxShadow: shadowList !== "" ? shadowList : "unset",
 				filter: props.blur ? `blur(${props.blur}px)` : "none",
 			}}
 		/>