kopia lustrzana https://github.com/backface/turtlestitch
1113 wiersze
33 KiB
JavaScript
1113 wiersze
33 KiB
JavaScript
/*
|
|
paint.js
|
|
|
|
a paint editor for Snap!
|
|
inspired by the Scratch paint editor.
|
|
|
|
written by Kartik Chandra
|
|
Copyright (C) 2019 by Kartik Chandra
|
|
|
|
This file is part of Snap!.
|
|
|
|
Snap! is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of
|
|
the License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
|
toc
|
|
---
|
|
the following list shows the order in which all constructors are
|
|
defined. Use this list to locate code in this document:
|
|
|
|
PaintEditorMorph
|
|
PaintColorPickerMorph
|
|
PaintCanvasMorph
|
|
|
|
|
|
credits
|
|
-------
|
|
Nathan Dinsmore contributed a fully working prototype,
|
|
Nathan's brilliant flood-fill tool has been more or less
|
|
directly imported into this paint implementation.
|
|
|
|
Jens Mönig has contributed icons and bugfixes and says he has probably
|
|
introduced many other bugs in that process. :-)
|
|
|
|
|
|
revision history
|
|
----------------
|
|
May 10 - first full release (Kartik)
|
|
May 14 - bugfixes, Snap integration (Jens)
|
|
May 16 - flat design adjustments (Jens)
|
|
July 12 - pipette tool, code formatting adjustments (Jens)
|
|
Sept 16 - flood fill freeze fix (Kartik)
|
|
Jan 08 - mouse leave dragging fix (Kartik)
|
|
Feb 11 - dynamically adjust to stage dimensions (Jens)
|
|
Apr 30 - localizations (Manuel)
|
|
June 3 - transformations (Kartik)
|
|
June 4 - tweaks (Jens)
|
|
Aug 24 - floodfill alpha-integer issue (Kartik)
|
|
Sep 29 - tweaks (Jens)
|
|
Sep 28 [of the following year :)] - Try to prevent antialiasing (Kartik)
|
|
Oct 02 - revert disable smoothing (Jens)
|
|
Dec 15 - center rotation point on costume creating (Craxic)
|
|
Jan 18 - avoid pixel collision detection in PaintCanvas (Jens)
|
|
Mar 22 - fixed automatic rotation center point mechanism (Jens)
|
|
May 10 - retina display support adjustments (Jens)
|
|
2017
|
|
Apr 10 - getGlobalPixelColor adjustment for Chrome & retina (Jens)
|
|
2018
|
|
Jan 22 - floodfill alpha tweak (Bernat)
|
|
Mar 19 - vector paint editor (Bernat)
|
|
|
|
2020 Apr 14 - Morphic2 migration (Jens)
|
|
2020 May 17 - Pipette alpha fix (Joan)
|
|
2020 Jul 13 - modified scale buttons (Jadga)
|
|
|
|
2021 Mar 17 - moved stage dimension handling to scenes (Jens)
|
|
*/
|
|
|
|
/*global Point, Rectangle, DialogBoxMorph, AlignmentMorph, PushButtonMorph, nop,
|
|
Color, SymbolMorph, newCanvas, Morph, StringMorph, Costume, SpriteMorph, isNil,
|
|
localize, InputFieldMorph, SliderMorph, ToggleMorph, ToggleButtonMorph, modules,
|
|
BoxMorph, radians, MorphicPreferences, getDocumentPositionOf, SVG_Costume*/
|
|
|
|
/*jshint esversion: 6*/
|
|
|
|
// Global stuff ////////////////////////////////////////////////////////
|
|
|
|
modules.paint = '2021-July-05';
|
|
|
|
// Declarations
|
|
|
|
var PaintEditorMorph;
|
|
var PaintCanvasMorph;
|
|
var PaintColorPickerMorph;
|
|
|
|
// PaintEditorMorph //////////////////////////
|
|
|
|
// A complete paint editor
|
|
|
|
PaintEditorMorph.prototype = new DialogBoxMorph();
|
|
PaintEditorMorph.prototype.constructor = PaintEditorMorph;
|
|
PaintEditorMorph.uber = DialogBoxMorph.prototype;
|
|
|
|
PaintEditorMorph.prototype.padding = 10;
|
|
|
|
function PaintEditorMorph() {
|
|
this.init();
|
|
}
|
|
|
|
PaintEditorMorph.prototype.init = function () {
|
|
// additional properties:
|
|
this.ide = null;
|
|
this.paper = null; // paint canvas
|
|
this.oncancel = null;
|
|
|
|
// initialize inherited properties:
|
|
PaintEditorMorph.uber.init.call(this);
|
|
|
|
// override inherited properties:
|
|
this.labelString = "Paint Editor";
|
|
this.createLabel();
|
|
|
|
// building the contents happens when I am opened with an IDE
|
|
// so my extent can be adjusted accordingly (jens)
|
|
// this.buildContents();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.buildContents = function () {
|
|
var myself = this;
|
|
|
|
this.paper = new PaintCanvasMorph(function () {return myself.shift; });
|
|
this.paper.setExtent(this.ide.stage.dimensions);
|
|
|
|
this.addBody(new AlignmentMorph('row', this.padding));
|
|
this.controls = new AlignmentMorph('column', this.padding / 2);
|
|
this.controls.alignment = 'center';
|
|
|
|
this.edits = new AlignmentMorph('row', this.padding / 2);
|
|
this.buildEdits();
|
|
this.controls.add(this.edits);
|
|
|
|
this.body.color = this.color;
|
|
|
|
this.body.add(this.controls);
|
|
this.body.add(this.paper);
|
|
|
|
this.toolbox = new BoxMorph();
|
|
this.toolbox.color = SpriteMorph.prototype.paletteColor.lighter(8);
|
|
this.toolbox.borderColor = this.toolbox.color.lighter(40);
|
|
if (MorphicPreferences.isFlat) {
|
|
this.toolbox.edge = 0;
|
|
}
|
|
|
|
this.buildToolbox();
|
|
this.controls.add(this.toolbox);
|
|
|
|
this.scaleBox = new AlignmentMorph('row', this.padding / 2);
|
|
this.buildScaleBox();
|
|
this.controls.add(this.scaleBox);
|
|
|
|
this.propertiesControls = {
|
|
colorpicker: null,
|
|
penSizeSlider: null,
|
|
penSizeField: null,
|
|
primaryColorButton: null,
|
|
primaryColorViewer: null,
|
|
constrain: null
|
|
};
|
|
this.populatePropertiesMenu();
|
|
|
|
this.addButton("ok", "OK");
|
|
this.addButton("cancel", "Cancel");
|
|
|
|
this.refreshToolButtons();
|
|
this.fixLayout();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.buildToolbox = function () {
|
|
var tools = {
|
|
brush:
|
|
"Paintbrush tool\n(free draw)",
|
|
rectangle:
|
|
"Stroked Rectangle\n(shift: square)",
|
|
circle:
|
|
"Stroked Ellipse\n(shift: circle)",
|
|
eraser:
|
|
"Eraser tool",
|
|
crosshairs:
|
|
"Set the rotation center",
|
|
|
|
line:
|
|
"Line tool\n(shift: vertical/horizontal)",
|
|
rectangleSolid:
|
|
"Filled Rectangle\n(shift: square)",
|
|
circleSolid:
|
|
"Filled Ellipse\n(shift: circle)",
|
|
paintbucket:
|
|
"Fill a region",
|
|
pipette:
|
|
"Pipette tool\n(pick a color anywhere)"
|
|
},
|
|
myself = this,
|
|
left = this.toolbox.left(),
|
|
top = this.toolbox.top(),
|
|
padding = 2,
|
|
inset = 5,
|
|
x = 0,
|
|
y = 0;
|
|
|
|
Object.keys(tools).forEach(function (tool) {
|
|
var btn = myself.toolButton(tool, tools[tool]);
|
|
btn.setPosition(new Point(
|
|
left + x,
|
|
top + y
|
|
));
|
|
x += btn.width() + padding;
|
|
if (tool === "crosshairs") {
|
|
x = 0;
|
|
y += btn.height() + padding;
|
|
myself.paper.drawcrosshair();
|
|
}
|
|
myself.toolbox[tool] = btn;
|
|
myself.toolbox.add(btn);
|
|
});
|
|
|
|
this.toolbox.bounds = this.toolbox.fullBounds().expandBy(inset * 2);
|
|
};
|
|
|
|
PaintEditorMorph.prototype.buildEdits = function () {
|
|
var myself = this,
|
|
paper = this.paper;
|
|
|
|
this.edits.add(this.pushButton(
|
|
"undo",
|
|
function () {paper.undo(); }
|
|
));
|
|
|
|
this.edits.add(this.pushButton(
|
|
"clear",
|
|
function () {paper.clearCanvas(); }
|
|
));
|
|
this.edits.add(this.pushButton(
|
|
'Vector',
|
|
function () {
|
|
if (myself.paper.undoBuffer.length > 0) {
|
|
myself.ide.confirm(
|
|
'This will erase your current drawing.\n' +
|
|
'Are you sure you want to continue?',
|
|
'Switch to vector editor?',
|
|
() => {
|
|
setTimeout(() => {myself.switchToVector(); });
|
|
}
|
|
);
|
|
} else {
|
|
myself.switchToVector();
|
|
}
|
|
}
|
|
));
|
|
|
|
this.edits.fixLayout();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.buildScaleBox = function () {
|
|
var paper = this.paper;
|
|
this.scaleBox.add(this.pushButton(
|
|
new SymbolMorph('grow', 18),
|
|
function () {paper.scale(0.05, 0.05); },
|
|
'grow'
|
|
));
|
|
this.scaleBox.add(this.pushButton(
|
|
new SymbolMorph('shrink', 18),
|
|
function () {paper.scale(-0.05, -0.05); },
|
|
'shrink'
|
|
));
|
|
this.scaleBox.add(this.pushButton(
|
|
new SymbolMorph('flipHorizontal', 18),
|
|
function () {paper.scale(-2, 0); },
|
|
'flip horizontal'
|
|
));
|
|
this.scaleBox.add(this.pushButton(
|
|
new SymbolMorph('flipVertical', 18),
|
|
function () {paper.scale(0, -2); },
|
|
'flip vertical'
|
|
));
|
|
this.scaleBox.fixLayout();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.openIn = function (
|
|
world,
|
|
oldim,
|
|
oldrc,
|
|
callback,
|
|
anIDE
|
|
) {
|
|
var myself = this;
|
|
// Open the editor in a world with an optional image to edit
|
|
this.oldim = oldim;
|
|
this.callback = callback || nop;
|
|
this.ide = anIDE;
|
|
|
|
this.buildContents();
|
|
|
|
this.processKeyUp = function () {
|
|
myself.shift = false;
|
|
myself.propertiesControls.constrain.refresh();
|
|
};
|
|
|
|
this.processKeyDown = function () {
|
|
myself.shift = myself.world().currentKey === 16;
|
|
myself.propertiesControls.constrain.refresh();
|
|
};
|
|
//merge oldim:
|
|
if (this.oldim) {
|
|
this.paper.automaticCrosshairs = isNil(oldrc);
|
|
this.paper.centermerge(this.oldim, this.paper.paper);
|
|
this.paper.rotationCenter =
|
|
(oldrc || new Point(0, 0)).add(
|
|
new Point(
|
|
(this.paper.paper.width - this.oldim.width) / 2,
|
|
(this.paper.paper.height - this.oldim.height) / 2
|
|
)
|
|
);
|
|
this.paper.drawNew();
|
|
}
|
|
|
|
this.key = 'paint';
|
|
this.popUp(world);
|
|
};
|
|
|
|
PaintEditorMorph.prototype.fixLayout = function () {
|
|
this.changed();
|
|
if (this.paper) {
|
|
this.paper.buildContents();
|
|
this.paper.drawNew();
|
|
}
|
|
if (this.controls) {this.controls.fixLayout(); }
|
|
if (this.body) {this.body.fixLayout(); }
|
|
PaintEditorMorph.uber.fixLayout.call(this);
|
|
this.changed();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.refreshToolButtons = function () {
|
|
this.toolbox.children.forEach(function (toggle) {
|
|
toggle.refresh();
|
|
});
|
|
};
|
|
|
|
PaintEditorMorph.prototype.ok = function () {
|
|
this.paper.updateAutomaticCenter();
|
|
this.callback(
|
|
this.paper.paper,
|
|
this.paper.rotationCenter
|
|
);
|
|
this.destroy();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.cancel = function () {
|
|
if (this.oncancel) {this.oncancel(); }
|
|
this.destroy();
|
|
};
|
|
|
|
PaintEditorMorph.prototype.switchToVector = function () {
|
|
|
|
this.object = new SVG_Costume(new Image(), '', new Point(0,0));
|
|
this.object.edit(
|
|
this.world(),
|
|
this.ide,
|
|
true
|
|
);
|
|
};
|
|
|
|
PaintEditorMorph.prototype.populatePropertiesMenu = function () {
|
|
var c = this.controls,
|
|
myself = this,
|
|
pc = this.propertiesControls,
|
|
alpen = new AlignmentMorph("row", this.padding),
|
|
brushControl = new AlignmentMorph("column", 3);
|
|
|
|
brushControl.alignment = "left";
|
|
|
|
pc.primaryColorViewer = new Morph();
|
|
pc.primaryColorViewer.isCachingImage = true;
|
|
|
|
pc.primaryColorViewer.render = function (ctx) {
|
|
var color = myself.paper.settings.primarycolor,
|
|
i,
|
|
j;
|
|
if (color === "transparent") {
|
|
for (i = 0; i < 180; i += 5) {
|
|
for (j = 0; j < 15; j += 5) {
|
|
ctx.fillStyle =
|
|
((j + i) / 5) % 2 === 0 ?
|
|
"rgba(0, 0, 0, 0.2)" :
|
|
"rgba(0, 0, 0, 0.5)";
|
|
ctx.fillRect(i, j, 5, 5);
|
|
|
|
}
|
|
}
|
|
} else {
|
|
ctx.fillStyle = color.toString();
|
|
ctx.fillRect(0, 0, 180, 15);
|
|
}
|
|
ctx.strokeStyle = "black";
|
|
ctx.lineWidth = Math.min(myself.paper.settings.linewidth, 20);
|
|
ctx.beginPath();
|
|
ctx.lineCap = "round";
|
|
ctx.moveTo(20, 30);
|
|
ctx.lineTo(160, 30);
|
|
ctx.stroke();
|
|
};
|
|
|
|
pc.primaryColorViewer.setExtent(new Point(180, 40));
|
|
pc.primaryColorViewer.color = new Color(0, 0, 0);
|
|
|
|
pc.colorpicker = new PaintColorPickerMorph(
|
|
new Point(180, 100),
|
|
function (color) {
|
|
myself.paper.settings.primarycolor = color;
|
|
pc.primaryColorViewer.rerender();
|
|
}
|
|
);
|
|
pc.colorpicker.isCachingImage = true;
|
|
pc.colorpicker.action(new Color(0, 0, 0));
|
|
|
|
pc.penSizeSlider = new SliderMorph(0, 20, 5, 5);
|
|
pc.penSizeSlider.orientation = "horizontal";
|
|
pc.penSizeSlider.setHeight(15);
|
|
pc.penSizeSlider.setWidth(150);
|
|
pc.penSizeSlider.action = function (num) {
|
|
if (pc.penSizeField) {
|
|
pc.penSizeField.setContents(num);
|
|
}
|
|
myself.paper.settings.linewidth = num;
|
|
pc.colorpicker.action(myself.paper.settings.primarycolor);
|
|
};
|
|
|
|
pc.penSizeField = new InputFieldMorph("5", true, null, false);
|
|
pc.penSizeField.contents().minWidth = 20;
|
|
pc.penSizeField.setWidth(25);
|
|
pc.penSizeField.accept = function () {
|
|
var val = parseFloat(pc.penSizeField.getValue());
|
|
pc.penSizeSlider.value = val;
|
|
pc.penSizeSlider.updateValue();
|
|
this.setContents(val);
|
|
myself.paper.settings.linewidth = val;
|
|
this.world().keyboardFocus = myself;
|
|
pc.colorpicker.action(myself.paper.settings.primarycolor);
|
|
};
|
|
|
|
alpen.add(pc.penSizeSlider);
|
|
alpen.add(pc.penSizeField);
|
|
alpen.color = myself.color;
|
|
alpen.fixLayout();
|
|
|
|
pc.penSizeField.fixLayout();
|
|
pc.constrain = new ToggleMorph(
|
|
"checkbox",
|
|
this,
|
|
function () {myself.shift = !myself.shift; },
|
|
"Constrain proportions of shapes?\n(you can also hold shift)",
|
|
function () {return myself.shift; }
|
|
);
|
|
pc.constrain.label.isBold = false;
|
|
|
|
c.add(pc.colorpicker);
|
|
//c.add(pc.primaryColorButton);
|
|
c.add(pc.primaryColorViewer);
|
|
brushControl.add(
|
|
new StringMorph(localize("Brush size") + ":", 10, null, true)
|
|
);
|
|
brushControl.add(alpen);
|
|
brushControl.add(pc.constrain);
|
|
brushControl.fixLayout();
|
|
c.add(brushControl);
|
|
};
|
|
|
|
PaintEditorMorph.prototype.toolButton = function (icon, hint) {
|
|
var button, myself = this;
|
|
|
|
button = new ToggleButtonMorph(
|
|
null,
|
|
this,
|
|
function () { // action
|
|
myself.paper.currentTool = icon;
|
|
myself.paper.toolChanged(icon);
|
|
myself.refreshToolButtons();
|
|
if (icon === 'pipette') {
|
|
myself.getUserColor();
|
|
}
|
|
},
|
|
new SymbolMorph(icon, 18),
|
|
function () {return myself.paper.currentTool === icon; }
|
|
);
|
|
|
|
button.hint = hint;
|
|
return button;
|
|
};
|
|
|
|
PaintEditorMorph.prototype.pushButton = function (title, action, hint) {
|
|
return new PushButtonMorph(
|
|
this,
|
|
action,
|
|
title,
|
|
null,
|
|
hint
|
|
);
|
|
};
|
|
|
|
PaintEditorMorph.prototype.getUserColor = function () {
|
|
var myself = this,
|
|
world = this.world(),
|
|
hand = world.hand,
|
|
posInDocument = getDocumentPositionOf(world.worldCanvas),
|
|
mouseMoveBak = hand.processMouseMove,
|
|
mouseDownBak = hand.processMouseDown,
|
|
mouseUpBak = hand.processMouseUp;
|
|
|
|
hand.processMouseMove = function (event) {
|
|
var color;
|
|
hand.setPosition(new Point(
|
|
event.pageX - posInDocument.x,
|
|
event.pageY - posInDocument.y
|
|
));
|
|
color = world.getGlobalPixelColor(hand.position());
|
|
if (!color.a) {
|
|
// ignore transparent,
|
|
// needed for retina-display support
|
|
return;
|
|
}
|
|
color.a = 1;
|
|
myself.propertiesControls.colorpicker.action(color);
|
|
};
|
|
|
|
hand.processMouseDown = nop;
|
|
|
|
hand.processMouseUp = function () {
|
|
myself.paper.currentTool = 'brush';
|
|
myself.paper.toolChanged('brush');
|
|
myself.refreshToolButtons();
|
|
hand.processMouseMove = mouseMoveBak;
|
|
hand.processMouseDown = mouseDownBak;
|
|
hand.processMouseUp = mouseUpBak;
|
|
};
|
|
};
|
|
|
|
// AdvancedColorPickerMorph //////////////////
|
|
|
|
// A large hsl color picker
|
|
|
|
PaintColorPickerMorph.prototype = new Morph();
|
|
PaintColorPickerMorph.prototype.constructor = PaintColorPickerMorph;
|
|
PaintColorPickerMorph.uber = Morph.prototype;
|
|
|
|
function PaintColorPickerMorph(extent, action) {
|
|
this.init(extent, action);
|
|
}
|
|
|
|
PaintColorPickerMorph.prototype.init = function (extent, action) {
|
|
this.isCachingImage = true;
|
|
this.setExtent(extent || new Point(200, 100));
|
|
this.action = action || nop;
|
|
};
|
|
|
|
PaintColorPickerMorph.prototype.render = function (ctx) {
|
|
var x = 0,
|
|
y = 0,
|
|
colorselection,
|
|
r;
|
|
for (x = 0; x < this.width(); x += 1) {
|
|
for (y = 0; y < this.height() - 20; y += 1) {
|
|
ctx.fillStyle = "hsl(" +
|
|
(360 * x / this.width()) +
|
|
"," +
|
|
"100%," +
|
|
(y * 100 / (this.height() - 20)) +
|
|
"%)";
|
|
ctx.fillRect(x, y, 1, 1);
|
|
}
|
|
}
|
|
for (x = 0; x < this.width(); x += 1) {
|
|
r = Math.floor(255 * x / this.width());
|
|
ctx.fillStyle = "rgb(" + r + ", " + r + ", " + r + ")";
|
|
ctx.fillRect(x, this.height() - 20, 1, 10);
|
|
}
|
|
colorselection = ["black", "white", "gray"];
|
|
for (x = 0; x < colorselection.length; x += 1) {
|
|
ctx.fillStyle = colorselection[x];
|
|
ctx.fillRect(
|
|
x * this.width() / colorselection.length,
|
|
this.height() - 10,
|
|
this.width() / colorselection.length,
|
|
10
|
|
);
|
|
}
|
|
for (x = this.width() * 2 / 3; x < this.width(); x += 2) {
|
|
for (y = this.height() - 10; y < this.height(); y += 2) {
|
|
if ((x + y) / 2 % 2 === 0) {
|
|
ctx.fillStyle = "#DDD";
|
|
ctx.fillRect(x, y, 2, 2);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
PaintColorPickerMorph.prototype.mouseDownLeft = function (pos) {
|
|
if ((pos.subtract(this.position()).x > this.width() * 2 / 3) &&
|
|
(pos.subtract(this.position()).y > this.height() - 10)) {
|
|
this.action("transparent");
|
|
} else {
|
|
this.action(this.getPixelColor(pos));
|
|
}
|
|
};
|
|
|
|
PaintColorPickerMorph.prototype.mouseMove =
|
|
PaintColorPickerMorph.prototype.mouseDownLeft;
|
|
|
|
// PaintCanvasMorph ///////////////////////////
|
|
/*
|
|
A canvas which reacts to drag events to
|
|
modify its image, based on a 'tool' property.
|
|
*/
|
|
|
|
PaintCanvasMorph.prototype = new Morph();
|
|
PaintCanvasMorph.prototype.constructor = PaintCanvasMorph;
|
|
PaintCanvasMorph.uber = Morph.prototype;
|
|
|
|
function PaintCanvasMorph(shift) {
|
|
this.init(shift);
|
|
}
|
|
|
|
PaintCanvasMorph.prototype.init = function (shift) {
|
|
this.rotationCenter = new Point(240, 180);
|
|
this.dragRect = null;
|
|
this.previousDragPoint = null;
|
|
this.currentTool = "brush";
|
|
this.dragRect = new Rectangle();
|
|
// rectangle with origin being the starting drag position and
|
|
// corner being the current drag position
|
|
this.mask = null; // Temporary canvas
|
|
this.paper = null; // Actual canvas
|
|
this.erasermask = null; // eraser memory
|
|
this.background = null; // checkers
|
|
this.settings = {
|
|
"primarycolor": new Color(0, 0, 0, 255), // usually fill color
|
|
"secondarycolor": new Color(0, 0, 0, 255), // (unused)
|
|
"linewidth": 3 // stroke width
|
|
};
|
|
this.brushBuffer = [];
|
|
this.undoBuffer = [];
|
|
this.isShiftPressed = shift || function () {
|
|
var key = this.world().currentKey;
|
|
return (key === 16);
|
|
};
|
|
// should we calculate the center of the image ourselves,
|
|
// or use the user position
|
|
this.automaticCrosshairs = true;
|
|
this.isCachingImage = true;
|
|
this.buildContents();
|
|
this.drawNew();
|
|
};
|
|
|
|
// Calculate the center of all the non-transparent pixels on the canvas.
|
|
PaintCanvasMorph.prototype.calculateCanvasCenter = function(canvas) {
|
|
var canvasBounds = Costume.prototype.canvasBoundingBox(canvas);
|
|
if (canvasBounds === null) {
|
|
return null;
|
|
}
|
|
// Can't use canvasBounds.center(), it rounds down.
|
|
return new Point(
|
|
(canvasBounds.origin.x + canvasBounds.corner.x) / 2,
|
|
(canvasBounds.origin.y + canvasBounds.corner.y) / 2
|
|
);
|
|
};
|
|
|
|
// If we are in automaticCrosshairs mode, recalculate the rotationCenter.
|
|
PaintCanvasMorph.prototype.updateAutomaticCenter = function () {
|
|
if (this.automaticCrosshairs) {
|
|
// Calculate this.rotationCenter from this.paper
|
|
var rotationCenter = this.calculateCanvasCenter(this.paper);
|
|
if (rotationCenter !== null) {
|
|
this.rotationCenter = rotationCenter;
|
|
}
|
|
}
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.scale = function (x, y) {
|
|
this.updateAutomaticCenter();
|
|
this.mask = newCanvas(this.extent(), true);
|
|
var c = newCanvas(this.extent(), true);
|
|
c.getContext("2d").save();
|
|
c.getContext("2d").translate(
|
|
this.rotationCenter.x,
|
|
this.rotationCenter.y
|
|
);
|
|
c.getContext("2d").scale(1 + x, 1 + y);
|
|
c.getContext("2d").drawImage(
|
|
this.paper,
|
|
-this.rotationCenter.x,
|
|
-this.rotationCenter.y
|
|
);
|
|
c.getContext("2d").restore();
|
|
this.paper = c;
|
|
this.drawNew();
|
|
this.changed();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.cacheUndo = function () {
|
|
var cachecan = newCanvas(this.extent(), true);
|
|
this.merge(this.paper, cachecan);
|
|
this.undoBuffer.push(cachecan);
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.undo = function () {
|
|
if (this.undoBuffer.length > 0) {
|
|
this.paper = newCanvas(this.extent(), true);
|
|
this.mask.width = this.mask.width + 1 - 1;
|
|
this.merge(this.undoBuffer.pop(), this.paper);
|
|
this.drawNew();
|
|
this.changed();
|
|
}
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.merge = function (a, b) {
|
|
b.getContext("2d").drawImage(a, 0, 0);
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.centermerge = function (a, b) {
|
|
b.getContext("2d").drawImage(
|
|
a,
|
|
(b.width - a.width) / 2,
|
|
(b.height - a.height) / 2
|
|
);
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.clearCanvas = function () {
|
|
this.buildContents();
|
|
this.drawNew();
|
|
this.changed();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.toolChanged = function (tool) {
|
|
this.mask = newCanvas(this.extent(), true, this.mask);
|
|
if (tool === "crosshairs") {
|
|
this.updateAutomaticCenter();
|
|
this.drawcrosshair();
|
|
}
|
|
this.drawNew();
|
|
this.changed();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.drawcrosshair = function (context) {
|
|
var ctx = context || this.mask.getContext("2d"),
|
|
rp = this.rotationCenter;
|
|
|
|
ctx.save();
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = 'black';
|
|
ctx.clearRect(0, 0, this.mask.width, this.mask.height);
|
|
|
|
// draw crosshairs:
|
|
ctx.globalAlpha = 0.5;
|
|
|
|
// circle around center:
|
|
ctx.fillStyle = 'white';
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
rp.x,
|
|
rp.y,
|
|
20,
|
|
radians(0),
|
|
radians(360),
|
|
false
|
|
);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
rp.x,
|
|
rp.y,
|
|
10,
|
|
radians(0),
|
|
radians(360),
|
|
false
|
|
);
|
|
ctx.stroke();
|
|
|
|
// horizontal line:
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, rp.y);
|
|
ctx.lineTo(this.mask.width, rp.y);
|
|
ctx.stroke();
|
|
|
|
// vertical line:
|
|
ctx.beginPath();
|
|
ctx.moveTo(rp.x, 0);
|
|
ctx.lineTo(rp.x, this.mask.height);
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
|
|
this.drawNew();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.floodfill = function (sourcepoint) {
|
|
var width = this.paper.width,
|
|
height = this.paper.height,
|
|
ctx = this.paper.getContext("2d"),
|
|
img = ctx.getImageData(0, 0, width, height),
|
|
data = img.data,
|
|
stack = [Math.round(Math.round(sourcepoint.y) * width + sourcepoint.x)],
|
|
currentpoint,
|
|
read,
|
|
sourcecolor,
|
|
checkpoint;
|
|
read = function (p) {
|
|
var d = p * 4;
|
|
return [data[d], data[d + 1], data[d + 2], data[d + 3]];
|
|
};
|
|
sourcecolor = read(stack[0]);
|
|
checkpoint = function (p) {
|
|
return p[0] === sourcecolor[0] &&
|
|
p[1] === sourcecolor[1] &&
|
|
p[2] === sourcecolor[2] &&
|
|
p[3] === sourcecolor[3];
|
|
};
|
|
|
|
// if already filled, abort
|
|
if (sourcecolor[3] === 0 &&
|
|
this.settings.primarycolor === "transparent") {
|
|
return;
|
|
}
|
|
if (sourcecolor[0] === this.settings.primarycolor.r &&
|
|
sourcecolor[1] === this.settings.primarycolor.g &&
|
|
sourcecolor[2] === this.settings.primarycolor.b &&
|
|
sourcecolor[3] === this.settings.primarycolor.a * 255) {
|
|
return;
|
|
}
|
|
if (sourcecolor[3] === 0 && this.settings.primarycolor.a === 0) {
|
|
return;
|
|
}
|
|
|
|
while (stack.length > 0) {
|
|
currentpoint = stack.pop();
|
|
if (checkpoint(read(currentpoint))) {
|
|
if (currentpoint % width > 1) {
|
|
stack.push(currentpoint + 1);
|
|
stack.push(currentpoint - 1);
|
|
}
|
|
if (currentpoint > 0 && currentpoint < height * width) {
|
|
stack.push(currentpoint + width);
|
|
stack.push(currentpoint - width);
|
|
}
|
|
}
|
|
if (this.settings.primarycolor === "transparent") {
|
|
data[currentpoint * 4 + 3] = 0;
|
|
} else {
|
|
data[currentpoint * 4] = this.settings.primarycolor.r;
|
|
data[currentpoint * 4 + 1] = this.settings.primarycolor.g;
|
|
data[currentpoint * 4 + 2] = this.settings.primarycolor.b;
|
|
data[currentpoint * 4 + 3] = this.settings.primarycolor.a * 255;
|
|
}
|
|
}
|
|
ctx.putImageData(img, 0, 0);
|
|
this.drawNew();
|
|
this.changed();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.mouseDownLeft = function (pos) {
|
|
this.cacheUndo();
|
|
this.dragRect.origin = pos.subtract(this.bounds.origin);
|
|
this.dragRect.corner = pos.subtract(this.bounds.origin);
|
|
this.previousDragPoint = this.dragRect.corner.copy();
|
|
if (this.currentTool === 'crosshairs') {
|
|
this.rotationCenter = pos.subtract(this.bounds.origin);
|
|
this.drawcrosshair();
|
|
return;
|
|
}
|
|
if (this.currentTool === "paintbucket") {
|
|
return this.floodfill(pos.subtract(this.bounds.origin));
|
|
}
|
|
if (this.settings.primarycolor === "transparent" &&
|
|
this.currentTool !== "crosshairs") {
|
|
this.erasermask = newCanvas(this.extent(), true, this.erasermask);
|
|
this.merge(this.paper, this.erasermask);
|
|
}
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.mouseMove = function (pos) {
|
|
if (this.currentTool === "paintbucket") {
|
|
return;
|
|
}
|
|
|
|
var relpos = pos.subtract(this.bounds.origin),
|
|
mctx = this.mask.getContext("2d"),
|
|
pctx = this.paper.getContext("2d"),
|
|
x = this.dragRect.origin.x, // original drag X
|
|
y = this.dragRect.origin.y, // original drag y
|
|
p = relpos.x, // current drag x
|
|
q = relpos.y, // current drag y
|
|
w = (p - x) / 2, // half the rect width
|
|
h = (q - y) / 2, // half the rect height
|
|
i, // iterator number
|
|
width = this.paper.width;
|
|
|
|
mctx.save();
|
|
function newW() {
|
|
return Math.max(Math.abs(w), Math.abs(h)) * (w / Math.abs(w));
|
|
}
|
|
function newH() {
|
|
return Math.max(Math.abs(w), Math.abs(h)) * (h / Math.abs(h));
|
|
}
|
|
this.brushBuffer.push([p, q]);
|
|
mctx.lineWidth = this.settings.linewidth;
|
|
mctx.clearRect(0, 0, this.bounds.width(), this.bounds.height()); // mask
|
|
|
|
this.dragRect.corner = relpos.subtract(this.dragRect.origin); // reset crn
|
|
|
|
if (this.settings.primarycolor === "transparent" &&
|
|
this.currentTool !== "crosshairs") {
|
|
this.merge(this.erasermask, this.mask);
|
|
pctx.clearRect(0, 0, this.bounds.width(), this.bounds.height());
|
|
mctx.globalCompositeOperation = "destination-out";
|
|
} else {
|
|
mctx.fillStyle = this.settings.primarycolor.toString();
|
|
mctx.strokeStyle = this.settings.primarycolor.toString();
|
|
}
|
|
switch (this.currentTool) {
|
|
case "rectangle":
|
|
if (this.isShiftPressed()) {
|
|
mctx.strokeRect(x, y, newW() * 2, newH() * 2);
|
|
} else {
|
|
mctx.strokeRect(x, y, w * 2, h * 2);
|
|
}
|
|
break;
|
|
case "rectangleSolid":
|
|
if (this.isShiftPressed()) {
|
|
mctx.fillRect(x, y, newW() * 2, newH() * 2);
|
|
} else {
|
|
mctx.fillRect(x, y, w * 2, h * 2);
|
|
}
|
|
break;
|
|
case "brush":
|
|
mctx.lineCap = "round";
|
|
mctx.lineJoin = "round";
|
|
mctx.beginPath();
|
|
mctx.moveTo(this.brushBuffer[0][0], this.brushBuffer[0][1]);
|
|
for (i = 0; i < this.brushBuffer.length; i += 1) {
|
|
mctx.lineTo(this.brushBuffer[i][0], this.brushBuffer[i][1]);
|
|
}
|
|
mctx.stroke();
|
|
break;
|
|
case "line":
|
|
mctx.beginPath();
|
|
mctx.moveTo(x, y);
|
|
if (this.isShiftPressed()) {
|
|
if (Math.abs(h) > Math.abs(w)) {
|
|
mctx.lineTo(x, q);
|
|
} else {
|
|
mctx.lineTo(p, y);
|
|
}
|
|
} else {
|
|
mctx.lineTo(p, q);
|
|
}
|
|
mctx.stroke();
|
|
break;
|
|
case "circle":
|
|
case "circleSolid":
|
|
mctx.beginPath();
|
|
if (this.isShiftPressed()) {
|
|
mctx.arc(
|
|
x,
|
|
y,
|
|
new Point(x, y).distanceTo(new Point(p, q)),
|
|
0,
|
|
Math.PI * 2,
|
|
false
|
|
);
|
|
} else {
|
|
for (i = 0; i < width; i += 1) {
|
|
mctx.lineTo(
|
|
i,
|
|
(2 * h) * Math.sqrt(2 - Math.pow(
|
|
(i - x) / (2 * w),
|
|
2
|
|
)) + y
|
|
);
|
|
}
|
|
for (i = width; i > 0; i -= 1) {
|
|
mctx.lineTo(
|
|
i,
|
|
-1 * (2 * h) * Math.sqrt(2 - Math.pow(
|
|
(i - x) / (2 * w),
|
|
2
|
|
)) + y
|
|
);
|
|
}
|
|
}
|
|
mctx.closePath();
|
|
if (this.currentTool === "circleSolid") {
|
|
mctx.fill();
|
|
} else {
|
|
if (this.currentTool === "circle") {
|
|
mctx.stroke();
|
|
}
|
|
}
|
|
break;
|
|
case "crosshairs":
|
|
// Disable automatic crosshairs:
|
|
// user has now chosen where they should be.
|
|
this.automaticCrosshairs = false;
|
|
this.rotationCenter = relpos.copy();
|
|
this.drawcrosshair(mctx);
|
|
break;
|
|
case "eraser":
|
|
this.merge(this.paper, this.mask);
|
|
mctx.save();
|
|
mctx.globalCompositeOperation = "destination-out";
|
|
mctx.beginPath();
|
|
mctx.moveTo(this.brushBuffer[0][0], this.brushBuffer[0][1]);
|
|
for (i = 0; i < this.brushBuffer.length; i += 1) {
|
|
mctx.lineTo(this.brushBuffer[i][0], this.brushBuffer[i][1]);
|
|
}
|
|
mctx.stroke();
|
|
mctx.restore();
|
|
this.paper = newCanvas(this.extent(), true);
|
|
this.merge(this.mask, this.paper);
|
|
break;
|
|
default:
|
|
nop();
|
|
}
|
|
this.previousDragPoint = relpos;
|
|
this.drawNew();
|
|
mctx.restore();
|
|
this.changed();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.mouseClickLeft = function () {
|
|
if (this.currentTool !== "crosshairs") {
|
|
this.merge(this.mask, this.paper);
|
|
}
|
|
this.brushBuffer = [];
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.mouseLeaveDragging
|
|
= PaintCanvasMorph.prototype.mouseClickLeft;
|
|
|
|
PaintCanvasMorph.prototype.buildContents = function () {
|
|
this.background = newCanvas(this.extent(), false, this.background);
|
|
this.paper = newCanvas(this.extent(), true, this.paper);
|
|
this.mask = newCanvas(this.extent(), true, this.mask);
|
|
this.erasermask = newCanvas(this.extent(), true, this.erasermask);
|
|
var i, j, bkctx = this.background.getContext("2d");
|
|
for (i = 0; i < this.background.width; i += 5) {
|
|
for (j = 0; j < this.background.height; j += 5) {
|
|
if ((i + j) / 5 % 2 === 1) {
|
|
bkctx.fillStyle = "rgba(255, 255, 255, 1)";
|
|
} else {
|
|
bkctx.fillStyle = "rgba(255, 255, 255, 0.3)";
|
|
}
|
|
bkctx.fillRect(i, j, 5, 5);
|
|
}
|
|
}
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.drawNew = function () {
|
|
var can = newCanvas(this.extent(), true, this.cachedImage);
|
|
this.merge(this.background, can);
|
|
this.merge(this.paper, can);
|
|
this.merge(this.mask, can);
|
|
this.cachedImage = can;
|
|
this.drawFrame();
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.rerender // ugly hack, but hey, it works ;-) jens
|
|
= PaintCanvasMorph.prototype.drawNew;
|
|
|
|
PaintCanvasMorph.prototype.drawFrame = function () {
|
|
var context, borderColor;
|
|
|
|
context = this.cachedImage.getContext('2d');
|
|
if (this.parent) {
|
|
this.color = this.parent.color.lighter(this.contrast * 0.75);
|
|
borderColor = this.parent.color;
|
|
} else {
|
|
borderColor = new Color(120, 120, 120);
|
|
}
|
|
context.fillStyle = this.color.toString();
|
|
|
|
// cache my border colors
|
|
this.cachedClr = borderColor.toString();
|
|
this.cachedClrBright = borderColor.lighter(this.contrast)
|
|
.toString();
|
|
this.cachedClrDark = borderColor.darker(this.contrast).toString();
|
|
this.drawRectBorder(context);
|
|
};
|
|
|
|
PaintCanvasMorph.prototype.drawRectBorder
|
|
= InputFieldMorph.prototype.drawRectBorder;
|
|
|
|
PaintCanvasMorph.prototype.edge
|
|
= InputFieldMorph.prototype.edge;
|
|
|
|
PaintCanvasMorph.prototype.fontSize
|
|
= InputFieldMorph.prototype.fontSize;
|
|
|
|
PaintCanvasMorph.prototype.typeInPadding
|
|
= InputFieldMorph.prototype.typeInPadding;
|
|
|
|
PaintCanvasMorph.prototype.contrast
|
|
= InputFieldMorph.prototype.contrast;
|