mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 16:15:41 +01:00
Add a reset sample button
This commit is contained in:
Alex Dima
parent
72321822f4
commit
483a447093
1 changed files with 135 additions and 131 deletions
266
test/index.html
266
test/index.html
|
|
@ -8,6 +8,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h2>Monaco Editor TypeScript test page</h2>
|
<h2>Monaco Editor TypeScript test page</h2>
|
||||||
|
<button id="resetBtn">Reset Sample</button>
|
||||||
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
|
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -33,142 +34,141 @@
|
||||||
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
|
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let text = localStorage.getItem("code")
|
function getDefaultCode() {
|
||||||
if (!text) {
|
return [
|
||||||
text = [
|
'/* Game of Life',
|
||||||
'/* Game of Life',
|
' * Implemented in TypeScript',
|
||||||
' * Implemented in TypeScript',
|
' * To learn more about TypeScript, please visit http://www.typescriptlang.org/',
|
||||||
' * To learn more about TypeScript, please visit http://www.typescriptlang.org/',
|
' */',
|
||||||
' */',
|
'',
|
||||||
'',
|
'module Conway {',
|
||||||
'module Conway {',
|
'',
|
||||||
'',
|
' export class Cell {',
|
||||||
' export class Cell {',
|
' public row: number;',
|
||||||
' public row: number;',
|
' public col: number;',
|
||||||
' public col: number;',
|
' public live: boolean;',
|
||||||
' public live: boolean;',
|
'',
|
||||||
'',
|
' constructor(row: number, col: number, live: boolean) {',
|
||||||
' constructor(row: number, col: number, live: boolean) {',
|
' this.row = row;',
|
||||||
' this.row = row;',
|
' this.col = col;',
|
||||||
' this.col = col;',
|
' this.live = live',
|
||||||
' this.live = live',
|
' }',
|
||||||
' }',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' export class GameOfLife {',
|
||||||
' export class GameOfLife {',
|
' private gridSize: number;',
|
||||||
' private gridSize: number;',
|
' private canvasSize: number;',
|
||||||
' private canvasSize: number;',
|
' private lineColor: string;',
|
||||||
' private lineColor: string;',
|
' private liveColor: string;',
|
||||||
' private liveColor: string;',
|
' private deadColor: string;',
|
||||||
' private deadColor: string;',
|
' private initialLifeProbability: number;',
|
||||||
' private initialLifeProbability: number;',
|
' private animationRate: number;',
|
||||||
' private animationRate: number;',
|
' private cellSize: number;',
|
||||||
' private cellSize: number;',
|
' private context: CanvasRenderingContext2D;',
|
||||||
' private context: CanvasRenderingContext2D;',
|
' private world;',
|
||||||
' private world;',
|
'',
|
||||||
'',
|
'',
|
||||||
'',
|
' constructor() {',
|
||||||
' constructor() {',
|
' this.gridSize = 50;',
|
||||||
' this.gridSize = 50;',
|
' this.canvasSize = 600;',
|
||||||
' this.canvasSize = 600;',
|
' this.lineColor = \'#cdcdcd\';',
|
||||||
' this.lineColor = \'#cdcdcd\';',
|
' this.liveColor = \'#666\';',
|
||||||
' this.liveColor = \'#666\';',
|
' this.deadColor = \'#eee\';',
|
||||||
' this.deadColor = \'#eee\';',
|
' this.initialLifeProbability = 0.5;',
|
||||||
' this.initialLifeProbability = 0.5;',
|
' this.animationRate = 60;',
|
||||||
' this.animationRate = 60;',
|
' this.cellSize = 0;',
|
||||||
' this.cellSize = 0;',
|
' this.world = this.createWorld();',
|
||||||
' this.world = this.createWorld();',
|
' this.circleOfLife();',
|
||||||
' this.circleOfLife();',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public createWorld() {',
|
||||||
' public createWorld() {',
|
' return this.travelWorld( (cell : Cell) => {',
|
||||||
' return this.travelWorld( (cell : Cell) => {',
|
' cell.live = Math.random() < this.initialLifeProbability;',
|
||||||
' cell.live = Math.random() < this.initialLifeProbability;',
|
' return cell;',
|
||||||
' return cell;',
|
' });',
|
||||||
' });',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public circleOfLife() : void {',
|
||||||
' public circleOfLife() : void {',
|
' this.world = this.travelWorld( (cell: Cell) => {',
|
||||||
' this.world = this.travelWorld( (cell: Cell) => {',
|
' cell = this.world[cell.row][cell.col];',
|
||||||
' cell = this.world[cell.row][cell.col];',
|
' this.draw(cell);',
|
||||||
' this.draw(cell);',
|
' return this.resolveNextGeneration(cell);',
|
||||||
' return this.resolveNextGeneration(cell);',
|
' });',
|
||||||
' });',
|
' setTimeout( () => {this.circleOfLife()}, this.animationRate);',
|
||||||
' setTimeout( () => {this.circleOfLife()}, this.animationRate);',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public resolveNextGeneration(cell : Cell) {',
|
||||||
' public resolveNextGeneration(cell : Cell) {',
|
' var count = this.countNeighbors(cell);',
|
||||||
' var count = this.countNeighbors(cell);',
|
' var newCell = new Cell(cell.row, cell.col, cell.live);',
|
||||||
' var newCell = new Cell(cell.row, cell.col, cell.live);',
|
' if(count < 2 || count > 3) newCell.live = false;',
|
||||||
' if(count < 2 || count > 3) newCell.live = false;',
|
' else if(count == 3) newCell.live = true;',
|
||||||
' else if(count == 3) newCell.live = true;',
|
' return newCell;',
|
||||||
' return newCell;',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public countNeighbors(cell : Cell) {',
|
||||||
' public countNeighbors(cell : Cell) {',
|
' var neighbors = 0;',
|
||||||
' var neighbors = 0;',
|
' for(var row = -1; row <=1; row++) {',
|
||||||
' for(var row = -1; row <=1; row++) {',
|
' for(var col = -1; col <= 1; col++) {',
|
||||||
' for(var col = -1; col <= 1; col++) {',
|
' if(row == 0 && col == 0) continue;',
|
||||||
' if(row == 0 && col == 0) continue;',
|
' if(this.isAlive(cell.row + row, cell.col + col)) {',
|
||||||
' if(this.isAlive(cell.row + row, cell.col + col)) {',
|
' neighbors++;',
|
||||||
' neighbors++;',
|
' }',
|
||||||
' }',
|
' }',
|
||||||
' }',
|
' }',
|
||||||
' }',
|
' return neighbors;',
|
||||||
' return neighbors;',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public isAlive(row : number, col : number) {',
|
||||||
' public isAlive(row : number, col : number) {',
|
' if(row < 0 || col < 0 || row >= this.gridSize || col >= this.gridSize) return false;',
|
||||||
' if(row < 0 || col < 0 || row >= this.gridSize || col >= this.gridSize) return false;',
|
' return this.world[row][col].live;',
|
||||||
' return this.world[row][col].live;',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public travelWorld(callback) {',
|
||||||
' public travelWorld(callback) {',
|
' var result = [];',
|
||||||
' var result = [];',
|
' for(var row = 0; row < this.gridSize; row++) {',
|
||||||
' for(var row = 0; row < this.gridSize; row++) {',
|
' var rowData = [];',
|
||||||
' var rowData = [];',
|
' for(var col = 0; col < this.gridSize; col++) {',
|
||||||
' for(var col = 0; col < this.gridSize; col++) {',
|
' rowData.push(callback(new Cell(row, col, false)));',
|
||||||
' rowData.push(callback(new Cell(row, col, false)));',
|
' }',
|
||||||
' }',
|
' result.push(rowData);',
|
||||||
' result.push(rowData);',
|
' }',
|
||||||
' }',
|
' return result;',
|
||||||
' return result;',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public draw(cell : Cell) {',
|
||||||
' public draw(cell : Cell) {',
|
' if(this.context == null) this.context = this.createDrawingContext();',
|
||||||
' if(this.context == null) this.context = this.createDrawingContext();',
|
' if(this.cellSize == 0) this.cellSize = this.canvasSize/this.gridSize;',
|
||||||
' if(this.cellSize == 0) this.cellSize = this.canvasSize/this.gridSize;',
|
'',
|
||||||
'',
|
' this.context.strokeStyle = this.lineColor;',
|
||||||
' this.context.strokeStyle = this.lineColor;',
|
' this.context.strokeRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
|
||||||
' this.context.strokeRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
|
' this.context.fillStyle = cell.live ? this.liveColor : this.deadColor;',
|
||||||
' this.context.fillStyle = cell.live ? this.liveColor : this.deadColor;',
|
' this.context.fillRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
|
||||||
' this.context.fillRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);',
|
' }',
|
||||||
' }',
|
'',
|
||||||
'',
|
' public createDrawingContext() {',
|
||||||
' public createDrawingContext() {',
|
' var canvas = <HTMLCanvasElement> document.getElementById(\'conway-canvas\');',
|
||||||
' var canvas = <HTMLCanvasElement> document.getElementById(\'conway-canvas\');',
|
' if(canvas == null) {',
|
||||||
' if(canvas == null) {',
|
' canvas = document.createElement(\'canvas\');',
|
||||||
' canvas = document.createElement(\'canvas\');',
|
' canvas.id = \'conway-canvas\';',
|
||||||
' canvas.id = \'conway-canvas\';',
|
' canvas.width = this.canvasSize;',
|
||||||
' canvas.width = this.canvasSize;',
|
' canvas.height = this.canvasSize;',
|
||||||
' canvas.height = this.canvasSize;',
|
' document.body.appendChild(canvas);',
|
||||||
' document.body.appendChild(canvas);',
|
' }',
|
||||||
' }',
|
' return canvas.getContext(\'2d\');',
|
||||||
' return canvas.getContext(\'2d\');',
|
' }',
|
||||||
' }',
|
' }',
|
||||||
' }',
|
'}',
|
||||||
'}',
|
'',
|
||||||
'',
|
'var game = new Conway.GameOfLife();',
|
||||||
'var game = new Conway.GameOfLife();',
|
].join('\n');
|
||||||
].join('\n');
|
|
||||||
}
|
}
|
||||||
require([
|
require([
|
||||||
'vs/basic-languages/monaco.contribution',
|
'vs/basic-languages/monaco.contribution',
|
||||||
'vs/language/typescript/monaco.contribution'
|
'vs/language/typescript/monaco.contribution'
|
||||||
], function() {
|
], () => {
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||||
value: text,
|
value: localStorage.getItem("code") || getDefaultCode(),
|
||||||
language: 'typescript',
|
language: 'typescript',
|
||||||
lightbulb: { enabled: true }
|
lightbulb: { enabled: true }
|
||||||
});
|
});
|
||||||
|
|
@ -176,7 +176,11 @@
|
||||||
editor.onDidChangeModelContent(() => {
|
editor.onDidChangeModelContent(() => {
|
||||||
const code = editor.getModel().getValue()
|
const code = editor.getModel().getValue()
|
||||||
localStorage.setItem("code", code)
|
localStorage.setItem("code", code)
|
||||||
})
|
});
|
||||||
|
|
||||||
|
document.getElementById('resetBtn').onclick = () => {
|
||||||
|
editor.setValue(getDefaultCode());
|
||||||
|
};
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue