@elementor/editor-canvas 0.24.0 → 0.26.0

package/src/init-style-transformers.ts

@@ -11,10 +11,13 @@ import { backgroundTransformer } from './transformers/styles/background-transfor
 import { colorStopTransformer } from './transformers/styles/color-stop-transformer';
 import { createCombineArrayTransformer } from './transformers/styles/create-combine-array-transformer';
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
+import { filterTransformer } from './transformers/styles/filter-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
 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 { transformTransformer } from './transformers/styles/transform-transformer';
 
 export function initStyleTransformers() {
 	styleTransformersRegistry
@@ -28,6 +31,7 @@ export function initStyleTransformers() {
 				( { propKey, key } ) => `${ propKey }-${ key }`
 			)
 		)
+		.register( 'filter', filterTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', backgroundOverlayTransformer )
@@ -41,6 +45,8 @@ export function initStyleTransformers() {
 		.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 }` )

package/src/transformers/styles/filter-transformer.ts

@@ -0,0 +1,23 @@
+import { type FilterItemPropValue } from '@elementor/editor-props';
+
+import { createTransformer } from '../create-transformer';
+
+export const filterTransformer = createTransformer( ( filterValues: FilterItemPropValue[ 'value' ][] ) => {
+	if ( filterValues?.length < 1 ) {
+		return null;
+	}
+
+	return filterValues.map( mapToFilterFunctionString ).join( ' ' );
+} );
+
+const mapToFilterFunctionString = ( value: FilterItemPropValue[ 'value' ] ): string => {
+	if ( 'radius' in value ) {
+		return `blur(${ value.radius })`;
+	}
+
+	if ( 'amount' in value ) {
+		return `brightness(${ value.amount })`;
+	}
+
+	return '';
+};

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

@@ -0,0 +1,11 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformMove = {
+	x: string;
+	y: string;
+	z: string;
+};
+
+export const transformMoveTransformer = createTransformer( ( value: TransformMove ) => {
+	return `translate3d(${ value.x }, ${ value.y }, ${ value.z })`;
+} );

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

@@ -0,0 +1,9 @@
+import { createTransformer } from '../create-transformer';
+
+export const transformTransformer = createTransformer( ( values: string[] ) => {
+	if ( values?.length < 1 ) {
+		return null;
+	}
+
+	return values.join( ' ' );
+} );