draw pen trails; expand to polygons automatically

4 files changed, 52 insertions, 2 deletions

diff --git a/gui.js b/gui.js
index 7c4315c..9972527 100644
--- a/gui.js
+++ b/gui.js
@@ -2830,6 +2830,10 @@ IDE_Morph.prototype.newProject = function () {
         window.map.removeLayer(window.spriteGroup);
     }
     window.spriteGroup = L.layerGroup().addTo(window.map);
+    if (window.map.hasLayer(window.penTrails)) {
+        window.map.removeLayer(window.penTrails);
+    }
+    window.penTrails = L.layerGroup().addTo(window.map);
 
     this.currentSprite = new SpriteMorph(this.globalVariables);
     this.sprites = new List([this.currentSprite]);
diff --git a/objects.js b/objects.js
index 209a45f..b8b0ccd 100644
--- a/objects.js
+++ b/objects.js
@@ -1393,6 +1393,8 @@ SpriteMorph.prototype.init = function (globals) {
     this.isDraggable = true;
     this.isDown = false;
 
+    this.myPolylineIndex = window.polylineIndex++;
+
     this.heading = 90;
     this.changed();
     this.drawNew();
@@ -3308,6 +3310,33 @@ SpriteMorph.prototype.drawLine = function (start, dest) {
         ).intersect(this.parent.visibleBounds()).spread();
 
     if (this.isDown) {
+        var stage = this.parent;
+        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.penTrails);
+        } else {
+            var latlngs = window.polylines[this.myPolylineIndex].getLatLngs();
+            for (var j = 0; j < latlngs.length; j++) {
+                if (latlngs[j].distanceTo(destLatLng) < 0.1) {
+                    var polyLL = window.polylines[this.myPolylineIndex].spliceLatLngs(j, latlngs.length)
+                        .concat([destLatLng]);
+                    L.polygon(polyLL, {color: this.color.toString(), weight: this.size})
+                        .addTo(window.penTrails);
+                    break;
+                }
+            }
+
+            window.polylines[this.myPolylineIndex].addLatLng(destLatLng);
+        }
+
         context.lineWidth = this.size;
         context.strokeStyle = this.color.toString();
         if (this.useFlatLineEnds) {
@@ -3343,6 +3372,9 @@ SpriteMorph.prototype.moveBy = function (delta, justMe) {
             part.moveBy(delta);
         });
     }
+    if (!this.isDown) {
+        this.myPolylineIndex = window.polylineIndex++;
+    }
 };
 
 SpriteMorph.prototype.slideBackTo = function (situation, inSteps) {
@@ -3403,7 +3435,6 @@ SpriteMorph.prototype.forward = function (meters) {
     diffLon = Math.sin(radians(this.heading))
         * (1 / (111.32 * Math.cos(radians(this.yPosition()))) * kilometers);
 
-    // TODO: "0 - ..." – why does this work? The formula above looks wrong ;-)
     var diffPoint = new Point(diffLon, 0 - diffLat);
     this.setPosition(this.position().add(diffPoint));
     this.updateMarker();
@@ -4563,6 +4594,8 @@ StageMorph.prototype.drawOn = function (aCanvas, aRect) {
 };
 
 StageMorph.prototype.clearPenTrails = function () {
+    window.map.removeLayer(window.penTrails);
+    window.penTrails = L.layerGroup().addTo(window.map);
     this.trailsCanvas = newCanvas(this.dimensions);
     this.changed();
 };
diff --git a/snap.html b/snap.html
index 7f609d0..ab02c64 100755
--- a/snap.html
+++ b/snap.html
@@ -57,7 +57,7 @@
                 };
 
                 // Snap! YOW starts here
-                var world, map, layer, spriteGroup;
+                var world, map, layer, spriteGroup, polylines, polylineIndex;
 
                 function loop() {
                     world.doOneCycle();
@@ -115,6 +115,15 @@
                 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.
+                window.penTrails = L.layerGroup().addTo(map);
+                window.polylines = polylines;
+                polylineIndex = 0;
+                polylines = [];
+
                 // Load the IDE
                 world = new WorldMorph(document.getElementById('world'));
                 world.worldCanvas.focus();
diff --git a/store.js b/store.js
index edee641..ad7cf82 100644
--- a/store.js
+++ b/store.js
@@ -1342,6 +1342,10 @@ SnapSerializer.prototype.openProject = function (project, ide) {
     // recreate all Sprite markers (Snap-YOW)
     window.map.removeLayer(window.spriteGroup);
     window.spriteGroup = L.layerGroup().addTo(window.map);
+    // create new pen trails
+    // TODO: "pen trails" are not saved
+    window.map.removeLayer(window.penTrails);
+    window.penTrails = L.layerGroup().addTo(window.map);
 
     sprites.forEach(function (sprite) {
         // create the markers