use transformsEnabled="position"

ejarzo · Apr 2, 2019 · 9cf3a64 · 9cf3a64
1 parent 72f5e4b
commit 9cf3a64
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/Shape/Component.jsx b/src/components/Shape/Component.jsx
@@ -131,6 +131,7 @@ class ShapeComponent extends React.Component {
       <Circle
         ref={c => (this.animCircle = c)}
         hitGraphEnabled={false}
+        transformsEnabled="position"
         x={-999}
         y={-999}
         radius={6}
@@ -153,6 +154,7 @@ class ShapeComponent extends React.Component {
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
           opacity={attrs.opacity}
+          transformsEnabled="position"
         >
           {/* shape perimeter */}
           <Line
@@ -168,6 +170,7 @@ class ShapeComponent extends React.Component {
             onMouseDown={handleMouseDown}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
+            transformsEnabled="position"
           />
 
           {/* shape verteces */}
@@ -246,10 +249,12 @@ class ShapeComponent extends React.Component {
           hitGraphEnabled={false}
           draggable={false}
           opacity={attrs.opacity}
+          transformsEnabled="position"
         >
           <Line
             ref={c => (this.shapeElement = c)}
             strokeScaleEnabled={false}
+            transformsEnabled="position"
             points={points}
             fill={attrs.fill}
             lineJoin="miter"

diff --git a/src/components/ShapeCanvas/PhantomShape/Component.jsx b/src/components/ShapeCanvas/PhantomShape/Component.jsx
@@ -32,6 +32,7 @@ function PhantomShapeComponent(props) {
       stroke={props.color}
       strokeWidth={strokeWidth}
       fill={props.color}
+      transformsEnabled="position"
     />
   );
 
@@ -40,6 +41,7 @@ function PhantomShapeComponent(props) {
       <Group>
         <Circle // circle beneath cursor
           x={props.mousePos.x}
+          transformsEnabled="position"
           y={props.mousePos.y}
           radius={radius}
           fill={props.color}
@@ -57,6 +59,7 @@ function PhantomShapeComponent(props) {
             .toString()}
           fillEnabled={true}
           closed={props.drawingState === 'preview'}
+          transformsEnabled="position"
         />
         <Line // line from previous point to cursor
           points={props.points
@@ -65,6 +68,7 @@ function PhantomShapeComponent(props) {
           strokeWidth={strokeWidth}
           stroke={props.color}
           opacity={0.5}
+          transformsEnabled="position"
         />
       </Group>
     )