Cleanup

Gruntfile.js

@@ -23,6 +23,7 @@ module.exports = function(grunt) {
           'js/btnMove.js',
           'js/WordArt.js',
           'js/Shape.js',
+          'js/AddShapeDialog.js',
           'js/Svg.js',
           'js/Keyboard.js',
           'js/SettingsWindow.js',

js/AddShapeDialog.js

@@ -0,0 +1,76 @@
+var shapeResolution=3;
+
+function initShapeDialog() {
+  $("#btnShapeOk").on("onButtonClick",onShapeOk);
+  $("#btnShapeCancel").on("onButtonClick",onShapeCancel);
+  $("#btnShapePlus").on("onButtonHold",onShapePlus);
+  $("#btnShapeMin").on("onButtonHold",onShapeMin);
+  updateShapePreview();
+}
+
+function showShapeDialog() {
+  showPopup(popupShape);
+}
+
+function onShapeCancel() {
+  hidePopup(popupShape);
+}
+
+function onShapeOk() {
+  hidePopup(popupShape);
+
+  var res = shapeResolution;
+
+  if (res!=undefined) {
+    if (isNaN(res)) res=3;
+    if (res<2) res=2;
+    if (res>100) res=100;
+    drawCircle(canvasWidth/2,canvasHeight/2,80,res);   
+  }
+}
+
+function onShapePlus() {
+  shapeResolution++;
+  if (shapeResolution>50) shapeResolution=50;
+  updateShapePreview();
+}
+
+function onShapeMin() {
+  shapeResolution--;
+  if (shapeResolution<2) shapeResolution=2;
+  updateShapePreview();
+}
+
+function updateShapePreview() {
+  $(".lblShapeResolution").text(shapeResolution + " sides");
+
+  var canvas = $("#shapePreview")[0];
+  var c = canvas.getContext('2d');
+  var w = canvas.width;
+  var h = canvas.height;
+  console.log(w,h);
+  var r = w/2 - 20;
+  var x0 = w/2;
+  var y0 = h/2;
+  var res = shapeResolution;
+  var step = Math.PI * 2.0 / res;
+  
+  c.save();
+  c.clearRect(0,0,canvas.width, canvas.height);
+  c.restore();
+  c.beginPath();
+  for (var a=0; a<Math.PI*2; a+=step) {
+    var x = Math.sin(a+Math.PI) * r + x0;
+    var y = Math.cos(a+Math.PI) * r + y0;
+    if (a==0) c.moveTo(x,y);
+    else c.lineTo(x,y);
+  }
+  //close shape
+  var x = Math.sin(0+Math.PI) * r + x0;
+  var y = Math.cos(0+Math.PI) * r + y0;
+  c.lineTo(x,y);
+
+  //draw shape
+  c.lineWidth = 2;
+  c.stroke();
+}

js/Shape.js

@@ -1,80 +1,3 @@
-var shapeResolution=3;
-
-function initShapeDialog() {
-  $(".btnShapeOk").on("onButtonClick",onShapeOk);
-  $(".btnShapeCancel").on("onButtonClick",onShapeCancel);
-  $(".btnShapePlus").on("onButtonHold",onShapePlus);
-  $(".btnShapeMin").on("onButtonHold",onShapeMin);
-  updateShapePreview();
-}
-
-function showShapeDialog() {
-  showPopup(popupShape);
-}
-
-function onShapeCancel() {
-  hidePopup(popupShape);
-}
-
-function onShapeOk() {
-  hidePopup(popupShape);
-
-  var res = shapeResolution;
-
-  if (res!=undefined) {
-    if (isNaN(res)) res=3;
-    if (res<2) res=2;
-    if (res>100) res=100;
-    drawCircle(canvasWidth/2,canvasHeight/2,80,res);   
-  }
-}
-
-function onShapePlus() {
-  shapeResolution++;
-  if (shapeResolution>50) shapeResolution=50;
-  updateShapePreview();
-}
-
-function onShapeMin() {
-  shapeResolution--;
-  if (shapeResolution<2) shapeResolution=2;
-  updateShapePreview();
-}
-
-function updateShapePreview() {
-  $(".lblShapeResolution").text(shapeResolution + " sides");
-
-  var canvas = $(".shapePreview")[0];
-  var c = canvas.getContext('2d');
-  var w = canvas.width;
-  var h = canvas.height;
-  console.log(w,h);
-  var r = w/2 - 20;
-  var x0 = w/2;
-  var y0 = h/2;
-  var res = shapeResolution;
-  var step = Math.PI * 2.0 / res;
-  
-  c.save();
-  c.clearRect(0,0,canvas.width, canvas.height);
-  c.restore();
-  c.beginPath();
-  for (var a=0; a<Math.PI*2; a+=step) {
-    var x = Math.sin(a+Math.PI) * r + x0;
-    var y = Math.cos(a+Math.PI) * r + y0;
-    if (a==0) c.moveTo(x,y);
-    else c.lineTo(x,y);
-  }
-  //close shape
-  var x = Math.sin(0+Math.PI) * r + x0;
-  var y = Math.cos(0+Math.PI) * r + y0;
-  c.lineTo(x,y);
-
-  //draw shape
-  c.lineWidth = 2;
-  c.stroke();
-}
-
 function drawCircle(x0,y0,r,res) {
   if (res==undefined) res = 50; //circle resolution
   beginShape();

less/popup.less

@@ -1,6 +1,6 @@
 // @popup-width: 60%;
 
-.popupMask {
+#popupMask {
   background-color: rgba(255, 255, 255, 0.65);
   // z-index: 20;
   // border: 10px solid red;
@@ -52,7 +52,7 @@
 	// border: 2px solid black;
 }
 
-.shapePreview {
+#shapePreview {
 	// width: 150px;
 	// height: 150px;
 	border: 1px solid black;
@@ -63,10 +63,10 @@
 	display: inline-block;
 }
 
-.btnShapeOk {
+#btnShapeOk {
-	float: right;
 	position: absolute;
 	bottom: 5%;
+	right: 3%;
 }
 
 .columnRight {

www/index.html

@@ -125,7 +125,7 @@
 
   <div id="debug_display"></div>
 
-  <div class="popupMask"></div>
+  <div id="popupMask"></div>
 
   <div class="popup popupWordArt">
     <div class="content">
@@ -140,12 +140,12 @@
     <div class="content">
       <h1>Add a new shape</h1>
       <div class="columnRight">
-        <img class="btn btnShapeMin" src="img/buttons/btnMin.png" />
+        <img class="btn" id="btnShapeMin" src="img/buttons/btnMin.png" />
-        <img class="btn btnShapePlus" src="img/buttons/btnPlus.png" />
+        <img class="btn" id="btnShapePlus" src="img/buttons/btnPlus.png" />
-        <img class="btn btnShapeOk" src="img/buttons/btnOk.png">
+        <img class="btn" id="btnShapeOk" src="img/buttons/btnOk.png">
       </div>
-      <canvas class="shapePreview" width="150" height="150"></canvas><br/>
+      <canvas id="shapePreview" width="150" height="150"></canvas><br/>
-      <div class="lblShapeResolution"></div>
+      <div id="lblShapeResolution"></div>
     </div>
   </div>