@elementor/editor-canvas 3.32.0-74 → 3.32.0-76

package/dist/index.js

@@ -935,6 +935,15 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/perspective-origin-transformer.ts
+var FALLBACK = "0px";
+function getVal(val) {
+  return `${val ?? FALLBACK}`;
+}
+var perspectiveOriginTransformer = createTransformer(
+  (value) => `${getVal(value?.x)} ${getVal(value?.y)}`
+);
+
 // src/transformers/styles/position-transformer.ts
 var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
 
@@ -974,11 +983,11 @@ var transformMoveTransformer = createTransformer((value) => {
 
 // src/transformers/styles/transform-origin-transformer.ts
 var EMPTY_VALUE = "0px";
-function getVal(val) {
+function getVal2(val) {
   return `${val ?? EMPTY_VALUE}`;
 }
 var transformOriginTransformer = createTransformer((value) => {
-  return `${getVal(value.x)} ${getVal(value.y)} ${getVal(value.z)}`;
+  return `${getVal2(value.x)} ${getVal2(value.y)} ${getVal2(value.z)}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -1027,7 +1036,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("filter", filterTransformer).register("backdrop-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-origin", transformOriginTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform-functions", transformFunctionsTransformer).register(
+  ).register("filter", filterTransformer).register("backdrop-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-origin", transformOriginTransformer).register("perspective-origin", perspectiveOriginTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform-functions", transformFunctionsTransformer).register(
     "transform",
     createMultiPropsTransformer(
       ["transform-functions", "transform-origin", "perspective"],

package/dist/index.mjs

@@ -901,6 +901,15 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/perspective-origin-transformer.ts
+var FALLBACK = "0px";
+function getVal(val) {
+  return `${val ?? FALLBACK}`;
+}
+var perspectiveOriginTransformer = createTransformer(
+  (value) => `${getVal(value?.x)} ${getVal(value?.y)}`
+);
+
 // src/transformers/styles/position-transformer.ts
 var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
 
@@ -940,11 +949,11 @@ var transformMoveTransformer = createTransformer((value) => {
 
 // src/transformers/styles/transform-origin-transformer.ts
 var EMPTY_VALUE = "0px";
-function getVal(val) {
+function getVal2(val) {
   return `${val ?? EMPTY_VALUE}`;
 }
 var transformOriginTransformer = createTransformer((value) => {
-  return `${getVal(value.x)} ${getVal(value.y)} ${getVal(value.z)}`;
+  return `${getVal2(value.x)} ${getVal2(value.y)} ${getVal2(value.z)}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -993,7 +1002,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("filter", filterTransformer).register("backdrop-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-origin", transformOriginTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform-functions", transformFunctionsTransformer).register(
+  ).register("filter", filterTransformer).register("backdrop-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-origin", transformOriginTransformer).register("perspective-origin", perspectiveOriginTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform-functions", transformFunctionsTransformer).register(
     "transform",
     createMultiPropsTransformer(
       ["transform-functions", "transform-origin", "perspective"],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.32.0-74",
+  "version": "3.32.0-76",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-74",
-    "@elementor/editor-notifications": "3.32.0-74",
-    "@elementor/editor-documents": "3.32.0-74",
-    "@elementor/editor-elements": "3.32.0-74",
-    "@elementor/editor-props": "3.32.0-74",
-    "@elementor/editor-responsive": "3.32.0-74",
-    "@elementor/editor-styles": "3.32.0-74",
-    "@elementor/editor-styles-repository": "3.32.0-74",
-    "@elementor/editor-v1-adapters": "3.32.0-74",
-    "@elementor/twing": "3.32.0-74",
+    "@elementor/editor": "3.32.0-76",
+    "@elementor/editor-notifications": "3.32.0-76",
+    "@elementor/editor-documents": "3.32.0-76",
+    "@elementor/editor-elements": "3.32.0-76",
+    "@elementor/editor-props": "3.32.0-76",
+    "@elementor/editor-responsive": "3.32.0-76",
+    "@elementor/editor-styles": "3.32.0-76",
+    "@elementor/editor-styles-repository": "3.32.0-76",
+    "@elementor/editor-v1-adapters": "3.32.0-76",
+    "@elementor/twing": "3.32.0-76",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-74",
-    "@elementor/wp-media": "3.32.0-74",
+    "@elementor/utils": "3.32.0-76",
+    "@elementor/wp-media": "3.32.0-76",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/init-style-transformers.ts

@@ -13,6 +13,7 @@ import { createCombineArrayTransformer } from './transformers/styles/create-comb
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
 import { filterTransformer } from './transformers/styles/filter-transformer';
 import { flexTransformer } from './transformers/styles/flex-transformer';
+import { perspectiveOriginTransformer } from './transformers/styles/perspective-origin-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
@@ -53,6 +54,7 @@ export function initStyleTransformers() {
 		.register( 'image', imageTransformer )
 		.register( 'object-position', positionTransformer )
 		.register( 'transform-origin', transformOriginTransformer )
+		.register( 'perspective-origin', perspectiveOriginTransformer )
 		.register( 'transform-move', transformMoveTransformer )
 		.register( 'transform-scale', transformScaleTransformer )
 		.register( 'transform-rotate', transformRotateTransformer )

package/src/transformers/styles/perspective-origin-transformer.ts

@@ -0,0 +1,16 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformChildren = {
+	x: string;
+	y: string;
+};
+
+const FALLBACK = '0px';
+
+function getVal( val: string ) {
+	return `${ val ?? FALLBACK }`;
+}
+
+export const perspectiveOriginTransformer = createTransformer(
+	( value: TransformChildren ) => `${ getVal( value?.x ) } ${ getVal( value?.y ) }`
+);