Merge pull request #34 from wassgha/responsive

Responsive Preview Component

README.md

@@ -144,14 +144,15 @@ static panels = [
 
 You can use `Preview` component to disable editing tool set and controllers. This component just renders the SVG output of your data. It may be useful for presenting edited or created graphic, instead of building a SVG file.
 
-The parameters are same with Designer component, except the onUpdate callback is not necessarry.
+The parameters are same with Designer component, except for two: the onUpdate callback is not necessary and an additional `responsive` option can be added, which given the original `width` and `height` will expand the preview to cover the width and height of its parent component, scaling its SVG while keeping the original aspect ratio of elements. Note that the original `width` and `height` still need to be provided in order for the responsive `Preview` to work.
 
 ```javascript
 <Preview
   objectTypes={{rectangle: MyRectangle}}
   objects={this.state.objects}
   height={500}
-  width={500} />
+  width={500}
+  responsive />
 ```
 
 ### Action strategies
@@ -252,7 +253,7 @@ Here is a todo list that in my mind. You could extend this list.
 
 ### Contributors (You can add your name here in your pull-request)
 
-- Fatih Erikli <fatiherikli@gmail.com>
+- Fatih Erikli <fatiherikli@gmail.com> - [fatiherikli](https://github.com/fatiherikli/)
+- Wassim Gharbi <wassgha@gmail.com> - [wassgha](https://github.com/wassgha/)
 - [iamraffe](https://github.com/iamraffe/)
 - [thatneat](https://github.com/thatneat/)
-- [Wassim Gharbi](https://github.com/wassgha) <wassgha@gmail.com>

examples/components/Mondrian.js

@@ -117,4 +117,4 @@ export default class extends Component {
         onUpdate={this.handleUpdate.bind(this)}/>
     );
   }
-}
+}

src/Preview.js

@@ -19,23 +19,33 @@ class Preview extends Component {
   }
 
   render() {
-    let {width, height, objects, objectTypes} = this.props;
+    let {width, height, objects, objectTypes, responsive = false} = this.props;
 
     let style = {
       ...styles.container,
       ...this.props.style,
-      width: width,
-      height: height,
+      width: responsive ? '100%' : width,
+      height: responsive ? '100%' : height,
       padding: 0
    };
 
    let canvas = {
-      width,
-      height,
-      canvasWidth: width,
-      canvasHeight: height
+      width: responsive ? '100%' : width,
+      height: responsive ? '100%' : height,
+      canvasWidth: responsive ? '100%' : width,
+      canvasHeight: responsive ? '100%' : height
    };
 
+   if (responsive) {
+     objects = objects.map(object => ({
+       ...object,
+       width: (object.width / width) * 100 + '%',
+       height: (object.height / height) * 100 + '%',
+       x: (object.x / width)*100 + '%',
+       y: (object.y / height)*100 + '%',
+     }))
+   }
+
     return (
       <div className={'container'} style={style}>
         <SVGRenderer

src/panels/styles.js

@@ -1,7 +1,7 @@
 export default {
   propertyPanel: {
     position: 'relative',
-    width: 200,
+    width: 240,
     padding: '0 5px 6px 5px',
     fontFamily: '"Lucida Grande", sans-serif',
     fontSize: 11