Paint editor integration

gui.js

@@ -68,7 +68,7 @@ sb, CommentMorph, CommandBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2013-May-10';
+modules.gui = '2013-May-14';
 
 // Declarations
 
@@ -1105,7 +1105,8 @@ IDE_Morph.prototype.createSpriteEditor = function () {
 IDE_Morph.prototype.createCorralBar = function () {
     // assumes the stage has already been created
     var padding = 5,
-        button,
+        newbutton,
+        paintbutton,
         colors = [
             this.groupColor,
             this.frameColor.darker(50),
@@ -1122,28 +1123,51 @@ IDE_Morph.prototype.createCorralBar = function () {
     this.add(this.corralBar);
 
     // new sprite button
-    button = new PushButtonMorph(
+    newbutton = new PushButtonMorph(
         this,
-        'addNewSprite',
+        "addNewSprite",
-        new SymbolMorph('turtle', 14)
+        new SymbolMorph("turtle", 14)
     );
-    button.corner = 12;
+    newbutton.corner = 12;
-    button.color = colors[0];
+    newbutton.color = colors[0];
-    button.highlightColor = colors[1];
+    newbutton.highlightColor = colors[1];
-    button.pressColor = colors[2];
+    newbutton.pressColor = colors[2];
-    button.labelMinExtent = new Point(36, 18);
+    newbutton.labelMinExtent = new Point(36, 18);
-    button.padding = 0;
+    newbutton.padding = 0;
-    button.labelShadowOffset = new Point(-1, -1);
+    newbutton.labelShadowOffset = new Point(-1, -1);
-    button.labelShadowColor = colors[1];
+    newbutton.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    newbutton.labelColor = new Color(255, 255, 255);
-    button.contrast = this.buttonContrast;
+    newbutton.contrast = this.buttonContrast;
-    button.drawNew();
+    newbutton.drawNew();
-    button.hint = 'add a new sprite';
+    newbutton.hint = "add a new Turtle sprite";
-    button.fixLayout();
+    newbutton.fixLayout();
-    button.setCenter(this.corralBar.center());
+    newbutton.setCenter(this.corralBar.center());
-    button.setLeft(this.corralBar.left() + padding);
+    newbutton.setLeft(this.corralBar.left() + padding);
-    this.corralBar.add(button);
+    this.corralBar.add(newbutton);
 
+    paintbutton = new PushButtonMorph(
+        this,
+        "paintNewSprite",
+        new SymbolMorph("brush", 15)
+    );
+    paintbutton.corner = 12;
+    paintbutton.color = colors[0];
+    paintbutton.highlightColor = colors[1];
+    paintbutton.pressColor = colors[2];
+    paintbutton.labelMinExtent = new Point(36, 18);
+    paintbutton.padding = 0;
+    paintbutton.labelShadowOffset = new Point(-1, -1);
+    paintbutton.labelShadowColor = colors[1];
+    paintbutton.labelColor = new Color(255, 255, 255);
+    paintbutton.contrast = this.buttonContrast;
+    paintbutton.drawNew();
+    paintbutton.hint = "paint a new sprite";
+    paintbutton.fixLayout();
+    paintbutton.setCenter(this.corralBar.center());
+    paintbutton.setLeft(
+        this.corralBar.left() + padding + newbutton.width() + padding
+    );
+    this.corralBar.add(paintbutton);
 };
 
 IDE_Morph.prototype.createCorral = function () {
@@ -1548,6 +1572,30 @@ IDE_Morph.prototype.addNewSprite = function () {
     this.selectSprite(sprite);
 };
 
+IDE_Morph.prototype.paintNewSprite = function() {
+    var sprite = new SpriteMorph(this.globalVariables),
+        cos = new Costume(),
+        myself = this;
+
+    sprite.name = sprite.name +
+        (this.corral.frame.contents.children.length + 1);
+    sprite.setCenter(this.stage.center());
+    this.stage.add(sprite);
+    this.sprites.add(sprite);
+    this.corral.addSprite(sprite);
+    this.selectSprite(sprite);
+    cos.edit(
+        this.world(),
+        this,
+        true,
+        function() {myself.removeSprite(sprite); },
+        function () {
+            sprite.addCostume(cos);
+            sprite.wearCostume(cos);
+        }
+    );
+};
+
 IDE_Morph.prototype.duplicateSprite = function (sprite) {
     var duplicate = sprite.fullCopy();
 
@@ -4724,16 +4772,38 @@ CostumeIconMorph.prototype.fixLayout
 CostumeIconMorph.prototype.userMenu = function () {
     var menu = new MenuMorph(this);
     if (!(this.object instanceof Costume)) {return null; }
-    menu.addItem("edit", 'editCostume');
+    menu.addItem("edit", "editCostume");
-    menu.addItem("rename", 'renameCostume');
+    if (this.world().currentKey === 16) { // shift clicked
-    menu.addItem("delete", 'removeCostume');
+        menu.addItem(
-    menu.addItem("export", 'exportCostume');
+            'edit rotation point only...',
+            'editRotationPointOnly',
+            null,
+            new Color(100, 0, 0)
+        );
+    }
+    menu.addItem("rename", "renameCostume");
+    menu.addLine();
+    menu.addItem("duplicate", "duplicateCostume");
+    menu.addItem("delete", "removeCostume");
+    menu.addLine();
+    menu.addItem("export", "exportCostume");
     return menu;
 };
 
 CostumeIconMorph.prototype.editCostume = function () {
+    if (this.object instanceof SVG_Costume) {
+        this.object.editRotationPointOnly(this.world());
+    } else {
+        this.object.edit(
+            this.world(),
+            this.parentThatIsA(IDE_Morph)
+        );
+    }
+};
+
+CostumeIconMorph.prototype.editRotationPointOnly = function () {
     var ide = this.parentThatIsA(IDE_Morph);
-    this.object.edit(this.world());
+    this.object.editRotationPointOnly(this.world());
     ide.hasChangedMedia = true;
 };
 
@@ -4756,11 +4826,31 @@ CostumeIconMorph.prototype.renameCostume = function () {
     );
 };
 
+CostumeIconMorph.prototype.duplicateCostume = function() {
+    var wardrobe = this.parentThatIsA(WardrobeMorph),
+        ide = this.parentThatIsA(IDE_Morph),
+        newcos = this.object.copy(),
+        split = newcos.name.split(" ");
+    if (split[split.length - 1] === "copy") {
+        newcos.name += " 2";
+    } else if (isNaN(split[split.length - 1])) {
+        newcos.name = newcos.name + " copy";
+    } else {
+        split[split.length - 1] = Number(split[split.length - 1]) + 1;
+        newcos.name = split.join(" ");
+    }
+    wardrobe.sprite.addCostume(newcos);
+    wardrobe.updateList();
+    if (ide) {
+        ide.currentSprite.wearCostume(newcos);
+    }
+};
+
 CostumeIconMorph.prototype.removeCostume = function () {
     var wardrobe = this.parentThatIsA(WardrobeMorph),
         idx = this.parent.children.indexOf(this),
         ide = this.parentThatIsA(IDE_Morph);
-    wardrobe.removeCostumeAt(idx - 1);
+    wardrobe.removeCostumeAt(idx - 2);
     if (ide.currentSprite.costume === this.object) {
         ide.currentSprite.wearCostume(null);
     }
@@ -5016,7 +5106,8 @@ WardrobeMorph.prototype.updateList = function () {
         oldPos = this.contents.position(),
         icon,
         template,
-        txt;
+        txt,
+        paintbutton;
 
     this.changed();
     oldFlag = Morph.prototype.trackChanges;
@@ -5035,15 +5126,42 @@ WardrobeMorph.prototype.updateList = function () {
     myself.addContents(icon);
     y = icon.bottom() + padding;
 
+    paintbutton = new PushButtonMorph(
+        this,
+        "paintNew",
+        new SymbolMorph("brush", 15)
+    );
+    paintbutton.padding = 0;
+    paintbutton.corner = 12;
+    paintbutton.color = IDE_Morph.prototype.groupColor;
+    paintbutton.highlightColor = IDE_Morph.prototype.frameColor.darker(50);
+    paintbutton.pressColor = paintbutton.highlightColor;
+    paintbutton.labelMinExtent = new Point(36, 18);
+    paintbutton.labelShadowOffset = new Point(-1, -1);
+    paintbutton.labelShadowColor = paintbutton.highlightColor;
+    paintbutton.labelColor = new Color(255, 255, 255);
+    paintbutton.contrast = this.buttonContrast;
+    paintbutton.drawNew();
+    paintbutton.hint = "Paint a new costume";
+    paintbutton.setPosition(new Point(x, y));
+    paintbutton.fixLayout();
+    paintbutton.setCenter(icon.center());
+    paintbutton.setLeft(icon.right() + padding * 4);
+
+
+    this.addContents(paintbutton);
+
     txt = new TextMorph(localize(
-        'costumes tab help' // look up long string in translator
+        "costumes tab help" // look up long string in translator
     ));
     txt.fontSize = 9;
     txt.setColor(new Color(230, 230, 230));
+
     txt.setPosition(new Point(x, y));
     this.addContents(txt);
     y = txt.bottom() + padding;
 
+
     this.sprite.costumes.asArray().forEach(function (costume) {
         template = icon = new CostumeIconMorph(costume, template);
         icon.setPosition(new Point(x, y));
@@ -5085,6 +5203,19 @@ WardrobeMorph.prototype.removeCostumeAt = function (idx) {
     this.updateList();
 };
 
+WardrobeMorph.prototype.paintNew = function() {
+    var cos = new Costume(newCanvas(), "Untitled"),
+        ide = this.parentThatIsA(IDE_Morph),
+        myself = this;
+    cos.edit(this.world(), null, true, null, function() {
+        myself.sprite.addCostume(cos);
+        myself.updateList();
+        if (ide) {
+            ide.currentSprite.wearCostume(cos);
+        }
+    });
+};
+
 // Wardrobe drag & drop
 
 WardrobeMorph.prototype.wantsDropOf = function (morph) {

objects.js

@@ -63,7 +63,10 @@
 
 */
 
-// gloabls from lists.js:
+// globals from paint.js:
+/*global PaintEditorMorph*/
+
+// globals from lists.js:
 
 /*global ListWatcherMorph*/
 
@@ -120,7 +123,7 @@ PrototypeHatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.objects = '2013-April-30';
+modules.objects = '2013-May-14';
 
 var SpriteMorph;
 var StageMorph;
@@ -4532,7 +4535,7 @@ Costume.prototype.shrinkWrap = function () {
         ext.x,
         ext.y
     );
-    this.rotationCenter = this.rotationCenter.add(bb.origin);
+    this.rotationCenter = this.rotationCenter.subtract(bb.origin);
     this.contents = pic;
     this.version = Date.now();
 };
@@ -4639,7 +4642,34 @@ Costume.prototype.flipped = function () {
 
 // Costume actions
 
-Costume.prototype.edit = function (aWorld) {
+Costume.prototype.edit = function (aWorld, anIDE, isnew, oncancel, onsubmit) {
+    var myself = this,
+        editor = new PaintEditorMorph();
+    editor.oncancel = oncancel || nop;
+    editor.openIn(
+        aWorld,
+        isnew ?
+                newCanvas(new Point(480, 360)) :
+                this.contents,
+        isnew ?
+                new Point(240, 180) :
+                this.rotationCenter,
+        function (img, rc) {
+            myself.contents = img;
+            myself.rotationCenter = rc;
+            myself.shrinkWrap();
+            myself.version = Date.now();
+            aWorld.changed();
+            if (anIDE) {
+                anIDE.currentSprite.wearCostume(myself);
+                anIDE.hasChangedMedia = true;
+            }
+            (onsubmit || nop)();
+        }
+    );
+};
+
+Costume.prototype.editRotationPointOnly = function (aWorld) {
     var editor = new CostumeEditorMorph(this),
         action,
         dialog,

paint.js

@@ -54,7 +54,7 @@
  FrameMorph, PushButtonMorph, Color, SymbolMorph, newCanvas, Morph, TextMorph,
  CostumeIconMorph, IDE_Morph, Costume, SpriteMorph, nop, Image, WardrobeMorph,
  TurtleIconMorph, localize, MenuMorph, InputFieldMorph, SliderMorph,
- ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians, SVG_Costume
+ ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians
  */
 
 // Global stuff ////////////////////////////////////////////////////////
@@ -887,308 +887,3 @@ PaintCanvasMorph.prototype.typeInPadding
 
 PaintCanvasMorph.prototype.contrast
     = InputFieldMorph.prototype.contrast;
-
-// Changes to gui.js and object.js (temporarily here) //////////////////
-// These will be incorporated into the respective files later
-// They add costume editing functionality to Snap!.
-////////////////////////////////////////////////////////////////////////
-
-CostumeIconMorph.prototype.editCostume = function () {
-    if (this.object instanceof SVG_Costume) {
-        this.object.editRotationPointOnly(this.world());
-    } else {
-        this.object.edit(
-            this.world(),
-            this.parentThatIsA(IDE_Morph)
-        );
-    }
-};
-
-Costume.prototype.edit = function (aWorld, anIDE, isnew, oncancel, onsubmit) {
-    var myself = this,
-        editor = new PaintEditorMorph();
-    editor.oncancel = oncancel || nop;
-    editor.openIn(
-        aWorld,
-        isnew ?
-                newCanvas(new Point(480, 360)) :
-                this.contents,
-        isnew ?
-                new Point(240, 180) :
-                this.rotationCenter,
-        function (img, rc) {
-            myself.contents = img;
-            myself.rotationCenter = rc;
-            myself.shrinkWrap();
-            myself.version = Date.now();
-            aWorld.changed();
-            if (anIDE) {
-                anIDE.currentSprite.wearCostume(myself);
-                anIDE.hasChangedMedia = true;
-            }
-            (onsubmit || nop)();
-        }
-    );
-};
-
-IDE_Morph.prototype.createCorralBar = function () {
-    // assumes the stage has already been created
-    var padding = 5,
-        newbutton,
-        paintbutton,
-        colors = [
-            this.groupColor,
-            this.frameColor.darker(50),
-            this.frameColor.darker(50)
-        ];
-
-    if (this.corralBar) {
-        this.corralBar.destroy();
-    }
-
-    this.corralBar = new Morph();
-    this.corralBar.color = this.frameColor;
-    this.corralBar.setHeight(this.logo.height()); // height is fixed
-    this.add(this.corralBar);
-
-    // new sprite button
-    newbutton = new PushButtonMorph(
-        this,
-        "addNewSprite",
-        new SymbolMorph("turtle", 14)
-    );
-    newbutton.corner = 12;
-    newbutton.color = colors[0];
-    newbutton.highlightColor = colors[1];
-    newbutton.pressColor = colors[2];
-    newbutton.labelMinExtent = new Point(36, 18);
-    newbutton.padding = 0;
-    newbutton.labelShadowOffset = new Point(-1, -1);
-    newbutton.labelShadowColor = colors[1];
-    newbutton.labelColor = new Color(255, 255, 255);
-    newbutton.contrast = this.buttonContrast;
-    newbutton.drawNew();
-    newbutton.hint = "add a new Turtle sprite";
-    newbutton.fixLayout();
-    newbutton.setCenter(this.corralBar.center());
-    newbutton.setLeft(this.corralBar.left() + padding);
-    this.corralBar.add(newbutton);
-
-    paintbutton = new PushButtonMorph(
-        this,
-        "paintNewSprite",
-        new SymbolMorph("brush", 15)
-    );
-    paintbutton.corner = 12;
-    paintbutton.color = colors[0];
-    paintbutton.highlightColor = colors[1];
-    paintbutton.pressColor = colors[2];
-    paintbutton.labelMinExtent = new Point(36, 18);
-    paintbutton.padding = 0;
-    paintbutton.labelShadowOffset = new Point(-1, -1);
-    paintbutton.labelShadowColor = colors[1];
-    paintbutton.labelColor = new Color(255, 255, 255);
-    paintbutton.contrast = this.buttonContrast;
-    paintbutton.drawNew();
-    paintbutton.hint = "paint a new sprite";
-    paintbutton.fixLayout();
-    paintbutton.setCenter(this.corralBar.center());
-    paintbutton.setLeft(
-        this.corralBar.left() + padding + newbutton.width() + padding
-    );
-    this.corralBar.add(paintbutton);
-};
-
-IDE_Morph.prototype.paintNewSprite = function() {
-    var sprite = new SpriteMorph(this.globalVariables),
-        cos = new Costume(),
-        myself = this;
-
-    sprite.name = sprite.name +
-        (this.corral.frame.contents.children.length + 1);
-    sprite.setCenter(this.stage.center());
-    this.stage.add(sprite);
-    this.sprites.add(sprite);
-    this.corral.addSprite(sprite);
-    this.selectSprite(sprite);
-    cos.edit(
-        this.world(),
-        this,
-        true,
-        function() {myself.removeSprite(sprite); },
-        function () {
-            sprite.addCostume(cos);
-            sprite.wearCostume(cos);
-        }
-    );
-};
-
-WardrobeMorph.prototype.updateList = function () {
-    var myself = this,
-        x = this.left() + 5,
-        y = this.top() + 5,
-        padding = 4,
-        oldFlag = Morph.prototype.trackChanges,
-        oldPos = this.contents.position(),
-        icon,
-        template,
-        txt,
-        paintbutton;
-
-    this.changed();
-    oldFlag = Morph.prototype.trackChanges;
-    Morph.prototype.trackChanges = false;
-
-    this.contents.destroy();
-    this.contents = new FrameMorph(this);
-    this.contents.acceptsDrops = false;
-    this.contents.reactToDropOf = function (icon) {
-        myself.reactToDropOf(icon);
-    };
-    this.addBack(this.contents);
-
-    icon = new TurtleIconMorph(this.sprite);
-    icon.setPosition(new Point(x, y));
-    myself.addContents(icon);
-    y = icon.bottom() + padding;
-
-    paintbutton = new PushButtonMorph(
-        this,
-        "paintNew",
-        new SymbolMorph("brush", 15)
-    );
-    paintbutton.padding = 0;
-    paintbutton.corner = 12;
-    paintbutton.color = IDE_Morph.prototype.groupColor;
-    paintbutton.highlightColor = IDE_Morph.prototype.frameColor.darker(50);
-    paintbutton.pressColor = paintbutton.highlightColor;
-    paintbutton.labelMinExtent = new Point(36, 18);
-    paintbutton.labelShadowOffset = new Point(-1, -1);
-    paintbutton.labelShadowColor = paintbutton.highlightColor;
-    paintbutton.labelColor = new Color(255, 255, 255);
-    paintbutton.contrast = this.buttonContrast;
-    paintbutton.drawNew();
-    paintbutton.hint = "Paint a new costume";
-    paintbutton.setPosition(new Point(x, y));
-    paintbutton.fixLayout();
-    paintbutton.setCenter(icon.center());
-    paintbutton.setLeft(icon.right() + padding * 4);
-
-
-    this.addContents(paintbutton);
-
-    txt = new TextMorph(localize(
-        "costumes tab help" // look up long string in translator
-    ));
-    txt.fontSize = 9;
-    txt.setColor(new Color(230, 230, 230));
-
-    txt.setPosition(new Point(x, y));
-    this.addContents(txt);
-    y = txt.bottom() + padding;
-
-
-    this.sprite.costumes.asArray().forEach(function (costume) {
-        template = icon = new CostumeIconMorph(costume, template);
-        icon.setPosition(new Point(x, y));
-        myself.addContents(icon);
-        y = icon.bottom() + padding;
-    });
-    this.costumesVersion = this.sprite.costumes.lastChanged;
-
-    this.contents.setPosition(oldPos);
-    this.adjustScrollBars();
-    Morph.prototype.trackChanges = oldFlag;
-    this.changed();
-
-    this.updateSelection();
-};
-
-WardrobeMorph.prototype.paintNew = function() {
-    var cos = new Costume(newCanvas(), "Untitled"),
-        myself = this;
-    cos.edit(this.world(), null, true, null, function() {
-        myself.sprite.addCostume(cos);
-        myself.updateList();
-        if (myself.parentThatIsA(IDE_Morph)) {
-            myself.parentThatIsA(IDE_Morph).currentSprite.wearCostume(cos);
-        }
-    });
-};
-
-CostumeIconMorph.prototype.userMenu = function () {
-    var menu = new MenuMorph(this);
-    if (!(this.object instanceof Costume)) {return null; }
-    menu.addItem("edit", "editCostume");
-    if (this.world().currentKey === 16) { // shift clicked
-        menu.addItem(
-            'edit rotation point only...',
-            'editRotationPointOnly',
-            null,
-            new Color(100, 0, 0)
-        );
-    }
-    menu.addItem("rename", "renameCostume");
-    menu.addLine();
-    menu.addItem("duplicate", "duplicateCostume");
-    menu.addItem("delete", "removeCostume");
-    menu.addLine();
-    menu.addItem("export", "exportCostume");
-    return menu;
-};
-
-CostumeIconMorph.prototype.duplicateCostume = function() {
-    var wardrobe = this.parentThatIsA(WardrobeMorph),
-        ide = this.parentThatIsA(IDE_Morph),
-        newcos = this.object.copy(),
-        split = newcos.name.split(" ");
-    if (split[split.length - 1] === "copy") {
-        newcos.name += " 2";
-    } else if (isNaN(split[split.length - 1])) {
-        newcos.name = newcos.name + " copy";
-    } else {
-        split[split.length - 1] = Number(split[split.length - 1]) + 1;
-        newcos.name = split.join(" ");
-    }
-    wardrobe.sprite.addCostume(newcos);
-    wardrobe.updateList();
-    if (ide) {
-        ide.currentSprite.wearCostume(newcos);
-    }
-};
-
-// I had to change this because adding a "paint new" button changed the offset
-// of the costume (so the 5th child would be the 3rd costume, not the 4th as
-// it was before with only the text morph child).
-CostumeIconMorph.prototype.removeCostume = function () {
-    var wardrobe = this.parentThatIsA(WardrobeMorph),
-        idx = this.parent.children.indexOf(this),
-        ide = this.parentThatIsA(IDE_Morph);
-    wardrobe.removeCostumeAt(idx - 2);
-    if (ide.currentSprite.costume === this.object) {
-        ide.currentSprite.wearCostume(null);
-    }
-};
-
-Costume.prototype.shrinkWrap = function () {
-    // adjust my contents'  bounds to my visible bounding box
-    var bb = this.boundingBox(),
-        ext = bb.extent(),
-        pic = newCanvas(ext),
-        ctx = pic.getContext('2d');
-
-    ctx.drawImage(
-        this.contents,
-        bb.origin.x,
-        bb.origin.y,
-        ext.x,
-        ext.y,
-        0,
-        0,
-        ext.x,
-        ext.y
-    );
-    this.rotationCenter = this.rotationCenter.subtract(bb.origin);
-    this.contents = pic;
-    this.version = Date.now();
-};