@imposium-hub/components 1.32.0 → 1.32.2

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}

package/components/slider-field/SliderField.tsx

@@ -17,7 +17,7 @@ interface ISliderFieldProps {
 }
 
 interface ISliderFieldState {
-    inputValue : any;
+    tempValue : number;
 }
 
 class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldState> {
@@ -28,10 +28,8 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
 
         super(props);
 
-        const inputValue =  (props.value === null || props.value === undefined) ? props.defaultValue : props.value;
-
         this.state = {
-            inputValue
+            tempValue: null
         };
     }
 
@@ -40,11 +38,6 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         clearTimeout(this.updateTimeout);
     }
 
-    private toggle() {
-
-        this.props.onChange(!this.props.value);
-    }
-
     private updateValue(val) {
 
         this.props.onChange(val);
@@ -52,17 +45,18 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
 
     private rangeInputChange(e) {
 
-        const {min, max, defaultValue } = this.props;
-
         const inputVal = e.target.value;
         const val = parseFloat(inputVal);
 
         clearTimeout(this.updateTimeout);
 
         this.setState({
-            inputValue: val
+            tempValue: val
         }, () => {
-            this.updateTimeout = setTimeout(() => this.updateValue(val), 100);
+            this.updateTimeout = setTimeout(() => {
+                this.updateValue(val);
+                this.setState({tempValue: null});
+            }, 100);
         });
     }
 
@@ -73,19 +67,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         inputValue  = (inputValue === '') ? 0 : parseFloat(inputValue);
 
         if (inputValue >= min && inputValue <= max) {
-
-            this.setState({
-                inputValue
-            }, () => {
-                this.updateValue(inputValue);
-            });
+            this.updateValue(inputValue);
         }
     }
 
     public render() {
 
-        const {label, width, min, max, step, defaultValue, tooltip, info, labelPosition} = this.props;
-        const {inputValue} = this.state;
+        const {label, width, min, max, step, defaultValue, value, tooltip, info, labelPosition} = this.props;
+        const { tempValue } = this.state;
+
+        const val = (tempValue !== null) ? tempValue : (value === null || value === undefined) ? defaultValue : value;
 
         return <FieldWrapper
             customClass = 'slider-field'
@@ -99,14 +90,14 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 type= 'range'
                 min={ min }
                 max= { max }
-                value = {inputValue}
+                value = {val}
                 step= { step }/>
 
             <input
                 className = 'val'
                 onChange = {(e) => this.numberInputChange(e)}
                 type = 'number'
-                value = {inputValue} />
+                value = {val} />
         </FieldWrapper>;
     }
 }