allow drawing lines and shapes; use a different approach to close polygons

3 files changed, 66 insertions, 47 deletions

diff --git a/blocks.js b/blocks.js
index 5cdcc1c..2e686cd 100644
--- a/blocks.js
+++ b/blocks.js
@@ -1264,6 +1264,20 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             );
             break;
 
+    // Snap! YOW
+        case '%drawmode':
+            part = new InputSlotMorph(
+                null, // text
+                false, // numeric?
+                {
+                    'line' : ['line'],
+                    'shape': ['shape']
+                },
+                true // read-only
+            );
+            part.setContents(['line']);
+            break;
+
     // symbols:
 
         case '%turtle':
diff --git a/objects.js b/objects.js
index e36c205..e13d32d 100644
--- a/objects.js
+++ b/objects.js
@@ -541,7 +541,8 @@ SpriteMorph.prototype.initBlocks = function () {
             only: SpriteMorph,
             type: 'command',
             category: 'pen',
-            spec: 'pen down'
+            spec: 'pen down and draw a %drawmode',
+            defalts: ['line']
         },
         up: {
             only: SpriteMorph,
@@ -1435,8 +1436,6 @@ SpriteMorph.prototype.init = function (globals) {
     this.isDraggable = true;
     this.isDown = false;
 
-    this.myPolylineIndex = window.polylineIndex++;
-
     this.heading = 90;
     this.changed();
     this.drawNew();
@@ -2921,6 +2920,17 @@ SpriteMorph.prototype.show = function () {
 
 // SpriteMorph pen color
 
+SpriteMorph.prototype.down = function (mode) {
+    // overrides PenMorph.down
+    this.isDown = true;
+    this.penMode = mode[0] || 'line'; // default to line
+    if (this.penMode == 'shape') {
+        this.myPolygonIndex = window.polygonIndex++;
+    } else { // 'line'
+        this.myPolylineIndex = window.polylineIndex++;
+    }
+};
+
 SpriteMorph.prototype.setColor = function (aColor) {
     var x = this.xPosition(),
         y = this.yPosition();
@@ -3370,39 +3380,32 @@ SpriteMorph.prototype.drawLine = function (start, dest) {
         var destLatLng = 
             [stage.dimensions.y / 2 - to.y, to.x - stage.dimensions.x / 2];
 
-        if (!window.polylines[this.myPolylineIndex]) {
-            // add a new line with start and end points
-            window.polylines[this.myPolylineIndex] = L.polyline([
-                        [stage.dimensions.y / 2 - from.y,
-                            from.x - stage.dimensions.x / 2],
-                        destLatLng,
-                    ], 
-                    {color: this.color.toString(), weight: this.size})
-                        .addTo(window.penLines);
-        } else {
-            var latlngs = window.polylines[this.myPolylineIndex].getLatLngs();
-            for (var j = 0; j < latlngs.length; j++) {
-                // If a distance between two points is <= 1 meter,
-                // call them "the same"
-                // if the same exists, a polygon can be created
-                // TODO: detect and join lines with "same points"
-                if (latlngs[j].distanceTo(destLatLng) <= 1) {
-                    var polyLL = latlngs
-                        .splice(j, latlngs.length)
-                        .concat([destLatLng]);
-                    // remove last part of line and replace by polygon
-                    // splice deleted the latlngs that appear now in the polygon
-                    window.polylines[this.myPolylineIndex] = L.polyline(latlngs,
+        if (this.penMode == 'shape') {
+            if (!window.polygons[this.myPolygonIndex]) {
+                // add a new polygon with start and end points
+                window.polygons[this.myPolygonIndex] = L.polygon([
+                            [stage.dimensions.y / 2 - from.y,
+                                from.x - stage.dimensions.x / 2],
+                            destLatLng,
+                        ], 
                         {color: this.color.toString(), weight: this.size})
-                            .addTo(window.penLines);
-                    L.polygon(polyLL, 
-                            {color: this.color.toString(), weight: this.size})
-                        .addTo(window.penShapes);
-                    break;
-                }
+                .addTo(window.penShapes);
+            } else {
+                window.polygons[this.myPolygonIndex].addLatLng(destLatLng);
+            }
+        } else { // 'line'
+            if (!window.polylines[this.myPolylineIndex]) {
+                // add a new line with start and end points
+                window.polylines[this.myPolylineIndex] = L.polyline([
+                            [stage.dimensions.y / 2 - from.y,
+                                from.x - stage.dimensions.x / 2],
+                            destLatLng,
+                        ],
+                        {color: this.color.toString(), weight: this.size})
+                .addTo(window.penLines);
+            } else {
+                window.polylines[this.myPolylineIndex].addLatLng(destLatLng);
             }
-
-            window.polylines[this.myPolylineIndex].addLatLng(destLatLng);
         }
 
         context.lineWidth = this.size;
@@ -3440,9 +3443,6 @@ SpriteMorph.prototype.moveBy = function (delta, justMe) {
             part.moveBy(delta);
         });
     }
-    if (!this.isDown && start) {
-        this.myPolylineIndex = window.polylineIndex++;
-    }
 };
 
 SpriteMorph.prototype.slideBackTo = function (situation, inSteps) {
@@ -4722,7 +4722,9 @@ StageMorph.prototype.drawOn = function (aCanvas, aRect) {
 
 StageMorph.prototype.clearPenTrails = function () {
     window.map.removeLayer(window.penTrails);
+    window.polygons = [];
     window.polylines = [];
+    window.polygonIndex = 0;
     window.polylineIndex = 0;
     window.penTrails = L.layerGroup().addTo(window.map);
     window.penShapes = L.layerGroup().addTo(window.penTrails);
diff --git a/snap.html b/snap.html
index cd55673..06843c8 100755
--- a/snap.html
+++ b/snap.html
@@ -60,7 +60,7 @@
                 };
 
                 // Snap! YOW starts here
-                var world, map, layer, spriteGroup, polylines, polylineIndex;
+                var world, map, layer, spriteGroup;
 
                 function loop() {
                     world.doOneCycle();
@@ -118,16 +118,19 @@
                 window.spriteGroup = spriteGroup;
                 spriteGroup = L.layerGroup().addTo(map);
 
-                // During a pen down, a polyline is updated at polylines[this.myPolylineIndex].
-                // On pen up, myPolylineIndex is set to polylineIndex and polylineIndex is incremented
-                // so polylines contains complete lines created by different sprites.
-                // These lines might be (partially) transformed into polygons.
+                // During a pen down, a polything (thing = line/shape) is updated
+                // at polything[this.myPolythingIndex].
+                // On pen down, myPolythingIndex is set to window.polythingIndex and
+                // window.polythingIndex is incremented
+                // so window.polygons and window.polylines contain
+                // polygons/lines created by all sprites.
                 window.penTrails = L.layerGroup().addTo(map);
-                window.shapes = L.layerGroup().addTo(window.penTrails);
-                window.lines = L.layerGroup().addTo(window.penTrails);
-                window.polylines = polylines;
-                polylineIndex = 0;
-                polylines = [];
+                window.penShapes = L.layerGroup().addTo(window.penTrails);
+                window.penLines = L.layerGroup().addTo(window.penTrails);
+                window.polygons = [];
+                window.polylines = [];
+                window.polygonIndex = 0;
+                window.polylineIndex = 0;
 
                 // Load the IDE
                 world = new WorldMorph(document.getElementById('world'));