@elementor/editor-canvas 0.24.0 → 0.26.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.24.0 build
+> @elementor/editor-canvas@0.26.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     43.76 KB
-ESM dist/index.mjs.map 92.89 KB
-ESM ⚡️ Build success in 255ms
-CJS dist/index.js     47.11 KB
-CJS dist/index.js.map 93.12 KB
-CJS ⚡️ Build success in 263ms
+CJS dist/index.js     48.17 KB
+CJS dist/index.js.map 95.71 KB
+CJS ⚡️ Build success in 292ms
+ESM dist/index.mjs     44.83 KB
+ESM dist/index.mjs.map 95.49 KB
+ESM ⚡️ Build success in 293ms
 DTS Build start
-DTS ⚡️ Build success in 21418ms
+DTS ⚡️ Build success in 15187ms
 DTS dist/index.d.mts 2.42 KB
 DTS dist/index.d.ts  2.42 KB

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @elementor/editor-canvas
 
+## 0.26.0
+
+### Minor Changes
+
+- b3726f6: Add transform move control
+- 1a37b1c: Update the Elementor UI version.
+
+### Patch Changes
+
+- Updated dependencies [b3726f6]
+- Updated dependencies [68ce0d9]
+- Updated dependencies [1a37b1c]
+- Updated dependencies [c62d64c]
+  - @elementor/editor-props@0.16.0
+  - @elementor/editor@0.21.0
+  - @elementor/editor-notifications@1.4.0
+  - @elementor/editor-elements@0.9.0
+  - @elementor/editor-styles-repository@0.10.5
+  - @elementor/editor-styles@0.6.12
+
+## 0.25.0
+
+### Minor Changes
+
+- ab6ad10: Adds support for css filter property, blur and brightness only.
+- c694e33: updated overlay styling for small elements
+  changed default tab for editing panel for divider widget
+
+### Patch Changes
+
+- Updated dependencies [e953081]
+- Updated dependencies [ab6ad10]
+- Updated dependencies [ea388a1]
+- Updated dependencies [16df763]
+  - @elementor/utils@0.5.0
+  - @elementor/editor-props@0.15.0
+  - @elementor/editor-elements@0.8.7
+  - @elementor/editor-styles-repository@0.10.4
+  - @elementor/editor-v1-adapters@0.12.1
+  - @elementor/wp-media@0.6.1
+  - @elementor/editor-styles@0.6.11
+  - @elementor/editor@0.20.1
+  - @elementor/editor-responsive@0.13.6
+  - @elementor/editor-notifications@1.3.1
+
 ## 0.24.0
 
 ### Minor Changes

package/dist/index.js

@@ -126,15 +126,18 @@ function useFloatingOnElement({ element, isSelected }) {
 
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
-var OverlayBox = (0, import_ui.styled)(import_ui.Box, { shouldForwardProp: (prop) => prop !== "isSelected" })(({ theme, isSelected }) => ({
+var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
+})(({ theme, isSelected, isSmallerOffset }) => ({
   outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
-  outlineOffset: isSelected ? "-2px" : "-1px",
+  outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react4.useInteractions)([(0, import_react4.useHover)(context)]);
   useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = element.offsetHeight <= 1;
   return isVisible && /* @__PURE__ */ React.createElement(import_react4.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
@@ -143,6 +146,7 @@ function ElementOverlay({ element, isSelected, id }) {
       style: floating.styles,
       "data-element-overlay": id,
       role: "presentation",
+      isSmallerOffset,
       ...getFloatingProps()
     }
   ));
@@ -773,6 +777,23 @@ var createMultiPropsTransformer = (keys, keyGenerator) => {
   });
 };
 
+// src/transformers/styles/filter-transformer.ts
+var filterTransformer = createTransformer((filterValues) => {
+  if (filterValues?.length < 1) {
+    return null;
+  }
+  return filterValues.map(mapToFilterFunctionString).join(" ");
+});
+var mapToFilterFunctionString = (value) => {
+  if ("radius" in value) {
+    return `blur(${value.radius})`;
+  }
+  if ("amount" in value) {
+    return `brightness(${value.amount})`;
+  }
+  return "";
+};
+
 // src/transformers/styles/position-transformer.ts
 var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
 
@@ -796,6 +817,19 @@ var strokeTransformer = createTransformer((value) => {
   return createMultiPropsValue(parsed);
 });
 
+// src/transformers/styles/transform-move-transformer.ts
+var transformMoveTransformer = createTransformer((value) => {
+  return `translate3d(${value.x}, ${value.y}, ${value.z})`;
+});
+
+// src/transformers/styles/transform-transformer.ts
+var transformTransformer = createTransformer((values) => {
+  if (values?.length < 1) {
+    return null;
+  }
+  return values.join(" ");
+});
+
 // src/init-style-transformers.ts
 function initStyleTransformers() {
   styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
@@ -804,7 +838,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register(
+  ).register("filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform", transformTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register(