From 4ccbc1b95857d8eb723ab51e04258236aa52165c Mon Sep 17 00:00:00 2001
From: Florian Rival <Florian.Rival@gmail.com>
Date: Fri, 30 Mar 2018 22:01:21 +0200
Subject: [PATCH] [WIP] Add preview of collision mask polygons

---
 .../CollisionMasksPreview.js                  | 44 ++++++++++++-------
 .../InstancesFullEditor/SetupGridDialog.js    |  1 +
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js b/newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js
index 1fb5fd4712..b098fcb754 100644
--- a/newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js
+++ b/newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/CollisionMasksPreview.js
@@ -1,40 +1,54 @@
 // @flow
 import React from 'react';
 import { mapVector } from '../../../../Utils/MapFor';
+import Measure from 'react-measure';
 
 const styles = {
   container: {
     position: 'relative',
   },
+  svg: {
+    width: '100%',
+    height: '100%',
+  },
 };
 
 type Props = {|
   polygons: gdVectorPolygon2d,
+  imageWidth: number,
+  imageHeight: number,
 |};
 
 export default class CollisionMasksPreview extends React.Component<
   Props,
   void
 > {
+
   render() {
     const { polygons } = this.props;
 
     return (
-      <div style={styles.container}>
-        <svg>
-          {mapVector(polygons, polygon => {
-            const vertices = polygon.getVertices();
-            return mapVector(vertices, vertex => (
-              <circle
-                cx={vertex.get_x()}
-                cy={vertex.get_y()}
-                r="3"
-                fill="blue"
-              />
-            ));
-          })}
-        </svg>
-      </div>
+      <svg
+        width={this.props.imageWidth}
+        height={this.props.imageHeight}
+        style={styles.svg}
+      >
+        {mapVector(polygons, (polygon, i) => {
+          const vertices = polygon.getVertices();
+          return (
+            <polygon
+              fill="rgba(255,0,0,0.2)"
+              stroke="rgba(255,0,0,0.5)"
+              strokeWidth={1}
+              fileRule="evenodd"
+              points={mapVector(
+                vertices,
+                (vertex, j) => `${vertex.get_x()},${vertex.get_y()}`
+              ).join(' ')}
+            />
+          );
+        })}
+      </svg>
     );
   }
 }
diff --git a/newIDE/app/src/SceneEditor/InstancesFullEditor/SetupGridDialog.js b/newIDE/app/src/SceneEditor/InstancesFullEditor/SetupGridDialog.js
index 8f6587bd0e..5bc0aacfc5 100644
--- a/newIDE/app/src/SceneEditor/InstancesFullEditor/SetupGridDialog.js
+++ b/newIDE/app/src/SceneEditor/InstancesFullEditor/SetupGridDialog.js
@@ -22,6 +22,7 @@ export default class SetupGridDialog extends Component {
     const actions = [
       <FlatButton
         label="Cancel"
+        primary={false}
         onClick={this.props.onCancel}
       />,
       <FlatButton