kopia lustrzana https://github.com/backface/turtlestitch
524 wiersze
16 KiB
JavaScript
524 wiersze
16 KiB
JavaScript
// Force flat design
|
|
IDE_Morph.prototype.setDefaultDesign = IDE_Morph.prototype.setFlatDesign;
|
|
|
|
// change logo
|
|
IDE_Morph.prototype.originalCreateLogo = IDE_Morph.prototype.createLogo;
|
|
IDE_Morph.prototype.createLogo = function () {
|
|
this.originalCreateLogo();
|
|
if (MorphicPreferences.isFlat) {
|
|
this.logo.texture = 'stitchcode/stitchcode_logo_small.png';
|
|
} else {
|
|
this.logo.texture = 'stitchcode/stitchcode_logo_small_black.png';
|
|
}
|
|
this.logo.drawNew();
|
|
}
|
|
|
|
// add buttons
|
|
|
|
IDE_Morph.prototype.createControlBar = function () {
|
|
// assumes the logo has already been created
|
|
var padding = 5,
|
|
button,
|
|
stopButton,
|
|
pauseButton,
|
|
startButton,
|
|
projectButton,
|
|
settingsButton,
|
|
stageSizeButton,
|
|
appModeButton,
|
|
cloudButton,
|
|
upstitchButton,
|
|
x,
|
|
colors = [
|
|
this.groupColor,
|
|
this.frameColor.darker(50),
|
|
this.frameColor.darker(50)
|
|
],
|
|
myself = this;
|
|
|
|
if (this.controlBar) {
|
|
this.controlBar.destroy();
|
|
}
|
|
|
|
this.controlBar = new Morph();
|
|
this.controlBar.color = this.frameColor;
|
|
this.controlBar.setHeight(this.logo.height()); // height is fixed
|
|
this.controlBar.mouseClickLeft = function () {
|
|
this.world().fillPage();
|
|
};
|
|
this.add(this.controlBar);
|
|
|
|
//smallStageButton
|
|
button = new ToggleButtonMorph(
|
|
null, //colors,
|
|
myself, // the IDE is the target
|
|
'toggleStageSize',
|
|
[
|
|
new SymbolMorph('smallStage', 14),
|
|
new SymbolMorph('normalStage', 14)
|
|
],
|
|
function () { // query
|
|
return myself.isSmallStage;
|
|
}
|
|
);
|
|
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'stage size\nsmall & normal';
|
|
button.fixLayout();
|
|
button.refresh();
|
|
stageSizeButton = button;
|
|
this.controlBar.add(stageSizeButton);
|
|
this.controlBar.stageSizeButton = button; // for refreshing
|
|
|
|
//appModeButton
|
|
button = new ToggleButtonMorph(
|
|
null, //colors,
|
|
myself, // the IDE is the target
|
|
'toggleAppMode',
|
|
[
|
|
new SymbolMorph('fullScreen', 14),
|
|
new SymbolMorph('normalScreen', 14)
|
|
],
|
|
function () { // query
|
|
return myself.isAppMode;
|
|
}
|
|
);
|
|
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'app & edit\nmodes';
|
|
button.fixLayout();
|
|
button.refresh();
|
|
appModeButton = button;
|
|
this.controlBar.add(appModeButton);
|
|
this.controlBar.appModeButton = appModeButton; // for refreshing
|
|
|
|
// upload StitchButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'uploadStitches',
|
|
new SymbolMorph('arrowUp', 14)
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'stop\nevery-\nthing';
|
|
button.fixLayout();
|
|
upstitchButton = button;
|
|
this.controlBar.add(upstitchButton);
|
|
|
|
|
|
// stopButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'stopAllScripts',
|
|
new SymbolMorph('octagon', 14)
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = new Color(200, 0, 0);
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'stop\nevery-\nthing';
|
|
button.fixLayout();
|
|
stopButton = button;
|
|
this.controlBar.add(stopButton);
|
|
|
|
//pauseButton
|
|
button = new ToggleButtonMorph(
|
|
null, //colors,
|
|
myself, // the IDE is the target
|
|
'togglePauseResume',
|
|
[
|
|
new SymbolMorph('pause', 12),
|
|
new SymbolMorph('pointRight', 14)
|
|
],
|
|
function () { // query
|
|
return myself.isPaused();
|
|
}
|
|
);
|
|
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = new Color(255, 220, 0);
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'pause/resume\nall scripts';
|
|
button.fixLayout();
|
|
button.refresh();
|
|
pauseButton = button;
|
|
this.controlBar.add(pauseButton);
|
|
this.controlBar.pauseButton = pauseButton; // for refreshing
|
|
|
|
// startButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'pressStart',
|
|
new SymbolMorph('flag', 14)
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = new Color(0, 200, 0);
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'start green\nflag scripts';
|
|
button.fixLayout();
|
|
startButton = button;
|
|
this.controlBar.add(startButton);
|
|
this.controlBar.startButton = startButton;
|
|
|
|
// projectButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'projectMenu',
|
|
new SymbolMorph('file', 14)
|
|
//'\u270E'
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'open, save, & annotate project';
|
|
button.fixLayout();
|
|
projectButton = button;
|
|
this.controlBar.add(projectButton);
|
|
this.controlBar.projectButton = projectButton; // for menu positioning
|
|
|
|
// settingsButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'settingsMenu',
|
|
new SymbolMorph('gears', 14)
|
|
//'\u2699'
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'edit settings';
|
|
button.fixLayout();
|
|
settingsButton = button;
|
|
this.controlBar.add(settingsButton);
|
|
this.controlBar.settingsButton = settingsButton; // for menu positioning
|
|
|
|
// cloudButton
|
|
button = new PushButtonMorph(
|
|
this,
|
|
'cloudMenu',
|
|
new SymbolMorph('cloud', 11)
|
|
);
|
|
button.corner = 12;
|
|
button.color = colors[0];
|
|
button.highlightColor = colors[1];
|
|
button.pressColor = colors[2];
|
|
button.labelMinExtent = new Point(36, 18);
|
|
button.padding = 0;
|
|
button.labelShadowOffset = new Point(-1, -1);
|
|
button.labelShadowColor = colors[1];
|
|
button.labelColor = this.buttonLabelColor;
|
|
button.contrast = this.buttonContrast;
|
|
button.drawNew();
|
|
// button.hint = 'cloud operations';
|
|
button.fixLayout();
|
|
cloudButton = button;
|
|
this.controlBar.add(cloudButton);
|
|
this.controlBar.cloudButton = cloudButton; // for menu positioning
|
|
|
|
this.controlBar.fixLayout = function () {
|
|
x = this.right() - padding;
|
|
[stopButton, pauseButton, startButton].forEach(
|
|
function (button) {
|
|
button.setCenter(myself.controlBar.center());
|
|
button.setRight(x);
|
|
x -= button.width();
|
|
x -= padding;
|
|
}
|
|
);
|
|
|
|
x = Math.min(
|
|
startButton.left() - (3 * padding + 2 * stageSizeButton.width()),
|
|
myself.right() - StageMorph.prototype.dimensions.x *
|
|
(myself.isSmallStage ? myself.stageRatio : 1)
|
|
);
|
|
[stageSizeButton, appModeButton].forEach(
|
|
function (button) {
|
|
x += padding;
|
|
button.setCenter(myself.controlBar.center());
|
|
button.setLeft(x);
|
|
x += button.width();
|
|
}
|
|
);
|
|
|
|
|
|
upstitchButton.setCenter(myself.controlBar.center());
|
|
upstitchButton.setRight(stageSizeButton.left() - padding);
|
|
|
|
settingsButton.setCenter(myself.controlBar.center());
|
|
settingsButton.setLeft(this.left());
|
|
|
|
cloudButton.setCenter(myself.controlBar.center());
|
|
cloudButton.setRight(settingsButton.left() - padding);
|
|
|
|
projectButton.setCenter(myself.controlBar.center());
|
|
projectButton.setRight(cloudButton.left() - padding);
|
|
|
|
this.updateLabel();
|
|
};
|
|
|
|
this.controlBar.updateLabel = function () {
|
|
var suffix = myself.world().isDevMode ?
|
|
' - ' + localize('development mode') : '';
|
|
|
|
if (this.label) {
|
|
this.label.destroy();
|
|
}
|
|
if (myself.isAppMode) {
|
|
return;
|
|
}
|
|
|
|
this.label = new StringMorph(
|
|
(myself.projectName || localize('untitled')) + suffix,
|
|
14,
|
|
'sans-serif',
|
|
true,
|
|
false,
|
|
false,
|
|
MorphicPreferences.isFlat ? null : new Point(2, 1),
|
|
myself.frameColor.darker(myself.buttonContrast)
|
|
);
|
|
this.label.color = myself.buttonLabelColor;
|
|
this.label.drawNew();
|
|
this.add(this.label);
|
|
this.label.setCenter(this.center());
|
|
this.label.setLeft(this.settingsButton.right() + padding);
|
|
};
|
|
};
|
|
|
|
|
|
|
|
IDE_Morph.prototype.uploadStitches = function () {
|
|
tStitch.upload();
|
|
};
|
|
|
|
|
|
|
|
ProjectDialogMorph.prototype.getExamplesProjectList = function () {
|
|
var dir,
|
|
projects = [];
|
|
|
|
//dir = this.ide.getURL('http://snap.berkeley.edu/snapsource/Examples/');
|
|
dir = this.ide.getURL(tStitch.getBaseURL() + '/stitchcode/examples/');
|
|
dir.split('\n').forEach(
|
|
function (line) {
|
|
var startIdx = line.search(new RegExp('href=".*xml"')),
|
|
endIdx,
|
|
name,
|
|
dta;
|
|
if (startIdx > 0) {
|
|
endIdx = line.search(new RegExp('.xml'));
|
|
name = line.substring(startIdx + 6, endIdx);
|
|
dta = {
|
|
name: name,
|
|
thumb: null,
|
|
notes: null
|
|
};
|
|
projects.push(dta);
|
|
}
|
|
}
|
|
);
|
|
projects.sort(function (x, y) {
|
|
return x.name < y.name ? -1 : 1;
|
|
});
|
|
return projects;
|
|
};
|
|
|
|
ProjectDialogMorph.prototype.setSource = function (source) {
|
|
var myself = this,
|
|
msg;
|
|
|
|
this.source = source; //this.task === 'save' ? 'local' : source;
|
|
this.srcBar.children.forEach(function (button) {
|
|
button.refresh();
|
|
});
|
|
switch (this.source) {
|
|
case 'cloud':
|
|
msg = myself.ide.showMessage('Updating\nproject list...');
|
|
this.projectList = [];
|
|
SnapCloud.getProjectList(
|
|
function (projectList) {
|
|
myself.installCloudProjectList(projectList);
|
|
msg.destroy();
|
|
},
|
|
function (err, lbl) {
|
|
msg.destroy();
|
|
myself.ide.cloudError().call(null, err, lbl);
|
|
}
|
|
);
|
|
return;
|
|
case 'examples':
|
|
this.projectList = this.getExamplesProjectList();
|
|
break;
|
|
case 'local':
|
|
this.projectList = this.getLocalProjectList();
|
|
break;
|
|
}
|
|
|
|
this.listField.destroy();
|
|
this.listField = new ListMorph(
|
|
this.projectList,
|
|
this.projectList.length > 0 ?
|
|
function (element) {
|
|
return element.name;
|
|
} : null,
|
|
null,
|
|
function () {myself.ok(); }
|
|
);
|
|
|
|
this.fixListFieldItemColors();
|
|
this.listField.fixLayout = nop;
|
|
this.listField.edge = InputFieldMorph.prototype.edge;
|
|
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') {
|
|
this.listField.action = function (item) {
|
|
var src, xml;
|
|
|
|
if (item === undefined) {return; }
|
|
if (myself.nameField) {
|
|
myself.nameField.setContents(item.name || '');
|
|
}
|
|
if (myself.task === 'open') {
|
|
|
|
src = localStorage['-snap-project-' + item.name];
|
|
xml = myself.ide.serializer.parse(src);
|
|
|
|
myself.notesText.text = xml.childNamed('notes').contents
|
|
|| '';
|
|
myself.notesText.drawNew();
|
|
myself.notesField.contents.adjustBounds();
|
|
myself.preview.texture = xml.childNamed('thumbnail').contents
|
|
|| null;
|
|
myself.preview.cachedTexture = null;
|
|
myself.preview.drawNew();
|
|
}
|
|
myself.edit();
|
|
};
|
|
} else { // 'examples', 'cloud' is initialized elsewhere
|
|
this.listField.action = function (item) {
|
|
var src, xml;
|
|
if (item === undefined) {return; }
|
|
if (myself.nameField) {
|
|
myself.nameField.setContents(item.name || '');
|
|
}
|
|
src = myself.ide.getURL(
|
|
// 'http://snap.berkeley.edu/snapsource/Examples/' +
|
|
tStitch.getBaseURL() + 'stitchcode/examples/' +
|
|
item.name + '.xml'
|
|
);
|
|
|
|
xml = myself.ide.serializer.parse(src);
|
|
myself.notesText.text = xml.childNamed('notes').contents
|
|
|| '';
|
|
myself.notesText.drawNew();
|
|
myself.notesField.contents.adjustBounds();
|
|
myself.preview.texture = xml.childNamed('thumbnail').contents
|
|
|| null;
|
|
myself.preview.cachedTexture = null;
|
|
myself.preview.drawNew();
|
|
myself.edit();
|
|
};
|
|
}
|
|
this.body.add(this.listField);
|
|
this.shareButton.hide();
|
|
this.unshareButton.hide();
|
|
if (this.source === 'local') {
|
|
this.deleteButton.show();
|
|
} else { // examples
|
|
this.deleteButton.hide();
|
|
}
|
|
this.buttons.fixLayout();
|
|
this.fixLayout();
|
|
if (this.task === 'open') {
|
|
this.clearDetails();
|
|
}
|
|
};
|
|
|
|
ProjectDialogMorph.prototype.openProject = function () {
|
|
var proj = this.listField.selected, src;
|
|
if (!proj) {return; }
|
|
this.ide.source = this.source;
|
|
if (this.source === 'cloud') {
|
|
this.openCloudProject(proj);
|
|
} else if (this.source === 'examples') {
|
|
src = this.ide.getURL(tStitch.getBaseURL() + 'stitchcode/examples/' + proj.name + '.xml');
|
|
this.ide.openProjectString(src);
|
|
this.destroy();
|
|
} else { // 'local'
|
|
this.ide.openProject(proj.name);
|
|
this.destroy();
|
|
}
|
|
};
|