fix: Update react-moveable 0.6.0

daybrush · Aug 5, 2019 · 7e6b987 · 7e6b987
1 parent fde2010
commit 7e6b987
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/packages/react-scenejs-timeline/package-lock.json b/packages/react-scenejs-timeline/package-lock.json
diff --git a/packages/react-scenejs-timeline/package.json b/packages/react-scenejs-timeline/package.json
@@ -54,7 +54,7 @@
     "keycon": "^0.3.0",
     "react-color": "^2.17.3",
     "react-css-styler": "^0.3.4",
-    "react-moveable": "^0.7.2",
+    "react-moveable": "^0.9.1",
     "react-pure-props": "^0.1.5",
     "scenejs": "^1.0.4"
   },

diff --git a/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Editor.tsx b/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Editor.tsx
@@ -5,7 +5,7 @@ import Infos from "./Infos/Infos";
 import Menus from "./Menus/Menus";
 import { SelectEvent } from "../types";
 import { ref } from "framework-utils";
-import Moveable, { OnDrag, OnResize } from "react-moveable";
+import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd } from "react-moveable";
 import { findSceneItemByElementStack, prefix } from "../utils";
 import styled, { StylerElement } from "react-css-styler";
 import { EDITOR_CSS } from "../consts";
@@ -42,8 +42,12 @@ export default class Editor extends React.PureComponent<{
                     rotatable={true}
                     throttleDrag={1}
                     container={document.body}
+                    // onDragStart={this.onDragStart}
+                    onRotate={this.onRotate}
+                    onRotateEnd={this.onRotateEnd}
                     onDrag={this.onDrag}
                     onDragEnd={this.onDragEnd}
+                    // onResizeStart={this.onResizeStart}
                     onResize={this.onReisze}
                     ref={ref(this, "moveable")} />
                 <Infos
@@ -141,9 +145,15 @@ export default class Editor extends React.PureComponent<{
 
         this.infos.select(e, this.timeline.getValues());
     }
-    private onReisze = ({ target, width, height }: OnResize) => {
+    private onReisze = ({ target, width, height, clientX, clientY }: OnResize) => {
         target.style.width = `${width}px`;
         target.style.height = `${height}px`;
+        this.setLabel(clientX, clientY, `W: ${width}px<br/>H: ${height}px`);
+    }
+    private onRotate = ({ target, beforeDelta, clientX, clientY }: OnRotate) => {
+        // target.style.width = `${width}px`;
+        // target.style.height = `${height}px`;
+        // this.setLabel(clientX, clientY, `W: ${width}px<br/>H: ${height}px`);
     }
     private onDrag = ({ clientX, clientY, target, left, top }: OnDrag) => {
         target.style.left = `${left}px`;
@@ -154,6 +164,14 @@ export default class Editor extends React.PureComponent<{
         // history save
         this.hideLabel();
     }
+    private onResizeEnd = () => {
+        // history save
+        this.hideLabel();
+    }
+    private onRotateEnd = ({ target, clientX, clientY }: OnRotateEnd) => {
+        // history save
+        this.hideLabel();
+    }
     private onUpdate = () => {
         this.update();
     }