use a canvas as icon; do not rotate sprite twice

2 files changed, 35 insertions, 43 deletions

diff --git a/objects.js b/objects.js
index 0744a30..849d02a 100644
--- a/objects.js
+++ b/objects.js
@@ -1403,50 +1403,36 @@ SpriteMorph.prototype.updateMarker = function () {
     if (!this.marker) return;
     var myself = this;
 
-    window.spriteGroup.removeLayer(this.marker);
-    if (this.markerShown == false) return;
+    if (window.spriteGroup.hasLayer(this.marker)) {
+        // if it is created the first time, it cannot be removed
+        window.spriteGroup.removeLayer(this.marker);
+    }
+    if (this.isVisible == false) return;
 
-    this.icon = L.divIcon({
-        className: 'snap-sprite',
-        html: '<div id="icon-' + this.name + '"></div>',
-        iconSize: [this.image.width, this.image.height],
-        iconAnchor: [this.rotationOffset.x, this.rotationOffset.y]
+    // create a new marker with the sprite as icon
+    this.icon = L.spriteIcon({
+        iconAnchor: [this.rotationOffset.x, this.rotationOffset.y],
+        canvas: this.image
     });
-    this.marker = L.spriteMarker(this.geoposition, {icon: this.icon, title: this.name});
+    this.marker = L.marker([this.xPosition(), this.yPosition()],
+            {icon: this.icon, title: this.name});
 
+    // add event handlers
     this.marker.on('click', function () {
         myself.mouseClickLeft();
     });
 
-    facing = this.rotationStyle ? this.heading : 90;
-    if (this.rotationStyle === 2) {
-        facing = 90;
-        if ((this.heading > 180 && (this.heading < 360))
-                || (this.heading < 0 && (this.heading > -180))) {
-            facing = -90;
-        }
-    }
-    this.marker.setAngle(facing - 90);
+    // apply graphic effects that do not apply to the icon canvas
     this.marker.setOpacity(this.alpha);
     if (this.parent) {
         var layer = this.parent.children.indexOf(this);
         this.marker.setZIndexOffset(layer);
     }
 
+    // display that marker
     this.marker.addTo(window.spriteGroup);
-    document.getElementById('icon-' + this.name).appendChild(this.image);
 };
 
-/*
- *  // for later
-    this.icon = new L.Icon.Canvas({
-            iconSize: [this.costume.contents.width, this.costume.contents.height]});
-    var myself = this;
-    this.icon.draw = function(ctx, w, h) {ctx.drawImage(myself.costume.contents, 0, 0);};
-    this.marker = L.marker(this.geoposition, {icon: this.icon, title: this.name});
-    this.marker.addTo(window.spriteGroup);
-*/
-
 // SpriteMorph duplicating (fullCopy)
 
 SpriteMorph.prototype.fullCopy = function () {
@@ -2845,17 +2831,15 @@ SpriteMorph.prototype.removeClone = function () {
 */
 
 SpriteMorph.prototype.hide = function () {
-    this.markerShown = false;
-    this.updateMarker();
     SpriteMorph.uber.hide.call(this);
     this.parts.forEach(function (part) {part.hide(); });
+    this.updateMarker();
 };
 
 SpriteMorph.prototype.show = function () {
-    this.markerShown = true;
-    this.updateMarker();
     SpriteMorph.uber.show.call(this);
     this.parts.forEach(function (part) {part.show(); });
+    this.updateMarker();
 };
 
 // SpriteMorph pen color
diff --git a/snap.html b/snap.html
index 3c4a9e4..04f44cd 100755
--- a/snap.html
+++ b/snap.html
@@ -27,22 +27,30 @@
         <div id="map" style="position: absolute; width: 480px; height: 360px;" />
         <!-- set initial size to 480x360 or the map will not load properly -->
         <script type="text/javascript">
-                L.SpriteMarker = L.Marker.extend({
+                L.SpriteIcon = L.Icon.extend({
                     options: {
-                        angle: 0
+                        iconSize: [24, 24],
+                        iconAnchor: [12, 12],
+                        canvas: null,
+                        className: 'leaflet-sprite-icon'
                     },
-                    _setPos: function (pos) {
-                        L.Marker.prototype._setPos.call(this, pos);
-                        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
-                        // TODO: set rotation center with transform-origin
+                    createIcon: function () {
+                        this.options.iconSize =
+                            [this.options.canvas.width, this.options.canvas.height];
+                        var copy = document.createElement('canvas');
+                        copy.width = this.options.iconSize[0];
+                        copy.height = this.options.iconSize[1];
+                        var context = copy.getContext('2d');
+                        context.drawImage(this.options.canvas, 0, 0);
+                        this._setIconStyles(copy, 'icon');
+                        return copy;
                     },
-                    setAngle: function (angle) {
-                        this.options.angle = angle;
-                        this.update();
+                    createShadow: function (oldIcon) {
+                        return null;
                     }
                 });
-                L.spriteMarker = function(pos, options) {
-                    return new L.SpriteMarker(pos, options);
+                L.spriteIcon = function (options) {
+                    return new L.SpriteIcon(options);
                 };
 
                 var world, map, layer, spriteGroup, defaultCostume;