From 54db3d90f527d14908febf71ca47baeb37f2be8b Mon Sep 17 00:00:00 2001 From: Jaya Krishna Namburu Date: Fri, 16 Aug 2024 14:59:08 +0530 Subject: [PATCH] experimental: add ui controls for perspective under transform controls (#3945) ## Description This PR adds support for `perspective` property to be managed under the transforms panel. This behaves very similar to `backface-visibility` property that is under transforms. ## Steps for reproduction - Add the `perspective` property under the transforms using the dropdown. - You can add `none` or any of the `length` values for the property. - Able to reset the property and update using the `keyboard`, `scrub` and `up and down` interactions. ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [x] made a self-review ## Before merging - [x] tested locally and on preview environment (preview dev login: 5de6) ![perspective](https://github.com/user-attachments/assets/98cf4753-7d5e-48ee-b654-470f0fdac5ff) --- .../transforms/transform-perspective.tsx | 40 +++++++++++++++++++ .../sections/transforms/transform-utils.ts | 10 +++++ .../sections/transforms/transforms.tsx | 11 ++++- 3 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx new file mode 100644 index 0000000000..6d01a3f94c --- /dev/null +++ b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx @@ -0,0 +1,40 @@ +import { type StyleProperty } from "@webstudio-is/css-engine"; +import { Grid, theme } from "@webstudio-is/design-system"; +import { TextControl } from "../../controls"; +import { PropertyName } from "../../shared/property-name"; +import { styleConfigByName } from "../../shared/configs"; +import type { SectionProps } from "../shared/section"; + +const property: StyleProperty = "perspective"; + +export const TransformPerspective = (props: SectionProps) => { + const { currentStyle, setProperty, deleteProperty } = props; + const { label } = styleConfigByName(property); + const value = currentStyle[property]?.local; + + if (value?.type !== "keyword" && value?.type !== "unit") { + return; + } + + return ( + + deleteProperty(property)} + /> + + + ); +}; diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts index c0a25cf106..01e44068e1 100644 --- a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts +++ b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts @@ -108,6 +108,13 @@ export const addDefaultsForTransormSection = (props: { }); } + case "perspective": { + return setProperty("perspective")({ + type: "keyword", + value: "none", + }); + } + case "skew": case "rotate": { const value = currentStyle["transform"]?.value; @@ -154,6 +161,9 @@ export const isTransformPanelPropertyUsed = (params: { case "backfaceVisibility": return currentStyle["backfaceVisibility"]?.local?.type === "keyword"; + case "perspective": + return currentStyle["perspective"]?.local !== undefined; + case "rotate": { const rotate = currentStyle["transform"]?.value; return ( diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx index 0ab9ce4b59..17798d4912 100644 --- a/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx @@ -39,6 +39,7 @@ import { ScalePanelContent } from "./transform-scale"; import { RotatePanelContent } from "./transform-rotate"; import { SkewPanelContent } from "./transform-skew"; import { BackfaceVisibility } from "./transform-backface-visibility"; +import { TransformPerspective } from "./transform-perspective"; import { humanizeString } from "~/shared/string-utils"; import { getStyleSource } from "../../shared/style-info"; import { PropertyName } from "../../shared/property-name"; @@ -55,6 +56,7 @@ export const transformPanels = [ export const transformPanelDropdown = [ ...transformPanels, "backfaceVisibility", + "perspective", ] as const; export type TransformPanel = (typeof transformPanels)[number]; @@ -65,6 +67,7 @@ export const properties = [ "scale", "transform", "backfaceVisibility", + "perspective", ] satisfies Array; export const Section = (props: SectionProps) => { @@ -81,6 +84,7 @@ export const Section = (props: SectionProps) => { const backfaceVisibilityStyleSource = getStyleSource( currentStyle["backfaceVisibility"] ); + const perspectiveStyleSource = getStyleSource(currentStyle["perspective"]); const isAnyTransformPropertyAdded = transformPanels.some((panel) => isTransformPanelPropertyUsed({ @@ -95,6 +99,7 @@ export const Section = (props: SectionProps) => { batch.deleteProperty("scale"); batch.deleteProperty("transform"); batch.deleteProperty("backfaceVisibility"); + batch.deleteProperty("perspective"); batch.publish(); }; @@ -115,7 +120,7 @@ export const Section = (props: SectionProps) => { {transformPanelDropdown.map((panel) => { return ( @@ -155,7 +160,8 @@ export const Section = (props: SectionProps) => { translateStyleSource || scaleStyleSource || rotateAndSkewStyleSrouce || - backfaceVisibilityStyleSource + backfaceVisibilityStyleSource || + perspectiveStyleSource } > {label} @@ -182,6 +188,7 @@ export const Section = (props: SectionProps) => { ) : undefined} + ); };