git @ Cat's Eye Technologies yoob.js / 0413da9
Fix stack demo to use Tape. Remove yoob.Stack and its view. Chris Pressey 9 years ago
6 changed file(s) with 47 addition(s) and 174 deletion(s). Raw diff Collapse all Expand all
+4
-0
HISTORY.markdown less more
2222
2323 `yoob.Tape` no longer contains "built in canvas view"; these methods
2424 have been moved to a new `yoob.TapeCanvasView` class.
25
26 `yoob.Tape` has been given `pop()` and `push()` methods to allow it to
27 be used as a stack. `yoob.Stack` and `yoob.StackHTMLView` have been
28 removed.
2529
2630 * version 0.10
2731
+3
-7
README.markdown less more
139139
140140 * `yoob.Tape`, in `yoob/tape.js`
141141
142 A (theoretically) unbounded tape, like you'd find on a Turing machine,
143 optionally associated with a `<canvas>` on which it is depicted.
144
145 * `yoob.Stack`, in `yoob/stack.js`
146
147 An object implementing a push-down, first-in-first-out stack of values,
148 optionally associated with a `<canvas>` on which it is depicted.
142 A (theoretically) unbounded tape, like you'd find on a Turing machine.
143 It can also be used as a push-down, first-in-first-out stack of values,
144 like you'd find on a push-down automaton.
149145
150146 * `yoob.Tree`, in `yoob/tree.js`
151147
+39
-17
eg/stack.html less more
00 <!DOCTYPE html>
11 <head>
22 <meta charset="utf-8">
3 <title>yoob.Stack Demo</title>
4 <script src="../src/yoob/stack.js"></script>
3 <title>Using yoob.Tape as a Stack Demo</title>
4 <script src="../src/yoob/tape.js"></script>
5 <script src="../src/yoob/cursor.js"></script>
6 <script src="../src/yoob/tape-canvas-view.js"></script>
7 <script src="../src/yoob/tape-html-view.js"></script>
58 <style>
6 #canvas { border: 1px solid blue; }
9 #canvas_view { border: 1px solid blue; }
10 #html_view { border: 1px solid red; font-size: 20px; }
711 </style>
812 </head>
913 <body>
1014
11 <h1>yoob.Stack Demo</h1>
15 <h1>Using yoob.Tape as a Stack Demo</h1>
16
17 <canvas id="canvas_view" width="400" height="40">
18 Your browser doesn't support displaying an HTML5 canvas.
19 </canvas>
20
21 <pre id="html_view"></pre>
1222
1323 <button id="push_0">Push 0</button>
1424 <button id="push_1">Push 1</button>
1525 <button id="pop">Pop</button>
16 <br/>
17
18 <canvas id="canvas" width="40" height="400">
19 Your browser doesn't support displaying an HTML5 canvas.
20 </canvas>
2126
2227 </body>
2328 <script>
24 var canvas = document.getElementById('canvas');
25 var stack = new yoob.Stack();
29 var tos = new yoob.Cursor().init();
30 var stack = new yoob.Tape().init({ cursors: [tos] });
31
32 var canvasView = new yoob.TapeCanvasView().init({
33 tape: stack,
34 canvas: document.getElementById('canvas_view'),
35 cellWidth: 20,
36 cellHeight: 20
37 });
38
39 var htmlView = new yoob.TapeHTMLView().init({
40 tape: stack,
41 element: document.getElementById('html_view')
42 });
2643
2744 document.getElementById('push_0').onclick = function(e) {
28 stack.push("0");
29 stack.drawCanvas(canvas, undefined, 20);
45 stack.push("0");
46 canvasView.draw();
47 htmlView.draw();
3048 };
3149
3250 document.getElementById('push_1').onclick = function(e) {
33 stack.push("1");
34 stack.drawCanvas(canvas, undefined, 20);
51 stack.push("1");
52 canvasView.draw();
53 htmlView.draw();
3554 };
3655
3756 document.getElementById('pop').onclick = function(e) {
38 alert(stack.pop());
39 stack.drawCanvas(canvas, undefined, 20);
57 var v = stack.pop();
58 v = (v === undefined ? "Stack underflow" : v);
59 alert(v);
60 canvasView.draw();
61 htmlView.draw();
4062 };
4163 </script>
+0
-53
src/yoob/stack-html-view.js less more
0 /*
1 * This file is part of yoob.js version 0.10
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * A view (in the MVC sense) for depicting a yoob.Stack (-compatible)
9 * object onto any DOM element that supports innerHTML.
10 */
11 yoob.StackHTMLView = function() {
12 this.init = function(cfg) {
13 this.stack = cfg.stack;
14 this.element = cfg.element;
15 return this;
16 };
17
18 /*** Chainable setters ***/
19
20 this.setStack = function(stack) {
21 this.stack = stack;
22 return this;
23 };
24
25 /*
26 * For compatibility with PlayfieldCanvasView. Sets the font size.
27 */
28 this.setCellDimensions = function(cellWidth, cellHeight) {
29 this.element.style.fontSize = cellHeight + "px";
30 return this;
31 };
32
33 /*
34 * Convert Stack values to HTML. Override to customize appearance.
35 */
36 this.render = function(value) {
37 if (value === undefined) return ' ';
38 return value;
39 };
40
41 /*
42 * Render the stack, as HTML, on the DOM element.
43 */
44 this.draw = function() {
45
46 var text = "";
47 this.stack.foreach(function(pos, value) {
48 text += this.render(value) + "<br/>";
49 });
50 this.element.innerHTML = text;
51 };
52 };
+0
-96
src/yoob/stack.js less more
0 /*
1 * This file is part of yoob.js version 0.7
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * A (theoretically) unbounded first-in first-out stack.
9 */
10 yoob.Stack = function() {
11 this._store = {};
12 this._top = 0;
13
14 this.pop = function() {
15 if (this._top === 0) {
16 return undefined;
17 }
18 var result = this._store[this._top];
19 this._top -= 1;
20 return result;
21 };
22
23 this.push = function(value) {
24 this._top += 1;
25 this._store[this._top] = value;
26 };
27
28 this.size = function() {
29 return this._top;
30 };
31
32 /*
33 * Iterate over every value on the stack, top to bottom.
34 * fun is a callback which takes two parameters:
35 * position (0 === top of stack) and value.
36 */
37 this.foreach = function(fun) {
38 for (var pos = this._top; pos > 0; pos--) {
39 fun(this._top - pos, this._store[pos]);
40 }
41 };
42
43 /*
44 * Draws elements of the Stack in a drawing context.
45 * x and y are canvas coordinates, and width and height
46 * are canvas units of measure.
47 * The default implementation just renders them as text,
48 * in black.
49 * Override if you wish to draw them differently.
50 */
51 this.drawElement = function(ctx, x, y, cellWidth, cellHeight, elem) {
52 ctx.fillStyle = "black";
53 ctx.fillText(elem.toString(), x, y);
54 };
55
56 /*
57 * Draws the Stack in a drawing context.
58 * cellWidth and cellHeight are canvas units of measure for each cell.
59 */
60 this.drawContext = function(ctx, cellWidth, cellHeight) {
61 var $this = this;
62 this.foreach(function (pos, elem) {
63 $this.drawElement(ctx, 0, pos * cellHeight,
64 cellWidth, cellHeight, elem);
65 });
66 };
67
68 /*
69 * Draws the Stack on a canvas element.
70 * Resizes the canvas to the needed dimensions.
71 * cellWidth and cellHeight are canvas units of measure for each cell.
72 */
73 this.drawCanvas = function(canvas, cellWidth, cellHeight) {
74 var ctx = canvas.getContext('2d');
75
76 var width = 1;
77 var height = this._top;
78
79 if (cellWidth === undefined) {
80 ctx.textBaseline = "top";
81 ctx.font = cellHeight + "px monospace";
82 cellWidth = ctx.measureText("@").width;
83 }
84
85 canvas.width = width * cellWidth;
86 canvas.height = height * cellHeight;
87
88 ctx.clearRect(0, 0, canvas.width, canvas.height);
89
90 ctx.textBaseline = "top";
91 ctx.font = cellHeight + "px monospace";
92
93 this.drawContext(ctx, cellWidth, cellHeight);
94 };
95 };
+1
-1
src/yoob/tape.js less more
132132
133133 this.push = function(value) {
134134 var cursor = this.cursors[0];
135 this.put(cursor.getX(), value);
135136 cursor.setX(cursor.getX() + 1);
136 this.put(cursor.getX(), value);
137137 return this;
138138 };
139139 };