From 529e10d333f83f34ca0a288fba49dfb37d191dd7 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 1 Jul 2023 20:01:35 +0200
Subject: [PATCH] More effects props (#1881)

## Description

Part of https://github.com/webstudio-is/webstudio-builder/issues/879

-  pointer events
-  Blend Mode
-  user select


## Code Review

- [ ] hi @istarkov , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 .../style-panel/sections/effects/effects.tsx  | 61 +++++++++++++++----
 1 file changed, 48 insertions(+), 13 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/effects/effects.tsx b/apps/builder/app/builder/features/style-panel/sections/effects/effects.tsx
index f4658aee11..1f1e5c3c3e 100644
--- a/apps/builder/app/builder/features/style-panel/sections/effects/effects.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/effects/effects.tsx
@@ -27,19 +27,6 @@ export const EffectsSection = ({
           gridTemplateColumns: `1fr ${theme.spacing[22]}`,
         }}
       >
-        <PropertyName
-          label={styleConfigByName("cursor").label}
-          properties={["cursor"]}
-          style={style}
-          onReset={() => deleteProperty("cursor")}
-        />
-        <SelectControl
-          property={"cursor"}
-          currentStyle={style}
-          setProperty={setProperty}
-          deleteProperty={deleteProperty}
-        />
-
         <PropertyName
           label={styleConfigByName("opacity").label}
           properties={["opacity"]}
@@ -52,6 +39,54 @@ export const EffectsSection = ({
           setProperty={setProperty}
           deleteProperty={deleteProperty}
         />
+        <PropertyName
+          label={"Blend Mode"}
+          properties={["mixBlendMode"]}
+          style={style}
+          onReset={() => deleteProperty("mixBlendMode")}
+        />
+        <SelectControl
+          property={"mixBlendMode"}
+          currentStyle={style}
+          setProperty={setProperty}
+          deleteProperty={deleteProperty}
+        />
+        <PropertyName
+          label={styleConfigByName("cursor").label}
+          properties={["cursor"]}
+          style={style}
+          onReset={() => deleteProperty("cursor")}
+        />
+        <SelectControl
+          property={"cursor"}
+          currentStyle={style}
+          setProperty={setProperty}
+          deleteProperty={deleteProperty}
+        />
+        <PropertyName
+          label={styleConfigByName("pointerEvents").label}
+          properties={["pointerEvents"]}
+          style={style}
+          onReset={() => deleteProperty("pointerEvents")}
+        />
+        <SelectControl
+          property={"pointerEvents"}
+          currentStyle={style}
+          setProperty={setProperty}
+          deleteProperty={deleteProperty}
+        />
+        <PropertyName
+          label={styleConfigByName("userSelect").label}
+          properties={["userSelect"]}
+          style={style}
+          onReset={() => deleteProperty("userSelect")}
+        />
+        <SelectControl
+          property={"userSelect"}
+          currentStyle={style}
+          setProperty={setProperty}
+          deleteProperty={deleteProperty}
+        />
       </Grid>
     </CollapsibleSection>
   );