diff --git a/package-lock.json b/package-lock.json index fd72b4b..d3c8bc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.14.0", "license": "BSD-2-Clause", "dependencies": { - "@joint/core": "^4.1.3", + "@joint/core": "~4.1.3", + "@joint/layout-directed-graph": "~4.1.4", "3vl": "^1.0.1", "babel-polyfill": "^6.26.0", "backbone": "^1.6.1", @@ -1818,6 +1819,24 @@ "dev": true, "license": "MIT" }, + "node_modules/@dagrejs/dagre": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.0.4.tgz", + "integrity": "sha512-jrEore+HhW1yg1Rsd9H1PPMcoEOD4bVh0WCXc6GqzyzubnJj4GaWGg8ETOrskTd/3n/g5LOzumGM4CCgpNLJNw==", + "license": "MIT", + "dependencies": { + "@dagrejs/graphlib": "2.1.13" + } + }, + "node_modules/@dagrejs/graphlib": { + "version": "2.1.13", + "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.1.13.tgz", + "integrity": "sha512-calbMa7Gcyo+/t23XBaqQqon8LlgE9regey4UVoikoenKBXvUnCUL3s9RP6USCxttfr0XWVICtYUuKMdehKqMw==", + "license": "MIT", + "engines": { + "node": ">17.0.0" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz", @@ -1829,9 +1848,9 @@ } }, "node_modules/@emnapi/core": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz", - "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz", + "integrity": "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==", "dev": true, "license": "MIT", "optional": true, @@ -1841,9 +1860,9 @@ } }, "node_modules/@emnapi/runtime": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz", - "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz", + "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==", "dev": true, "license": "MIT", "optional": true, @@ -2299,9 +2318,9 @@ } }, "node_modules/@jest/reporters/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", + "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, "license": "ISC", "dependencies": { @@ -2493,6 +2512,17 @@ "integrity": "sha512-X769blCoVxtx6NNm/cbHDXDOa+Gt7eZwrJMLnqJw8c5NkjmcYWCY1kA3ep8RfRRVG76f3QLNd9a8Q/aItI/WWw==", "license": "MPL-2.0" }, + "node_modules/@joint/layout-directed-graph": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@joint/layout-directed-graph/-/layout-directed-graph-4.1.4.tgz", + "integrity": "sha512-m1FGv8Gg9DeCRq+VDOQzBJ8hLQn8vJLmrpU/Dl4b4jEsWiRm+ScU6XXZm5tPlbhMXl28F1//gKK5xJCrsJ7M/w==", + "license": "MPL-2.0", + "dependencies": { + "@dagrejs/dagre": "~1.0.4", + "@dagrejs/graphlib": "~2.1.13", + "@joint/core": "~4.1.3" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -2809,9 +2839,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.9.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.1.tgz", - "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==", + "version": "24.10.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", + "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, "license": "MIT", "dependencies": { @@ -2826,9 +2856,9 @@ "license": "MIT" }, "node_modules/@types/yargs": { - "version": "17.0.34", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.34.tgz", - "integrity": "sha512-KExbHVa92aJpw9WDQvzBaGVE2/Pz+pLZQloT2hjL8IqsZnV62rlPOYvNnLmf/L2dyllfVUOVBj64M0z/46eR2A==", + "version": "17.0.35", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz", + "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==", "dev": true, "license": "MIT", "dependencies": { @@ -3763,9 +3793,9 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.20", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.20.tgz", - "integrity": "sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==", + "version": "2.8.32", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.32.tgz", + "integrity": "sha512-OPz5aBThlyLFgxyhdwf/s2+8ab3OvT7AdTNvKHBwpXomIYeXqpUUuT8LrdtxZSsWJ4R4CU1un4XGh5Ez3nlTpw==", "dev": true, "license": "Apache-2.0", "bin": { @@ -3818,9 +3848,9 @@ } }, "node_modules/browserslist": { - "version": "4.27.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz", - "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==", + "version": "4.28.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz", + "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==", "dev": true, "funding": [ { @@ -3839,10 +3869,10 @@ "license": "MIT", "peer": true, "dependencies": { - "baseline-browser-mapping": "^2.8.19", - "caniuse-lite": "^1.0.30001751", - "electron-to-chromium": "^1.5.238", - "node-releases": "^2.0.26", + "baseline-browser-mapping": "^2.8.25", + "caniuse-lite": "^1.0.30001754", + "electron-to-chromium": "^1.5.249", + "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { @@ -3901,9 +3931,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001751", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz", - "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==", + "version": "1.0.30001757", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz", + "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==", "dev": true, "funding": [ { @@ -4001,9 +4031,9 @@ } }, "node_modules/cjs-module-lexer": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.1.0.tgz", - "integrity": "sha512-UX0OwmYRYQQetfrLEZeewIFFI+wSTofC+pMBLNuH3RUuu/xzG1oz84UCEDOSoQlN3fZ4+AzmV50ZYvGqkMh9yA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.1.1.tgz", + "integrity": "sha512-+CmxIZ/L2vNcEfvNtLdU0ZQ6mbq3FZnwAP2PPTiKP+1QOoKwlKlPgb8UKV0Dds7QVaMnHm+FwSft2VB0s/SLjQ==", "dev": true, "license": "MIT" }, @@ -4151,13 +4181,13 @@ "license": "MIT" }, "node_modules/core-js-compat": { - "version": "3.46.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.46.0.tgz", - "integrity": "sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==", + "version": "3.47.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.47.0.tgz", + "integrity": "sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==", "dev": true, "license": "MIT", "dependencies": { - "browserslist": "^4.26.3" + "browserslist": "^4.28.0" }, "funding": { "type": "opencollective", @@ -4454,9 +4484,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.241", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.241.tgz", - "integrity": "sha512-ILMvKX/ZV5WIJzzdtuHg8xquk2y0BOGlFOxBVwTpbiXqWIH0hamG45ddU4R3PQ0gYu+xgo0vdHXHli9sHIGb4w==", + "version": "1.5.262", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.262.tgz", + "integrity": "sha512-NlAsMteRHek05jRUxUR0a5jpjYq9ykk6+kO0yRaMi5moe7u0fVIOeQ3Y30A8dIiWFBNUoQGi1ljb1i5VtS9WQQ==", "dev": true, "license": "ISC" }, @@ -4518,9 +4548,9 @@ } }, "node_modules/envinfo": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.19.0.tgz", - "integrity": "sha512-DoSM9VyG6O3vqBf+p3Gjgr/Q52HYBBtO3v+4koAxt1MnWr+zEnxE+nke/yXS4lt2P4SYCHQ4V3f1i88LQVOpAw==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.21.0.tgz", + "integrity": "sha512-Lw7I8Zp5YKHFCXL7+Dz95g4CcbMEpgvqZNNq3AmlT5XAV6CgAAk6gyAMqn2zjw08K9BHfcNuKrMiCPLByGafow==", "dev": true, "license": "MIT", "bin": { @@ -5262,9 +5292,9 @@ } }, "node_modules/html-webpack-plugin": { - "version": "5.6.4", - "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.4.tgz", - "integrity": "sha512-V/PZeWsqhfpE27nKeX9EO2sbR+D17A+tLf6qU+ht66jdUsN0QLKJN27Z+1+gHrVMKgndBahes0PU6rRihDgHTw==", + "version": "5.6.5", + "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.5.tgz", + "integrity": "sha512-4xynFbKNNk+WlzXeQQ+6YYsH2g7mpfPszQZUi3ovKlj+pDmngQ7vRXjrrmGROabmKwyQkcgcX5hqfOwHbFmK5g==", "dev": true, "license": "MIT", "dependencies": { @@ -5884,9 +5914,9 @@ } }, "node_modules/jest-config/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", + "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, "license": "ISC", "dependencies": { @@ -6247,9 +6277,9 @@ } }, "node_modules/jest-runtime/node_modules/glob": { - "version": "10.4.5", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", - "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", + "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, "license": "ISC", "dependencies": { @@ -6477,9 +6507,9 @@ "license": "MIT" }, "node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz", + "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==", "dev": true, "license": "MIT", "dependencies": { @@ -6829,9 +6859,9 @@ "license": "MIT" }, "node_modules/node-releases": { - "version": "2.0.26", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz", - "integrity": "sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==", + "version": "2.0.27", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", + "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==", "dev": true, "license": "MIT" }, @@ -7311,9 +7341,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", + "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, "license": "MIT", "dependencies": { @@ -8026,9 +8056,9 @@ } }, "node_modules/terser": { - "version": "5.44.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz", - "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==", + "version": "5.44.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.1.tgz", + "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -8418,9 +8448,9 @@ "license": "Apache-2.0" }, "node_modules/webpack": { - "version": "5.102.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", - "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", + "version": "5.103.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.103.0.tgz", + "integrity": "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==", "dev": true, "license": "MIT", "peer": true, @@ -8442,7 +8472,7 @@ "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", - "loader-runner": "^4.2.0", + "loader-runner": "^4.3.1", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^4.3.3", diff --git a/package.json b/package.json index 56037de..b192be3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "digitaljs", - "version": "0.14.0", + "version": "0.14.1", "description": "Digital logic simulator", "main": "./lib/circuit.js", "files": [ @@ -47,7 +47,8 @@ "webpack-cli": "^6.0.1" }, "dependencies": { - "@joint/core": "^4.1.3", + "@joint/core": "~4.1.3", + "@joint/layout-directed-graph": "~4.1.4", "3vl": "^1.0.1", "babel-polyfill": "^6.26.0", "backbone": "^1.6.1", diff --git a/src/cells/base.mjs b/src/cells/base.mjs index 41453c9..4700b59 100644 --- a/src/cells/base.mjs +++ b/src/cells/base.mjs @@ -48,13 +48,11 @@ export const Gate = joint.dia.Element.define('Gate', { attrs: { '.': { magnet: false }, body: { stroke: 'black', strokeWidth: 2 }, - 'text': { - fontSize: '8pt', - fill: 'black' - }, label: { refX: .5, refDy: 3, - textAnchor: 'middle' + textAnchor: 'middle', + fontSize: '8pt', + fill: 'black' } }, ports: { @@ -93,12 +91,12 @@ export const Gate = joint.dia.Element.define('Gate', { } joint.dia.Element.prototype.initialize.apply(this, arguments); this.prepare(); - + this.bindAttrToProp('label/text', 'label'); if (this._unsupportedPropChanges.length > 0) { this.on(this._unsupportedPropChanges.map(prop => 'change:'+prop).join(' '), (__, ___, opt) => { if (opt.init) return; - + const changed = _.intersection(Object.keys(this.changed), this._unsupportedPropChanges); changed.forEach(attr => { this.set(attr, this.previous(attr), {init: true}); @@ -113,7 +111,7 @@ export const Gate = joint.dia.Element.define('Gate', { this.attr(attr, this.get(prop)); this.on('change:' + prop, (_, val) => this.attr(attr, val)); }, - + /* * Private methods. */ @@ -186,12 +184,12 @@ export const Gate = joint.dia.Element.define('Gate', { in: this.get('inputSignals'), out: this.get('outputSignals') } - + for (const port of ports) { console.assert(port.bits >= 0); signals[port.dir][port.id] = this._resetPortValue(port); } - + this.set('inputSignals', signals.in); this.set('outputSignals', signals.out); }, @@ -200,11 +198,11 @@ export const Gate = joint.dia.Element.define('Gate', { in: this.get('inputSignals'), out: this.get('outputSignals') } - + for (const port of ports) { delete signals[port.dir][port.id]; } - + this.set('inputSignals', signals.in); this.set('outputSignals', signals.out); }, diff --git a/src/cells/fsm.mjs b/src/cells/fsm.mjs index 35f0346..3f25aa7 100644 --- a/src/cells/fsm.mjs +++ b/src/cells/fsm.mjs @@ -3,6 +3,7 @@ import $ from 'jquery'; import _ from 'lodash'; import * as joint from '@joint/core'; +import { DirectedGraph } from '@joint/layout-directed-graph'; import { Box, BoxView } from './base.mjs'; import { Vector3vl } from '3vl'; import dagre from 'dagre'; @@ -15,7 +16,7 @@ export const FSM = Box.define('FSM', { init_state: 0, states: 1, trans_table: [], - + size: { width: 80, height: 3*16+8 }, ports: { groups: { @@ -31,28 +32,28 @@ export const FSM = Box.define('FSM', { initialize() { const bits = this.get('bits'); const polarity = this.get('polarity'); - + const init_state = this.get('init_state'); const states = this.get('states'); const trans_table = this.get('trans_table'); - + this.get('ports').items = [ { id: 'in', group: 'in', dir: 'in', bits: bits.in, labelled: true }, { id: 'clk', group: 'in', dir: 'in', bits: 1, polarity: polarity.clock, decor: Box.prototype.decorClock, labelled: true }, { id: 'arst', group: 'in', dir: 'in', bits: 1, polarity: polarity.arst, labelled: true }, { id: 'out', group: 'out', dir: 'out', bits: bits.out, labelled: true } ]; - + Box.prototype.initialize.apply(this, arguments); - + const current_state = this.get('current_state'); - + this.fsmgraph = new joint.dia.Graph; const statenodes = []; for (let n = 0; n < states; n++) { const node = new joint.shapes.standard.Circle({stateNo: n, id: 'state' + n, isInit: n == init_state}); node.attr('label/text', String(n)); - node.resize(100,50); + node.resize(50,50); if (n == init_state) node.attr('body/strokeWidth', 3) if (n == current_state) @@ -79,7 +80,7 @@ export const FSM = Box.define('FSM', { trans.addTo(this.fsmgraph); } } - + this.listenTo(this, 'change:current_state', (model, state) => { const pstate = model.previous('current_state'); this.fsmgraph.getCell('state' + pstate).removeAttr('body/class'); @@ -206,7 +207,7 @@ export const FSMView = BoxView.extend({ graph.resetCells(graph.getCells()); // lazy layout if (!graph.get('laid_out')) { - joint.layout.DirectedGraph.layout(graph, { + DirectedGraph.layout(graph, { dagre: dagre, graphlib: graphlib }); diff --git a/src/cells/io.mjs b/src/cells/io.mjs index b481c86..de89636 100644 --- a/src/cells/io.mjs +++ b/src/cells/io.mjs @@ -118,7 +118,7 @@ export const IO = NumBase.define('IO', { this._setPortsBits(b); if (this.get('mode') != 0) this._checkMode(); }); - this.bindAttrToProp('text.ioname/text', 'net'); + this.bindAttrToProp('ioname/text', 'net'); }, onAdd() { this._checkMode(); @@ -183,7 +183,7 @@ export const Input = IO.define('Input', { refHeight: .6, refWidth: .6, cursor: 'pointer' }, - 'foreignObject.valinput': { + valinput: { refX: .5, refY: .5, refWidth: -10, refHeight: -10, xAlignment: 'middle', yAlignment: 'middle', @@ -224,6 +224,7 @@ export const Input = IO.define('Input', { markupBus: IO.prototype.markupBus.concat([{ tagName: 'foreignObject', className: 'valinput', + selector: 'valinput', children: [{ tagName: 'body', namespaceURI: 'http://www.w3.org/1999/xhtml', diff --git a/src/cells/subcircuit.mjs b/src/cells/subcircuit.mjs index 7e7e79c..9499546 100644 --- a/src/cells/subcircuit.mjs +++ b/src/cells/subcircuit.mjs @@ -22,13 +22,14 @@ export const Subcircuit = Box.define('Subcircuit', { }, type: { refX: .5, refY: -10, - textAnchor: 'middle', textVerticalAnchor: 'middle' + textAnchor: 'middle', textVerticalAnchor: 'middle', + fontSize: '8pt' } } }, { initialize() { - this.bindAttrToProp('text.type/text', 'celltype'); - + this.bindAttrToProp('type/text', 'celltype'); + const graph = this.get('graph'); console.assert(graph instanceof joint.dia.Graph); graph.set('subcircuit', this); @@ -59,7 +60,7 @@ export const Subcircuit = Box.define('Subcircuit', { this.set('circuitIOmap', iomap); this.get('ports').items = ports; this.set('warning', graph._warnings > 0); - + Box.prototype.initialize.apply(this, arguments); }, _resetPortValue(port) { diff --git a/src/index.mjs b/src/index.mjs index e601b5c..bfb39e5 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -4,6 +4,7 @@ import 'babel-polyfill'; import dagre from 'dagre'; import graphlib from 'graphlib'; import * as joint from '@joint/core'; +import { DirectedGraph } from '@joint/layout-directed-graph'; import _ from 'lodash'; import $ from 'jquery'; import 'jquery-ui/ui/widgets/dialog.js'; @@ -165,7 +166,7 @@ export class Circuit extends HeadlessCircuit { // lazy graph layout if (!graph.get('laid_out')) { if (this._layoutEngine == "dagre") { - joint.layout.DirectedGraph.layout(graph, { + DirectedGraph.layout(graph, { nodeSep: 20, edgeSep: 0, rankSep: 110, diff --git a/src/style.css b/src/style.css index dec6244..da5467f 100644 --- a/src/style.css +++ b/src/style.css @@ -132,6 +132,14 @@ body { font-style: normal; } +.joint-element .body { + fill: rgb(255, 255, 255); +} + +.joint-element path.decor { + fill: transparent; +} + .joint-element foreignObject { overflow: hidden; }