@elementor/editor-canvas 3.32.0-33 → 3.32.0-34

package/dist/index.js

@@ -922,6 +922,15 @@ var transformMoveTransformer = createTransformer((value) => {
   return `translate3d(${value.x ?? defaultMove}, ${value.y ?? defaultMove}, ${value.z ?? defaultMove})`;
 });
 
+// src/transformers/styles/transform-origin-transformer.ts
+var EMPTY_VALUE = "0px";
+function getVal(val) {
+  return `${val ?? EMPTY_VALUE}`;
+}
+var transformOriginTransformer = createTransformer((value) => {
+  return `${getVal(value.x)} ${getVal(value.y)} ${getVal(value.z)}`;
+});
+
 // src/transformers/styles/transform-rotate-transformer.ts
 var defaultRotate = "0deg";
 var transformRotateTransformer = createTransformer((value) => {
@@ -976,7 +985,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-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).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("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register("flex", flexTransformer).register(

package/dist/index.mjs

@@ -888,6 +888,15 @@ var transformMoveTransformer = createTransformer((value) => {
   return `translate3d(${value.x ?? defaultMove}, ${value.y ?? defaultMove}, ${value.z ?? defaultMove})`;
 });
 
+// src/transformers/styles/transform-origin-transformer.ts
+var EMPTY_VALUE = "0px";
+function getVal(val) {
+  return `${val ?? EMPTY_VALUE}`;
+}
+var transformOriginTransformer = createTransformer((value) => {
+  return `${getVal(value.x)} ${getVal(value.y)} ${getVal(value.z)}`;
+});
+
 // src/transformers/styles/transform-rotate-transformer.ts
 var defaultRotate = "0deg";
 var transformRotateTransformer = createTransformer((value) => {
@@ -942,7 +951,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-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).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("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register("flex", flexTransformer).register(

package/package.json

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

package/src/init-style-transformers.ts

@@ -18,6 +18,7 @@ import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
 import { strokeTransformer } from './transformers/styles/stroke-transformer';
 import { transformMoveTransformer } from './transformers/styles/transform-move-transformer';
+import { transformOriginTransformer } from './transformers/styles/transform-origin-transformer';
 import { transformRotateTransformer } from './transformers/styles/transform-rotate-transformer';
 import { transformScaleTransformer } from './transformers/styles/transform-scale-transformer';
 import { transformSkewTransformer } from './transformers/styles/transform-skew-transformer';
@@ -51,6 +52,7 @@ export function initStyleTransformers() {
 		.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 )

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

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