Skip to content

Commit

Permalink
tweak media import dialog
Browse files Browse the repository at this point in the history 
* make dialog resizable
* enable double-click on icons
* prevent error if no icon is selected
* prevent error if icon is dragged
* prevent error if icon is right-clicked / ctrl-clicked
* adjust background color
* adjust icon layout
  • Loading branch information
@jmoenig
jmoenig committed May 9, 2016
1 parent b98e732 commit 711b9a4
Showing 1 changed file with 108 additions and 65 deletions.
173 changes: 108 additions & 65 deletions gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2597,69 +2597,6 @@ IDE_Morph.prototype.projectMenu = function () {
};
}

function importMediaDialog(mediaType) {
var dialog = new DialogBoxMorph().withKey('import' + mediaType),
frame = new ScrollFrameMorph(),
size = 500,
padding = 4, x = padding, y = padding,
selectedIcon = null,
turtle = new SymbolMorph('turtle', 60),
items = myself.getMediaList(mediaType);

frame.padding = 6;
frame.setWidth(size);
frame.acceptsDrops = false;
frame.contents.acceptsDrops = false;
frame.setHeight(size);
frame.fixLayout = nop;

items.forEach(function (item) {
var url = myself.resourceURL(mediaType, item.file),
img = new Image();
var icon = new CostumeIconMorph(new Costume(turtle.image, item.name));
icon.setPosition(new Point(x, y));
icon.userMenu = null;
icon.action = function () {
if (selectedIcon === icon) return;
var prevSelected = selectedIcon;
selectedIcon = icon;
if (prevSelected) prevSelected.refresh();
};
icon.query = function () {
return icon === selectedIcon;
};
frame.addContents(icon);
x = icon.right() + padding;
if (x + icon.width() > frame.width()) {
x = padding;
y = icon.bottom() + padding;
}
img.onload = function () {
var canvas = newCanvas(new Point(img.width, img.height));
canvas.getContext('2d').drawImage(img, 0, 0);
icon.object = new Costume(canvas, item.name);
icon.rawImage = canvas;
icon.refresh();
};
img.src = url;
});

dialog.ok = function () {
myself.droppedImage(selectedIcon.rawImage, selectedIcon.labelString);
};

dialog.labelString = mediaType;
dialog.createLabel();
dialog.addBody(frame);
frame.drawNew();
dialog.addButton('ok', 'Import');
dialog.addButton('cancel', 'Cancel');
dialog.fixLayout();
dialog.drawNew();
dialog.popUp(world);
dialog.setCenter(world.center());
}

menu = new MenuMorph(this);
menu.addItem('Project notes...', 'editProjectNotes');
menu.addLine();
Expand Down Expand Up @@ -2704,7 +2641,9 @@ IDE_Morph.prototype.projectMenu = function () {

if (shiftClicked) {
menu.addItem(
localize('Export project...') + ' ' + localize('(in a new window)'),
localize(
'Export project...') + ' ' + localize('(in a new window)'
),
function () {
if (myself.projectName) {
myself.exportProject(myself.projectName, shiftClicked);
Expand Down Expand Up @@ -2801,7 +2740,7 @@ IDE_Morph.prototype.projectMenu = function () {
menu.addItem(
localize(graphicsName) + '...',
function () {
importMediaDialog(graphicsName);
myself.importMedia(graphicsName);
},
'Select a costume from the media library'
);
Expand Down Expand Up @@ -2881,6 +2820,110 @@ IDE_Morph.prototype.parseResourceFile = function (text) {
return items;
};

IDE_Morph.prototype.importMedia = function (mediaType) {
// open a dialog box letting the user browse available "built-in"
// costumes or backgrounds

var dialog = new DialogBoxMorph().withKey('import' + mediaType),
frame = new ScrollFrameMorph(),
selectedIcon = null,
turtle = new SymbolMorph('turtle', 60),
items = this.getMediaList(mediaType),
myself = this,
world = this.world(),
handle;

frame.acceptsDrops = false;
frame.contents.acceptsDrops = false;
frame.color = myself.groupColor;
frame.fixLayout = nop;
dialog.labelString = mediaType;
dialog.createLabel();
dialog.addBody(frame);
dialog.addButton('ok', 'Import');
dialog.addButton('cancel', 'Cancel');

dialog.ok = function () {
if (selectedIcon) {
myself.droppedImage(
selectedIcon.object.contents,
selectedIcon.labelString
);
}
};

dialog.fixLayout = function () {
var th = fontHeight(this.titleFontSize) + this.titlePadding * 2,
x = 0,
y = 0,
fp, fw;
this.buttons.fixLayout();
this.body.setPosition(this.position().add(new Point(
this.padding,
th + this.padding
)));
this.body.setExtent(new Point(
this.width() - this.padding * 2,
this.height() - this.padding * 3 - th - this.buttons.height()
));
fp = this.body.position();
fw = this.body.width();
frame.contents.children.forEach(function (icon) {
icon.setPosition(fp.add(new Point(x, y)));
x += icon.width();
if (x + icon.width() > fw) {
x = 0;
y += icon.height();
}
});
frame.contents.adjustBounds();
this.label.setCenter(this.center());
this.label.setTop(this.top() + (th - this.label.height()) / 2);
this.buttons.setCenter(this.center());
this.buttons.setBottom(this.bottom() - this.padding);
};

items.forEach(function (item) {
var url = myself.resourceURL(mediaType, item.file),
img = new Image(),
icon = new CostumeIconMorph(
new Costume(turtle.image, item.name)
);
icon.isDraggable = false;
icon.userMenu = nop;
icon.action = function () {
if (selectedIcon === icon) return;
var prevSelected = selectedIcon;
selectedIcon = icon;
if (prevSelected) prevSelected.refresh();
};
icon.doubleClickAction = dialog.ok;
icon.query = function () {
return icon === selectedIcon;
};
frame.addContents(icon);
img.onload = function () {
var canvas = newCanvas(new Point(img.width, img.height));
canvas.getContext('2d').drawImage(img, 0, 0);
icon.object = new Costume(canvas, item.name);
icon.refresh();
};
img.src = url;
});
dialog.popUp(world);
dialog.setExtent(new Point(390, 300));
dialog.setCenter(world.center());
dialog.drawNew();

handle = new HandleMorph(
dialog,
300,
280,
dialog.corner,
dialog.corner
);
};

// IDE_Morph menu actions

IDE_Morph.prototype.aboutSnap = function () {
Expand Down

0 comments on commit 711b9a4

Please sign in to comment.