mirror
/
turtlestitch
kopia lustrzana https://github.com/backface/turtlestitch
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

modified scale buttons in paint editor

pull/95/head
jadga-h 2020-07-13 17:07:36 +02:00
rodzic 80e51901d8
commit c0512fd29a
3 zmienionych plików z 176 dodań i 22 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
snap.html
Wyświetl plik

@ -5,13 +5,13 @@
<title>Snap! Build Your Own Blocks 6.0.0 - beta -</title>
<link rel="shortcut icon" href="src/favicon.ico">
<script src="src/morphic.js?version=2020-07-01"></script>
<script src="src/symbols.js?version=2020-07-01"></script>
<script src="src/symbols.js?version=2020-07-13"></script>
<script src="src/widgets.js?version=2020-07-01"></script>
<script src="src/blocks.js?version=2020-07-02"></script>
<script src="src/threads.js?version=2020-07-02"></script>
<script src="src/objects.js?version=2020-07-01"></script>
<script src="src/gui.js?version=2020-07-01"></script>
<script src="src/paint.js?version=2020-05-17"></script>
<script src="src/paint.js?version=2020-07-13"></script>
<script src="src/lists.js?version=2020-07-01"></script>
<script src="src/byob.js?version=2020-07-01"></script>
<script src="src/tables.js?version=2020-05-18"></script>

45
src/paint.js
Wyświetl plik

@ -1,4 +1,4 @@
/*
/*
paint.js
a paint editor for Snap!
@ -71,17 +71,18 @@
2020 Apr 14 - Morphic2 migration (Jens)
2020 May 17 - Pipette alpha fix (Joan)
2020 July 13 - modified scale buttons (Jadga)
*/
/*global Point, Rectangle, DialogBoxMorph, AlignmentMorph, PushButtonMorph,
Color, SymbolMorph, newCanvas, Morph, TextMorph, Costume, SpriteMorph, nop,
Color, SymbolMorph, newCanvas, Morph, StringMorph, Costume, SpriteMorph, nop,
localize, InputFieldMorph, SliderMorph, ToggleMorph, ToggleButtonMorph,
BoxMorph, modules, radians, MorphicPreferences, getDocumentPositionOf,
StageMorph, isNil, SVG_Costume*/
// Global stuff ////////////////////////////////////////////////////////
modules.paint = '2020-May-17';
modules.paint = '2020-July-13';
// Declarations
@ -127,7 +128,7 @@ PaintEditorMorph.prototype.buildContents = function () {
this.addBody(new AlignmentMorph('row', this.padding));
this.controls = new AlignmentMorph('column', this.padding / 2);
this.controls.alignment = 'left';
this.controls.alignment = 'center';
this.edits = new AlignmentMorph('row', this.padding / 2);
this.buildEdits();
@ -258,20 +259,24 @@ PaintEditorMorph.prototype.buildEdits = function () {
PaintEditorMorph.prototype.buildScaleBox = function () {
var paper = this.paper;
this.scaleBox.add(this.pushButton(
"grow",
function () {paper.scale(0.05, 0.05); }
new SymbolMorph('grow', 18),
function () {paper.scale(0.05, 0.05); },
'grow'
));
this.scaleBox.add(this.pushButton(
"shrink",
function () {paper.scale(-0.05, -0.05); }
new SymbolMorph('shrink', 18),
function () {paper.scale(-0.05, -0.05); },
'shrink'
));
this.scaleBox.add(this.pushButton(
"flip ↔",
function () {paper.scale(-2, 0); }
new SymbolMorph('flipHorizontal', 18),
function () {paper.scale(-2, 0); },
'flip horizontal'
));
this.scaleBox.add(this.pushButton(
"flip ↕",
function () {paper.scale(0, -2); }
new SymbolMorph('flipVertical', 18),
function () {paper.scale(0, -2); },
'flip vertical'
));
this.scaleBox.fixLayout();
};
@ -366,7 +371,10 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
var c = this.controls,
myself = this,
pc = this.propertiesControls,
alpen = new AlignmentMorph("row", this.padding);
alpen = new AlignmentMorph("row", this.padding),
brushControl = new AlignmentMorph("column");
brushControl.alignment = "left";
pc.primaryColorViewer = new Morph();
pc.primaryColorViewer.isCachingImage = true;
@ -399,7 +407,7 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
ctx.stroke();
};
pc.primaryColorViewer.setExtent(new Point(180, 50));
pc.primaryColorViewer.setExtent(new Point(180, 40));
pc.primaryColorViewer.color = new Color(0, 0, 0);
pc.colorpicker = new PaintColorPickerMorph(
@ -450,12 +458,17 @@ PaintEditorMorph.prototype.populatePropertiesMenu = function () {
"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);
c.add(new TextMorph(localize("Brush size")));
c.add(alpen);
brushControl.add(
new StringMorph(localize("Brush size") + ":", 10, null, true)
);
brushControl.add(alpen);
brushControl.fixLayout();
c.add(brushControl);
c.add(pc.constrain);
};

149
src/symbols.js
Wyświetl plik

@ -41,7 +41,7 @@
// Global stuff ////////////////////////////////////////////////////////
modules.symbols = '2020-July-01';
modules.symbols = '2020-July-13';
var SymbolMorph;
@ -73,7 +73,9 @@ SymbolMorph.prototype.names = [
'gearBig',
'file',
'fullScreen',
'grow',
'normalScreen',
'shrink',
'smallStage',
'normalStage',
'turtle',
@ -138,7 +140,9 @@ SymbolMorph.prototype.names = [
'keyboardFilled',
'globe',
'globeBig',
'list'
'list',
'flipVertical',
'flipHorizontal'
];
// SymbolMorph instance creation:
@ -250,6 +254,9 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'fullScreen':
this.renderSymbolFullScreen(ctx, aColor);
break;
case 'grow':
this.renderSymbolGrow(ctx, aColor);
break;
case 'normalScreen':
this.renderSymbolNormalScreen(ctx, aColor);
break;
@ -259,6 +266,9 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'normalStage':
this.renderSymbolNormalStage(ctx, aColor);
break;
case 'shrink':
this.renderSymbolShrink(ctx, aColor);
break;
case 'turtle':
this.renderSymbolTurtle(ctx, aColor);
break;
@ -448,6 +458,12 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) {
case 'list':
this.renderSymbolList(ctx, aColor);
break;
case 'flipVertical':
this.renderSymbolFlipVertical(ctx, aColor);
break;
case 'flipHorizontal':
this.renderSymbolFlipHorizontal(ctx, aColor);
break;
default:
throw new Error('unknown symbol name: "' + this.name + '"');
}
@ -696,9 +712,56 @@ SymbolMorph.prototype.renderSymbolFullScreen = function (ctx, color) {
ctx.fill();
};
SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
// draw two arrows pointing diagonally inwards
SymbolMorph.prototype.renderSymbolGrow = function (ctx, color) {
var h = this.size,
width = this.symbolWidth(),
c = width / 2,
off = width / 20,
w = width / 3;
function arrows() {
ctx.strokeStyle = color.toString();
ctx.lineWidth = width / 7;
ctx.beginPath();
ctx.moveTo(c - off * 3, c + off * 3);
ctx.lineTo(off * 2, h - off * 2);
ctx.stroke();
ctx.strokeStyle = color.toString();
ctx.lineWidth = width / 7;
ctx.beginPath();
ctx.moveTo(c + off * 3 , c - off * 3);
ctx.lineTo(h - off * 2, off * 2);
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(0, h);
ctx.lineTo(0, h - w);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(h, 0);
ctx.lineTo(h - w, 0);
ctx.lineTo(h, w);
ctx.closePath();
ctx.fill();
}
// draw four arrows pointing diagonally outwards
arrows();
ctx.translate(this.size, 0);
ctx.rotate(radians(90));
arrows();
};
SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
var h = this.size,
w = this.symbolWidth(),
c = w / 2,
off = w / 20;
@ -734,6 +797,51 @@ SymbolMorph.prototype.renderSymbolNormalScreen = function (ctx, color) {
ctx.fill();
};
SymbolMorph.prototype.renderSymbolShrink = function (ctx, color) {
// draw 4 arrows pointing diagonally inwards
var h = this.size,
w = this.symbolWidth(),
c = w / 2,
off = w / 20;
function arrows() {
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 8;
ctx.beginPath();
ctx.moveTo(c - off * 3, c + off * 3);
ctx.lineTo(off, h - off);
ctx.stroke();
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 8;
ctx.beginPath();
ctx.moveTo(c + off * 3, c - off * 3);
ctx.lineTo(h - off, off);
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(c + off * 2, c - off * 2);
ctx.lineTo(w - off, c - off * 2);
ctx.lineTo(c + off * 2, 0 + off);
ctx.closePath();
ctx.fill();
ctx.fillStyle = color.toString();
ctx.beginPath();
ctx.moveTo(c - off * 2, c + off * 2);
ctx.lineTo(0 + off, c + off * 2);
ctx.lineTo(c - off * 2, w - off);
ctx.closePath();
ctx.fill();
}
arrows();
ctx.translate(this.size, 0);
ctx.rotate(radians(90));
arrows();
};
SymbolMorph.prototype.renderSymbolSmallStage = function (ctx, color) {
// draw a stage toggling symbol
var w = this.symbolWidth(),
@ -2066,6 +2174,39 @@ SymbolMorph.prototype.renderSymbolList = function (ctx, color) {
ctx.fillRect(0, 0, w, h);
};
SymbolMorph.prototype.renderSymbolFlipHorizontal = function (ctx, color) {
var w = this.symbolWidth(),
h = this.size,
c = w / 2,
off = w / 15;
ctx.strokeStyle = color.toString();
ctx.lineWidth = w / 15;
ctx.beginPath();
ctx.moveTo(0 + off, h - off / 2);
ctx.lineTo(c - off * 1.2, h - off / 2);
ctx.lineTo(c - off * 1.2, off * 2);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = color.toString();
ctx.lineWidth = w / 15;
ctx.beginPath();
ctx.moveTo(w - off, h - off / 2);
ctx.lineTo(c + off * 1.2, h - off / 2);
ctx.lineTo(c + off * 1.2, off * 2);
ctx.closePath();
ctx.stroke();
ctx.fill();
};
SymbolMorph.prototype.renderSymbolFlipVertical = function (ctx, color) {
ctx.translate(0, this.size);
ctx.rotate(radians(-90));
this.renderSymbolFlipHorizontal(ctx, color);
};
/*
// register examples with the World demo menu
// comment out to shave off a millisecond loading speed ;-)