From fcced76319df97937b4f58287addd5b839cdb9e6 Mon Sep 17 00:00:00 2001 From: Michael Date: Thu, 8 Jul 2021 11:39:09 +0200 Subject: [PATCH] updates for Snap 6 --- index.html | 2 +- stitchcode/blocks.js | 347 +------------------------------------- stitchcode/gui.js | 143 ++++++++-------- stitchcode/morphic.js | 63 ++++--- stitchcode/objects.js | 7 +- stitchcode/store.js | 11 +- stitchcode/turtlecloud.js | 17 +- 7 files changed, 136 insertions(+), 454 deletions(-) diff --git a/index.html b/index.html index f8c1e510..b394c671 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@ - + diff --git a/stitchcode/blocks.js b/stitchcode/blocks.js index 40b43be8..9853dbaa 100644 --- a/stitchcode/blocks.js +++ b/stitchcode/blocks.js @@ -1,348 +1,3 @@ -SymbolMorph.prototype.names.push('largeStage'); -SymbolMorph.prototype.names.push('zoomToFit'); - -SymbolMorph.prototype.originalSymbolCanvasColored = SymbolMorph.prototype.symbolCanvasColored; -SymbolMorph.prototype.symbolCanvasColored = function (aColor) { - if (this.name == 'largeStage') { - return this.drawSymbolLargeStage(newCanvas(new Point(this.symbolWidth(), this.size)), aColor); - } else if (this.name == 'zoomToFit') { - return this.drawSymbolZoomToFit(newCanvas(new Point(this.symbolWidth(), this.size)), aColor); - } else if (this.name == 'turtle') { - return this.drawSymbolTurtle(newCanvas(new Point(this.symbolWidth(), this.size)), aColor); - } else { - return this.originalSymbolCanvasColored(aColor) - } -} - -SymbolMorph.prototype.drawSymbolFullScreen = function (canvas, color) { - // answer a canvas showing two arrows pointing diagonally outwards - var ctx = canvas.getContext('2d'), - h = canvas.height, - c = canvas.width / 2, - off = canvas.width / 10, - w = canvas.width / 2; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 1.5; - ctx.moveTo(c - off, c + off); - ctx.lineTo(0, h); - ctx.stroke(); - - ctx.moveTo(c + off, c - off); - ctx.lineTo(h, 0); - ctx.stroke(); - - ctx.moveTo(0, h); - ctx.lineTo(0, h - w); - ctx.stroke(); - ctx.moveTo(0, h); - ctx.lineTo(w, h); - ctx.stroke(); - - ctx.moveTo(h, 0); - ctx.lineTo(h - w, 0); - ctx.stroke(); - ctx.moveTo(h, 0); - ctx.lineTo(h, w); - ctx.stroke(); - - return canvas; -}; - -SymbolMorph.prototype.drawSymbolZoomToFit = function (canvas, color) { - // answer a canvas showing two arrows pointing diagonally outwards - var ctx = canvas.getContext('2d'), - h = canvas.height, - c = canvas.width / 2, - off = canvas.width / 10, - w = canvas.width / 4; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 1.5; - - - ctx.moveTo(0, 0); - ctx.lineTo(w, 0); - ctx.stroke(); - ctx.moveTo(0, 0); - ctx.lineTo(0, w); - ctx.stroke(); - - ctx.moveTo(0, h); - ctx.lineTo(0, h - w); - ctx.stroke(); - ctx.moveTo(0, h); - ctx.lineTo(w, h); - ctx.stroke(); - - ctx.moveTo(h, 0); - ctx.lineTo(h - w, 0); - ctx.stroke(); - ctx.moveTo(h, 0); - ctx.lineTo(h, w); - ctx.stroke(); - - ctx.moveTo(h, h); - ctx.lineTo(h - w, h); - ctx.stroke(); - ctx.moveTo(h, h); - ctx.lineTo(h, h - w); - ctx.stroke(); - - return canvas; -}; - - - -SymbolMorph.prototype.drawSymbolFile= function (canvas, color) { - // answer a canvas showing a page symbol - var ctx = canvas.getContext('2d'), - w = Math.min(canvas.width, canvas.height) / 2; - - //ctx.fillStyle = color.toString(); - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(w, 0); - ctx.lineTo(w, w); - ctx.lineTo(canvas.width, w); - ctx.lineTo(canvas.width, canvas.height); - ctx.lineTo(0, canvas.height); - ctx.stroke(); - //ctx.fill(); - - //ctx.fillStyle = color.darker(25).toString(); - ctx.beginPath(); - ctx.moveTo(w, 0); - ctx.lineTo(canvas.width, w); - ctx.lineTo(w, w); - ctx.lineTo(w, 0); - ctx.stroke(); - //ctx.fill(); - - return canvas; -}; - -SymbolMorph.prototype.drawSymbolNormalScreen = function (canvas, color) { - // answer a canvas showing two arrows pointing diagonally outwards - var ctx = canvas.getContext('2d'), - h = canvas.height, - c = canvas.width / 2, - off = canvas.width / 10, - w = canvas.width / 2; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 1.5; - ctx.moveTo(c - off, c + off); - ctx.lineTo(0, h); - ctx.stroke(); - - ctx.moveTo(c + off, c - off); - ctx.lineTo(h, 0); - ctx.stroke(); - - ctx.moveTo(0, h); - ctx.lineTo(0, h - w); - ctx.stroke(); - ctx.moveTo(0, h); - ctx.lineTo(w, h); - ctx.stroke(); - - ctx.moveTo(h, 0); - ctx.lineTo(h - w, 0); - ctx.stroke(); - ctx.moveTo(h, 0); - ctx.lineTo(h, w); - ctx.stroke(); - - return canvas; -}; - - -SymbolMorph.prototype.drawSymbolLargeStage = function (canvas, color) { - var ctx = canvas.getContext('2d'), - w = canvas.width, - h = canvas.height, - w2 = w * 1 / 3, - h2 = h * 2 / 3; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 2; - ctx.rect(0, 0, w, h); - ctx.stroke(); - ctx.rect(w2, 0, w, h2); - ctx.stroke(); - - return canvas; -}; - -SymbolMorph.prototype.drawSymbolNormalStage = function (canvas, color) { - var ctx = canvas.getContext('2d'), - w = canvas.width, - h = canvas.height, - w2 = w / 2, - h2 = h / 2; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 2; - ctx.rect(0, 0, w, h); - ctx.stroke(); - ctx.rect(w2, 0, w2, h2); - ctx.stroke(); - - return canvas; -}; - -SymbolMorph.prototype.drawSymbolSmallStage = function (canvas, color) { - var ctx = canvas.getContext('2d'), - w = canvas.width, - h = canvas.height, - w2 = w * 2 / 3, - h2 = h * 1 / 3; - - ctx.strokeStyle = color.toString(); - ctx.lineWidth = 2; - ctx.rect(0, 0, w, h); - ctx.stroke(); - ctx.rect(w2, 0, w2, h2); - ctx.stroke(); - - return canvas; -}; - -SymbolMorph.prototype.originalSymbolWidth = SymbolMorph.prototype.symbolWidth; -SymbolMorph.prototype.symbolWidth = function () { - switch (this.name) { - case 'gears': - case 'file': - return this.originalSymbolWidth() * 2; - default: - return this.originalSymbolWidth(); - } -}; - -SymbolMorph.prototype.drawSymbolGears = function (canvas, color) { - // overriden to add a small triangle to its right - var ctx = canvas.getContext('2d'), - w = canvas.width / 2, - r = w / 2, - e = w / 6, - triangleX = w * 7/6; - - ctx.strokeStyle = color.toString(); - ctx.fillStyle = color.toString(); - ctx.lineWidth = canvas.height / 7; - - ctx.beginPath(); - ctx.arc(r, r, e * 1.5, radians(0), radians(360)); - ctx.fill(); - - - ctx.moveTo(0, r); - ctx.lineTo(w, r); - ctx.stroke(); - - ctx.moveTo(r, 0); - ctx.lineTo(r, w); - ctx.stroke(); - - ctx.moveTo(e, e); - ctx.lineTo(w - e, w - e); - ctx.stroke(); - - ctx.moveTo(w - e, e); - ctx.lineTo(e, w - e); - ctx.stroke(); - - ctx.globalCompositeOperation = 'destination-out'; - - ctx.beginPath(); - ctx.arc(r, r, e * 1.5, radians(0), radians(360), true); - ctx.fill(); - - ctx.globalCompositeOperation = 'source-over'; - - // triangle - ctx.beginPath(); - ctx.moveTo(triangleX + 1, canvas.height / 5 * 2); - ctx.lineTo(triangleX + 1 + (canvas.width - triangleX - 2) / 2, canvas.height / 5 * 4); - ctx.lineTo(canvas.width - 1, canvas.height / 5 * 2); - ctx.lineTo(triangleX + 1, canvas.height / 5 * 2); - ctx.closePath(); - ctx.fill(); - - return canvas; -}; - -SymbolMorph.prototype.drawSymbolTurtle = function (canvas, color) { - var ctx = canvas.getContext('2d'), - w = canvas.width / 2, - r = w / 2, - e = w / 6, - triangleX = w * 7/6; - - ctx.fillStyle = 'rgba(0,0,0,0)'; - ctx.fillRect(0, 0, w, w); - this.drawTexture('stitchcode/assets/turtles16.png'); - - ctx.globalCompositeOperation = 'destination-out'; - - ctx.beginPath(); - ctx.arc(r, r, e * 1.5, radians(0), radians(360), true); - ctx.fill(); - - ctx.globalCompositeOperation = 'source-over'; - - // triangle - ctx.beginPath(); - ctx.moveTo(triangleX + 1, canvas.height / 5 * 2); - ctx.lineTo(triangleX + 1 + (canvas.width - triangleX - 2) / 2, canvas.height / 5 * 4); - ctx.lineTo(canvas.width - 1, canvas.height / 5 * 2); - ctx.lineTo(triangleX + 1, canvas.height / 5 * 2); - ctx.closePath(); - ctx.fill(); - - return canvas; -}; - - - -SymbolMorph.prototype.drawSymbolFile = function (canvas, color) { - // overriden to add a small triangle to its right - var ctx = canvas.getContext('2d'), - w = canvas.width / 4, - maxW = canvas.width / 2; - - ctx.fillStyle = color.toString(); - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(w, 0); - ctx.lineTo(w, w); - ctx.lineTo(maxW, w); - ctx.lineTo(maxW, canvas.height); - ctx.lineTo(0, canvas.height); - ctx.closePath(); - ctx.fill(); - - ctx.fillStyle = color.darker(25).toString(); - ctx.beginPath(); - ctx.moveTo(w, 0); - ctx.lineTo(maxW, w); - ctx.lineTo(w, w); - ctx.lineTo(w, 0); - ctx.closePath(); - ctx.fill(); - - // triangle - ctx.beginPath(); - ctx.moveTo(maxW + 2, canvas.height / 5 * 2); - ctx.lineTo(maxW + 2 + (canvas.width - maxW - 2) / 2, canvas.height / 5 * 4); - ctx.lineTo(canvas.width, canvas.height / 5 * 2); - ctx.lineTo(maxW + 2, canvas.height / 5 * 2); - ctx.closePath(); - ctx.fill(); - - return canvas; -}; // Hue slot morph @@ -416,7 +71,7 @@ SyntaxElementMorph.prototype.labelPart = function (spec) { case '%huewheel': part = new HueSlotMorph(); part.isStatic = true; - break; + break; default: part = this.originalLabelPart(spec); break; diff --git a/stitchcode/gui.js b/stitchcode/gui.js index adc107a3..5b88fc70 100644 --- a/stitchcode/gui.js +++ b/stitchcode/gui.js @@ -1,5 +1,5 @@ -VERSION="2.6.4" +VERSION="2.7 - dev" // get debug mode url = new URL(window.location.href); @@ -32,9 +32,9 @@ IDE_Morph.prototype.createLogo = function () { this.originalCreateLogo(); //if (MorphicPreferences.isFlat) { // we are always flat! - this.logo.texture = 'stitchcode/turtlestitch_logo.png'; - this.logo.color = new Color(230, 230, 230); - this.logo.drawNew(); + this.logo.texture = "data:image/png;base64,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"; + + this.logo.fixLayout(); }; IDE_Morph.prototype.createPalette = function (forSearching) { @@ -67,7 +67,7 @@ IDE_Morph.prototype.createPalette = function (forSearching) { this.palette.toolBar.padding = 1; // this.palette.toolBar.hint = 'Cancel'; this.palette.toolBar.labelShadowColor = new Color(140, 140, 140); - this.palette.toolBar.drawNew(); + this.palette.toolBar.fixLayout(); this.palette.toolBar.fixLayout(); this.palette.add(this.palette.toolBar); */ @@ -384,7 +384,7 @@ IDE_Morph.prototype.createControlBar = function () { this.controlBar = new Morph(); //this.controlBar.color = this.frameColor; - this.controlBar.color = new Color(250, 250, 250); + this.controlBar.color = new Color(250, 250, 250); this.controlBar.setHeight(this.logo.height()); // height is fixed this.controlBar.mouseClickLeft = function () { this.world().fillPage(); @@ -415,7 +415,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'stage size\nsmall & normal'; button.fixLayout(); button.refresh(); @@ -447,7 +447,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'app & edit\nmodes'; button.fixLayout(); button.refresh(); @@ -479,7 +479,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'start green\nflag scripts'; button.fixLayout(); button.refresh(); @@ -513,7 +513,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); button.hint = 'Visible stepping'; button.fixLayout(); button.refresh(); @@ -548,7 +548,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = new Color(200, 0, 0); button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'stop\nevery-\nthing'; button.fixLayout(); button.refresh(); @@ -580,7 +580,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = new Color(255, 220, 0); button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'pause/resume\nall scripts'; button.fixLayout(); button.refresh(); @@ -604,7 +604,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = new Color(0, 200, 0); button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'start green\nflag scripts'; button.fixLayout(); startButton = button; @@ -645,7 +645,7 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'open, save, & annotate project'; button.fixLayout(); projectButton = button; @@ -669,14 +669,13 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'edit settings'; button.fixLayout(); settingsButton = button; this.controlBar.add(settingsButton); this.controlBar.settingsButton = settingsButton; // for menu positioning - // settingsButton button = new PushButtonMorph( this, @@ -695,14 +694,14 @@ IDE_Morph.prototype.createControlBar = function () { button.labelShadowColor = colors[1]; button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; - button.drawNew(); + // button.fixLayout(); // button.hint = 'edit settings'; button.fixLayout(); + button.rerender(); turtlestitchButton = button; this.controlBar.add(turtlestitchButton); this.controlBar.turtlestitchButton = turtlestitchButton; // for menu positioning - - + this.controlBar.fixLayout(); this.controlBar.fixLayout = function () { x = this.right() - padding; @@ -750,7 +749,8 @@ IDE_Morph.prototype.createControlBar = function () { this.controlBar.refreshSlider = function () { if (Process.prototype.enableSingleStepping && !myself.isAppMode) { - slider.drawNew(); + // slider.fixLayout(); + slider.fixLayout(); slider.show(); } else { slider.hide(); @@ -801,7 +801,8 @@ IDE_Morph.prototype.createControlBar = function () { myself.frameColor.darker(myself.buttonContrast) ); this.label.color = myself.buttonLabelColor; - this.label.drawNew(); + // this.label.fixLayout(); + this.label.fixLayout(); this.add(this.label); this.label.setCenter(this.center()); this.label.setLeft(this.turtlestitchButton.right() + padding); @@ -967,10 +968,10 @@ IDE_Morph.prototype.toggleAppMode = function (appMode) { } }); this.stage.add(this.controlBar); - this.controlBar.alpha = 0; + this.controlBar.alpha = 0; } else { - this.controlBar.setColor(this.controlBar.color); - this.add(this.controlBar); + this.controlBar.setColor(this.controlBar.color); + this.add(this.controlBar); elements.forEach(function (e) { e.show(); @@ -990,19 +991,17 @@ IDE_Morph.prototype.toggleAppMode = function (appMode) { }); } this.setExtent(this.world().extent()); // resume trackChanges + this.fixLayout(); }; IDE_Morph.prototype.zoomToFit = function (appMode) { - this.stage.camera.fitScene(); + this.stage.camera.fitScene(); } IDE_Morph.prototype.aboutTurtleStitch = function () { var dlg, aboutTxt, pic, world = this.world(); - pic = Morph.fromImageURL('stitchcode/assets/turtle-logo.png'); - pic.setExtent(new Point(32, 32)); - aboutTxt = 'TurtleStich! ' + VERSION + '\n\n' + 'Copyright \u24B8 2021 Michael Aschauer\n\n' @@ -1016,7 +1015,7 @@ IDE_Morph.prototype.aboutTurtleStitch = function () { + 'TurtleStich is based on Snap!\n\n' dlg = new DialogBoxMorph(); - dlg.inform(localize('About TurtleStitch'), localize(aboutTxt), world, pic); + dlg.inform(localize('About TurtleStitch'), localize(aboutTxt), world, this.logo.cachedTexture); btn1 = dlg.addButton(this.aboutSnap, 'About Snap!...' @@ -1123,7 +1122,8 @@ IDE_Morph.prototype.createStatusDisplay = function () { if (element.hasOwnProperty('update')) { element.update(); element.changed(); - element.drawNew(); + // element.fixLayout(); + element.fixLayout(); element.changed(); }; }); @@ -1409,7 +1409,7 @@ IDE_Morph.prototype.fixLayout = function (situation) { //this.stage.setTop(this.controlBar.bottom()); //this.stage.setLeft(0); this.controlBar.setTop(0); - this.controlBar.setRight(this.width() - padding); + this.controlBar.setRight(this.width() - padding); } else { this.stage.setScale(this.isSmallStage ? this.stageRatio : 1); this.stage.setTop(this.logo.bottom() + padding); @@ -1436,7 +1436,6 @@ IDE_Morph.prototype.fixLayout = function (situation) { )); } this.statusDisplay.fixLayout(); - } Morph.prototype.trackChanges = true; @@ -1534,7 +1533,7 @@ IDE_Morph.prototype.createSpriteBar = function () { if (myself.currentSprite instanceof SpriteMorph) { myself.currentSprite.rotationStyle = rotationStyle; myself.currentSprite.changed(); - myself.currentSprite.drawNew(); + myself.currentSprite.fixLayout(); myself.currentSprite.changed(); } rotationStyleButtons.forEach(function (each) { @@ -1598,7 +1597,7 @@ IDE_Morph.prototype.createSpriteBar = function () { nameField.contrast = 90; nameField.setPosition(thumbnail.topRight().add(new Point(10, 3))); this.spriteBar.add(nameField); - nameField.drawNew(); + nameField.fixLayout(); nameField.accept = function () { var newName = nameField.getValue(); myself.currentSprite.setName( @@ -1632,10 +1631,10 @@ IDE_Morph.prototype.createSpriteBar = function () { padlock.tick.shadowColor = new Color(); // black padlock.tick.color = this.buttonLabelColor; padlock.tick.isBold = false; - padlock.tick.drawNew(); + padlock.tick.fixLayout(); padlock.setPosition(nameField.bottomLeft().add(2)); - padlock.drawNew(); + padlock.fixLayout(); this.spriteBar.add(padlock); if (this.currentSprite instanceof StageMorph) { padlock.hide(); @@ -1669,7 +1668,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; tab.labelColor = this.buttonLabelColor; - tab.drawNew(); + tab.fixLayout(); tab.fixLayout(); tabBar.add(tab); @@ -1688,7 +1687,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; tab.labelColor = this.buttonLabelColor; - tab.drawNew(); + tab.fixLayout(); tab.fixLayout(); tabBar.add(tab); @@ -1707,7 +1706,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; tab.labelColor = this.buttonLabelColor; - tab.drawNew(); + tab.fixLayout(); tab.fixLayout(); tabBar.add(tab); @@ -1733,13 +1732,14 @@ IDE_Morph.prototype.createCategories = function () { } this.categories = new Morph(); this.categories.color = this.groupColor; - this.categories.silentSetWidth(this.logo.width()); // width is fixed + this.categories.bounds.setWidth(this.paletteWidth); + // this.categories.getRenderColor = ScriptsMorph.prototype.getRenderColor; function addCategoryButton(category) { var labelWidth = 75, colors = [ myself.frameColor, - myself.frameColor.darker(50), + myself.frameColor.darker(MorphicPreferences.isFlat ? 5 : 50), SpriteMorph.prototype.blockColor[category] ], button; @@ -1747,20 +1747,17 @@ IDE_Morph.prototype.createCategories = function () { button = new ToggleButtonMorph( colors, myself, // the IDE is the target - function () { + () => { myself.currentCategory = category; - myself.categories.children.forEach(function (each) { - each.refresh(); - }); + myself.categories.children.forEach(each => + each.refresh() + ); myself.refreshPalette(true); }, category[0].toUpperCase().concat(category.slice(1)), // label - function () { // query - return myself.currentCategory === category; - }, + () => myself.currentCategory === category, // query null, // env null, // hint - null, // template cache labelWidth, // minWidth true // has preview ); @@ -1770,6 +1767,9 @@ IDE_Morph.prototype.createCategories = function () { button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; button.labelColor = myself.buttonLabelColor; + if (MorphicPreferences.isFlat) { + button.labelPressColor = WHITE; + } button.fixLayout(); button.refresh(); myself.categories.add(button); @@ -1779,12 +1779,13 @@ IDE_Morph.prototype.createCategories = function () { function fixCategoriesLayout() { var buttonWidth = myself.categories.children[0].width(), buttonHeight = myself.categories.children[0].height(), - border = 3, + border = 12, rows = Math.ceil((myself.categories.children.length) / 2), - xPadding = (myself.categories.width() - - border - - buttonWidth * 2) / 3, - yPadding = 2, + // xPadding = (myself.categories.width() - + // border - + // buttonWidth * 2) / 3, + xPadding = 5, + yPadding = 3, l = myself.categories.left(), t = myself.categories.top(), i = 0, @@ -2365,7 +2366,7 @@ DialogBoxMorph.prototype.promptOrder = function ( btn.outlineGradient = myself.buttonOutlineGradient; btn.padding = myself.buttonPadding; btn.contrast = myself.buttonContrast; - btn.drawNew(); + // btn.fixLayout(); btn.fixLayout(); return btn; } @@ -2406,7 +2407,7 @@ DialogBoxMorph.prototype.promptOrder = function ( chk_pub.outlineColor = this.buttonOutlineColor; chk_pub.outlineGradient = this.buttonOutlineGradient; chk_pub.contrast = this.buttonContrast; - chk_pub.drawNew(); + // chk_pub.fixLayout(); chk_pub.fixLayout(); bdy.add(chk_pub); } @@ -2424,7 +2425,7 @@ DialogBoxMorph.prototype.promptOrder = function ( chk_tos.outlineColor = this.buttonOutlineColor; chk_tos.outlineGradient = this.buttonOutlineGradient; chk_tos.contrast = this.buttonContrast; - chk_tos.drawNew(); + // chk_tos.fixLayout(); chk_tos.fixLayout(); bdy.add(chk_tos); } @@ -2441,14 +2442,14 @@ DialogBoxMorph.prototype.promptOrder = function ( this.addBody(bdy); - mCol.drawNew(); - yCol.drawNew(); + // mCol.fixLayout(); + // yCol.fixLayout(); bdy.fixLayout(); this.addButton('ok', 'OK'); this.addButton('cancel', 'Cancel'); this.fixLayout(); - this.drawNew(); + // this.fixLayout(); this.fixLayout(); function validInputs() { @@ -2456,7 +2457,7 @@ DialogBoxMorph.prototype.promptOrder = function ( function indicate(morph, string) { var bubble = new SpeechBubbleMorph(localize(string)); bubble.isPointingRight = false; - bubble.drawNew(); + // bubble.fixLayout(); bubble.popUp( world, morph.leftCenter().subtract(new Point(bubble.width() + 2, 0)) @@ -2630,7 +2631,7 @@ DialogBoxMorph.prototype.informWithLink = function ( btn.outlineGradient = myself.buttonOutlineGradient; btn.padding = myself.buttonPadding; btn.contrast = myself.buttonContrast; - btn.drawNew(); + // btn.fixLayout(); btn.fixLayout(); return btn; } @@ -2656,10 +2657,10 @@ DialogBoxMorph.prototype.informWithLink = function ( this.addBody(bdy); - this.addButton('ok', 'OK'); - this.drawNew(); - this.fixLayout(); - this.popUp(world); + this.addButton('ok', 'OK'); + // this.fixLayout(); + this.fixLayout(); + this.popUp(world); }; @@ -2693,7 +2694,7 @@ ProjectDialogMorph.prototype.installCloudProjectList = function (pl) { this.listField.fontSize = InputFieldMorph.prototype.fontSize; this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding; this.listField.contrast = InputFieldMorph.prototype.contrast; - this.listField.drawNew = InputFieldMorph.prototype.drawNew; + // this.listField.fixLayout = InputFieldMorph.prototype.fixLayout; this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder; this.listField.action = function (item) { @@ -2703,11 +2704,13 @@ ProjectDialogMorph.prototype.installCloudProjectList = function (pl) { } if (myself.task === 'open') { myself.notesText.text = item.Notes || ''; - myself.notesText.drawNew(); + // myself.notesText.fixLayout(); + myself.notesText.fixLayout(); myself.notesField.contents.adjustBounds(); myself.preview.texture = item.Thumbnail || null; myself.preview.cachedTexture = null; - myself.preview.drawNew(); + // myself.preview.fixLayout(); + myself.preview.fixLayout(); (new SpeechBubbleMorph(new TextMorph( localize('last changed') + '\n' + item.Updated, null, @@ -2758,7 +2761,7 @@ ProjectDialogMorph.prototype.buildContents = function () { this.tagsField = new InputFieldMorph(""); this.tagsField.edge = InputFieldMorph.prototype.edge; this.tagsField.contrast = InputFieldMorph.prototype.contrast; - this.tagsField.drawNew = InputFieldMorph.prototype.drawNew; + // this.tagsField.fixLayout = InputFieldMorph.prototype.fixLayout; this.body.add(this.tagsField); this.fixLayout(); }; diff --git a/stitchcode/morphic.js b/stitchcode/morphic.js index 6a918b1c..240d5754 100644 --- a/stitchcode/morphic.js +++ b/stitchcode/morphic.js @@ -1,11 +1,9 @@ -Morph.fromImageURL = function(url) { +/* Morph.fromImageURL = function(url) { var m = new Morph(); m.texture = url; - m.drawNew = function() { - this.image = newCanvas(this.extent()); - var context = this.image.getContext('2d'); + m.render = function(context) { context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0, 0, this.width(), this.height()); if (this.texture) { @@ -30,6 +28,31 @@ Morph.fromImageURL = function(url) { return m; } +*/ + +Morph.fromImageURL = function(url) { + var m = new Morph(); + + m.texture = url; + + m.edge = Morph.prototype.edge; + + m.render = function (ctx) { + Morph.prototype.render.call(this, ctx); + if (m.texture) { + m.renderTexture(m.texture, ctx); + } + }; + + m.fixLayout(); + + + + return m; +} + + + // ColorPaletteMorph /////////////////////////////////////////////////// // from https://github.com/jguille2 @@ -55,17 +78,20 @@ ColorPaletteMorph.prototype.init = function (target, size) { ColorPaletteMorph.uber.init.call(this); this.target = target; this.targetSetter = 'color'; - this.silentSetExtent(size); + this.setExtent(size); this.choice = null; - this.drawNew(); + this.rerender(); }; -ColorPaletteMorph.prototype.drawNew = function () { - var context, ext, x, y, h, l, colors; +ColorPaletteMorph.prototype.render = function (context) { + var ext, x, y, h, l, colors; ext = this.extent(); - this.image = newCanvas(this.extent()); - context = this.image.getContext('2d'); + console.log(ext); + + + + this.choice = new Color(); colors = ['rgb(0, 0,0)', //black 'rgb(128, 128, 128)', //gray @@ -130,7 +156,7 @@ ColorPaletteMorph.prototype.updateTarget = function () { this.target[this.targetSetter](this.choice); } else { this.target[this.targetSetter] = this.choice; - this.target.drawNew(); + this.target.rerender(); this.target.changed(); } } @@ -209,21 +235,20 @@ function HueWheelMorph(target, sizePoint) { ); }; -HueWheelMorph.prototype.drawNew = function () { - var context, ext, x, y, radius; +HueWheelMorph.prototype.render = function (context) { + var ext, x, y, radius; ext = this.extent(); - this.image = newCanvas(this.extent()); - context = this.image.getContext('2d'); + console.log(context, ext); this.choice = new Color(); - x = this.image.width / 2 + 2; - y = this.image.height / 2; + x = this.getImage().width / 2 + 2; + y = this.size / 2; radius = this.image.width / 2 - 22; context.font = '9px Arial'; context.fillStyle = 'rgb(200,200,200)'; - context.fillRect(0, 0, this.image.width, this.image.height); - context.strokeRect(0, 0, this.image.width, this.image.height); + context.fillRect(0, 0, this.getImage().width, this.getImage().height); + context.strokeRect(0, 0, this.getImage().width, this.getImage().height); context.textAlign = 'center'; context.textBaseline = 'middle'; diff --git a/stitchcode/objects.js b/stitchcode/objects.js index 1ebd75bf..39350465 100644 --- a/stitchcode/objects.js +++ b/stitchcode/objects.js @@ -2950,7 +2950,7 @@ StageMorph.prototype.penTrails = function () { // StageMorph drawing StageMorph.prototype.originalDrawOn = StageMorph.prototype.drawOn; -StageMorph.prototype.drawOn = function (aCanvas, aRect) { +StageMorph.prototype.drawOn = function (context, aRect) { // If the scale is lower than 1, we reuse the original method, // otherwise we need to modify the renderer dimensions // we do not need to render the original canvas anymore because @@ -2970,13 +2970,12 @@ StageMorph.prototype.drawOn = function (aCanvas, aRect) { if (area.extent().gt(new Point(0, 0))) { delta = this.position().neg(); src = area.copy().translateBy(delta).round(); - context = aCanvas.getContext('2d'); context.globalAlpha = this.alpha; sl = src.left(); st = src.top(); - w = Math.min(src.width(), this.image.width - sl); - h = Math.min(src.height(), this.image.height - st); + w = Math.min(src.width(), area.width() - sl); + h = Math.min(src.height(), area.height() - st); if (w < 1 || h < 1) { return null; diff --git a/stitchcode/store.js b/stitchcode/store.js index c824c429..d253f8ea 100644 --- a/stitchcode/store.js +++ b/stitchcode/store.js @@ -14,7 +14,7 @@ SnapSerializer.prototype.openProject = function (project, ide) { ide.origCreator = project.origCreator || ''; ide.creator = project.creator || ''; ide.remixHistory = project.remixHistorycreat || ''; - //console.log("name: " + ide.projectName + ", creator: " + ide.creator + ", origName: " + ide.origName + ", origCreator: " + ide.origCreator); + //console.log("name: " + ide.projectName + ", creator: " + ide.creator + ", origName: " + ide.origName + ", origCreator: " + ide.origCreator); if (ide.globalVariables) { ide.globalVariables = project.globalVariables; } @@ -39,7 +39,7 @@ SnapSerializer.prototype.openProject = function (project, ide) { } else { ide.hasChangedMedia = true; } - project.stage.drawNew(); + project.stage.fixLayout(); ide.createCorral(); ide.selectSprite(sprite); ide.fixLayout(); @@ -312,7 +312,8 @@ SnapSerializer.prototype.rawLoadProjectModel = function (xmlNode) { // set watcher's contentsMorph's extent if it is showing a list and // its monitor dimensions are given - if (watcher.currentValue instanceof List) { + if (watcher.currentValue instanceof List && + watcher.cellMorph.contentsMorph) { extX = model.attributes.extX; if (extX) { watcher.cellMorph.contentsMorph.setWidth(+extX); @@ -322,7 +323,7 @@ SnapSerializer.prototype.rawLoadProjectModel = function (xmlNode) { watcher.cellMorph.contentsMorph.setHeight(+extY); } // adjust my contentsMorph's handle position - watcher.cellMorph.contentsMorph.handle.drawNew(); + watcher.cellMorph.contentsMorph.handle.fixLayout(); } }); @@ -398,7 +399,7 @@ StageMorph.prototype.toXML = function (serializer) { '%' + '%\n' + '', - (ide && ide.projectName) ? ide.projectName : localize('Untitled'), + (ide && ide.projectName) ? ide.projectName : localize('Untitled'), serializer.app, serializer.version, (ide && ide.projectNotes) ? ide.projectNotes : '', diff --git a/stitchcode/turtlecloud.js b/stitchcode/turtlecloud.js index 9b6348e9..e38f742e 100644 --- a/stitchcode/turtlecloud.js +++ b/stitchcode/turtlecloud.js @@ -633,10 +633,10 @@ ProjectDialogMorph.prototype.shareProject = function () { myself.unshareButton.show(); myself.shareButton.hide(); entry.label.isBold = true; - entry.label.drawNew(); + entry.label.fixLayout(); entry.label.changed(); myself.buttons.fixLayout(); - myself.drawNew(); + myself.fixLayout(); myself.ide.showMessage('shared.', 2); }, myself.ide.cloudError() @@ -677,10 +677,10 @@ ProjectDialogMorph.prototype.unshareProject = function () { myself.shareButton.show(); myself.unshareButton.hide(); entry.label.isBold = false; - entry.label.drawNew(); + entry.label.fixLayout(); entry.label.changed(); myself.buttons.fixLayout(); - myself.drawNew(); + myself.fixLayout(); myself.ide.showMessage('unshared.', 2); }, myself.ide.cloudError() @@ -791,7 +791,6 @@ ProjectDialogMorph.prototype.setSource = function (source) { this.listField.fontSize = InputFieldMorph.prototype.fontSize; this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding; this.listField.contrast = InputFieldMorph.prototype.contrast; - this.listField.drawNew = InputFieldMorph.prototype.drawNew; this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder; if (this.source === 'local') { @@ -809,12 +808,12 @@ ProjectDialogMorph.prototype.setSource = function (source) { myself.notesText.text = xml.childNamed('notes').contents || ''; - myself.notesText.drawNew(); + myself.notesText.fixLayout(); myself.notesField.contents.adjustBounds(); myself.preview.texture = xml.childNamed('thumbnail').contents || null; myself.preview.cachedTexture = null; - myself.preview.drawNew(); + myself.preview.fixLayout(); } myself.edit(); }; @@ -833,12 +832,12 @@ ProjectDialogMorph.prototype.setSource = function (source) { xml = myself.ide.serializer.parse(src); myself.notesText.text = xml.childNamed('notes').contents || ''; - myself.notesText.drawNew(); + myself.notesText.fixLayout(); myself.notesField.contents.adjustBounds(); myself.preview.texture = xml.childNamed('thumbnail').contents || null; myself.preview.cachedTexture = null; - myself.preview.drawNew(); + myself.preview.fixLayout(); myself.edit(); }; }