@imposium-hub/components 1.32.0 → 1.32.1

package/components/compositions/CompositionRendererLayer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Moveable from 'react-moveable';
+import hotkeys from 'hotkeys-js';
 import TextLayer from './TextLayer';
 
 interface ICompositionRendererLayerProps {
@@ -11,7 +12,11 @@ interface ICompositionRendererLayerProps {
     onUpdate(l : any) : void;
 }
 
-class CompositionRendererLayer extends React.PureComponent<ICompositionRendererLayerProps, undefined> {
+interface ICompositionRendererLayerState {
+    lockRatio : boolean;
+}
+
+class CompositionRendererLayer extends React.PureComponent<ICompositionRendererLayerProps, ICompositionRendererLayerState> {
 
     private evtHandlers;
     private moveable;
@@ -26,10 +31,43 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
             onDrag: (e) => this.handleDrag(e),
             onResize: (e) => this.handleResize(e),
             onRotate: (e) => this.handleRotate(e),
-            onClick: (e) => this.layerClicked(e)
+            onClick: (e) => this.layerClicked(e),
+            onShift: (e) => this.onShift(e),
+            onLeft: (e) => this.move(e, -1, 0),
+            onRight: (e) => this.move(e, 1, 0),
+            onUp: (e) => this.move(e, 0, -1),
+            onDown: (e) => this.move(e, 0, 1),
         };
 
         this.moveable = React.createRef();
+
+        this.state = {
+            lockRatio: false
+        };
+    }
+
+    private move(e, x, y) {
+
+        if (this.props.selected) {
+            const shiftX = (e.shiftKey) ? x * 10 : x;
+            const shiftY = (e.shiftKey) ? y * 10 : y;
+
+            const newLayer = {...this.props.layer};
+            newLayer.x = newLayer.x + shiftX;
+            newLayer.y = newLayer.y + shiftY;
+
+            this.props.onUpdate(newLayer);
+        }
+    }
+
+    private onShift(e) {
+
+        if (e.key === 'Shift' && e.keyCode === 16 && this.props.selected) {
+            const lockRatio = (e.type === 'keydown') ? true : false;
+            this.setState({
+                lockRatio
+            });
+        }
     }
 
     public componentDidUpdate() {
@@ -40,6 +78,24 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
         }
     }
 
+    public componentDidMount() {
+
+        hotkeys('*', {keyup: true}, this.evtHandlers.onShift);
+        hotkeys('left, shift+left', this.evtHandlers.onLeft);
+        hotkeys('right, shift+right', this.evtHandlers.onRight);
+        hotkeys('up, shift+up', this.evtHandlers.onUp);
+        hotkeys('down, shift+down', this.evtHandlers.onDown);
+    }
+
+    public componentWillUnmount() {
+
+        hotkeys.unbind('*', this.evtHandlers.onShift);
+        hotkeys.unbind('left, shift+left', this.evtHandlers.onLeft);
+        hotkeys.unbind('right, shift+right', this.evtHandlers.onRight);
+        hotkeys.unbind('up, shift+up', this.evtHandlers.onUp);
+        hotkeys.unbind('down, shift+down', this.evtHandlers.onDown);
+    }
+
     private handleDrag(e) {
 
         const newLayer = {...this.props.layer};
@@ -51,9 +107,13 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
 
     private handleResize(e) {
 
+        const {drag: {beforeDelta}, width, height} = e;
+
         const newLayer = {...this.props.layer};
-        newLayer.width = Math.round(e.width);
-        newLayer.height = Math.round(e.height);
+        newLayer.width = Math.round(width);
+        newLayer.height = Math.round(height);
+        newLayer.x = Math.round(newLayer.x + beforeDelta[0]);
+        newLayer.y = Math.round(newLayer.y + beforeDelta[1]);
 
         this.props.onUpdate(newLayer);
     }
@@ -95,6 +155,7 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
     public render() {
 
         const { selected, layer } = this.props;
+        const { lockRatio } = this.state;
 
         const layerClass = `comp-layer-${layer.id}`;
         const layerStyle : any = {
@@ -114,6 +175,7 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
             onResizeEnd = {this.evtHandlers.onResizeEnd}
             onRotate = {this.evtHandlers.onRotate}
             onRotateEnd = {this.evtHandlers.onRotateEnd}
+            keepRatio = {lockRatio}
             resizable = {true}
             rotatable = {true}
             origin = {false}