Remove transitions from blobs generated by ShapeModeling component, q…

…uickfix scaling
pixelgrade · Jun 7, 2022 · d4e4848 · d4e4848
1 parent 0839ba8
commit d4e4848
Showing 1 changed file with 19 additions and 35 deletions.
diff --git a/packages/shape-modeling/src/filters/with-shape-modeling-decoration.js b/packages/shape-modeling/src/filters/with-shape-modeling-decoration.js
@@ -1,14 +1,13 @@
 import classnames from 'classnames';
-import { Spring, animated } from 'react-spring';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { Fragment } from "@wordpress/element";
 
 import {
   generatePath,
   getBlobViewBox,
   getBlobAttsFromAttributes,
   getBlobStyles,
   getBlobMaskStyles,
+  getBlobMediaStyles,
 } from '../utils';
 
 import { getColorSignalClassnames } from "@novablocks/utils";
@@ -51,41 +50,26 @@ const withShapeModelingDecoration = createHigherOrderComponent( OriginalComponen
 
 		return (
 			<div className={ 'blob-mix' } style={ blobsStyles }>
-				<Spring config={ { delay: 0 } } to={ { path: svgMaskPath } }>
-					{ springProps => {
-						return (
-							<Fragment>
-								<div className={ `novablocks-media-composition__grid-item-mask blob-mix__media` }>
-									<animated.div className={ blobMaskClasses } style={ blobsEnableMask ? getBlobMaskStyles( springProps.path, svgViewBox ) : {} }>
-										<OriginalComponent { ...props } />
-									</animated.div>
-									<svg className="blob-mix__mask-debug" viewBox={ svgViewBox } preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1'>
-										{
-											blobsEnableMask && enableShapeDebug &&
-											<ShapeDebug { ...blobMaskAtts } />
-										}
-									</svg>
-								</div>
-							</Fragment>
-						);
-					} }
-				</Spring>
+        <div className={ `novablocks-media-composition__grid-item-mask blob-mix__media` } style={ getBlobMediaStyles( attributes ) }>
+          <div className={ blobMaskClasses } style={ blobsEnableMask ? getBlobMaskStyles( svgMaskPath, svgViewBox ) : {} }>
+            <OriginalComponent { ...props } />
+          </div>
+          <svg className="blob-mix__mask-debug" viewBox={ svgViewBox } preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1'>
+            {
+              blobsEnableMask && enableShapeDebug &&
+              <ShapeDebug { ...blobMaskAtts } />
+            }
+          </svg>
+        </div>
 				{
 					blobsEnableDecoration &&
-					<Spring config={ { delay: 0 } } to={ { path: svgPath } }>
-						{ props => {
-
-							return (
-								<svg className={ `blob-mix__decoration` } viewBox={ svgViewBox } preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1'>
-									<animated.path d={ props.path }></animated.path>
-									{
-										enableShapeDebug &&
-										<ShapeDebug { ...blobAtts } />
-									}
-								</svg>
-							);
-						} }
-					</Spring>
+          <svg className={ `blob-mix__decoration` } viewBox={ svgViewBox } preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1'>
+            <path d={ svgPath }></path>
+            {
+              enableShapeDebug &&
+              <ShapeDebug { ...blobAtts } />
+            }
+          </svg>
 				}
 			</div>
 		)