user defined custom block palettes, under construction

snap7
jmoenig 2021-07-21 16:41:17 +02:00
rodzic 5ede692be3
commit 7259be3f7d
8 zmienionych plików z 181 dodań i 51 usunięć

Wyświetl plik

@ -7,6 +7,7 @@
* single blocks palette option, thanks, Michael!
* web-serial support, thanks, Dariusz Dorożalski!
* hide custom helper blocks in palette
* user defined custom block palettes
* PWA, thanks, Joan and John, for pioneering this at Robolot and in Mircoblocks!
* **Notable Changes:**
* saved projects remember the last edited sprite
@ -28,6 +29,9 @@
* German
* Chinese, thanks, Simon!
### 2021-07-21
* user defined custom block palettes, under construction
### 2021-07-20
* threads, extensions: blocked xhr requests to from Snap! to s.b.e, thanks, Bernat!
* widgets, scenes, gui: custom category prompter

Wyświetl plik

@ -15,15 +15,15 @@
<meta name="msapplication-TileColor" content="#FFFFFF">
<script src="src/morphic.js?version=2021-07-09"></script>
<script src="src/symbols.js?version=2021-03-03"></script>
<script src="src/widgets.js?version=2021-07-20"></script>
<script src="src/widgets.js?version=2021-07-21"></script>
<script src="src/blocks.js?version=2021-07-05"></script>
<script src="src/threads.js?version=2021-07-20"></script>
<script src="src/objects.js?version=2021-07-16"></script>
<script src="src/scenes.js?version=2021-07-20"></script>
<script src="src/gui.js?version=2021-07-20"></script>
<script src="src/objects.js?version=2021-07-21"></script>
<script src="src/scenes.js?version=2021-07-21"></script>
<script src="src/gui.js?version=2021-07-21"></script>
<script src="src/paint.js?version=2021-07-05"></script>
<script src="src/lists.js?version=2021-07-19"></script>
<script src="src/byob.js?version=2021-07-16"></script>
<script src="src/byob.js?version=2021-07-21"></script>
<script src="src/tables.js?version=2021-05-07"></script>
<script src="src/sketch.js?version=2021-07-05"></script>
<script src="src/video.js?version=2019-06-27"></script>

Wyświetl plik

@ -160,7 +160,7 @@ CustomCommandBlockMorph, ToggleButtonMorph, DialMorph, SnapExtensions*/
// Global stuff ////////////////////////////////////////////////////////
modules.blocks = '2021-July-05';
modules.blocks = '2021-July-21';
var SyntaxElementMorph;
var BlockMorph;
@ -4273,7 +4273,7 @@ BlockMorph.prototype.drawMethodIcon = function (ctx) {
x = this.edge + this.labelPadding,
y = this.edge,
isNormal =
this.color === SpriteMorph.prototype.blockColor[this.category];
this.color === SpriteMorph.prototype.blockColorFor(this.category);
if (this.isPredicate) {
x = this.rounding;
@ -4486,7 +4486,7 @@ BlockMorph.prototype.fixBlockColor = function (nearestBlock, isForced) {
}
}
if (!nearest) { // top block
clr = SpriteMorph.prototype.blockColor[this.category];
clr = SpriteMorph.prototype.blockColorFor(this.category);
if (!this.color.eq(clr)) {
this.alternateBlockColor();
}
@ -4495,7 +4495,7 @@ BlockMorph.prototype.fixBlockColor = function (nearestBlock, isForced) {
this.alternateBlockColor();
}
} else if (this.category && !this.color.eq(
SpriteMorph.prototype.blockColor[this.category]
SpriteMorph.prototype.blockColorFor(this.category)
)) {
this.alternateBlockColor();
}
@ -4505,7 +4505,7 @@ BlockMorph.prototype.fixBlockColor = function (nearestBlock, isForced) {
};
BlockMorph.prototype.forceNormalColoring = function () {
var clr = SpriteMorph.prototype.blockColor[this.category];
var clr = SpriteMorph.prototype.blockColorFor(this.category);
this.setColor(clr);
this.setLabelColor(
WHITE,
@ -4516,7 +4516,7 @@ BlockMorph.prototype.forceNormalColoring = function () {
};
BlockMorph.prototype.alternateBlockColor = function () {
var clr = SpriteMorph.prototype.blockColor[this.category];
var clr = SpriteMorph.prototype.blockColorFor(this.category);
if (this.color.eq(clr)) {
this.setColor(
@ -4533,13 +4533,13 @@ BlockMorph.prototype.alternateBlockColor = function () {
BlockMorph.prototype.ghost = function () {
this.setColor(
SpriteMorph.prototype.blockColor[this.category].lighter(35)
SpriteMorph.prototype.blockColorFor(this.category).lighter(35)
);
};
BlockMorph.prototype.fixLabelColor = function () {
if (this.zebraContrast > 0 && this.category) {
var clr = SpriteMorph.prototype.blockColor[this.category];
var clr = SpriteMorph.prototype.blockColorFor(this.category);
if (this.color.eq(clr)) {
this.setLabelColor(
WHITE,

Wyświetl plik

@ -108,7 +108,7 @@ WatcherMorph, XML_Serializer, SnapTranslator, SnapExtensions*/
// Global stuff ////////////////////////////////////////////////////////
modules.byob = '2021-July-16';
modules.byob = '2021-July-21';
// Declarations
@ -1770,7 +1770,7 @@ BlockDialogMorph.prototype.openForChange = function (
pic,
preventTypeChange // <bool>
) {
var clr = SpriteMorph.prototype.blockColor[category];
var clr = SpriteMorph.prototype.blockColorFor(category);
this.key = 'changeABlock';
this.category = category;
this.blockType = type;
@ -1805,6 +1805,11 @@ BlockDialogMorph.prototype.createCategoryButtons = function () {
SpriteMorph.prototype.categories.forEach(cat =>
this.addCategoryButton(cat)
);
// to do: sort alphabetically
SpriteMorph.prototype.customCategories.forEach((color, name) =>
this.addCustomCategoryButton(name, color)
);
};
BlockDialogMorph.prototype.addCategoryButton = function (category) {
@ -1814,7 +1819,7 @@ BlockDialogMorph.prototype.addCategoryButton = function (category) {
IDE_Morph.prototype.frameColor.darker
(MorphicPreferences.isFlat ? 5 : 50
),
SpriteMorph.prototype.blockColor[category]
SpriteMorph.prototype.blockColorFor(category)
],
button;
@ -1856,31 +1861,82 @@ BlockDialogMorph.prototype.addCategoryButton = function (category) {
return button;
};
BlockDialogMorph.prototype.addCustomCategoryButton = function (category, clr) {
var labelWidth = 172,
colors = [
IDE_Morph.prototype.frameColor,
IDE_Morph.prototype.frameColor.darker
(MorphicPreferences.isFlat ? 5 : 50
),
clr
],
button;
button = new ToggleButtonMorph(
colors,
this, // this block dialog box is the target
() => {
this.category = category;
this.categories.children.forEach(each =>
each.refresh()
);
if (this.types) {
this.types.children.forEach(each =>
each.setColor(colors[2])
);
}
this.edit();
},
category, // UCase label
() => this.category === category, // query
null, // env
null, // hint
labelWidth, // minWidth
true // has preview
);
button.corner = 8;
button.padding = 0;
button.labelShadowOffset = new Point(-1, -1);
button.labelShadowColor = colors[1];
button.labelColor = IDE_Morph.prototype.buttonLabelColor;
if (MorphicPreferences.isFlat) {
button.labelPressColor = WHITE;
}
button.contrast = this.buttonContrast;
button.fixLayout();
button.refresh();
this.categories.add(button);
return button;
};
BlockDialogMorph.prototype.fixCategoriesLayout = function () {
var buttonWidth = this.categories.children[0].width(), // all the same
buttonHeight = this.categories.children[0].height(), // all the same
more = SpriteMorph.prototype.customCategories.size,
xPadding = 15,
yPadding = 2,
border = 10, // this.categories.border,
rows = Math.ceil((this.categories.children.length) / 2),
l = this.categories.left(),
t = this.categories.top(),
i = 0,
row,
col;
this.categories.children.forEach(button => {
i += 1;
this.categories.children.forEach((button, i) => {
if (i < 8) {
row = 1 + ((i - 1) % 4);
col = i < 5 ? 1 : 2;
row = i % 4;
col = Math.ceil((i + 1) / 4);
} else if (i < 10) {
row = 4;
col = 10 - i;
} else {
row = Math.ceil(i / 2);
col = 2 - (i % 2);
row = i - 5;
col = 1;
}
button.setPosition(new Point(
l + (col * xPadding + ((col - 1) * buttonWidth)),
t + (row * yPadding + ((row - 1) * buttonHeight) + border)
t + ((row + 1) * yPadding + (row * buttonHeight) + border) +
(i > 9 ? border / 2 : 0)
));
});
@ -1889,17 +1945,24 @@ BlockDialogMorph.prototype.fixCategoriesLayout = function () {
this.categories.border = 0;
this.categories.edge = 0;
}
this.categories.setExtent(new Point(
3 * xPadding + 2 * buttonWidth,
(rows + 1) * yPadding + rows * buttonHeight + 2 * border
));
this.categories.setWidth(
3 * xPadding + 2 * buttonWidth
);
this.categories.setHeight(
(5 + 1) * yPadding
+ 5 * buttonHeight
+ (more ? (more * (yPadding + buttonHeight) + border / 2) : 0)
+ 2 * border
);
};
// type radio buttons
BlockDialogMorph.prototype.createTypeButtons = function () {
var block,
clr = SpriteMorph.prototype.blockColor[this.category];
clr = SpriteMorph.prototype.blockColorFor(this.category);
block = new CommandBlockMorph();
@ -2657,7 +2720,7 @@ PrototypeHatBlockMorph.prototype.fixBlockColor = function (
this.alternateBlockColor();
}
} else if (this.category && !this.color.eq(
SpriteMorph.prototype.blockColor[this.category]
SpriteMorph.prototype.blockColorFor(this.category)
)) {
this.alternateBlockColor();
}
@ -3202,7 +3265,7 @@ InputSlotDialogMorph.prototype.init = function (
InputSlotDialogMorph.prototype.createTypeButtons = function () {
var block,
arrow,
clr = SpriteMorph.prototype.blockColor[this.category];
clr = SpriteMorph.prototype.blockColorFor(this.category);
block = new JaggedBlockMorph(localize('Title text'));

Wyświetl plik

@ -85,7 +85,7 @@ Animation, BoxMorph, BlockDialogMorph, RingMorph, Project, ZERO, BLACK*/
// Global stuff ////////////////////////////////////////////////////////
modules.gui = '2021-July-20';
modules.gui = '2021-July-21';
// Declarations
@ -1318,34 +1318,69 @@ IDE_Morph.prototype.createCategories = function () {
return button;
}
function addCustomCategoryButton(category, color) {
var labelWidth = 168,
colors = [
myself.frameColor,
myself.frameColor.darker(MorphicPreferences.isFlat ? 5 : 50),
color
],
button;
button = new ToggleButtonMorph(
colors,
myself, // the IDE is the target
categorySelectionAction(category),
category, // label
categoryQueryAction(category), // query
null, // env
null, // hint
labelWidth, // minWidth
true // has preview
);
button.corner = 8;
button.padding = 0;
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);
return button;
}
function fixCategoriesLayout() {
var buttonWidth = myself.categories.children[0].width(),
buttonHeight = myself.categories.children[0].height(),
more = SpriteMorph.prototype.customCategories.size,
border = 3,
rows = Math.ceil((myself.categories.children.length) / 2),
xPadding = (200 // myself.logo.width()
- border
- buttonWidth * 2) / 3,
yPadding = 2,
l = myself.categories.left(),
t = myself.categories.top(),
i = 0,
row,
col;
myself.categories.children.forEach(button => {
i += 1;
row = 1 + ((i - 1) % 4);
col = i < 5 ? 1 : 2;
myself.categories.children.forEach((button, i) => {
row = i < 8 ? i % 4 : i - 4;
col = (i < 4 || i > 7) ? 1 : 2;
button.setPosition(new Point(
l + (col * xPadding + ((col - 1) * buttonWidth)),
t + (row * yPadding + ((row - 1) * buttonHeight) + border)
t + ((row + 1) * yPadding + (row * buttonHeight) + border) +
(i > 7 ? border + 2 : 0)
));
});
myself.categories.setHeight(
(rows + 1) * yPadding
+ rows * buttonHeight
(4 + 1) * yPadding
+ 4 * buttonHeight
+ (more ? (more * (yPadding + buttonHeight) + border + 2) : 0)
+ 2 * border
);
}
@ -1355,6 +1390,12 @@ IDE_Morph.prototype.createCategories = function () {
addCategoryButton(cat);
}
});
// to do: sort alphabetically
SpriteMorph.prototype.customCategories.forEach((color, name) =>
addCustomCategoryButton(name, color)
);
fixCategoriesLayout();
this.add(this.categories);
};
@ -4886,7 +4927,7 @@ IDE_Morph.prototype.createNewCategory = function () {
).promptCategory(
"New Palette",
'Category name',
new Color(255, 255, 40),
new Color(0,214,126),
this.world(),
null, // pic
null // msg
@ -4894,7 +4935,16 @@ IDE_Morph.prototype.createNewCategory = function () {
};
IDE_Morph.prototype.addPaletteCategory = function (name, color) {
this.scene.customCategories.set(name, color);
SpriteMorph.prototype.customCategories.set(name, color);
this.createCategories();
this.createPaletteHandle();
this.categories.fixLayout();
this.fixLayout();
/*
this.flushBlocksCache();
this.currentSprite.palette(this.currentCategory);
this.refreshPalette(true);
*/
};
IDE_Morph.prototype.save = function () {

Wyświetl plik

@ -86,7 +86,7 @@ AlignmentMorph, Process, WorldMap, copyCanvas, useBlurredShadows*/
/*jshint esversion: 6*/
modules.objects = '2021-July-16';
modules.objects = '2021-July-21';
var SpriteMorph;
var StageMorph;
@ -162,6 +162,16 @@ SpriteMorph.prototype.blockColor = {
other: new Color(150, 150, 150)
};
SpriteMorph.prototype.customCategories = new Map(); // key: name, value: color
SpriteMorph.prototype.allCategories = function () {
return this.categories.concat(Array.from(this.customCategories.keys()));
};
SpriteMorph.prototype.blockColorFor = function (category) {
return this.blockColor[category] || this.customCategories.get(category);
};
SpriteMorph.prototype.paletteColor = new Color(55, 55, 55);
SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230);
SpriteMorph.prototype.sliderColor
@ -2246,7 +2256,7 @@ SpriteMorph.prototype.blockForSelector = function (selector, setDefaults) {
: info.type === 'hat' ? new HatBlockMorph()
: info.type === 'ring' ? new RingMorph()
: new ReporterBlockMorph(info.type === 'predicate');
block.color = this.blockColor[info.category];
block.color = this.blockColorFor(info.category);
block.category = info.category;
block.selector = migration ? migration.selector : selector;
if (contains(['reifyReporter', 'reifyPredicate'], block.selector)) {
@ -2897,7 +2907,7 @@ SpriteMorph.prototype.makeBlock = function () {
category = ide.currentCategory === 'unified' ?
ide.topVisibleCategoryInPalette()
: ide.currentCategory,
clr = SpriteMorph.prototype.blockColor[category],
clr = SpriteMorph.prototype.blockColorFor(category),
dlg;
dlg = new BlockDialogMorph(
null,
@ -3117,7 +3127,7 @@ SpriteMorph.prototype.freshPalette = function (category) {
if (category === 'unified') {
// In a Unified Palette custom blocks appear following each category,
// but there is only 1 make a block button (at the end).
blocks = this.categories.reduce((blocks, category) => {
blocks = this.allCategories().reduce((blocks, category) => {
let header = [ this.categoryText(category), '-' ],
primitives = this.getPrimitiveTemplates(category),
customs = this.customBlockTemplatesForCategory(category),

Wyświetl plik

@ -53,7 +53,7 @@ normalizeCanvas, SnapSerializer*/
// Global stuff ////////////////////////////////////////////////////////
modules.scenes = '2021-July-20';
modules.scenes = '2021-July-21';
// Projecct /////////////////////////////////////////////////////////
@ -117,7 +117,6 @@ function Scene(aStageMorph) {
this.globalVariables = aStageMorph ?
aStageMorph.globalVariables() : new VariableFrame();
this.stage = aStageMorph || new StageMorph(this.globalVariables);
this.customCategories = new Map(); // key: name, value: color
this.hasUnsavedEdits = false;
this.unifiedPalette = true;
@ -129,6 +128,7 @@ function Scene(aStageMorph) {
this.hiddenPrimitives = {};
this.codeMappings = {};
this.codeHeaders = {};
this.customCategories = new Map(); // key: name, value: color
// global settings (copied)
this.enableCodeMapping = false;
@ -191,6 +191,7 @@ Scene.prototype.captureGlobalSettings = function () {
this.useFlatLineEnds = SpriteMorph.prototype.useFlatLineEnds;
this.enableLiveCoding = Process.prototype.enableLiveCoding;
this.enableHyperOps = Process.prototype.enableHyperOps;
this.customCategories = SpriteMorph.prototype.customCategories;
};
Scene.prototype.applyGlobalSettings = function () {
@ -204,6 +205,7 @@ Scene.prototype.applyGlobalSettings = function () {
SpriteMorph.prototype.useFlatLineEnds = this.useFlatLineEnds;
Process.prototype.enableLiveCoding = this.enableLiveCoding;
Process.prototype.enableHyperOps = this.enableHyperOps;
SpriteMorph.prototype.customCategories = this.customCategories;
};
Scene.prototype.updateTrash = function () {

Wyświetl plik

@ -87,7 +87,7 @@ ScrollFrameMorph, MenuItemMorph, useBlurredShadows, getDocumentPositionOf*/
/*jshint esversion: 6*/
modules.widgets = '2021-July-20';
modules.widgets = '2021-July-21';
var PushButtonMorph;
var ToggleButtonMorph;
@ -1919,6 +1919,7 @@ DialogBoxMorph.prototype.promptCategory = function (
);
}
field.setWidth(160);
side = field.height() * 0.8;
picker.setExtent(new Point(side, side));
picker.setColor(color);