', {
198 | title: "FSM: " + this.model.get('label')
199 | }).appendTo('html > body');
200 | const pdiv = $('
').appendTo(div);
201 | const graph = this.model.fsmgraph;
202 | const paper = new joint.dia.Paper({
203 | el: pdiv,
204 | model: graph
205 | });
206 | // to visualize the cells
207 | graph.resetCells(graph.getCells());
208 | // lazy layout
209 | if (!graph.get('laid_out')) {
210 | joint.layout.DirectedGraph.layout(graph, {
211 | dagre: dagre,
212 | graphlib: graphlib
213 | });
214 | graph.set('laid_out', true);
215 | }
216 | // auto-resizing
217 | paper.listenTo(graph, 'change:position', (elem) => {
218 | paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });
219 | });
220 | paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });
221 | this.paper.trigger('open:fsm', div, () => {
222 | paper.remove();
223 | div.remove();
224 | });
225 | return false;
226 | }
227 | });
228 |
229 |
--------------------------------------------------------------------------------
/src/cells/gates.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import * as joint from 'jointjs';
4 | import { Gate, GateView } from './base.mjs';
5 | import * as help from '../help.mjs';
6 | import { Vector3vl } from '3vl';
7 |
8 | const and_path = "M19 0v32h16c9 0 16-7 16-16S44 0 35 0H20z";
9 | const or_path = "M14.3 0l1.6 2s4.5 5.6 4.5 14s-4.5 14-4.5 14l-1.6 2H28c3.8 0 16.6-.5 25-16h0A28 28 0 0028 0H16.8z";
10 | const buf_path = "M18-2v36l2-1 32-17h0L20-1z";
11 | const xor_arc_path = "M6.8-1.2 10 2.7S14.2 8 14.2 16S10 29.3 10 29.3l-3.2 3.9H10l1.7-2.4s4.8-6 4.8-14.8c0-8.9-4.8-14.8-4.8-14.8l-1.7-2.4z";
12 |
13 | const xor_arc_path_markup = {
14 | tagName: 'path',
15 | selector: 'xor_arc',
16 | attributes: {
17 | 'fill': "#000",
18 | 'd': xor_arc_path
19 | }
20 | };
21 |
22 | const neg_markup = {
23 | tagName: 'circle',
24 | className: 'body',
25 | selector: 'neg_bubble',
26 | attributes: {
27 | 'stroke': "#000",
28 | 'stroke-width': '2px',
29 | 'cx': 56,
30 | 'cy': 16,
31 | 'r': 4
32 | }
33 | };
34 |
35 | function gateMarkup(children = []) {
36 | return {
37 | tagName: 'g',
38 | selector: 'body',
39 | children: [
40 | {
41 | tagName: 'path',
42 | className: 'body gate',
43 | selector: 'gate'
44 | }
45 | ].concat(children)
46 | }
47 | }
48 |
49 | // base class for gates
50 | export const GateSVG = Gate.define('GateSVG', {
51 | /* default properties */
52 | bits: 1,
53 |
54 | size: { width: 60, height: 32 },
55 | ports: {
56 | groups: {
57 | 'in': { position: { name: 'left', args: { dx: 30 } }, attrs: { wire: { x2: -50 }, port: { refX: -50 } }, z: -1 },
58 | 'out': { position: { name: 'right', args: { dx: -30 } }, attrs: { wire: { x2: 50 }, port: { refX: 50 } }, z: -1 }
59 | }
60 | }
61 | }, {
62 | markup: Gate.prototype.markup.concat([gateMarkup()]),
63 | _gateParams: Gate.prototype._gateParams.concat(['bits'])
64 | });
65 |
66 | // Single-input gate model
67 | export const Gate11 = GateSVG.define('Gate11', {}, {
68 | initialize() {
69 | const bits = this.get('bits');
70 | this.get('ports').items = [
71 | { id: 'in', group: 'in', dir: 'in', bits: bits },
72 | { id: 'out', group: 'out', dir: 'out', bits: bits }
73 | ];
74 |
75 | GateSVG.prototype.initialize.apply(this, arguments);
76 |
77 | this.on('change:bits', (_, bits) => {
78 | this._setPortsBits({ in: bits, out: bits });
79 | });
80 | }
81 | });
82 |
83 | // Multi-input gate model
84 | export const GateX1 = GateSVG.define('GateX1', {
85 | /* default properties */
86 | inputs: 2,
87 |
88 | attrs: {
89 | gate: {
90 | 'vector-effect': 'non-scaling-stroke'
91 | },
92 | xor_arc: {
93 | 'vector-effect': 'non-scaling-stroke'
94 | },
95 | neg_bubble: {
96 | 'vector-effect': 'non-scaling-stroke'
97 | }
98 | }
99 | }, {
100 | initialize() {
101 | const bits = this.get('bits');
102 | const inputs = this.get('inputs');
103 |
104 | const ports = [];
105 | for (let i = 1; i <= inputs; i++)
106 | ports.push({ id: 'in' + i, group: 'in', dir: 'in', bits: bits });
107 | ports.push({ id: 'out', group: 'out', dir: 'out', bits: bits });
108 | this.get('ports').items = ports;
109 | const scaling = inputs / 2;
110 | this.set('size', { width: 60 * scaling, height: 32 * scaling });
111 | this.attr('body/transform', 'translate(-4, 0) scale('+scaling+')');
112 |
113 | this.prop('ports/groups/in/position/args/dx', 30 * scaling);
114 | this.prop('ports/groups/in/attrs/wire/x2', -30 * scaling - 20);
115 | this.prop('ports/groups/in/attrs/port/refX', -30 * scaling - 20);
116 | this.prop('ports/groups/out/position/args/dx', -30 * scaling);
117 | this.prop('ports/groups/out/attrs/wire/x2', 30 * scaling + 20);
118 | this.prop('ports/groups/out/attrs/port/refX', 30 * scaling + 20);
119 |
120 | GateSVG.prototype.initialize.apply(this, arguments);
121 |
122 | this.on('change:bits', (_, bits) => {
123 | const inputs = this.get('inputs');
124 | const param = { out: bits };
125 | for (let i = 1; i <= inputs; i++)
126 | param['in' + i] = bits;
127 | this._setPortsBits(param);
128 | });
129 | },
130 | operation(data) {
131 | let ret = data.in1;
132 | for (let i = 2; i <= this.get('inputs'); i++)
133 | ret = this.binoperation(ret, data['in' + i]);
134 | return { out: this.finoperation(ret) };
135 | },
136 | finoperation(val) {
137 | return val
138 | },
139 | _gateParams: GateSVG.prototype._gateParams.concat(['inputs']),
140 | _unsupportedPropChanges: GateSVG.prototype._unsupportedPropChanges.concat(['inputs']),
141 | _operationHelpers: GateSVG.prototype._operationHelpers.concat(['binoperation', 'finoperation'])
142 | });
143 |
144 | // Reducing gate model
145 | export const GateReduce = GateSVG.define('GateReduce', {}, {
146 | initialize() {
147 | const bits = this.get('bits');
148 | this.get('ports').items = [
149 | { id: 'in', group: 'in', dir: 'in', bits: bits },
150 | { id: 'out', group: 'out', dir: 'out', bits: 1 }
151 | ];
152 |
153 | GateSVG.prototype.initialize.apply(this, arguments);
154 |
155 | this.on('change:bits', (_, bits) => {
156 | this._setPortsBits({ in: bits });
157 | });
158 | }
159 | });
160 |
161 | // Repeater (buffer) gate model
162 | export const Repeater = Gate11.define('Repeater', {
163 | attrs: { gate: { d: buf_path }}
164 | }, {
165 | operation(data) {
166 | return { out: data.in };
167 | }
168 | });
169 | export const RepeaterView = GateView;
170 |
171 | // Not gate model
172 | export const Not = Gate11.define('Not', {
173 | attrs: { gate: { d: buf_path }}
174 | }, {
175 | operation(data) {
176 | return { out: data.in.not() };
177 | },
178 | markup: Gate.prototype.markup.concat([gateMarkup([neg_markup])]),
179 | });
180 | export const NotView = GateView;
181 |
182 | // Or gate model
183 | export const Or = GateX1.define('Or', {
184 | attrs: { gate: { d: or_path }}
185 | }, {
186 | binoperation(in1, in2) {
187 | return in1.or(in2);
188 | }
189 | });
190 | export const OrView = GateView;
191 |
192 | // And gate model
193 | export const And = GateX1.define('And', {
194 | attrs: { gate: { d: and_path }}
195 | }, {
196 | binoperation(in1, in2) {
197 | return in1.and(in2);
198 | }
199 | });
200 | export const AndView = GateView;
201 |
202 | // Nor gate model
203 | export const Nor = GateX1.define('Nor', {
204 | attrs: { gate: { d: or_path }}
205 | }, {
206 | binoperation(in1, in2) {
207 | return in1.or(in2);
208 | },
209 | finoperation(val) {
210 | return val.not();
211 | },
212 | markup: Gate.prototype.markup.concat([gateMarkup([neg_markup])]),
213 | });
214 | export const NorView = GateView;
215 |
216 | // Nand gate model
217 | export const Nand = GateX1.define('Nand', {
218 | attrs: { gate: { d: and_path }}
219 | }, {
220 | binoperation(in1, in2) {
221 | return in1.and(in2);
222 | },
223 | finoperation(val) {
224 | return val.not();
225 | },
226 | markup: Gate.prototype.markup.concat([gateMarkup([neg_markup])]),
227 | });
228 | export const NandView = GateView;
229 |
230 | // Xor gate model
231 | export const Xor = GateX1.define('Xor', {
232 | attrs: { gate: { d: or_path }}
233 | }, {
234 | binoperation(in1, in2) {
235 | return in1.xor(in2);
236 | },
237 | markup: Gate.prototype.markup.concat([gateMarkup([xor_arc_path_markup])]),
238 | });
239 | export const XorView = GateView;
240 |
241 | // Xnor gate model
242 | export const Xnor = GateX1.define('Xnor', {
243 | attrs: { gate: { d: or_path }}
244 | }, {
245 | binoperation(in1, in2) {
246 | return in1.xor(in2);
247 | },
248 | finoperation(val) {
249 | return val.not();
250 | },
251 | markup: Gate.prototype.markup.concat([gateMarkup([xor_arc_path_markup, neg_markup])]),
252 | });
253 | export const XnorView = GateView;
254 |
255 | // Reducing Or gate model
256 | export const OrReduce = GateReduce.define('OrReduce', {
257 | attrs: { gate: { d: or_path }}
258 | }, {
259 | operation(data) {
260 | return { out: data.in.reduceOr() };
261 | }
262 | });
263 | export const OrReduceView = GateView;
264 |
265 | // Reducing Nor gate model
266 | export const NorReduce = GateReduce.define('NorReduce', {
267 | attrs: { gate: { d: or_path }}
268 | }, {
269 | operation(data) {
270 | return { out: data.in.reduceNor() };
271 | },
272 | markup: GateReduce.prototype.markup.concat([neg_markup])
273 | });
274 | export const NorReduceView = GateView;
275 |
276 | // Reducing And gate model
277 | export const AndReduce = GateReduce.define('AndReduce', {
278 | attrs: { gate: { d: and_path }}
279 | }, {
280 | operation(data) {
281 | return { out: data.in.reduceAnd() };
282 | }
283 | });
284 | export const AndReduceView = GateView;
285 |
286 | // Reducing Nand gate model
287 | export const NandReduce = GateReduce.define('NandReduce', {
288 | attrs: { gate: { d: and_path }}
289 | }, {
290 | operation(data) {
291 | return { out: data.in.reduceNand() };
292 | },
293 | markup: Gate.prototype.markup.concat([gateMarkup([neg_markup])]),
294 | });
295 | export const NandReduceView = GateView;
296 |
297 | // Reducing Xor gate model
298 | export const XorReduce = GateReduce.define('XorReduce', {
299 | attrs: { gate: { d: or_path }}
300 | }, {
301 | operation(data) {
302 | return { out: data.in.reduceXor() };
303 | },
304 | markup: Gate.prototype.markup.concat([gateMarkup([xor_arc_path_markup])]),
305 | });
306 | export const XorReduceView = GateView;
307 |
308 | // Reducing Xnor gate model
309 | export const XnorReduce = GateReduce.define('XnorReduce', {
310 | attrs: { gate: { d: or_path }}
311 | }, {
312 | operation(data) {
313 | return { out: data.in.reduceXnor() };
314 | },
315 | markup: Gate.prototype.markup.concat([gateMarkup([xor_arc_path_markup, neg_markup])]),
316 | });
317 | export const XnorReduceView = GateView;
318 |
319 |
--------------------------------------------------------------------------------
/src/cells/mux.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import * as joint from 'jointjs';
4 | import _ from 'lodash';
5 | import { Gate, GateView, portGroupAttrs } from './base.mjs';
6 | import * as help from '../help.mjs';
7 | import { Vector3vl } from '3vl';
8 |
9 | // add offset of 30pt to account for the top selection port and oversized box at layout time
10 | const mux_pos_offset = 20;
11 | const mux_size_offset = 30;
12 |
13 | // Multiplexers
14 | export const GenMux = Gate.define('GenMux', {
15 | /* default properties */
16 | bits: { in: 1, sel: 1 },
17 |
18 | size: { width: 40, height: undefined },
19 | ports: {
20 | groups: {
21 | 'in2': {
22 | position: { name: 'top', args: { y: 5 } },
23 | attrs: _.merge({}, portGroupAttrs, {
24 | wire: { x2: 0, y2: -25 },
25 | port: { magnet: 'passive', refY: -25 },
26 | bits: { refDx: -5, refDy: 2, textAnchor: 'start' }
27 | }),
28 | z: -1
29 | }
30 | }
31 | },
32 | attrs: { label: { refDy: 8 } }
33 | }, {
34 | initialize() {
35 | const bits = this.get('bits');
36 | const ports = [
37 | { id: 'sel', group: 'in2', dir: 'in', bits: bits.sel },
38 | { id: 'out', group: 'out', dir: 'out', bits: bits.in }
39 | ];
40 |
41 | const ins = this.muxInputs(bits.sel);
42 | this.get('size').height = ins.length*16+8;
43 |
44 | const vpath = [
45 | [2, 0],
46 | [5, 5],
47 | [10, -5]
48 | ];
49 | const path = 'M' + vpath.map(l => l.join(' ')).join(' L');
50 |
51 | for (const [num, label] of ins.entries()) {
52 | const port = { id: 'in' + num, group: 'in', dir: 'in', bits: bits.in, decor: path };
53 | if (label) {
54 | port.portlabel = String(label);
55 | port.labelled = true;
56 | }
57 | ports.push(port);
58 | }
59 |
60 | this.get('ports').items = ports;
61 |
62 | Gate.prototype.initialize.apply(this, arguments);
63 |
64 | const drawBorder = (size) => this.attr(['body', 'points'],
65 | [[0,-5],[size.width,5],[size.width,size.height-5],[0,size.height+5]]
66 | .map(x => x.join(',')).join(' '));
67 | drawBorder(this.get('size'));
68 |
69 | this.on('change:size', (_, size) => drawBorder(size));
70 | },
71 | operation(data) {
72 | const i = this.muxInput(data.sel);
73 | if (i === undefined) return { out: Vector3vl.xes(this.get('bits').in) };
74 | return { out: data['in' + i] };
75 | },
76 | getLayoutSize() {
77 | const size = this.size();
78 | size.height += mux_size_offset;
79 | return size;
80 | },
81 | setLayoutPosition(position) {
82 | this.set('position', {
83 | x: position.x,
84 | y: position.y + mux_pos_offset
85 | });
86 | },
87 | getPortsPositions() {
88 | const positions = Gate.prototype.getPortsPositions.apply(this, arguments);
89 | const res = {};
90 | for (const id in positions) {
91 | res[id] = { ...positions[id] };
92 | res[id].y = res[id].y + mux_pos_offset;
93 | }
94 | return res;
95 | },
96 | markup: Gate.prototype.markup.concat([{
97 | tagName: 'polygon',
98 | className: 'body',
99 | selector: 'body'
100 | }
101 | ]),
102 | _gateParams: Gate.prototype._gateParams.concat(['bits']),
103 | _unsupportedPropChanges: Gate.prototype._unsupportedPropChanges.concat(['bits']),
104 | _operationHelpers: Gate.prototype._operationHelpers.concat(['muxInput'])
105 | });
106 | export const GenMuxView = GateView.extend({
107 | initialize() {
108 | this.ins = this.model.muxInputs(this.model.get('bits').sel);
109 | GateView.prototype.initialize.apply(this, arguments);
110 | },
111 | confirmUpdate(flags) {
112 | GateView.prototype.confirmUpdate.apply(this, arguments);
113 | if (this.hasFlag(flags, 'SIGNAL')) {
114 | this._updateMux(this.model.get('inputSignals'));
115 | }
116 | },
117 | render() {
118 | GateView.prototype.render.apply(this, arguments);
119 | this._updateMux(this.model.get('inputSignals'));
120 | },
121 | _updateMux(data) {
122 | const i = this.model.muxInput(data.sel);
123 | for (const num of this.ins.keys()) {
124 | this.$('[port=in' + num + '] path.decor').css('visibility', i == num ? 'visible' : 'hidden');
125 | }
126 | }
127 | });
128 |
129 | // Multiplexer with binary selection
130 | export const Mux = GenMux.define('Mux', {
131 | }, {
132 | muxInputs: n => Array(1 << n),
133 | muxInput: i => i.isFullyDefined ? i.toBigInt().toString() : undefined
134 | });
135 | export const MuxView = GenMuxView;
136 |
137 | // Multiplexer with one-hot selection
138 | export const Mux1Hot = GenMux.define('Mux1Hot', {
139 | attrs: {
140 | info: {
141 | refX: .5, refY: .5,
142 | textAnchor: 'middle', textVerticalAnchor: 'middle',
143 | text: '1Hot',
144 | transform: 'rotate(90)'
145 | }
146 | }
147 | }, {
148 | markup: GenMux.prototype.markup.concat([{
149 | tagName: 'text',
150 | className: 'info',
151 | selector: 'info'
152 | }
153 | ]),
154 | muxInputs: n => Array(n + 1),
155 | muxInput: s => {
156 | const i = s.toArray();
157 | return s.isFullyDefined && i.filter(x => x == 1).length <= 1
158 | ? String(i.indexOf(1)+1) : undefined
159 | }
160 | });
161 | export const Mux1HotView = GenMuxView;
162 |
163 | export const MuxSparse = GenMux.define('MuxSparse', {
164 | /* default properties */
165 | inputs: undefined,
166 | default_input: false
167 | }, {
168 | initialize() {
169 | const inputs = this.get('inputs');
170 | for (let i = 0; i < inputs.length; i++)
171 | if (typeof inputs[i] != 'bigint')
172 | inputs[i] = BigInt(inputs[i]);
173 | GenMux.prototype.initialize.apply(this, arguments);
174 | },
175 | muxInputs(n) {
176 | if (this.get('default_input'))
177 | return ['*'].concat(this.get('inputs'))
178 | else
179 | return this.get('inputs');
180 | },
181 | muxInput(i) {
182 | const deflt = this.get('default_input');
183 | if (!i.isFullyDefined) return undefined;
184 | const idx = this.get('inputs').indexOf(i.toBigInt());
185 | return idx < 0 ? (deflt ? 0 : undefined) : (deflt ? idx + 1 : idx);
186 | },
187 | _gateParams: GenMux.prototype._gateParams.concat(['inputs', 'default_input']),
188 | _unsupportedPropChanges: GenMux.prototype._unsupportedPropChanges.concat(['inputs', 'default_input'])
189 | });
190 | export const MuxSparseView = GenMuxView;
191 |
192 |
--------------------------------------------------------------------------------
/src/cells/subcircuit.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import * as joint from 'jointjs';
4 | import _ from 'lodash';
5 | import { Box, BoxView } from './base.mjs';
6 | import { IO, Input, Output } from './io.mjs';
7 | import * as help from '../help.mjs';
8 |
9 | // add offset of 10pt to account for the top label at layout time
10 | const subcircuit_pos_offset = 10;
11 | const subcircuit_size_offset = 10;
12 |
13 | // Subcircuit model -- embeds a circuit graph in an element
14 | export const Subcircuit = Box.define('Subcircuit', {
15 | /* default properties */
16 | propagation: 0,
17 | warning: false,
18 |
19 | attrs: {
20 | wrapper: {
21 | refWidth: 1, refHeight: 1,
22 | stroke: 'red', strokeWidth: 10
23 | },
24 | type: {
25 | refX: .5, refY: -10,
26 | textAnchor: 'middle', textVerticalAnchor: 'middle'
27 | }
28 | }
29 | }, {
30 | initialize() {
31 | this.bindAttrToProp('text.type/text', 'celltype');
32 |
33 | const graph = this.get('graph');
34 | console.assert(graph instanceof joint.dia.Graph);
35 | graph.set('subcircuit', this);
36 | const IOs = graph.getCells()
37 | .filter((cell) => cell instanceof IO);
38 | const inputs = IOs.filter((cell) => cell instanceof Input);
39 | const outputs = IOs.filter((cell) => cell instanceof Output);
40 | function sortfun(x, y) {
41 | if (x.has('order') || y.has('order'))
42 | return x.get('order') - y.get('order');
43 | return x.get('net').localeCompare(y.get('net'));
44 | }
45 | inputs.sort(sortfun);
46 | outputs.sort(sortfun);
47 | const vcount = Math.max(inputs.length, outputs.length);
48 | const size = { width: 80, height: vcount*16+8 };
49 | const ports = [], iomap = {};
50 | for (const [num, io] of inputs.entries()) {
51 | ports.push({ id: io.get('net'), group: 'in', dir: 'in', bits: io.get('bits'), labelled: true });
52 | }
53 | for (const [num, io] of outputs.entries()) {
54 | ports.push({ id: io.get('net'), group: 'out', dir: 'out', bits: io.get('bits'), labelled: true });
55 | }
56 | for (const io of IOs) {
57 | iomap[io.get('net')] = io.get('id');
58 | }
59 | this.set('size', size);
60 | this.set('circuitIOmap', iomap);
61 | this.get('ports').items = ports;
62 | this.set('warning', graph._warnings > 0);
63 |
64 | Box.prototype.initialize.apply(this, arguments);
65 | },
66 | _resetPortValue(port) {
67 | const iomap = this.get('circuitIOmap');
68 | const graph = this.get('graph');
69 | if (port.dir == 'in')
70 | return graph.getCell(iomap[port.id]).get('outputSignals').out;
71 | if (port.dir == 'out')
72 | return graph.getCell(iomap[port.id]).get('inputSignals').in;
73 | return Box.prototype._resetPortValue.call(this, port);
74 | },
75 | getLayoutSize() {
76 | const size = this.size();
77 | size.height += subcircuit_size_offset;
78 | return size;
79 | },
80 | setLayoutPosition(position) {
81 | this.set('position', {
82 | x: position.x,
83 | y: position.y + subcircuit_pos_offset
84 | });
85 | },
86 | getPortsPositions() {
87 | const positions = Box.prototype.getPortsPositions.apply(this, arguments);
88 | const res = {};
89 | for (const id in positions) {
90 | res[id] = { ...positions[id] };
91 | res[id].y = res[id].y + subcircuit_pos_offset;
92 | }
93 | return res;
94 | },
95 | markup: [{
96 | tagName: 'rect',
97 | selector: 'wrapper'
98 | }
99 | ].concat(Box.prototype.markup, [{
100 | tagName: 'text',
101 | className: 'type',
102 | selector: 'type'
103 | }
104 | ], Box.prototype.markupZoom),
105 | _gateParams: Box.prototype._gateParams.concat(['celltype']),
106 | _unsupportedPropChanges: Box.prototype._unsupportedPropChanges.concat(['celltype'])
107 | });
108 |
109 | export const SubcircuitView = BoxView.extend({
110 | attrs: _.merge({}, BoxView.prototype.attrs, {
111 | warning: {
112 | warn: { wrapper: { 'stroke-opacity': '0.5' } },
113 | none: { wrapper: { 'stroke-opacity': '0' } }
114 | }
115 | }),
116 | _autoResizeBox: true,
117 | presentationAttributes: BoxView.addPresentationAttributes({
118 | warning: 'WARNING'
119 | }),
120 | confirmUpdate(flags) {
121 | BoxView.prototype.confirmUpdate.apply(this, arguments);
122 | if (this.hasFlag(flags, 'WARNING')) {
123 | this._updateWarning();
124 | }
125 | },
126 | _updateWarning() {
127 | const warning = this.model.get('warning');
128 | const attrs = this.attrs.warning[
129 | warning ? 'warn' : 'none'
130 | ];
131 | this._applyAttrs(attrs);
132 | },
133 | update() {
134 | BoxView.prototype.update.apply(this, arguments);
135 | this._updateWarning();
136 | },
137 | events: {
138 | "click foreignObject.tooltip": "stopprop",
139 | "mousedown foreignObject.tooltip": "stopprop",
140 | "touchstart foreignObject.tooltip": "stopprop", // make sure the input receives focus
141 | "click a.zoom": "zoomInCircuit"
142 | },
143 | zoomInCircuit(evt) {
144 | evt.stopPropagation();
145 | this.paper.trigger('open:subcircuit', this.model);
146 | return false;
147 | }
148 | });
149 |
150 |
--------------------------------------------------------------------------------
/src/elkjs.mjs:
--------------------------------------------------------------------------------
1 |
2 | import elkjs from 'elkjs/lib/elk.bundled.js';
3 | import { Clock, Input, Output } from "./cells/io.mjs";
4 |
5 | function to_elkjs(graph) {
6 | const elkGraph = {
7 | id: "root",
8 | properties: {
9 | algorithm: 'layered',
10 | 'elk.edgeRouting': 'ORTHOGONAL',
11 | 'elk.layered.spacing.nodeNodeBetweenLayers': 40.0,
12 | 'elk.layered.nodePlacement.favorStraightEdges': true,
13 | },
14 | children: [],
15 | edges: []
16 | };
17 | for (const cell of graph.getCells()) {
18 | if (cell.isLink()) {
19 | var source = cell.get('source');
20 | var target = cell.get('target');
21 | if (!source.id || !target.id) break;
22 |
23 | elkGraph.edges.push({
24 | id: cell.id,
25 | sources: [ source.id + '.' + source.port ],
26 | targets: [ target.id + '.' + target.port ]
27 | });
28 | } else {
29 | const size = cell.getLayoutSize();
30 |
31 | const ppos = {};
32 |
33 | const ports = cell.getPorts().map((p, i) => {
34 | if (!ppos[p.group])
35 | ppos[p.group] = cell.getPortsPositions(p.group);
36 | return {
37 | id: cell.id + "." + p.id,
38 | x: ppos[p.group][p.id].x,
39 | y: ppos[p.group][p.id].y,
40 | properties: {
41 | 'port.side': p.group == "in" ? "WEST" : p.group == "in2" ? "NORTH" : "EAST",
42 | 'port.borderOffset': 30,
43 | 'port.index': -i
44 | }
45 | };
46 | });
47 |
48 | elkGraph.children.push({
49 | id: cell.id,
50 | width: size.width,
51 | height: size.height,
52 | ports: ports,
53 | properties: {
54 | portConstraints: 'FIXED_POS',
55 | layerConstraint: (cell instanceof Input || cell instanceof Clock) ? "FIRST"
56 | : cell instanceof Output ? "LAST" : "NONE"
57 | }
58 | });
59 | }
60 | }
61 | return elkGraph;
62 | }
63 |
64 | function from_elkjs(graph, elkGraph) {
65 | graph.startBatch('layout');
66 | for (const child of elkGraph.children) {
67 | const cell = graph.getCell(child.id);
68 | cell.setLayoutPosition({
69 | x: child.x,
70 | y: child.y,
71 | width: child.width,
72 | height: child.height
73 | });
74 | }
75 | const corner_dist = 10;
76 | for (const edge of elkGraph.edges) {
77 | const bps = edge.sections[0].bendPoints;
78 | if (!bps)
79 | continue;
80 | // elkjs gives us a bunch of points to create straight edges.
81 | // This causes JointJS to overshot and create strange shape due to rounded corners.
82 | // Instead, we split each corner point to two points, each shifted towards
83 | // the center of the edge by a little to give JointJS enough space
84 | // to make its round corners.
85 | let is_first = true;
86 | let last_point = edge.sections[0].startPoint;
87 | const vertices = [];
88 | const add_point = (bp, is_last) => {
89 | if (bp.x == last_point.x) {
90 | let edgelen = Math.abs(bp.y - last_point.y);
91 | let shift = bp.y > last_point.y ? corner_dist : -corner_dist;
92 | if (edgelen > 2 * corner_dist) {
93 | is_first || vertices.push({x: last_point.x, y: last_point.y + shift});
94 | is_last || vertices.push({x: bp.x, y: bp.y - shift});
95 | }
96 | else if (edgelen > 2 * corner_dist && !is_first && !is_last) {
97 | vertices.push({x: bp.x, y: (bp.y + last_point.y) / 2});
98 | }
99 | }
100 | else if (bp.y == last_point.y) {
101 | let edgelen = Math.abs(bp.x - last_point.x);
102 | let shift = bp.x > last_point.x ? corner_dist : -corner_dist;
103 | if (edgelen > 2 * corner_dist) {
104 | is_first || vertices.push({x: last_point.x + shift, y: last_point.y});
105 | is_last || vertices.push({x: bp.x - shift, y: bp.y});
106 | }
107 | else if (edgelen > 2 * corner_dist && !is_first && !is_last) {
108 | vertices.push({x: (bp.x + last_point.x) / 2, y: bp.y});
109 | }
110 | }
111 | else if (!is_last) {
112 | vertices.push({x: bp.x, y: bp.y});
113 | }
114 | last_point = bp;
115 | is_first = false;
116 | };
117 | for (const bp of bps)
118 | add_point(bp, false);
119 | // use the end point to finish the last bend point without adding the end point itself.
120 | add_point(edge.sections[0].endPoint, true);
121 | graph.getCell(edge.id).vertices(vertices);
122 | }
123 | graph.stopBatch('layout');
124 | }
125 |
126 | export function elk_layout(graph) {
127 | const elkGraph = to_elkjs(graph);
128 |
129 | const elk = new elkjs();
130 |
131 | elk.layout(elkGraph).then(g => {
132 | from_elkjs(graph, g);
133 | });
134 | }
135 |
136 |
--------------------------------------------------------------------------------
/src/engines.mjs:
--------------------------------------------------------------------------------
1 |
2 | export * from "./engines/synch.mjs";
3 | export * from "./engines/browsersynch.mjs";
4 | export * from "./engines/worker.mjs";
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/engines/base.mjs:
--------------------------------------------------------------------------------
1 |
2 | import _ from 'lodash';
3 | import Backbone from 'backbone';
4 |
5 | export class BaseEngine {
6 | constructor(graph) {
7 | this._graph = graph;
8 | }
9 | _addGate(graph, gate) {
10 | if (gate.get('type') == 'Subcircuit')
11 | this._addGraph(gate.get('graph'));
12 | }
13 | _addLink(graph, link) {
14 | }
15 | _addGraph(graph) {
16 | this.listenTo(graph, 'add', (cell) => {
17 | if (cell.isLink()) {
18 | this._addLink(graph, cell);
19 | } else {
20 | this._addGate(graph, cell);
21 | }
22 | });
23 | this.listenTo(graph, 'remove', (cell) => {
24 | if (cell.isLink()) {
25 | this._removeLink(graph, cell);
26 | } else {
27 | this._removeGate(graph, cell);
28 | }
29 | });
30 | this.listenTo(graph, 'change:source', (link, src) => {
31 | this._changeLinkSource(graph, link, src, link.previous('source'));
32 | });
33 | this.listenTo(graph, 'change:target', (link, end) => {
34 | this._changeLinkTarget(graph, link, end, link.previous('target'));
35 | });
36 | this.listenTo(graph, 'change:warning', (link, warn) => {
37 | this._changeLinkWarning(graph, link, warn, link.previous('warning'));
38 | });
39 | for (const gate of graph.getElements())
40 | this._addGate(graph, gate);
41 | for (const link of graph.getLinks())
42 | this._addLink(graph, link);
43 | }
44 | _removeGate(graph, gate) {
45 | }
46 | _removeLink(graph, link) {
47 | }
48 | _changeLinkSource(graph, link, src, prevSrc) {
49 | }
50 | _changeLinkTarget(graph, link, end, prevEnd) {
51 | }
52 | _changeLinkWarning(graph, link, warn, prevWarn) {
53 | }
54 | };
55 |
56 | _.extend(BaseEngine.prototype, Backbone.Events);
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/engines/browsersynch.mjs:
--------------------------------------------------------------------------------
1 |
2 | import { SynchEngine } from './synch.mjs';
3 |
4 | export class BrowserSynchEngine extends SynchEngine {
5 | constructor(graph, opts) {
6 | super(graph, opts);
7 | this._interval_ms = 10;
8 | this._interval = null;
9 | this._idle = null;
10 | }
11 | start() {
12 | this._interval = setInterval(() => {
13 | this.updateGates();
14 | this._checkMonitors();
15 | }, this._interval_ms);
16 | this.trigger('changeRunning');
17 | }
18 | startFast() {
19 | const idle = () => {
20 | this._idle = requestIdleCallback((dd) => {
21 | while (dd.timeRemaining() > 0 && this.hasPendingEvents && this._idle !== null) {
22 | this.updateGatesNext();
23 | this._checkMonitors();
24 | }
25 | if (this._idle !== null) {
26 | idle();
27 | }
28 | }, {timeout: 20});
29 | }
30 | idle();
31 | this.trigger('changeRunning');
32 | }
33 | stop() {
34 | if (this._interval) {
35 | clearInterval(this._interval);
36 | this._interval = null;
37 | }
38 | if (this._idle) {
39 | cancelIdleCallback(this._idle);
40 | this._idle = null;
41 | }
42 | this.trigger('changeRunning');
43 | return Promise.resolve();
44 | }
45 | get interval() {
46 | return this._interval_ms;
47 | }
48 | set interval(ms) {
49 | console.assert(ms > 0);
50 | this._interval_ms = ms;
51 | }
52 | get running() {
53 | return this._interval !== null || this._idle !== null;
54 | }
55 | };
56 |
57 |
--------------------------------------------------------------------------------
/src/engines/synch.mjs:
--------------------------------------------------------------------------------
1 |
2 | import _ from 'lodash';
3 | import FastPriorityQueue from 'fastpriorityqueue';
4 | import * as help from '../help.mjs';
5 | import { BaseEngine } from './base.mjs';
6 |
7 | export class SynchEngine extends BaseEngine {
8 | constructor(graph, {cells}) {
9 | super(graph);
10 | this._queue = new Map();
11 | this._pq = new FastPriorityQueue();
12 | this._tick = 0;
13 | this._cells = cells;
14 | this._monitorChecks = new Map();
15 | this._alarms = new Map();
16 | this._alarmQueue = new Map();
17 | this._addGraph(graph);
18 | }
19 | get hasPendingEvents() {
20 | return this._queue.size > 0;
21 | }
22 | get tick() {
23 | return this._tick;
24 | }
25 | shutdown() {
26 | this.stopListening();
27 | }
28 | _updateSubcircuit(gate, sigs, prevSigs = {}) {
29 | if (!sigs) sigs = gate.get("inputSignals");
30 | const iomap = gate.get('circuitIOmap');
31 | for (const [port, sig] of Object.entries(sigs)) {
32 | if (prevSigs[port] && sig.eq(prevSigs[port])) continue;
33 | const input = gate.get('graph').getCell(iomap[port]);
34 | console.assert(input.isInput);
35 | input._setInput(sig);
36 | }
37 | }
38 | _addGate(graph, gate) {
39 | super._addGate(graph, gate);
40 | this._enqueue(gate);
41 | if (gate instanceof this._cells.Subcircuit)
42 | this._updateSubcircuit(gate);
43 | }
44 | _addGraph(graph) {
45 | this.listenTo(graph, 'manualMemChange', (gate) => {
46 | this._enqueue(gate);
47 | });
48 | this.listenTo(graph, 'change:constantCache', (gate) => {
49 | this._enqueue(gate);
50 | });
51 | this.listenTo(graph, 'change:inputSignals', (gate, sigs) => {
52 | const prevSigs = gate.previous("inputSignals");
53 | if (help.eqSigs(sigs, prevSigs)) return;
54 | if (gate instanceof this._cells.Subcircuit) {
55 | this._updateSubcircuit(gate, sigs, prevSigs);
56 | }
57 | if (gate instanceof this._cells.Output && gate.get('mode') == 0) {
58 | const subcir = gate.graph.get('subcircuit');
59 | if (subcir != true) {
60 | console.assert(subcir != null);
61 | const port = gate.get('net');
62 | const signals = _.clone(subcir.get('outputSignals'));
63 | signals[port] = gate.getOutput();
64 | subcir.set('outputSignals', signals);
65 | }
66 | }
67 | this._enqueue(gate);
68 | });
69 | super._addGraph(graph);
70 | }
71 | _enqueue(gate) {
72 | const k = (this._tick + gate.get('propagation')) | 0;
73 | const sq = (() => {
74 | const q = this._queue.get(k);
75 | if (q !== undefined) return q;
76 | const q1 = new Map();
77 | this._queue.set(k, q1);
78 | this._pq.add(k);
79 | return q1;
80 | })();
81 | sq.set(gate, gate.get('inputSignals'));
82 | }
83 | updateGatesNext() {
84 | const k = this._pq.poll() | 0;
85 | console.assert(k >= this._tick);
86 | this._tick = k;
87 | const q = this._queue.get(k);
88 | let count = 0;
89 | while (q.size) {
90 | const [gate, args] = q.entries().next().value;
91 | q.delete(gate);
92 | if (gate instanceof this._cells.Subcircuit) continue;
93 | if (gate instanceof this._cells.Input) continue;
94 | if (gate instanceof this._cells.Output) continue;
95 | const graph = gate.graph;
96 | if (!graph) continue;
97 | const newOutputSignals = gate.operation(args);
98 | if ('_clock_hack' in newOutputSignals) {
99 | delete newOutputSignals['_clock_hack'];
100 | this._enqueue(gate);
101 | }
102 | gate.set('outputSignals', newOutputSignals);
103 | count++;
104 | }
105 | this._queue.delete(k);
106 | this._tick = (k + 1) | 0;
107 | this._checkMonitors();
108 | this.trigger('postUpdateGates', k, count);
109 | return Promise.resolve(count);
110 | }
111 | updateGates() {
112 | if (this._pq.peek() == this._tick) return this.updateGatesNext();
113 | else {
114 | const k = this._tick | 0;
115 | this._tick = (k + 1) | 0;
116 | this._checkMonitors();
117 | this.trigger('postUpdateGates', k, 0);
118 | return Promise.resolve(0);
119 | }
120 | }
121 | synchronize() {
122 | return Promise.resolve();
123 | }
124 | start() {
125 | throw new Error("start() not supported");
126 | }
127 | startFast() {
128 | throw new Error("startFast() not supported");
129 | }
130 | stop() {
131 | return Promise.resolve()
132 | }
133 | get interval() {
134 | throw new Error("interval not supported");
135 | }
136 | set interval(ms) {
137 | throw new Error("interval not supported");
138 | }
139 | get running() {
140 | return false;
141 | }
142 | observeGraph(graph) {
143 | }
144 | unobserveGraph(graph) {
145 | }
146 | monitor(gate, port, callback, {triggerValues, stopOnTrigger, oneShot}) {
147 | const cb = (gate, sigs) => {
148 | const sig = sigs[port];
149 | this._monitorChecks.set(cb, {gate, sig, cb, callback, triggerValues, stopOnTrigger, oneShot});
150 | };
151 | gate.on('change:outputSignals', cb);
152 | if (triggerValues == undefined)
153 | callback(this._tick, gate.get('outputSignals')[port]);
154 | return { gate: gate, callback: cb };
155 | }
156 | unmonitor(monitorId) {
157 | monitorId.gate.off('change:outputSignals', monitorId.callback);
158 | }
159 | alarm(tick, callback, {stopOnAlarm}) {
160 | console.assert(tick > this._tick);
161 | const cb = () => {
162 | this.unalarm(cb);
163 | callback();
164 | };
165 | this._alarms.set(cb, { tick, stopOnAlarm });
166 | if (!this._alarmQueue.has(tick))
167 | this._alarmQueue.set(tick, new Set());
168 | this._alarmQueue.get(tick).add(cb);
169 | this._pq.add(tick-1);
170 | if (!this._queue.has(tick-1))
171 | this._queue.set(tick-1, new Map());
172 | return cb;
173 | }
174 | unalarm(alarmId) {
175 | const { tick } = this._alarms.get(alarmId);
176 | this._alarmQueue.get(tick).delete(alarmId);
177 | if (this._alarmQueue.get(tick).size == 0)
178 | this._alarmQueue.delete(tick);
179 | this._alarms.delete(alarmId);
180 | }
181 | _checkMonitors() {
182 | for (const {gate, sig, cb, callback, triggerValues, stopOnTrigger, oneShot} of this._monitorChecks.values()) {
183 | let triggered = true;
184 | if (triggerValues != undefined)
185 | triggered = triggerValues.some((triggerValue) => sig.eq(triggerValue));
186 | if (triggered) {
187 | if (oneShot) gate.off('change:outputSignals', cb);
188 | const ret = callback(this._tick, sig);
189 | if (ret && stopOnTrigger) this.stop();
190 | }
191 | }
192 | this._monitorChecks = new Map();
193 | if (this._alarmQueue.get(this._tick)) {
194 | for (const cb of this._alarmQueue.get(this._tick)) {
195 | const { stopOnAlarm } = this._alarms.get(cb);
196 | const ret = cb();
197 | if (ret && stopOnAlarm) this.stop();
198 | }
199 | this._alarmQueue.delete(this._tick);
200 | }
201 | }
202 | };
203 |
204 |
--------------------------------------------------------------------------------
/src/engines/worker.mjs:
--------------------------------------------------------------------------------
1 |
2 | import _ from 'lodash';
3 | import { BaseEngine } from './base.mjs';
4 | import { Vector3vl } from '3vl';
5 | import * as cells from '../cells.mjs';
6 | import Worker from 'web-worker';
7 |
8 | export class WorkerEngine extends BaseEngine {
9 | constructor(graph, { workerURL }) {
10 | super(graph);
11 | this._running = false;
12 | this._tickCache = 0;
13 | this._pendingEventsCache = false;
14 | this._observers = Object.create(null);
15 | this._graphs = Object.create(null);
16 | this._monitors = Object.create(null);
17 | this._promises = Object.create(null);
18 | this._alarms = Object.create(null);
19 | this._uniqueCounter = 0;
20 | this._worker = workerURL ? new Worker(workerURL) : new Worker(new URL('./worker-worker.mjs', import.meta.url));
21 | this._worker.onmessage = (e) => this._handleMessage(e.data);
22 | this.interval = 10;
23 | this._addGraph(this._graph);
24 | }
25 | _addGate(graph, gate) {
26 | const params = gate.getGateParams();
27 | const ports = gate.getPorts().map(({id, dir, bits}) => ({id, dir, bits}));
28 | this._worker.postMessage({ type: 'addGate', args: [graph.cid, gate.id, params, ports, gate.get('inputSignals'), gate.get('outputSignals') ] });
29 | super._addGate(graph, gate);
30 | if (gate instanceof cells.Subcircuit) {
31 | this._worker.postMessage({
32 | type: 'addSubcircuit',
33 | args: [graph.cid, gate.id, gate.get('graph').cid, gate.get('circuitIOmap')]
34 | });
35 | }
36 | if (gate instanceof cells.Input && gate.get('mode') != 0) {
37 | this.listenTo(gate, 'change:outputSignals', (gate, sigs) => {
38 | const prevSigs = gate.previous("outputSignals");
39 | if (prevSigs.out.eq(sigs.out)) return;
40 | this._worker.postMessage({
41 | type: 'changeInput',
42 | args: [graph.cid, gate.id, sigs.out]
43 | });
44 | });
45 | }
46 | if (gate instanceof cells.Memory) {
47 | this.listenTo(gate, 'memChange', (addr, data) => {
48 | gate.memdata.set(addr, data);
49 | });
50 | this.listenTo(gate, 'manualMemChange', (gate, addr, data) => {
51 | this._worker.postMessage({ type: 'manualMemChange', args: [gate.graph.cid, gate.id, addr, data] });
52 | });
53 | }
54 | for (const paramName of gate._gateParams) {
55 | if (gate._unsupportedPropChanges.includes(paramName) || gate._presentationParams.includes(paramName))
56 | continue;
57 | this.listenTo(gate, 'change:' + paramName, (gate, val) => {
58 | this._worker.postMessage({
59 | type: 'changeParam',
60 | args: [graph.cid, gate.id, paramName, val]
61 | });
62 | });
63 | }
64 | }
65 | _addLink(graph, link) {
66 | if (!link.get('warning') && link.get('source').id && link.get('target').id)
67 | this._worker.postMessage({ type: 'addLink', args: [graph.cid, link.id, link.get('source'), link.get('target')] });
68 | super._addLink(graph, link);
69 | }
70 | _addGraph(graph) {
71 | this._observers[graph.cid] = 0;
72 | this._graphs[graph.cid] = graph;
73 | this._worker.postMessage({ type: 'addGraph', args: [graph.cid]});
74 | super._addGraph(graph);
75 | }
76 | _removeGate(graph, gate) {
77 | this._worker.postMessage({ type: 'removeGate', args: [graph.cid, gate.id] });
78 | super._removeGate(graph, link);
79 | this.stopListening(gate);
80 | }
81 | _removeLink(graph, link) {
82 | if (!link.get('warning') && link.get('source').id && link.get('target').id)
83 | this._worker.postMessage({ type: 'removeLink', args: [graph.cid, link.id] });
84 | super._removeLink(graph, link);
85 | }
86 | _changeLinkSource(graph, link, src, prevSrc) {
87 | super._changeLinkSource(graph, link, src, prevSrc);
88 | if (link.get('warning') || !link.get('target').id) return;
89 | if (src.id && !prevSrc.id)
90 | this._worker.postMessage({ type: 'addLink', args: [graph.cid, link.id, link.get('source'), link.get('target')] });
91 | if (prevSrc.id && !src.id)
92 | this._worker.postMessage({ type: 'removeLink', args: [graph.cid, link.id] });
93 | }
94 | _changeLinkTarget(graph, link, end, prevEnd) {
95 | super._changeLinkTarget(graph, link, end, prevEnd);
96 | if (link.get('warning') || !link.get('source').id) return;
97 | if (end.id && !prevEnd.id)
98 | this._worker.postMessage({ type: 'addLink', args: [graph.cid, link.id, link.get('source'), link.get('target')] });
99 | if (prevEnd.id && !end.id)
100 | this._worker.postMessage({ type: 'removeLink', args: [graph.cid, link.id] });
101 | }
102 | _changeLinkWarning(graph, link, warn, prevWarn) {
103 | super._changeLinkWarning(graph, link, warn, prevWarn);
104 | if (!link.get('source').id || !link.get('target').id) return;
105 | if (!warn && prevWarn)
106 | this._worker.postMessage({ type: 'addLink', args: [graph.cid, link.id, link.get('source'), link.get('target')] });
107 | if (!prevWarn && warn)
108 | this._worker.postMessage({ type: 'removeLink', args: [graph.cid, link.id] });
109 | }
110 | get hasPendingEvents() {
111 | return this._pendingEventsCache;
112 | }
113 | get tick() {
114 | return this._tickCache;
115 | }
116 | shutdown() {
117 | this._worker.terminate();
118 | }
119 | synchronize() {
120 | const [reqid, promise] = this._generatePromise();
121 | this._worker.postMessage({ type: 'ping', args: [reqid, true] });
122 | return promise;
123 | }
124 | updateGatesNext({ synchronous = false } = {}) {
125 | if (this._running)
126 | throw new Error("updateGatesNext while running");
127 | const [reqid, promise] = this._generatePromise();
128 | this._worker.postMessage({ type: 'updateGatesNext', args: [reqid, synchronous] });
129 | return promise;
130 | }
131 | updateGates({ synchronous = false } = {}) {
132 | if (this._running)
133 | throw new Error("updateGates while running");
134 | const [reqid, promise] = this._generatePromise();
135 | this._worker.postMessage({ type: 'updateGates', args: [reqid, synchronous] });
136 | return promise;
137 | }
138 | start() {
139 | if (this.running)
140 | throw new Error("start while running");
141 | this._worker.postMessage({ type: 'start' });
142 | this._running = true;
143 | this.trigger('changeRunning');
144 | }
145 | startFast() {
146 | if (this.running)
147 | throw new Error("startFast while running");
148 | this._worker.postMessage({ type: 'startFast' });
149 | this._running = 'fast';
150 | this.trigger('changeRunning');
151 | }
152 | stop({ synchronous = false } = {}) {
153 | if (!this._running) return;
154 | const [reqid, promise] = this._generatePromise();
155 | this._worker.postMessage({ type: 'stop', args: [reqid, synchronous] });
156 | this._running = false;
157 | this.trigger('changeRunning');
158 | return promise;
159 | }
160 | get interval() {
161 | return this._interval;
162 | }
163 | set interval(ms) {
164 | this._interval = ms;
165 | this._worker.postMessage({ type: 'interval', arg: ms });
166 | }
167 | get running() {
168 | return this._running != false;
169 | }
170 | observeGraph(graph) {
171 | this._observers[graph.cid] += 1;
172 | if (this._observers[graph.cid] == 1)
173 | this._worker.postMessage({ type: 'observeGraph', arg: graph.cid });
174 | }
175 | unobserveGraph(graph) {
176 | this._observers[graph.cid] -= 1;
177 | if (this._observers[graph.cid] == 0)
178 | this._worker.postMessage({ type: 'unobserveGraph', arg: graph.cid });
179 | }
180 | monitor(gate, port, callback, options) {
181 | const monitorId = this._generateUniqueId();
182 | this._monitors[monitorId] = callback;
183 | this._worker.postMessage({ type: 'monitor', args: [gate.graph.cid, gate.id, port, monitorId, options] });
184 | return monitorId;
185 | }
186 | unmonitor(monitorId) {
187 | if (!(monitorId in this._monitors)) return;
188 | this._worker.postMessage({ type: 'unmonitor', arg: monitorId });
189 | delete this._monitors[monitorId];
190 | }
191 | alarm(tick, callback, options) {
192 | console.assert(tick > this._tickCache);
193 | const alarmId = this._generateUniqueId();
194 | this._alarms[alarmId] = callback;
195 | this._worker.postMessage({ type: 'alarm', args: [tick, alarmId, options] });
196 | return alarmId;
197 | }
198 | unalarm(alarmId) {
199 | if (!(alarmId in this._alarms)) return;
200 | this._worker.postMessage({ type: 'unalarm', arg: alarmId });
201 | delete this._alarms[alarmId];
202 | }
203 | _handleMessage(msg) {
204 | const name = '_handle_' + msg.type;
205 | if ('arg' in msg)
206 | this[name](msg.arg);
207 | else if ('args' in msg)
208 | this[name].apply(this, msg.args);
209 | else
210 | this[name]();
211 | }
212 | _handle_update(tick, pendingEvents, updates) {
213 | let changeRunning = this._pendingEventsCache != pendingEvents;
214 | this._tickCache = tick;
215 | this._pendingEventsCache = pendingEvents;
216 | for (const [graphId, gateId, vals] of updates) {
217 | const gate = this._findGateByIds(graphId, gateId);
218 | if (gate === undefined) continue;
219 | const newOutputs = {};
220 | for (const [port, val] of Object.entries(vals))
221 | newOutputs[port] = Vector3vl.fromClonable(val);
222 | _.defaults(newOutputs, gate.get('outputSignals'));
223 | gate.set('outputSignals', newOutputs);
224 | }
225 | this.trigger('postUpdateGates', tick);
226 | if (changeRunning) this.trigger('changeRunning');
227 | }
228 | _handle_stopped(tick) {
229 | this._running = false;
230 | this._pendingEventsCache = false;
231 | this._tickCache = tick;
232 | this.trigger('changeRunning');
233 | }
234 | _handle_gateTrigger(graphId, gateId, event, args) {
235 | if (event == "memChange")
236 | args[1] = Vector3vl.fromClonable(args[1]);
237 | const gate = this._findGateByIds(graphId, gateId);
238 | if (gate === undefined) return;
239 | gate.trigger(event, ...args);
240 | }
241 | _handle_gateSet(graphId, gateId, name, value) {
242 | const gate = this._findGateByIds(graphId, gateId);
243 | if (gate === undefined) return;
244 | gate.set(name, value);
245 | }
246 | _handle_monitorValue(monitorId, tick, sig, stopped, oneShot) {
247 | const callback = this._monitors[monitorId];
248 | if (callback == undefined) return;
249 | if (oneShot) delete this._monitors[monitorId];
250 | const ret = callback(tick, Vector3vl.fromClonable(sig));
251 | if (stopped) {
252 | if (ret) {
253 | this._running = false;
254 | this.trigger('changeRunning');
255 | } else if (this._running)
256 | this._worker.postMessage({ type: this._running == 'fast' ? 'startFast' : 'start' });
257 | }
258 | }
259 | _handle_alarmReached(alarmId, tick, stopped) {
260 | const callback = this._alarms[alarmId];
261 | if (callback == undefined) return;
262 | delete this._alarms[alarmId];
263 | const ret = callback();
264 | if (stopped) {
265 | if (ret) {
266 | this._running = false;
267 | this.trigger('changeRunning');
268 | } else if (this._running)
269 | this._worker.postMessage({ type: this._running == 'fast' ? 'startFast' : 'start' });
270 | }
271 | }
272 | _handle_ack(reqid, response) {
273 | this._resolvePromise(reqid, response);
274 | }
275 | _findGateByIds(graphId, gateId) {
276 | const graph = this._graphs[graphId];
277 | if (graph === undefined) return undefined;
278 | return graph.getCell(gateId);
279 | }
280 | _generateUniqueId() {
281 | return this._uniqueCounter++;
282 | }
283 | _generatePromise() {
284 | const reqid = this._generateUniqueId();
285 | return [reqid, new Promise((resolve) => { this._promises[reqid] = resolve; })];
286 | }
287 | _resolvePromise(reqid, value) {
288 | if (!this._promises[reqid]) {
289 | console.warn("Missing promise", reqid);
290 | return;
291 | }
292 | this._promises[reqid](value);
293 | delete this._promises[reqid];
294 | }
295 | };
296 |
297 |
--------------------------------------------------------------------------------
/src/help.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import { Vector3vl, Display3vlWithRegex, Display3vl } from '3vl';
4 |
5 | const controlCodes20 = [
6 | 'NUL', 'SOH', 'STX', 'ETX', 'EOT', 'ENQ', 'ACK', 'BEL',
7 | 'BS', 'HT', 'LF', 'VT', 'FF', 'CR', 'SO', 'SI',
8 | 'DLE', 'DC1', 'DC2', 'DC3', 'DC4', 'NAK', 'SYN', 'ETB',
9 | 'CAN', 'EM', 'SUB', 'ESC', 'FS', 'GS', 'RS', 'US',
10 | 'SP', 'DEL'];
11 |
12 | export class Display3vlASCII extends Display3vlWithRegex {
13 | constructor() {
14 | super('[\x20-\x7e\xa0-\xff\ufffd\u2400-\u2421]|' + controlCodes20.join('|'))
15 | }
16 | get name() {
17 | return "ascii";
18 | }
19 | get sort() {
20 | return 1;
21 | }
22 | can(kind, bits) {
23 | return bits == 7 || bits == 8;
24 | }
25 | read(data, bits) {
26 | if (data.length == 1) {
27 | const code = data.charCodeAt(0);
28 | if (code == 0xfffd) return Vector3vl.xes(bits);
29 | if (code == 0x2421) return Vector3vl.fromHex("7f", bits);
30 | if (code >= 0x2400 && code <= 0x2420)
31 | return Vector3vl.fromHex((code - 0x2400).toString(16), bits);
32 | return Vector3vl.fromHex(code.toString(16), bits);
33 | } else {
34 | const code = controlCodes20.indexOf(data);
35 | if (code < 0) return Vector3vl.xes(bits);
36 | if (code == 0x21) return Vector3vl.fromHex("7f", bits);
37 | return Vector3vl.fromHex(code.toString(16), bits);
38 | }
39 | }
40 | show(data) {
41 | if (!data.isFullyDefined) return "\ufffd";
42 | const code = parseInt(data.toHex(), 16);
43 | if (code <= 0x20) {
44 | return String.fromCharCode(0x2400 + code);
45 | }
46 | if (code == 0x7f) return "\u2421";
47 | if (code > 0x7f && code < 0xa0) {
48 | return "\ufffd";
49 | }
50 | return String.fromCharCode(code);
51 | }
52 | size(bits) {
53 | return 1;
54 | }
55 | }
56 |
57 |
58 | export function baseSelectMarkupHTML(display3vl, bits, base) {
59 | const markup = display3vl.usableDisplays('read', bits)
60 | .map(n => '
');
61 | return '
';
62 | };
63 |
64 | export function eqSigs(sigs1, sigs2) {
65 | for (const k in sigs2) {
66 | if (!sigs1[k].eq(sigs2[k])) return false;
67 | }
68 | return true;
69 | };
70 |
71 |
--------------------------------------------------------------------------------
/src/index.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import 'babel-polyfill';
4 | import dagre from 'dagre';
5 | import graphlib from 'graphlib';
6 | import * as joint from 'jointjs';
7 | import _ from 'lodash';
8 | import $ from 'jquery';
9 | import Backbone from 'backbone';
10 | import { Vector3vl } from '3vl';
11 | import 'jquery-ui/ui/widgets/dialog.js';
12 | import 'jquery-ui/themes/base/all.css';
13 | import * as cells from './cells.mjs';
14 | import * as engines from './engines.mjs';
15 | import * as tools from './tools.mjs';
16 | import * as transform from './transform.mjs';
17 | import { HeadlessCircuit, getCellType } from './circuit.mjs';
18 | import { BrowserSynchEngine } from './engines/browsersynch.mjs';
19 | import { MonitorView, Monitor } from './monitor.mjs';
20 | import { IOPanelView } from './iopanel.mjs';
21 | import { elk_layout } from './elkjs.mjs';
22 | import './style.css';
23 |
24 | // polyfill ResizeObserver for e.g. Firefox ESR 68.8
25 | // this line and the node-module might be removed as soon as ResizeObserver is widely supported
26 | // see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#Browser_compatibility
27 | import ResizeObserver from 'resize-observer-polyfill';
28 |
29 | export { HeadlessCircuit, getCellType, cells, tools, engines, transform, MonitorView, Monitor, IOPanelView };
30 |
31 | export const paperOptions = {
32 | async: true,
33 | sorting: joint.dia.Paper.sorting.APPROX, //needed for async paper, see https://github.com/clientIO/joint/issues/1320
34 | width: 100, height: 100, gridSize: 5,
35 | magnetThreshold: 'onleave',
36 | snapLinks: true,
37 | linkPinning: false,
38 | markAvailable: true,
39 | defaultLink: new cells.Wire,
40 | defaultConnectionPoint: { name: 'anchor' },
41 | defaultRouter: {
42 | name: 'metro',
43 | args: {
44 | startDirections: ['right'],
45 | endDirections: ['left'],
46 | maximumLoops: 200,
47 | step: 2.5
48 | }
49 | },
50 | defaultConnector: {
51 | name: 'rounded',
52 | args: { radius: 10 }
53 | },
54 | cellViewNamespace: cells,
55 | validateConnection(vs, ms, vt, mt, e, vl) {
56 | if (e === 'target') {
57 | if (!mt) return false;
58 | const pt = vt.model.getPort(vt.findAttribute('port', mt));
59 | if (typeof pt !== 'object' || pt.dir !== 'in' || pt.bits !== vl.model.get('bits'))
60 | return false;
61 | const link = this.model.getConnectedLinks(vt.model).find((l) =>
62 | l.id !== vl.model.id &&
63 | l.get('target').id === vt.model.id &&
64 | l.get('target').port === vt.findAttribute('port', mt)
65 | );
66 | return !link;
67 | } else if (e === 'source') {
68 | if (!ms) return false;
69 | const ps = vs.model.getPort(vs.findAttribute('port', ms));
70 | if (typeof ps !== 'object' || ps.dir !== 'out' || ps.bits !== vl.model.get('bits'))
71 | return false;
72 | return true;
73 | }
74 | }
75 | };
76 |
77 | const defaultSubcircuitButtons = [
78 | {
79 | id: "zoomOut",
80 | hidden: false,
81 | buttonText: "–",
82 | callback: ({circuit, model, paper}) => {
83 | const newZoom = model.get('zoomLevel') - 1;
84 | circuit.scaleAndRefreshPaper(paper, newZoom);
85 | model.set("zoomLevel", newZoom);
86 | }
87 | },
88 | {
89 | id: "zoomIn",
90 | hidden: false,
91 | buttonText: "+",
92 | callback: ({circuit, model, paper}) => {
93 | const newZoom = model.get('zoomLevel') + 1;
94 | circuit.scaleAndRefreshPaper(paper, newZoom);
95 | model.set("zoomLevel", newZoom);
96 | }
97 | }
98 | ];
99 |
100 | export class Circuit extends HeadlessCircuit {
101 | constructor(data, { windowCallback = Circuit.prototype._defaultWindowCallback, layoutEngine = "elkjs", subcircuitButtons = [], ...options } = {}) {
102 | if (!options.engine) options.engine = BrowserSynchEngine;
103 | super(data, options);
104 | this._layoutEngine = layoutEngine
105 | this._windowCallback = windowCallback;
106 | this._subcircuitButtons = this._mergeSubcircuitButtons(subcircuitButtons);
107 | this.listenTo(this._engine, 'changeRunning', () => {
108 | this.trigger('changeRunning');
109 | });
110 | }
111 | _mergeSubcircuitButtons(buttons = []) {
112 | const res = new Map();
113 | for (const button of defaultSubcircuitButtons.concat(buttons)) {
114 | if (button?.hidden) {
115 | res.delete(button.id);
116 | } else {
117 | res.set(button.id, button);
118 | }
119 | }
120 | return Array.from(res.values());
121 | }
122 | _defaultWindowCallback(type, div, closingCallback) {
123 | const maxWidth = () => $(window).width() * 0.9;
124 | const maxHeight = () => $(window).height() * 0.9;
125 | function fixSize() {
126 | if (div.width() > maxWidth())
127 | div.dialog("option", "width", maxWidth());
128 | if (div.height() > maxHeight())
129 | div.dialog("option", "height", maxHeight());
130 | }
131 | const observer = new ResizeObserver(fixSize);
132 | observer.observe(div.get(0));
133 | const shutdownCallback = () => { div.dialog('close'); };
134 | this.listenToOnce(this, 'shutdown', shutdownCallback);
135 | const dialog = div.dialog({
136 | width: 'auto',
137 | height: 'auto',
138 | maxWidth: $(window).width() * 0.9,
139 | maxHeight: $(window).height() * 0.9,
140 | resizable: type !== "Memory",
141 | close: () => {
142 | this.stopListening(this, 'shutdown', shutdownCallback);
143 | closingCallback();
144 | observer.disconnect();
145 | }
146 | });
147 | }
148 | displayOn(elem) {
149 | return this._makePaper(elem, this._graph);
150 | }
151 | scaleAndRefreshPaper(paper, scale) {
152 | paper.scale(Math.pow(1.1, scale));
153 |
154 | const graph = paper.model;
155 | paper.freeze();
156 | graph.resetCells(graph.getCells());
157 | paper.unfreeze();
158 | }
159 | _makePaper(elem, graph) {
160 | this._engine.observeGraph(graph);
161 | const opts = _.merge({ el: elem, model: graph }, paperOptions);
162 | const paper = new joint.dia.Paper(opts);
163 | paper.$el.addClass('djs');
164 | paper.freeze();
165 | // required for the paper to visualize the graph (jointjs bug?)
166 | graph.resetCells(graph.getCells());
167 | // lazy graph layout
168 | if (!graph.get('laid_out')) {
169 | if (this._layoutEngine == "dagre") {
170 | joint.layout.DirectedGraph.layout(graph, {
171 | nodeSep: 20,
172 | edgeSep: 0,
173 | rankSep: 110,
174 | rankDir: "LR",
175 | setPosition: (element, position) => {
176 | element.setLayoutPosition({
177 | x: position.x - position.width/2,
178 | y: position.y - position.height/2,
179 | width: position.width,
180 | height: position.height
181 | });
182 | },
183 | exportElement: (element) => {
184 | return element.getLayoutSize();
185 | },
186 | dagre: dagre,
187 | graphlib: graphlib
188 | });
189 | } else if (this._layoutEngine == "elkjs") {
190 | elk_layout(graph);
191 | }
192 | graph.set('laid_out', true);
193 | }
194 | paper.listenTo(this, 'display:add', () => {
195 | // a very inefficient way to refresh numbase dropdowns
196 | // TODO: a better method
197 | paper.freeze();
198 | graph.resetCells(graph.getCells());
199 | paper.unfreeze();
200 | });
201 | this.listenTo(paper, 'render:done', () => {
202 | paper.fitToContent({ padding: 30, allowNewOrigin: 'any' });
203 | });
204 | paper.unfreeze();
205 | // subcircuit display
206 | const circuit = this;
207 | this.listenTo(paper, 'open:subcircuit', (model) => {
208 | const subcircuitModal = $('
', {
209 | title: model.get('celltype') + ' ' + model.get('label')
210 | }).appendTo('html > body');
211 |
212 | // Create and set up paper
213 | const pdiv = $('
').appendTo(subcircuitModal);
214 | const graph = model.get('graph');
215 | const paper = this._makePaper(pdiv, graph);
216 | paper.once('render:done', () => {
217 | this._windowCallback('Subcircuit', subcircuitModal, () => {
218 | this._engine.unobserveGraph(graph);
219 | paper.remove();
220 | subcircuitModal.remove();
221 | });
222 | });
223 |
224 | // Create buttons
225 | model.set("zoomLevel", 0);
226 | const buttonGroup = $('
')
227 | for (const button of this._subcircuitButtons) {
228 | $('
')
229 | .append($('
').text(button.buttonText))
230 | .on('click', {circuit, model, paper}, (event) => button.callback(event.data))
231 | .appendTo(buttonGroup);
232 | }
233 | buttonGroup.prependTo(subcircuitModal);
234 | });
235 | this.listenTo(paper, 'open:memorycontent', (subcircuitModal, closeCallback) => {
236 | this._windowCallback('Memory', subcircuitModal, closeCallback);
237 | });
238 | this.listenTo(paper, 'open:fsm', (subcircuitModal, closeCallback) => {
239 | this._windowCallback('FSM', subcircuitModal, closeCallback);
240 | });
241 | paper.fixed = function(fixed) {
242 | this.setInteractivity(!fixed);
243 | this.$el.toggleClass('fixed', fixed);
244 | };
245 | this.trigger('new:paper', paper);
246 | return paper;
247 | }
248 | };
249 |
250 |
--------------------------------------------------------------------------------
/src/iopanel.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import joint from 'jointjs';
4 | import _ from 'lodash';
5 | import $ from 'jquery';
6 | import Backbone from 'backbone';
7 | import * as help from './help.mjs';
8 | import * as cells from './cells.mjs';
9 | import { Vector3vl } from '3vl';
10 |
11 | let uniq_cntr = 0;
12 |
13 | export class IOPanelView extends Backbone.View {
14 | initialize(args) {
15 | this._idnum = uniq_cntr++;
16 | this._inputPanelMarkup = args.inputPanelMarkup || '
';
17 | this._outputPanelMarkup = args.outputPanelMarkup || '
';
18 | this._baseSelectorMarkup = args.baseSelectorMarkup || help.baseSelectMarkupHTML;
19 | this._labelMarkup = args.labelMarkup || '
';
20 | this._buttonMarkup = args.buttonMarkup || '
';
21 | this._lampMarkup = args.lampMarkup || '
';
22 | this._rowMarkup = args.rowMarkup || '
';
23 | this._colMarkup = args.colMarkup || '
';
24 | this._inputMarkup = args.inputMarkup || '
';
25 | this.render();
26 | this.listenTo(this.model._graph, 'add', this._handleAdd);
27 | this.listenTo(this.model._graph, 'remove', this._handleRemove);
28 | this.listenTo(this.model, "display:add", () => { this.render() });
29 | }
30 | render() {
31 | // Disable the default action of submission since it will usually cause a page refresh.
32 | this.$el.html('
');
33 | for (const element of this.model.getInputCells())
34 | this._handleAddInput(element);
35 | for (const element of this.model.getOutputCells())
36 | this._handleAddOutput(element);
37 | }
38 | shutdown() {
39 | this.$el.off();
40 | this.stopListening();
41 | }
42 | _id(text) {
43 | return 'iopanel-' + text + '-' + this._idnum;
44 | }
45 | _handleAdd(cell) {
46 | if (cell.isInput) this._handleAddInput(cell);
47 | else if (cell.isOutput) this._handleAddOutput(cell);
48 | }
49 | _addLabel(row, cell) {
50 | const label = $(this._labelMarkup)
51 | .appendTo(row);
52 | return label.find('label').addBack('label')
53 | .text(cell.get('net') || cell.get('label'));
54 | }
55 | _addLabelFor(row, cell) {
56 | return this._addLabel(row, cell)
57 | .attr('for', this._id(cell.id));
58 | }
59 | _handleAddInput(cell) {
60 | const display3vl = this.model._display3vl;
61 | const row = $(this._rowMarkup)
62 | .appendTo(this.$('div[data-iopanel="input"]'));
63 | this._addLabelFor(row, cell);
64 | const col = $(this._colMarkup)
65 | .appendTo(row);
66 | if (cell.get('mode') == 1) {
67 | const ui = $(this._buttonMarkup)
68 | .appendTo(col);
69 | const inp = ui.find('input').addBack('input')
70 | .attr('id', this._id(cell.id))
71 | .on('click', (evt) => {
72 | cell.setInput(Vector3vl.fromBool(evt.target.checked));
73 | });
74 | const updater = (cell, sigs) => {
75 | inp.prop("checked", sigs.out.isHigh);
76 | };
77 | this.listenTo(cell, 'change:outputSignals', updater);
78 | updater(cell, cell.get('outputSignals'));
79 | } else {
80 | const ui = $(this._inputMarkup)
81 | .appendTo(col);
82 | let base = 'hex';
83 | const base_sel = $(this._baseSelectorMarkup(display3vl, cell.get('bits'), base))
84 | .appendTo(col);
85 | let sz = display3vl.size(base, cell.get('bits'));
86 | const bits = cell.get('bits');
87 | const inp = ui.find('input').addBack('input')
88 | .prop('size', sz)
89 | .prop('maxlength', sz)
90 | .prop('pattern', display3vl.pattern(base))
91 | .on('change', (e) => {
92 | if (!display3vl.validate(base, e.target.value, bits)) return;
93 | cell.setInput(display3vl.read(base, e.target.value, bits));
94 | });
95 | const updater = (cell, sigs) => {
96 | ui.val(display3vl.show(base, sigs.out));
97 | };
98 | this.listenTo(cell, 'change:outputSignals', updater);
99 | updater(cell, cell.get('outputSignals'));
100 | row.on('input', 'select[name=base]', (e) => {
101 | base = e.target.value;
102 | sz = display3vl.size(base, cell.get('bits'));
103 | inp.prop('size', sz)
104 | .prop('maxlength', sz)
105 | .prop('pattern', display3vl.pattern(base));
106 | updater(cell, cell.get('outputSignals'));
107 | });
108 | }
109 | }
110 | _handleAddOutput(cell) {
111 | const display3vl = this.model._display3vl;
112 | const row = $(this._rowMarkup)
113 | .appendTo(this.$('div[data-iopanel="input"]'));
114 | this._addLabel(row, cell);
115 | const col = $(this._colMarkup)
116 | .appendTo(row);
117 | if (cell.get('bits') == 1) {
118 | const ui = $(this._lampMarkup)
119 | .appendTo(col);
120 | const inp = ui.find('input').addBack('input')
121 | .prop('disabled', true);
122 | const updater = (cell, sigs) => {
123 | const val = cell.getOutput();
124 | inp.prop("checked", val.isHigh);
125 | inp.prop("indeterminate", !val.isDefined);
126 | };
127 | this.listenTo(cell, 'change:inputSignals', updater);
128 | updater(cell, cell.get('inputSignals'));
129 | } else {
130 | const ui = $(this._inputMarkup)
131 | .appendTo(col);
132 | let base = 'hex';
133 | const base_sel = $(this._baseSelectorMarkup(display3vl, cell.get('bits'), base))
134 | .appendTo(col);
135 | const sz = display3vl.size(base, cell.get('bits'));
136 | const inp = ui.find('input').addBack('input')
137 | .prop('disabled', true)
138 | .prop('size', sz);
139 | // .prop('maxlength', sz)
140 | // .prop('pattern', display3vl.pattern(base));
141 | const updater = (cell, sigs) => {
142 | const val = cell.getOutput();
143 | ui.val(display3vl.show(base, val));
144 | };
145 | this.listenTo(cell, 'change:inputSignals', updater);
146 | updater(cell, cell.get('inputSignals'));
147 | row.on('input', 'select[name=base]', (e) => {
148 | base = e.target.value;
149 | inp.prop('size', display3vl.size(base, cell.get('bits')));
150 | updater(cell, cell.get('inputSignals'));
151 | });
152 | }
153 | }
154 | _handleRemove(cell) {
155 | this.stopListening(cell);
156 | }
157 | };
158 |
159 |
--------------------------------------------------------------------------------
/src/monitor.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import joint from 'jointjs';
4 | import _ from 'lodash';
5 | import $ from 'jquery';
6 | import Backbone from 'backbone';
7 | import * as help from './help.mjs';
8 | import { Vector3vl } from '3vl';
9 | import { Waveform, drawWaveform, defaultSettings, extendSettings, calcGridStep } from 'wavecanvas';
10 | import ResizeObserver from 'resize-observer-polyfill';
11 |
12 | function getWireId(wire) {
13 | const hier = [wire.cid];
14 | for (let sc = wire.graph.get('subcircuit'); sc != null; sc = sc.graph.get('subcircuit')) {
15 | hier.push(sc.cid);
16 | }
17 | hier.reverse();
18 | return hier.join('.');
19 | }
20 |
21 | function getWireName(wire) {
22 | const hier = [];
23 | if (wire.has('netname')) hier.push(wire.get('netname'));
24 | else {
25 | const source = wire.source();
26 | hier.push(source.port);
27 | const cell = wire.graph.getCell(source.id);
28 | if (cell.has('label')) hier.push(cell.get('label'));
29 | else hier.push(source.id);
30 | }
31 | for (let sc = wire.graph.get('subcircuit'); sc != null; sc = sc.graph.get('subcircuit')) {
32 | if (sc.has('label')) hier.push(sc.get('label'));
33 | else hier.push(sc.id);
34 | }
35 | hier.reverse();
36 | return hier.join('.');
37 | }
38 |
39 | export class Monitor {
40 | constructor(circuit) {
41 | this._circuit = circuit;
42 | this._wires = new Map();
43 | this.listenTo(this._circuit, 'new:paper', (paper) => this.attachTo(paper));
44 | }
45 | attachTo(paper) {
46 | this.listenTo(paper, 'link:monitor', (linkView) => {
47 | this.addWire(linkView.model);
48 | });
49 | }
50 | addWire(wire) {
51 | const wireid = getWireId(wire);
52 | if (this._wires.has(wireid)) return;
53 | const waveform = new Waveform(wire.get('bits'));
54 | const obj = {wire: wire, waveform: waveform, monitorId: undefined};
55 | this._wires.set(wireid, obj);
56 | this.trigger('add', wire);
57 | obj.monitorId = this._circuit.monitorWire(wire, (tick, sig) => { this._handleChange(tick, wire, sig) });
58 | }
59 | removeWire(wire) {
60 | if (typeof wire == 'string') wire = this._wires.get(wire).wire;
61 | this.trigger('remove', wire);
62 | const wireid = getWireId(wire);
63 | this._circuit.unmonitor(this._wires.get(wireid).monitorId);
64 | this._wires.delete(wireid);
65 | }
66 | getWires() {
67 | const ret = [];
68 | for (const wobj of this._wires.values()) ret.push(wobj.wire);
69 | return ret;
70 | }
71 | getWiresDesc() {
72 | return this.getWires().map(wire => {
73 | if (!wire.has('netname')) return;
74 | return {
75 | name: wire.get('netname'),
76 | path: wire.getWirePath(),
77 | bits: wire.get('bits')
78 | };
79 | }).filter(x => x !== undefined);
80 | }
81 | loadWiresDesc(wd) {
82 | for (const w of wd) {
83 | const e = this._circuit.findWireByLabel(w.name, w.path);
84 | if (e && e.get('bits') == w.bits) this.addWire(e);
85 | }
86 | }
87 | _handleChange(tick, wire, signal) {
88 | this._wires.get(getWireId(wire)).waveform.push(tick, signal);
89 | this.trigger('change', wire, signal);
90 | }
91 | }
92 |
93 | _.extend(Monitor.prototype, Backbone.Events);
94 |
95 | export class MonitorView extends Backbone.View {
96 | initialize(args) {
97 | this._width = 800;
98 | this._settings = extendSettings(defaultSettings, {start: 0, pixelsPerTick: 5, gridStep: 1});
99 | this._settingsFor = new Map();
100 | this._live = true;
101 | this._autoredraw = false;
102 | this._idle = null;
103 | this._removeButtonMarkup = args.removeButtonMarkup || '
';
104 | this._baseSelectorMarkup = args.baseSelectorMarkup || help.baseSelectMarkupHTML;
105 | this._bitTriggerMarkup = args.bitTriggerMarkup || '
';
106 | this._busTriggerMarkup = args.busTriggerMarkup || '
';
107 | this.listenTo(this.model, 'add', this._handleAdd);
108 | this.listenTo(this.model, 'remove', this._handleRemove);
109 | this.listenTo(this.model._circuit, "display:add", () => { this.render() });
110 | this.listenTo(this.model._circuit, 'postUpdateGates', (tick) => {
111 | if (this._live) this.start = tick - this._width / this._settings.pixelsPerTick;
112 | this._settings.present = tick;
113 | if (!this._idle) this._idle = requestIdleCallback(() => {
114 | this._drawAll();
115 | this._idle = null;
116 | }, {timeout: 100});
117 | });
118 | this.render();
119 | this._resizeObserver = new ResizeObserver(() => {
120 | this._canvasResize();
121 | });
122 | this._resizeObserver.observe(this.el);
123 | function evt_wireid(e) {
124 | return $(e.target).closest('tr').attr('wireid');
125 | }
126 | const display3vl = this.model._circuit._display3vl;
127 | this.$el.on('click', 'button[name=remove]', (e) => { this.model.removeWire(evt_wireid(e)); });
128 | this.$el.on('input', 'select[name=base]', (e) => {
129 | const base = e.target.value;
130 | const settings = this._settingsFor.get(evt_wireid(e));
131 | settings.base = base;
132 | const row = $(e.target).closest('tr');
133 | const trig = row.find('input[name=trigger]');
134 | trig.attr('pattern', display3vl.pattern(base));
135 | if (settings.trigger.length)
136 | trig.val(display3vl.show(base, settings.trigger[0]));
137 | this.trigger('change');
138 | });
139 | const handleTrigger = () => {
140 | return true;
141 | };
142 | const setTrigger = (wireid, triggers) => {
143 | const settings = this._settingsFor.get(wireid);
144 | if (settings.triggerId) {
145 | this.model._circuit.unmonitor(settings.triggerId);
146 | settings.triggerId = null;
147 | }
148 | if (triggers.length > 0) {
149 | const wire = this.model._wires.get(wireid).wire;
150 | settings.triggerId = this.model._circuit.monitorWire(wire, handleTrigger, {triggerValues: triggers, stopOnTrigger: true});
151 | }
152 | settings.trigger = triggers;
153 | }
154 | this.$el.on('input', 'select[name=trigger]', (e) => {
155 | const wireid = evt_wireid(e);
156 | switch (e.target.value) {
157 | case 'rising': setTrigger(wireid, [Vector3vl.one]); break;
158 | case 'falling': setTrigger(wireid, [Vector3vl.zero]); break;
159 | case 'risefall': setTrigger(wireid, [Vector3vl.one, Vector3vl.zero]); break;
160 | case 'undef': setTrigger(wireid, [Vector3vl.x]); break;
161 | default: setTrigger(wireid, []);
162 | }
163 | });
164 | this.$el.on('change', 'input[name=trigger]', (e) => {
165 | const wireid = evt_wireid(e);
166 | const settings = this._settingsFor.get(wireid);
167 | const base = settings.base;
168 | const bits = this.model._wires.get(wireid).waveform.bits;
169 | if (e.target.value == "") {
170 | setTrigger(wireid, []);
171 | } else if (display3vl.validate(base, e.target.value, bits)) {
172 | const val = display3vl.read(base, e.target.value, bits);
173 | setTrigger(wireid, [val]);
174 | e.target.value = display3vl.show(base, val);
175 | } else {
176 | setTrigger(wireid, []);
177 | }
178 | });
179 | this.listenTo(this, 'change', () => { if (this._autoredraw) this._drawAll() });
180 |
181 | const dragImg = new Image(0,0);
182 | dragImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
183 | let dragX, dragStart;
184 | const do_drag = (e) => {
185 | const offset = e.originalEvent.screenX - dragX;
186 | this.start = dragStart - offset / this._settings.pixelsPerTick;
187 | };
188 | this.$el.on('dragstart', 'canvas', (e) => {
189 | const dt = e.originalEvent.dataTransfer;
190 | dt.setData('text/plain', 'dragging');
191 | dt.setDragImage(dragImg, 0, 0);
192 | dragX = e.originalEvent.screenX;
193 | dragStart = this._settings.start;
194 | this.live = false;
195 | $(document).on('dragover', do_drag);
196 | });
197 | this.$el.on('dragend', 'canvas', (e) => {
198 | $(document).off('dragover', do_drag);
199 | });
200 | this.$el.on('wheel', 'canvas', (e) => {
201 | e.preventDefault();
202 | const scaling = 2 ** Math.sign(e.originalEvent.deltaY);
203 | this.start += e.originalEvent.offsetX / this._settings.pixelsPerTick * (1 - 1 / scaling);
204 | this.pixelsPerTick *= scaling;
205 | });
206 | }
207 | render() {
208 | this.$el.html('
');
209 | for (const wobj of this.model._wires.values()) {
210 | this.$('table').append(this._handleAdd(wobj.wire));
211 | }
212 | this._canvasResize();
213 | return this;
214 | }
215 | shutdown() {
216 | this.$el.off();
217 | if (this._resizeObserver) {
218 | this._resizeObserver.disconnect();
219 | this._resizeObserver = undefined;
220 | }
221 | this.stopListening();
222 | }
223 | get gridStep() {
224 | return calcGridStep(this._settings);
225 | }
226 | get autoredraw() {
227 | return this._autoredraw;
228 | }
229 | set autoredraw(val) {
230 | this._autoredraw = val;
231 | if (val) this._drawAll();
232 | }
233 | get width() {
234 | return this._width;
235 | }
236 | get live() {
237 | return this._live;
238 | }
239 | set live(val) {
240 | if (this.live == val) return;
241 | this._live = val;
242 | this.trigger('change:live', val);
243 | this.trigger('change');
244 | }
245 | get start() {
246 | return this._settings.start;
247 | }
248 | set start(val) {
249 | if (this._settings.start == val) return;
250 | this._settings.start = val;
251 | this.trigger('change:start', val);
252 | this.trigger('change');
253 | }
254 | get pixelsPerTick() {
255 | return this._settings.pixelsPerTick;
256 | }
257 | set pixelsPerTick(val) {
258 | if (this._settings.pixelsPerTick == val) return;
259 | this._settings.pixelsPerTick = val;
260 | this.trigger('change:pixelsPerTick', val);
261 | this.trigger('change');
262 | }
263 | _canvasResize() {
264 | this._width = Math.max(this.$el.width() - 300, 100);
265 | this.$('canvas').attr('width', this._width);
266 | this.trigger('change:width', this._width);
267 | this.trigger('change');
268 | }
269 | _drawAll() {
270 | for (const wireid of this.model._wires.keys()) {
271 | this._draw(wireid);
272 | }
273 | }
274 | _draw(wireid) {
275 | const display3vl = this.model._circuit._display3vl;
276 | const canvas = this.$('tr[wireid="'+wireid+'"]').find('canvas');
277 | const waveform = this.model._wires.get(wireid).waveform;
278 | drawWaveform(waveform, canvas[0].getContext('2d'), this._settingsFor.get(wireid), display3vl);
279 | }
280 | _handleAdd(wire) {
281 | const wireid = getWireId(wire);
282 | this._settingsFor.set(wireid, extendSettings(this._settings, {base: 'hex', trigger: [], triggerId: null}));
283 | this.$('table').append(this._createRow(wire));
284 | }
285 | _handleRemove(wire) {
286 | const wireid = getWireId(wire);
287 | this.$('tr[wireid="'+wireid+'"]').remove();
288 | const settings = this._settingsFor.get(wireid);
289 | if (settings.triggerId)
290 | this.model._circuit.unmonitor(settings.triggerId);
291 | this._settingsFor.delete(wireid);
292 | }
293 | _createRow(wire) {
294 | const wireid = getWireId(wire);
295 | const settings = this._settingsFor.get(wireid);
296 | const display3vl = this.model._circuit._display3vl;
297 | const base_sel = wire.get('bits') > 1
298 | ? (this._baseSelectorMarkup instanceof Function ? this._baseSelectorMarkup(display3vl, wire.get('bits'), settings.base) : this._baseSelectorMarkup)
299 | : '';
300 | const trigger = wire.get('bits') > 1 ? this._busTriggerMarkup : this._bitTriggerMarkup;
301 | const row = $('
| '+base_sel+' | '+trigger+' | '+this._removeButtonMarkup+' | |
');
302 | row.attr('wireid', wireid);
303 | row.children('td').first().text(getWireName(wire));
304 | return row;
305 | }
306 | }
307 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | .joint-element .highlighted {
2 | outline: none;
3 | fill: #ecf0f1;
4 | stroke: #bdc3c7;
5 | cursor: crosshair;
6 | }
7 |
8 | .djs.fixed .joint-link {
9 | pointer-events: none;
10 | }
11 | .djs.fixed .joint-element {
12 | cursor: default;
13 | }
14 |
15 |
16 |
17 | /* .viewport is a
node wrapping all diagram elements in the paper */
18 | .joint-viewport {
19 | -webkit-user-select: none;
20 | -moz-user-select: none;
21 | user-select: none;
22 | }
23 |
24 | .joint-paper > svg,
25 | .joint-paper-background,
26 | .joint-paper-grid {
27 | position: absolute;
28 | top: 0;
29 | left: 0;
30 | right: 0;
31 | bottom: 0;
32 | }
33 |
34 | /*
35 | 1. IE can't handle paths without the `d` attribute for bounding box calculation
36 | 2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will
37 | break the links rendering.
38 |
39 | path:not([d]) {
40 | display: none;
41 | }
42 |
43 | */
44 |
45 |
46 | /* magnet is an element that can be either source or a target of a link */
47 | .djs:not(.fixed) [magnet=true]:not(.joint-element) {
48 | cursor: crosshair;
49 | }
50 | .djs:not(.fixed) [magnet=true]:not(.joint-element):hover {
51 | opacity: .7;
52 | }
53 |
54 | /*
55 |
56 | Elements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class "element basic Rect".
57 | This makes it possible to easilly style elements in CSS and have generic CSS rules applying to
58 | the whole group of elements. Each plugin can provide its own stylesheet.
59 |
60 | */
61 |
62 | .joint-element {
63 | /* Give the user a hint that he can drag&drop the element. */
64 | cursor: move;
65 | }
66 |
67 | .joint-element * {
68 | user-drag: none;
69 | }
70 |
71 | .joint-element .scalable * {
72 | /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
73 | vector-effect: non-scaling-stroke;
74 | }
75 | /*
76 |
77 | connection-wrap is a element of the joint.dia.Link that follows the .connection of that link.
78 | In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the
79 | .connection . The advantage of using .connection-wrap is to be able to catch pointer events
80 | in the neighborhood of the .connection . This is especially handy if the .connection is
81 | very thin.
82 |
83 | */
84 |
85 | .marker-source,
86 | .marker-target {
87 | /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */
88 | vector-effect: non-scaling-stroke;
89 | }
90 |
91 | /* Paper */
92 | .joint-paper {
93 | position: relative;
94 | }
95 | /* Paper */
96 |
97 | /* Highlighting */
98 | .joint-highlight-opacity {
99 | opacity: 0.3;
100 | }
101 | /* Highlighting */
102 |
103 |
104 | /* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */
105 | .joint-element .fobj {
106 | overflow: hidden;
107 | }
108 | .joint-element .fobj body {
109 | background-color: transparent;
110 | margin: 0px;
111 | position: static;
112 | }
113 | .joint-element .fobj div {
114 | text-align: center;
115 | vertical-align: middle;
116 | display: table-cell;
117 | padding: 0px 5px 0px 5px;
118 | }
119 |
120 | /* Paper */
121 | .joint-paper.joint-theme-dark {
122 | background-color: #18191b;
123 | }
124 | .joint-paper.joint-theme-default {
125 | background-color: #FFFFFF;
126 | }
127 | /* Paper */
128 |
129 | body {
130 | font-family: 'verdana', sans-serif;
131 | font-weight: normal;
132 | font-style: normal;
133 | }
134 |
135 | .joint-element foreignObject {
136 | overflow: hidden;
137 | }
138 |
139 | .joint-element foreignObject body {
140 | background-color: transparent;
141 | display: block;
142 | margin: 0;
143 | position: fixed;
144 | width: 100%;
145 | height: 100%;
146 | cursor: initial;
147 | }
148 |
149 | .joint-element foreignObject body input,
150 | .joint-element foreignObject body select {
151 | pointer-events: all;
152 | }
153 |
154 | .joint-element foreignObject body input[type='text'],
155 | .joint-element foreignObject body input[type='number'],
156 | .joint-element foreignObject body select {
157 | font-size: 8pt;
158 | border: 1px solid gray;
159 | box-sizing: border-box;
160 | position: absolute;
161 | transform: translate(0, -50%);
162 | top: 50%;
163 | }
164 |
165 | .joint-element foreignObject body input[type='text'] {
166 | font-family: 'monospace';
167 | width: 100%;
168 | }
169 |
170 | .joint-element foreignObject.tooltip body input[type='number'] {
171 | width: calc(100% - 10px);
172 | }
173 |
174 | .joint-element foreignObject body a {
175 | text-decoration: none;
176 | }
177 |
178 | .joint-element input.invalid, table.memeditor input.invalid {
179 | background: #ffaaaa;
180 | }
181 |
182 | .joint-element foreignObject.tooltip {
183 | visibility: hidden;
184 | opacity:0;
185 | transition:visibility 0s linear 0.5s,opacity 0.5s linear;
186 | }
187 |
188 | .joint-element foreignObject.tooltip:hover,
189 | g:hover > foreignObject.tooltip {
190 | visibility: visible;
191 | opacity:1;
192 | transition-delay:0s;
193 | }
194 |
195 | .joint-element foreignObject.tooltip body {
196 | border: 1px solid gray;
197 | box-sizing: border-box;
198 | background: white;
199 | padding: 5px;
200 | }
201 |
202 | div.wire_hover {
203 | position: fixed;
204 | pointer-events: none;
205 | background: white;
206 | border: 1px solid black;
207 | padding: 5px;
208 | font-size: 8pt;
209 | z-index: 200;
210 | }
211 |
212 | .joint-element .numvalue {
213 | font-family: monospace;
214 | font-size: 10px;
215 | }
216 |
217 | .joint-element text.numvalue {
218 | fill: black;
219 | text-anchor: middle;
220 | }
221 |
222 | table.monitor tr {
223 | padding: 0; margin: 0;
224 | font-size: 10px;
225 | }
226 |
227 | table.monitor td {
228 | padding: 0; margin: 0;
229 | }
230 |
231 | table.monitor {
232 | border-collapse: collapse;
233 | width: 100%;
234 | }
235 |
236 | table.monitor td.name {
237 | width: 100%;
238 | }
239 |
240 | table.monitor input[name=trigger], table.monitor select[name=trigger] {
241 | width: 5em;
242 | }
243 |
244 | canvas.wavecanvas {
245 | display: block;
246 | }
247 |
248 | table.memeditor {
249 | margin-top: 0.5em;
250 | }
251 |
252 | table.memeditor input {
253 | font-family: monospace;
254 | border: 1px solid #aaa;
255 | border-radius: 4px;
256 | padding: 0.2em 0.5em;
257 | }
258 |
259 | div[data-iopanel="input"] input, div[data-iopanel="output"] {
260 | font-family: monospace;
261 | }
262 |
263 | table.memeditor td:first-child {
264 | font-family: monospace;
265 | padding-right: 1em;
266 | }
267 |
268 | table.memeditor input.flash {
269 | animation-name: flash-animation;
270 | animation-duration: 1s;
271 | }
272 |
273 | table.memeditor input.isread {
274 | box-shadow: 0px 0px 5px green;
275 | }
276 |
277 | table.memeditor input.iswrite {
278 | box-shadow: 0px 0px 5px red;
279 | }
280 |
281 | table.memeditor input.iswrite.isread {
282 | box-shadow: 1px 1px 5px -1px red,
283 | -1px -1px 5px -1px green;
284 | }
285 |
286 | @keyframes flash-animation {
287 | from { background-color: yellow; }
288 | to { background-color: default; }
289 | }
290 |
291 | .joint-element circle.current_state {
292 | fill: yellow;
293 | }
294 |
295 | .joint-link path.next_trans, marker path.next_trans {
296 | stroke: #03c03c;
297 | fill: #03c03c;
298 | }
299 |
300 | /* jqueryui fix */
301 | .ui-dialog, .ui-dialog-content {
302 | box-sizing: content-box;
303 | }
304 |
--------------------------------------------------------------------------------
/src/tools.mjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import * as joint from 'jointjs';
4 | import _ from 'lodash';
5 |
6 | const circleArrowhead = {
7 | tagName: 'circle',
8 | attributes: {
9 | 'r': 7,
10 | 'fill': 'black',
11 | 'fill-opacity': 0.3,
12 | 'stroke': 'black',
13 | 'stroke-width': 2,
14 | 'cursor': 'move'
15 | }
16 | };
17 | export const CircleSourceArrowhead = joint.linkTools.SourceArrowhead.extend(_.merge({}, circleArrowhead));
18 | export const CircleTargetArrowhead = joint.linkTools.TargetArrowhead.extend(_.merge({}, circleArrowhead));
19 |
20 | export const DoublyButton = joint.linkTools.Button.extend({
21 | update() {
22 | if (this.relatedView.isShortWire()) {
23 | this.options.distance = this.options.distanceShort || this.options.distance;
24 | if (this.options.secondary) this.hide();
25 | } else {
26 | this.options.distance = this.options.distanceLong || this.options.distance;
27 | }
28 | return joint.linkTools.Button.prototype.update.apply(this, arguments);
29 | }
30 | });
31 | export const RemoveButton = DoublyButton.extend({
32 | name: 'remove',
33 | children: joint.linkTools.Remove.prototype.children,
34 | options: joint.linkTools.Remove.prototype.options
35 | });
36 | export const MonitorButton = DoublyButton.extend({
37 | name: 'monitor',
38 | children: [{
39 | tagName: 'circle',
40 | selector: 'button',
41 | attributes: {
42 | 'r': 7,
43 | 'fill': '#001DFF',
44 | 'cursor': 'pointer'
45 | }
46 | }, {
47 | tagName: 'path',
48 | selector: 'icon',
49 | attributes: {
50 | 'd': 'm -2.5,-0.5 a 2,2 0 1 0 4,0 2,2 0 1 0 -4,0 M 1,1 3,3',
51 | 'fill': 'none',
52 | 'stroke': '#FFFFFF',
53 | 'stroke-width': 2,
54 | 'pointer-events': 'none'
55 | }
56 | }],
57 | options: {
58 | action(evt) {
59 | this.notify('link:monitor');
60 | }
61 | }
62 | });
63 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 | const CleanWebpackPlugin = require("clean-webpack-plugin");
4 |
5 | const outputDirectory = 'dist';
6 |
7 | const tests = [
8 | {name: 'fulladder', title: 'Full Adder'},
9 | {name: 'serialadder', title: 'Serial Adder'},
10 | {name: 'cycleadder', title: 'Accumulating Adder'},
11 | {name: 'arithconst', title: 'Fused arithmetic with constants'},
12 | {name: 'lfsr', title: 'Linear Feedback Shift Register'},
13 | {name: 'sextium', title: 'Sextium III Processor'},
14 | {name: 'rom', title: 'Async ROM'},
15 | {name: 'ram', title: 'Simple RAM'},
16 | {name: 'fsm', title: 'Finite State Machine'},
17 | {name: 'gates', title: 'All available gates'},
18 | {name: 'biggate', title: 'N-ary gates'},
19 | {name: 'muxsparse', title: 'Sparse mux'},
20 | {name: 'io', title: 'Input/Output types'},
21 | {name: 'horner', title: 'Benchmark example'},
22 | {name: 'latch', title: 'Level-triggered D-latch example'},
23 | {name: 'warnings', title: 'Warnings example'}
24 | ];
25 |
26 | module.exports = {
27 | output: {
28 | path: path.resolve(__dirname, outputDirectory),
29 | filename: 'main.js',
30 | library: 'digitaljs',
31 | libraryTarget: 'umd',
32 | umdNamedDefine: true,
33 | globalObject: 'this'
34 | },
35 | entry: "./src/index.mjs",
36 | devtool: "source-map",
37 | module: {
38 | rules: [
39 | {
40 | test: /\.css$/,
41 | use: [
42 | 'style-loader',
43 | 'css-loader'
44 | ]
45 | },
46 | {
47 | test: /\.svg|\.png/,
48 | type: 'asset'
49 | },
50 | {
51 | test: require.resolve('jquery'),
52 | loader: 'expose-loader',
53 | options: {
54 | exposes: ['$']
55 | }
56 | }
57 | ]
58 | },
59 | plugins: [
60 | new CleanWebpackPlugin(),
61 | ].concat(tests.map(t => new HtmlWebpackPlugin({
62 | title: t.title,
63 | template: 'examples/template.html',
64 | test: JSON.stringify(require('./examples/' + t.name + '.json')),
65 | filename: 'test/' + t.name + '.html',
66 | inject: 'head'
67 | })))
68 | }
69 |
70 |
--------------------------------------------------------------------------------