├── .babelrc ├── .gitignore ├── .vscode └── launch.json ├── LICENSE.txt ├── README.md ├── package.json ├── src ├── bnfdisplay │ └── bnfdisplay.js ├── main.js ├── model │ ├── bnftogrammar.js │ ├── choice.js │ ├── chunk.js │ ├── expression.js │ ├── grammar.js │ ├── grammartobnf.js │ ├── grammartorrdiagram.js │ ├── literal.js │ ├── repetition.js │ ├── rule.js │ ├── rulereference.js │ ├── sequence.js │ └── specialsequence.js ├── ui │ ├── layoutinfo.js │ ├── rrbreak.js │ ├── rrchoice.js │ ├── rrdiagram.js │ ├── rrdiagramtosvg.js │ ├── rrelement.js │ ├── rrline.js │ ├── rrloop.js │ ├── rrsequence.js │ ├── rrtext.js │ └── svg │ │ ├── svgcontent.js │ │ ├── svgline.js │ │ └── svgpath.js └── utils │ └── utils.js ├── webpack.config.js └── www └── index1.html /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | www/rrdiagram.js 3 | www/rrdiagram.js.map -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "chrome", 6 | "request": "launch", 7 | "name": "Launch Chrome against localhost", 8 | "url": "http://localhost:8080", 9 | "webRoot": "${workspaceRoot}" 10 | }, 11 | { 12 | "type": "chrome", 13 | "request": "attach", 14 | "name": "Attach to Chrome", 15 | "port": 9222, 16 | "webRoot": "${workspaceRoot}" 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | RRDiagram-JS 2 | --- 3 | 4 | Generate railroad diagrams from code or BNF. Generate BNF from code. 5 | 6 | RR Diagram is a Javascript library that generates railroad diagrams (also called syntax diagrams) from code or from BNF notation. The output format is a very compact SVG image where rules can contain links. 7 | 8 | RR Diagram can also be used to generate BNF notation from a model. 9 | 10 | This is a Javascript port of the [Java-based version](https://github.com/Chrriis/RRDiagram). This version adds the capability of converting BNF present in an HTML page as well as relying on CSS styles from the page to style the SVG content. 11 | 12 | Example 13 | ======= 14 | 15 | This is the kind of diagrams that can get generated: 16 | ![H2 Select](http://rrdiagram.sourceforge.net/H2Select.svg) 17 | 18 | The above is generated using the right conversion options on this BNF: 19 | 
 20 | H2_SELECT = 
 21 | 'SELECT' [ 'TOP' term ] [ 'DISTINCT' | 'ALL' ] selectExpression {',' selectExpression} \
 22 | 'FROM' tableExpression {',' tableExpression} [ 'WHERE' expression ] \
 23 | [ 'GROUP BY' expression {',' expression} ] [ 'HAVING' expression ] \
 24 | [ ( 'UNION' [ 'ALL' ] | 'MINUS' | 'EXCEPT' | 'INTERSECT' ) select ] [ 'ORDER BY' order {',' order} ] \
 25 | [ 'LIMIT' expression [ 'OFFSET' expression ] [ 'SAMPLE_SIZE' rowCountInt ] ] \
 26 | [ 'FOR UPDATE' ];
 27 |
28 | 29 | Usage 30 | ===== 31 | 32 | To convert BNF text to a nice diagram, place the text in a `pre` tag and give it a class like `BNF`. Then include rrdiagram.js in your webpage. At the end of your page, add the following script to replace all those `pre` tags using the `BNF` class with a div that uses the `BNFSVG` class: 33 | ```Javascript 34 | var bnfDisplay = new rrdiagram.bnfdisplay.BNFDisplay(); 35 | bnfDisplay.replaceBNF('BNF', 'BNFSVG'); 36 | ``` 37 | 38 | Styles used by the produced diagrams must be defined in the page. Here is an example of those definitions: 39 | ```CSS 40 | .rrConnector {fill:none;stroke:#222222;} 41 | .rrRule {fill:#d3f0ff;stroke:#222222;} 42 | .rrRuleText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 43 | .rrLiteral {fill:#90d9ff;stroke:#222222;} 44 | .rrLiteralText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 45 | .rrSpecialSequence {fill:#e4f4ff;stroke:#222222;} 46 | .rrSpecialSequenceText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 47 | .rrLoopCardinalities {fill:#000000;font-family:Verdana,Sans-serif;font-size:10px;} 48 | ``` 49 | 50 | The whole API is available too. 51 | 52 | The diagram model represents the actual constructs visible on the diagram. 53 | To convert a diagram model to SVG: 54 | ```Javascript 55 | var rrDiagram = new rrdiagram.ui.RRDiagram(rrElement); 56 | var rrDiagramToSVG = new rrdiagram.ui.RRDiagramToSVG(); 57 | var svg = rrDiagramToSVG.convert(rrDiagram); 58 | ``` 59 | 60 | The grammar model represents a BNF-like grammar. 61 | It can be converted to a diagram model: 62 | ```Javascript 63 | var grammar = new rrdiagram.model.Grammar(rules); 64 | var grammarToRRDiagram = new rrdiagram.model.GrammarToRRDiagram(); 65 | var rules = grammar.getRules(); 66 | for(var i=0; i 91 | - definition 92 | = 93 | := 94 | ::= 95 | - concatenation 96 | , 97 | <whitespace> 98 | - termination 99 | ; 100 | - alternation 101 | | 102 | - option 103 | [ ... ] 104 | ? 105 | - repetition 106 | { ... } => 0..N 107 | expression* => 0..N 108 | expression+ => 1..N 109 | <digits> * expression => <digits>...<digits> 110 | <digits> * [expression] => <0>...<digits> 111 | <digits> * expression? => <0>...<digits> 112 | - grouping 113 | ( ... ) 114 | - literal 115 | " ... " or ' ... ' 116 | - special characters 117 | (? ... ?) 118 | - comments 119 | (* ... *) 120 | 121 | 122 | When getting the BNF syntax from the grammar model, it is possible to tweak the kind of BNF to get by changing some options on the converter. 123 | 124 | License 125 | ======= 126 | This library is provided under the ASL, version 2.0 or later. 127 | 128 | 129 | 130 | Setup 131 | --- 132 | 133 | ``` 134 | npm install 135 | ``` 136 | 137 | 138 | 139 | Compile 140 | --- 141 | 142 | ``` 143 | npm run compile 144 | ``` 145 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rrdiagram-js", 3 | "version": "1.0.7", 4 | "description": "Generate railroad diagrams from code or BNF, generate BNF from code", 5 | "main": "main.js", 6 | "scripts": { 7 | "compile": "webpack", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type" : "git", 12 | "url" : "https://github.com/Chrriis/rrdiagram-js.git" 13 | }, 14 | "keywords": ["railroad", "syntax", "diagram", "bnf", "ebnf", "svg"], 15 | "author": "Christopher Deckers ", 16 | "license": "ASL 2.0", 17 | "dependencies": { 18 | "babel-core": "^6.25.0", 19 | "babel-loader": "^7.0.0", 20 | "babel-polyfill": "^6.23.0", 21 | "babel-preset-latest": "^6.24.1", 22 | "webpack": "^2.6.1" 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/bnfdisplay/bnfdisplay.js: -------------------------------------------------------------------------------- 1 | import BNFToGrammar from '../model/bnftogrammar'; 2 | import GrammarToRRDiagram from '../model/grammartorrdiagram'; 3 | import RRDiagramToSVG from '../ui/rrdiagramtosvg'; 4 | 5 | export default class BNFDisplay { 6 | 7 | constructor() { 8 | this.bnfToGrammar = new BNFToGrammar(); 9 | this.grammarToRRDiagram = new GrammarToRRDiagram(); 10 | this.grammarToRRDiagram.ruleConsideredAsLineBreak = "\\"; 11 | this.rrDiagramToSVG = new RRDiagramToSVG(); 12 | } 13 | 14 | /** 15 | * @return {BNFToGrammar} 16 | */ 17 | getBNFToGrammar() { 18 | return this.bnfToGrammar; 19 | } 20 | 21 | /** 22 | * @return {GrammarToRRDiagram} 23 | */ 24 | getGrammarToRRDiagram() { 25 | return this.grammarToRRDiagram; 26 | } 27 | 28 | /** 29 | * @return {RRDiagramToSVG} 30 | */ 31 | getRRDiagramToSVG() { 32 | return this.rrDiagramToSVG; 33 | } 34 | 35 | /** 36 | * @param {string} className 37 | * @param {string} newClassName 38 | */ 39 | replaceBNF(className, newClassName) { 40 | const elements = Array.from(document.getElementsByClassName(className)); 41 | for (const element of elements) { 42 | if(element.tagName.toLowerCase() === 'pre') { 43 | const newElement = document.createElement('div'); 44 | // Give a dummy rule definition to satisfy parser. 45 | const bnf = element.innerHTML; 46 | const grammar = this.bnfToGrammar.convert('a = ' + bnf); 47 | const rules = grammar.getRules(); 48 | if(rules.length == 1) { 49 | const rule = rules[0]; 50 | const rrDiagram = this.grammarToRRDiagram.convert(rule); 51 | const svg = this.rrDiagramToSVG.convert(rrDiagram); 52 | const svgContainer = document.createElement('div'); 53 | svgContainer.className = newClassName; 54 | svgContainer.innerHTML = svg; 55 | newElement.appendChild(svgContainer); 56 | } else { 57 | newElement.appendChild(document.createTextNode('Error while loading BNF: ' + bnf)); 58 | } 59 | element.parentElement.replaceChild(newElement, element); 60 | } 61 | } 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import BNFDisplay from './bnfdisplay/BNFDisplay'; 2 | 3 | import BNFToGrammar from './model/bnftogrammar'; 4 | import Choice from './model/choice'; 5 | import Grammar from './model/grammar'; 6 | import GrammarToBNF from './model/grammartobnf'; 7 | import GrammarToRRDiagram from './model/grammartorrdiagram'; 8 | import Literal from './model/literal'; 9 | import Repetition from './model/repetition'; 10 | import Rule from './model/rule'; 11 | import RuleReference from './model/rulereference'; 12 | import Sequence from './model/sequence'; 13 | import SpecialSequence from './model/specialsequence'; 14 | 15 | import RRBreak from './ui/rrbreak'; 16 | import RRChoice from './ui/rrchoice'; 17 | import RRDiagram from './ui/rrdiagram'; 18 | import RRDiagramToSVG from './ui/rrdiagramtosvg'; 19 | import RRLine from './ui/rrline'; 20 | import RRLoop from './ui/rrloop'; 21 | import RRSequence from './ui/rrsequence'; 22 | import RRText from './ui/rrtext'; 23 | 24 | 25 | export const bnfdisplay = { 26 | BNFDisplay, 27 | } 28 | 29 | export const model = { 30 | BNFToGrammar, 31 | Choice, 32 | Grammar, 33 | GrammarToBNF, 34 | GrammarToRRDiagram, 35 | Literal, 36 | Repetition, 37 | Rule, 38 | RuleReference, 39 | Sequence, 40 | SpecialSequence, 41 | } 42 | 43 | export const ui = { 44 | RRBreak, 45 | RRChoice, 46 | RRDiagram, 47 | RRDiagramToSVG, 48 | RRLine, 49 | RRLoop, 50 | RRSequence, 51 | RRText, 52 | } 53 | -------------------------------------------------------------------------------- /src/model/bnftogrammar.js: -------------------------------------------------------------------------------- 1 | import Chunk from './chunk'; 2 | import Rule from './rule'; 3 | import Grammar from './grammar'; 4 | 5 | /** 6 | * @param {string} name 7 | * @param {Chunk} chunk 8 | * @param {string} originalExpressionText 9 | */ 10 | function createRule(name, chunk, originalExpressionText) { 11 | chunk.prune(); 12 | const expression = chunk.getExpression(); 13 | const rule = new Rule(name, expression, originalExpressionText); 14 | return rule; 15 | } 16 | 17 | /** 18 | * @param {Chunk} parentChunk 19 | * @param {function(): string} readNext 20 | * @param {string} stopChar 21 | * @return {string} 22 | */ 23 | function loadExpression(parentChunk, readNext, stopChar) { 24 | const expressionTextSB = []; 25 | let lastChar = 0; 26 | const sb = []; 27 | let isFirst = true; 28 | let isInSpecialGroup = false; 29 | let specialGroupChar = 0; 30 | const isLiteral = parentChunk.getType() == Chunk.ChunkType.LITERAL; 31 | for (let c; (c = readNext()) != -1;) { 32 | expressionTextSB.push(c); 33 | if (isLiteral) { 34 | if (c == stopChar) { 35 | const s = sb.join(""); 36 | parentChunk.setText(s); 37 | return expressionTextSB.join(""); 38 | } 39 | sb.push(c); 40 | } else { 41 | if (isFirst && parentChunk.getType() == Chunk.ChunkType.GROUP) { 42 | switch (c) { 43 | case '*': 44 | isInSpecialGroup = true; 45 | specialGroupChar = c; 46 | break; 47 | case '?': 48 | isInSpecialGroup = true; 49 | specialGroupChar = c; 50 | break; 51 | } 52 | } 53 | isFirst = false; 54 | if (isInSpecialGroup) { 55 | if (c == ')' && lastChar == specialGroupChar) { 56 | // Mutate parent group 57 | switch (specialGroupChar) { 58 | case '*': parentChunk.setType(Chunk.ChunkType.COMMENT); break; 59 | case '?': parentChunk.setType(Chunk.ChunkType.SPECIAL_SEQUENCE); break; 60 | } 61 | let comment = sb.join(""); 62 | comment = comment.slice(1, comment.length - 1).trim(); 63 | parentChunk.setText(comment); 64 | return expressionTextSB.join(""); 65 | } 66 | if (sb.length > 0 || !/\s/.test(c)) { 67 | sb.push(c); 68 | } 69 | } else { 70 | if (c == stopChar) { 71 | const content = sb.join("").trim(); 72 | if (content.length > 0) { 73 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 74 | } 75 | return expressionTextSB.join(""); 76 | } 77 | switch (c) { 78 | case ',': 79 | case ' ': 80 | case '\n': 81 | case '\r': 82 | case '\t': { 83 | const content = sb.join("").trim(); 84 | if (content.length > 0) { 85 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 86 | } 87 | sb.length = 0; 88 | // parentChunk.addChunk(new Chunk(Chunk.ChunkType.CONCATENATION)); 89 | break; 90 | } 91 | case '|': { 92 | const content = sb.join("").trim(); 93 | if (content.length > 0) { 94 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 95 | } 96 | sb.length = 0; 97 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.ALTERNATION)); 98 | break; 99 | } 100 | case '*': 101 | case '+': 102 | case '?': { 103 | const content = sb.join("").trim(); 104 | if (content.length > 0) { 105 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 106 | } 107 | sb.length = 0; 108 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.REPETITION_TOKEN, c)); 109 | break; 110 | } 111 | case '\"': { 112 | const content = sb.join("").trim(); 113 | if (content.length > 0) { 114 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 115 | } 116 | sb.length = 0; 117 | const literalChunk = new Chunk(Chunk.ChunkType.LITERAL); 118 | const subExpressionText = loadExpression(literalChunk, readNext, '\"'); 119 | expressionTextSB.push(subExpressionText); 120 | parentChunk.addChunk(literalChunk); 121 | break; 122 | } 123 | case '\'': { 124 | const content = sb.join("").trim(); 125 | if (content.length > 0) { 126 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 127 | } 128 | sb.length = 0; 129 | const literalChunk = new Chunk(Chunk.ChunkType.LITERAL); 130 | const subExpressionText = loadExpression(literalChunk, readNext, '\''); 131 | expressionTextSB.push(subExpressionText); 132 | parentChunk.addChunk(literalChunk); 133 | break; 134 | } 135 | case '(': { 136 | const content = sb.join("").trim(); 137 | if (content.length > 0) { 138 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 139 | } 140 | sb.length = 0; 141 | const groupChunk = new Chunk(Chunk.ChunkType.GROUP); 142 | const subExpressionText = loadExpression(groupChunk, readNext, ')'); 143 | expressionTextSB.push(subExpressionText); 144 | parentChunk.addChunk(groupChunk); 145 | break; 146 | } 147 | case '[': { 148 | const content = sb.join("").trim(); 149 | if (content.length > 0) { 150 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 151 | } 152 | sb.length = 0; 153 | const optionChunk = new Chunk(Chunk.ChunkType.OPTION); 154 | const subExpressionText = loadExpression(optionChunk, readNext, ']'); 155 | expressionTextSB.push(subExpressionText); 156 | parentChunk.addChunk(optionChunk); 157 | break; 158 | } 159 | case '{': { 160 | const content = sb.join("").trim(); 161 | if (content.length > 0) { 162 | parentChunk.addChunk(new Chunk(Chunk.ChunkType.RULE, content)); 163 | } 164 | sb.length = 0; 165 | const repetitionChunk = new Chunk(Chunk.ChunkType.REPETITION); 166 | repetitionChunk.setMinCount(0); 167 | const subExpressionText = loadExpression(repetitionChunk, readNext, '}'); 168 | expressionTextSB.push(subExpressionText); 169 | parentChunk.addChunk(repetitionChunk); 170 | break; 171 | } 172 | default: { 173 | if (sb.length > 0 || !/\s/.test(c)) { 174 | sb.push(c); 175 | } 176 | break; 177 | } 178 | } 179 | } 180 | lastChar = c; 181 | } 182 | } 183 | return expressionTextSB.join(""); 184 | } 185 | 186 | 187 | export default class BNFToGrammar { 188 | 189 | /** 190 | * @param {string} text 191 | * @return {Grammar} 192 | */ 193 | convert(text) { 194 | const readNext = (function () { 195 | // all your code here 196 | let index = 0; 197 | return function () { 198 | if (index < text.length) { 199 | const char = text[index]; 200 | index++; 201 | return char; 202 | } 203 | return -1; 204 | }; 205 | })(); 206 | const sb = []; 207 | const ruleList = []; 208 | for (let c; (c = readNext()) != -1;) { 209 | switch (c) { 210 | case '=': { 211 | const chunk = new Chunk(Chunk.ChunkType.GROUP); 212 | let expressionText = loadExpression(chunk, readNext, ';'); 213 | if(expressionText.endsWith(";")) { 214 | expressionText = expressionText.slice(0, expressionText.length - 1); 215 | } 216 | let ruleName = sb.join(""); 217 | sb.length = 0; 218 | if (ruleName.endsWith(":")) { 219 | ruleName = ruleName.slice(0, ruleName.length - 1); 220 | if (ruleName.endsWith(":")) { 221 | ruleName = ruleName.slice(0, ruleName.length - 1); 222 | } 223 | } 224 | ruleName = ruleName.trim(); 225 | const rule = createRule(ruleName, chunk, expressionText); 226 | ruleList.push(rule); 227 | break; 228 | } 229 | // Consider that '(' in rule name is start of a comment. 230 | case '(': { 231 | if (readNext() != '*') { 232 | throw "Expecting start of a comment after '(' but could not find '*'!"; 233 | } 234 | let lastChar = 0; 235 | for (let c2; (c2 = readNext()) != -1;) { 236 | if (c2 == ')' && lastChar == '*') { 237 | break; 238 | } 239 | lastChar = c2; 240 | } 241 | break; 242 | } 243 | default: { 244 | if (!/\s/.test(c) || sb.length > 0) { 245 | sb.push(c); 246 | } 247 | break; 248 | } 249 | } 250 | } 251 | return new Grammar(ruleList); 252 | } 253 | 254 | } 255 | -------------------------------------------------------------------------------- /src/model/choice.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import Sequence from './sequence'; 3 | import GrammarToRRDiagram from './grammartorrdiagram'; 4 | import RRElement from '../ui/rrelement'; 5 | import GrammarToBNF from './grammartobnf'; 6 | import RRChoice from '../ui/rrchoice'; 7 | 8 | export default class Choice extends Expression { 9 | 10 | /** 11 | * @param {Expression | Expression[]} expressions 12 | */ 13 | constructor(expressions) { 14 | super(); 15 | if (arguments.length == 0) { 16 | expressions = []; 17 | } else if (expressions.constructor !== Array) { 18 | expressions = arguments; 19 | } 20 | this.expressions = expressions; 21 | } 22 | 23 | /** 24 | * @return {Expression[]} 25 | */ 26 | getExpressions() { 27 | return this.expressions; 28 | } 29 | 30 | /** 31 | * @param {GrammarToRRDiagram} grammarToRRDiagram 32 | * @return {RRElement} 33 | */ 34 | toRRElement(grammarToRRDiagram) { 35 | const rrElements = []; 36 | for (let expression of this.expressions) { 37 | rrElements.push(expression.toRRElement(grammarToRRDiagram)); 38 | } 39 | return new RRChoice(rrElements); 40 | } 41 | 42 | /** 43 | * @param {GrammarToBNF} grammarToBNF 44 | * @param {string[]} sb 45 | * @param {boolean} isNested 46 | */ 47 | toBNF(grammarToBNF, sb, isNested) { 48 | const expressionList = []; 49 | let hasNoop = false; 50 | for (const expression of this.expressions) { 51 | if (expression instanceof Sequence && expression.getExpressions().length == 0) { 52 | hasNoop = true; 53 | } else { 54 | expressionList.push(expression); 55 | } 56 | } 57 | if (expressionList.length == 0) { 58 | sb.push("( )"); 59 | } else if (hasNoop && expressionList.length == 1) { 60 | const isUsingMultiplicationTokens = grammarToBNF.isUsingMultiplicationTokens; 61 | if (!isUsingMultiplicationTokens) { 62 | sb.push("[ "); 63 | } 64 | expressionList[0].toBNF(grammarToBNF, sb, isUsingMultiplicationTokens); 65 | if (!isUsingMultiplicationTokens) { 66 | sb.push(" ]"); 67 | } 68 | } else { 69 | const isUsingMultiplicationTokens = grammarToBNF.isUsingMultiplicationTokens; 70 | if (hasNoop && !isUsingMultiplicationTokens) { 71 | sb.push("[ "); 72 | } else if (hasNoop || isNested && expressionList.length > 1) { 73 | sb.push("( "); 74 | } 75 | const count = expressionList.length; 76 | for (let i = 0; i < count; i++) { 77 | if (i > 0) { 78 | sb.push(" | "); 79 | } 80 | expressionList[i].toBNF(grammarToBNF, sb, false); 81 | } 82 | if (hasNoop && !isUsingMultiplicationTokens) { 83 | sb.push(" ]"); 84 | } else if (hasNoop || isNested && expressionList.length > 1) { 85 | sb.push(" )"); 86 | if (hasNoop) { 87 | sb.push("?"); 88 | } 89 | } 90 | } 91 | } 92 | 93 | /** 94 | * @param {*} o 95 | * @return {boolean} 96 | */ 97 | equals(o) { 98 | if(!(o instanceof Choice)) { 99 | return false; 100 | } 101 | if(this.expressions.length != o.expressions.length) { 102 | return false; 103 | } 104 | for (let i = 0; i < this.expressions.length; i++) { 105 | if(!this.expressions[i].equals(o.expressions[i])) { 106 | return false; 107 | } 108 | } 109 | return true; 110 | } 111 | 112 | } -------------------------------------------------------------------------------- /src/model/chunk.js: -------------------------------------------------------------------------------- 1 | import Sequence from './sequence'; 2 | import SpecialSequence from './specialsequence'; 3 | import Repetition from './repetition'; 4 | import RuleReference from './rulereference'; 5 | import Choice from './choice'; 6 | import Literal from './literal'; 7 | import Expression from './expression'; 8 | 9 | 10 | const ChunkType = { 11 | RULE: 'RULE', 12 | REPETITION_TOKEN: 'REPETITION_TOKEN', 13 | // CONCATENATION: 'CONCATENATION', 14 | ALTERNATION: 'ALTERNATION', 15 | GROUP: 'GROUP', 16 | COMMENT: 'COMMENT', 17 | SPECIAL_SEQUENCE: 'SPECIAL_SEQUENCE', 18 | LITERAL: 'LITERAL', 19 | OPTION: 'OPTION', 20 | REPETITION: 'REPETITION', 21 | CHOICE: 'CHOICE', 22 | }; 23 | 24 | /** 25 | * @param {Expression} expression 26 | * @return {boolean} 27 | */ 28 | function isNoop(expression) { 29 | return expression instanceof Sequence && expression.getExpressions().length == 0; 30 | } 31 | 32 | export default class Chunk { 33 | 34 | static get ChunkType() { 35 | return ChunkType; 36 | } 37 | 38 | constructor(type, text) { 39 | this.type = type; 40 | this.text = text; 41 | this.minCount = 0; 42 | this.maxCount = null; 43 | this.chunkList = null; 44 | } 45 | 46 | getType() { 47 | return this.type; 48 | } 49 | 50 | setType(type) { 51 | this.type = type; 52 | } 53 | 54 | setText(text) { 55 | this.text = text; 56 | } 57 | 58 | setMinCount(minCount) { 59 | this.minCount = minCount; 60 | } 61 | 62 | setMaxCount(maxCount) { 63 | this.maxCount = maxCount; 64 | } 65 | 66 | addChunk(chunk) { 67 | if (this.chunkList == null) { 68 | this.chunkList = []; 69 | } 70 | this.chunkList.push(chunk); 71 | } 72 | 73 | prune() { 74 | let hasAlternation = false; 75 | for (let i = this.chunkList.length - 1; i >= 0; i--) { 76 | const chunk = this.chunkList[i]; 77 | switch (chunk.getType()) { 78 | case ChunkType.REPETITION_TOKEN: { 79 | if ("*" === chunk.text) { 80 | this.chunkList.splice(i, 1); 81 | const previousChunk = this.chunkList[i - 1]; 82 | let multiplier = null; 83 | // Case of: 3 * expression 84 | if (previousChunk.getType() == ChunkType.RULE) { 85 | multiplier = +previousChunk.text; 86 | if(isNaN(multiplier)) { 87 | multiplier = null; 88 | } 89 | } 90 | if (multiplier != null) { 91 | // The current one is removed, so next one is at index i. 92 | const nextChunk = this.chunkList[i]; 93 | if (nextChunk.getType() == ChunkType.OPTION) { 94 | const newChunk = new Chunk(ChunkType.REPETITION); 95 | newChunk.setMinCount(0); 96 | newChunk.setMaxCount(multiplier); 97 | for (const c of nextChunk.chunkList) { 98 | newChunk.addChunk(c); 99 | } 100 | this.chunkList.splice(i, 1); 101 | this.chunkList[i - 1] = newChunk; 102 | } else { 103 | const newChunk = new Chunk(ChunkType.REPETITION); 104 | newChunk.setMinCount(multiplier); 105 | newChunk.setMaxCount(multiplier); 106 | newChunk.addChunk(nextChunk); 107 | this.chunkList.splice(i, 1); 108 | this.chunkList[i - 1] = newChunk; 109 | } 110 | } else { 111 | const newChunk = new Chunk(ChunkType.REPETITION); 112 | newChunk.setMinCount(0); 113 | newChunk.addChunk(previousChunk); 114 | this.chunkList[i - 1] = newChunk; 115 | } 116 | } else if ("+" === chunk.text) { 117 | this.chunkList.splice(i, 1); 118 | const newChunk = new Chunk(ChunkType.REPETITION); 119 | newChunk.setMinCount(1); 120 | const previousChunk = this.chunkList[i - 1]; 121 | newChunk.addChunk(previousChunk); 122 | this.chunkList[i - 1] = newChunk; 123 | } else if ("?" === chunk.text) { 124 | this.chunkList.splice(i, 1); 125 | const newChunk = new Chunk(ChunkType.OPTION); 126 | const previousChunk = this.chunkList[i - 1]; 127 | newChunk.addChunk(previousChunk); 128 | this.chunkList[i - 1] = newChunk; 129 | } 130 | break; 131 | } 132 | case ChunkType.COMMENT: { 133 | // For now, nothing to do 134 | this.chunkList.splice(i, 1); 135 | } 136 | case ChunkType.ALTERNATION: { 137 | hasAlternation = true; 138 | break; 139 | } 140 | case ChunkType.GROUP: { 141 | // Group could be empty 142 | if (chunk.chunkList != null) { 143 | chunk.prune(); 144 | if (chunk.chunkList.length == 1) { 145 | this.chunkList[i] = chunk.chunkList[0]; 146 | } 147 | } 148 | break; 149 | } 150 | case ChunkType.OPTION: 151 | case ChunkType.REPETITION: { 152 | chunk.prune(); 153 | break; 154 | } 155 | } 156 | } 157 | if (hasAlternation) { 158 | const alternationSequenceList = []; 159 | alternationSequenceList.push([]); 160 | for (const chunk of this.chunkList) { 161 | if (chunk.getType() == ChunkType.ALTERNATION) { 162 | alternationSequenceList.push([]); 163 | } else { 164 | const list = alternationSequenceList[alternationSequenceList.length - 1]; 165 | list.push(chunk); 166 | } 167 | } 168 | const choiceChunk = new Chunk(ChunkType.CHOICE); 169 | for (const subList of alternationSequenceList) { 170 | if (subList.length == 1) { 171 | choiceChunk.addChunk(subList[0]); 172 | } else { 173 | const groupChunk = new Chunk(ChunkType.GROUP); 174 | for (const c of subList) { 175 | groupChunk.addChunk(c); 176 | } 177 | choiceChunk.addChunk(groupChunk); 178 | } 179 | } 180 | this.chunkList.length = 0; 181 | this.chunkList.push(choiceChunk); 182 | } 183 | } 184 | 185 | getExpression() { 186 | switch (this.type) { 187 | case ChunkType.GROUP: { 188 | if (this.chunkList == null) { 189 | // Group is empty. 190 | return new Sequence(); 191 | } 192 | if (this.chunkList.length == 1) { 193 | return this.chunkList[0].getExpression(); 194 | } 195 | const expressionList = []; 196 | for (const chunk of this.chunkList) { 197 | expressionList.push(chunk.getExpression()); 198 | } 199 | return new Sequence(expressionList); 200 | } 201 | case ChunkType.CHOICE: { 202 | if (this.chunkList.length == 1) { 203 | return this.chunkList[0].getExpression(); 204 | } 205 | const expressionList = []; 206 | let hasLine = false; 207 | for (const chunk of this.chunkList) { 208 | let expression = chunk.getExpression(); 209 | if (expression instanceof Repetition) { 210 | const repetition = expression; 211 | if (repetition.getMinRepetitionCount() == 0) { 212 | if (repetition.getMaxRepetitionCount() == null || repetition.getMaxRepetitionCount() != 1) { 213 | expression = new Repetition(repetition.getExpression(), 1, repetition.getMaxRepetitionCount()); 214 | } else { 215 | expression = repetition.getExpression(); 216 | } 217 | hasLine = true; 218 | } 219 | } 220 | if (expression instanceof Choice) { 221 | for (const exp of expression.getExpressions()) { 222 | expressionList.push(exp); 223 | } 224 | } else { 225 | expressionList.push(expression); 226 | } 227 | } 228 | if (hasLine && (expressionList.length == 0 || !isNoop(expressionList[expressionList.length - 1]))) { 229 | expressionList.push(new Sequence()); 230 | } 231 | return new Choice(expressionList); 232 | } 233 | case ChunkType.RULE: { 234 | return new RuleReference(this.text); 235 | } 236 | case ChunkType.LITERAL: { 237 | return new Literal(this.text); 238 | } 239 | case ChunkType.SPECIAL_SEQUENCE: { 240 | return new SpecialSequence(this.text); 241 | } 242 | case ChunkType.OPTION: { 243 | if (this.chunkList.length == 1) { 244 | const subChunk = this.chunkList[0]; 245 | if (subChunk.getType() == ChunkType.CHOICE) { 246 | const newChunk = new Chunk(ChunkType.CHOICE); 247 | for (const cChunk of subChunk.chunkList) { 248 | newChunk.addChunk(cChunk); 249 | } 250 | newChunk.addChunk(new Chunk(ChunkType.GROUP)); 251 | return newChunk.getExpression(); 252 | } 253 | return new Repetition(subChunk.getExpression(), 0, 1); 254 | } 255 | const expressionList = []; 256 | for (const chunk of this.chunkList) { 257 | expressionList.push(chunk.getExpression()); 258 | } 259 | return new Repetition(new Sequence(expressionList), 0, 1); 260 | } 261 | case ChunkType.REPETITION: { 262 | if (this.chunkList.length == 1) { 263 | return new Repetition(this.chunkList[0].getExpression(), this.minCount, this.maxCount); 264 | } 265 | const expressionList = []; 266 | for (const chunk of this.chunkList) { 267 | expressionList.push(chunk.getExpression()); 268 | } 269 | return new Repetition(new Sequence(expressionList), this.minCount, this.maxCount); 270 | } 271 | } 272 | throw "Type should not be reachable: " + this.type; 273 | } 274 | 275 | toString() { 276 | let s = "" + this.type; 277 | if (this.text != null) { 278 | s += " (" + this.text + ")"; 279 | } 280 | return s; 281 | } 282 | 283 | } 284 | -------------------------------------------------------------------------------- /src/model/expression.js: -------------------------------------------------------------------------------- 1 | import GrammarToRRDiagram from './grammartorrdiagram'; 2 | import GrammarToBNF from './grammartobnf'; 3 | import RRElement from '../ui/rrelement'; 4 | 5 | export default class Expression { 6 | 7 | /** 8 | * @param {GrammarToRRDiagram} grammarToRRDiagram 9 | * @return {RRElement} 10 | */ 11 | toRRElement(grammarToRRDiagram) { 12 | // Not reachable, we don't instanciate this class. 13 | return new RRElement(); 14 | } 15 | 16 | /** 17 | * @param {GrammarToBNF} grammarToBNF 18 | * @param {string[]} sb 19 | * @param {boolean} isNested 20 | */ 21 | toBNF(grammarToBNF, sb, isNested) { 22 | } 23 | 24 | /** 25 | * @param {*} o 26 | * @return {boolean} 27 | */ 28 | equals(o) { 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /src/model/grammar.js: -------------------------------------------------------------------------------- 1 | import Rule from './rule'; 2 | import GrammarToBNF from './grammartobnf'; 3 | 4 | export default class Grammar { 5 | 6 | constructor(rules) { 7 | if(arguments.length == 0) { 8 | rules = []; 9 | } else if (rules.constructor !== Array) { 10 | rules = arguments; 11 | } 12 | this.rules = rules; 13 | } 14 | 15 | /** 16 | * @return {Rule[]} 17 | */ 18 | getRules() { 19 | return this.rules; 20 | } 21 | 22 | /** 23 | * @param {GrammarToBNF} grammarToBNF 24 | * @return {string} 25 | */ 26 | toBNF(grammarToBNF) { 27 | const sb = []; 28 | for (let i = 0; i < this.rules.length; i++) { 29 | if (i > 0) { 30 | sb.push("\n"); 31 | } 32 | sb.push(this.rules[i].toBNF(grammarToBNF)); 33 | } 34 | return sb.join(""); 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/model/grammartobnf.js: -------------------------------------------------------------------------------- 1 | import Grammar from './grammar'; 2 | 3 | const RuleDefinitionSign = { 4 | EQUAL: 1, 5 | COLON_EQUAL: 2, 6 | COLON_COLON_EQUAL: 3, 7 | }; 8 | 9 | const LiteralDefinitionSign = { 10 | QUOTE: 1, 11 | DOUBLE_QUOTE: 2, 12 | }; 13 | 14 | export default class GrammarToBNF { 15 | 16 | static get RuleDefinitionSign() { 17 | return RuleDefinitionSign; 18 | } 19 | 20 | static get LiteralDefinitionSign() { 21 | return LiteralDefinitionSign; 22 | } 23 | 24 | constructor() { 25 | this.ruleDefinitionSign = RuleDefinitionSign.EQUAL; 26 | this.literalDefinitionSign = LiteralDefinitionSign.QUOTE; 27 | this.isCommaSeparator = false; 28 | this.isUsingMultiplicationTokens = false; 29 | this.ruleConsideredAsLineBreak = null; 30 | } 31 | 32 | /** 33 | * @param {Grammar} grammar 34 | * @return {string} 35 | */ 36 | convert(grammar) { 37 | return grammar.toBNF(this); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/model/grammartorrdiagram.js: -------------------------------------------------------------------------------- 1 | import Rule from './rule'; 2 | import RRDiagram from '../ui/rrdiagram'; 3 | 4 | export default class GrammarToRRDiagram { 5 | 6 | constructor() { 7 | this.ruleLinkProvider = (ruleName) => '#' + ruleName; 8 | this.ruleConsideredAsLineBreak = null; 9 | } 10 | 11 | /** 12 | * @param {Rule} rule 13 | * @return {RRDiagram} 14 | */ 15 | convert(rule) { 16 | return rule.toRRDiagram(this); 17 | } 18 | } -------------------------------------------------------------------------------- /src/model/literal.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import RRText from '../ui/rrtext'; 3 | import GrammarToRRDiagram from './grammartorrdiagram'; 4 | import RRElement from '../ui/rrelement'; 5 | import GrammarToBNF from './grammartobnf'; 6 | 7 | export default class Literal extends Expression { 8 | 9 | /** 10 | * @param {string} text 11 | */ 12 | constructor(text) { 13 | super(); 14 | this.text = text; 15 | } 16 | 17 | /** 18 | * @param {GrammarToRRDiagram} grammarToRRDiagram 19 | * @return {RRElement} 20 | */ 21 | toRRElement(grammarToRRDiagram) { 22 | return new RRText(RRText.Type.LITERAL, this.text, null); 23 | } 24 | 25 | /** 26 | * @param {GrammarToBNF} grammarToBNF 27 | * @param {string[]} sb 28 | * @param {boolean} isNested 29 | */ 30 | toBNF(grammarToBNF, sb, isNested) { 31 | const c = grammarToBNF.literalDefinitionSign == GrammarToBNF.LiteralDefinitionSign.DOUBLE_QUOTE ? '"' : '\''; 32 | sb.push(c); 33 | sb.push(this.text); 34 | sb.push(c); 35 | } 36 | 37 | /** 38 | * @param {*} o 39 | * @return {boolean} 40 | */ 41 | equals(o) { 42 | if(!(o instanceof Literal)) { 43 | return false; 44 | } 45 | return this.text == o.text; 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /src/model/repetition.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import RRChoice from '../ui/rrchoice'; 3 | import RRLine from '../ui/rrline'; 4 | import RRLoop from '../ui/rrloop'; 5 | import GrammarToRRDiagram from './grammartorrdiagram'; 6 | import RRElement from '../ui/rrelement'; 7 | import GrammarToBNF from './grammartobnf'; 8 | 9 | export default class Repetition extends Expression { 10 | 11 | /** 12 | * @param {Expression} expression 13 | * @param {number} minRepetitionCount 14 | * @param {?number} maxRepetitionCount 15 | */ 16 | constructor(expression, minRepetitionCount, maxRepetitionCount) { 17 | super(); 18 | this.expression = expression; 19 | this.minRepetitionCount = minRepetitionCount | 0; 20 | this.maxRepetitionCount = maxRepetitionCount; 21 | } 22 | 23 | /** 24 | * @return {Expression} 25 | */ 26 | getExpression() { 27 | return this.expression; 28 | } 29 | 30 | /** 31 | * @return {number} 32 | */ 33 | getMinRepetitionCount() { 34 | return this.minRepetitionCount; 35 | } 36 | 37 | /** 38 | * @return {?number} 39 | */ 40 | getMaxRepetitionCount() { 41 | return this.maxRepetitionCount; 42 | } 43 | 44 | /** 45 | * @param {GrammarToRRDiagram} grammarToRRDiagram 46 | * @return {RRElement} 47 | */ 48 | toRRElement(grammarToRRDiagram) { 49 | const rrElement = this.expression.toRRElement(grammarToRRDiagram); 50 | if (this.minRepetitionCount == 0) { 51 | if (this.maxRepetitionCount == null || this.maxRepetitionCount > 1) { 52 | return new RRChoice(new RRLoop(rrElement, null, 0, (this.maxRepetitionCount == null ? null : this.maxRepetitionCount - 1)), new RRLine()); 53 | } 54 | return new RRChoice(rrElement, new RRLine()); 55 | } 56 | return new RRLoop(rrElement, null, this.minRepetitionCount - 1, (this.maxRepetitionCount == null ? null : this.maxRepetitionCount - 1)); 57 | } 58 | 59 | /** 60 | * @param {GrammarToBNF} grammarToBNF 61 | * @param {string[]} sb 62 | * @param {boolean} isNested 63 | */ 64 | toBNF(grammarToBNF, sb, isNested) { 65 | const isUsingMultiplicationTokens = grammarToBNF.isUsingMultiplicationTokens; 66 | if (this.maxRepetitionCount == null) { 67 | if (this.minRepetitionCount > 0) { 68 | if (this.minRepetitionCount == 1 && isUsingMultiplicationTokens) { 69 | this.expression.toBNF(grammarToBNF, sb, true); 70 | sb.push("+"); 71 | } else { 72 | if (isNested) { 73 | sb.push("( "); 74 | } 75 | if (this.minRepetitionCount > 1) { 76 | sb.push(this.minRepetitionCount, " * "); 77 | } 78 | this.expression.toBNF(grammarToBNF, sb, false); 79 | if (grammarToBNF.isCommaSeparator) { 80 | sb.push(" ,"); 81 | } 82 | sb.push(" ", "{ "); 83 | this.expression.toBNF(grammarToBNF, sb, false); 84 | sb.push(" }"); 85 | if (isNested) { 86 | sb.push(" )"); 87 | } 88 | } 89 | } else { 90 | if (isUsingMultiplicationTokens) { 91 | this.expression.toBNF(grammarToBNF, sb, true); 92 | sb.push("*"); 93 | } else { 94 | sb.push("{ "); 95 | this.expression.toBNF(grammarToBNF, sb, false); 96 | sb.push(" }"); 97 | } 98 | } 99 | } else { 100 | if (this.minRepetitionCount == 0) { 101 | if (this.maxRepetitionCount == 1 && isUsingMultiplicationTokens) { 102 | this.expression.toBNF(grammarToBNF, sb, true); 103 | sb.push("?"); 104 | } else { 105 | if (this.maxRepetitionCount > 1) { 106 | sb.push(this.maxRepetitionCount, " * "); 107 | } 108 | sb.push("[ "); 109 | this.expression.toBNF(grammarToBNF, sb, false); 110 | sb.push(" ]"); 111 | } 112 | } else { 113 | if (this.minRepetitionCount == this.maxRepetitionCount) { 114 | sb.push(this.minRepetitionCount, " * "); 115 | this.expression.toBNF(grammarToBNF, sb, isNested); 116 | } else { 117 | if (isNested) { 118 | sb.push("( "); 119 | } 120 | sb.push(this.minRepetitionCount, " * "); 121 | this.expression.toBNF(grammarToBNF, sb, false); 122 | if (grammarToBNF.isCommaSeparator) { 123 | sb.push(" ,"); 124 | } 125 | sb.push(" ", this.maxRepetitionCount - this.minRepetitionCount, " * ", "[ "); 126 | this.expression.toBNF(grammarToBNF, sb, false); 127 | sb.push(" ]"); 128 | if (isNested) { 129 | sb.push(" )"); 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | /** 137 | * @param {*} o 138 | * @return {boolean} 139 | */ 140 | equals(o) { 141 | if(!(o instanceof Repetition)) { 142 | return false; 143 | } 144 | return this.expression.equals(o.expression) && this.minRepetitionCount == o.minRepetitionCount && this.maxRepetitionCount == null? o.maxRepetitionCount == null: this.maxRepetitionCount.equals(o.maxRepetitionCount); 145 | } 146 | 147 | } 148 | -------------------------------------------------------------------------------- /src/model/rule.js: -------------------------------------------------------------------------------- 1 | import RRDiagram from '../ui/rrdiagram'; 2 | import GrammarToBNF from './grammartobnf'; 3 | import Expression from './expression'; 4 | import GrammarToRRDiagram from './grammartorrdiagram'; 5 | 6 | export default class Rule { 7 | 8 | /** 9 | * @param {string} name 10 | * @param {Expression} expression 11 | * @param {?string} originalExpressionText 12 | */ 13 | constructor(name, expression, originalExpressionText) { 14 | this.name = name; 15 | this.expression = expression; 16 | this.originalExpressionText = originalExpressionText; 17 | } 18 | 19 | /** 20 | * @return {string} 21 | */ 22 | getName() { 23 | return this.name; 24 | } 25 | 26 | /** 27 | * @return {?string} 28 | */ 29 | getOriginalExpressionText() { 30 | return this.originalExpressionText; 31 | } 32 | 33 | /** 34 | * @param {GrammarToRRDiagram} grammarToRRDiagram 35 | * @return {RRDiagram} 36 | */ 37 | toRRDiagram(grammarToRRDiagram) { 38 | return new RRDiagram(this.expression.toRRElement(grammarToRRDiagram)); 39 | } 40 | 41 | /** 42 | * @param {GrammarToBNF} grammarToBNF 43 | * @return {string} 44 | */ 45 | toBNF(grammarToBNF) { 46 | const sb = []; 47 | sb.push(this.name, " "); 48 | switch (grammarToBNF.ruleDefinitionSign) { 49 | case GrammarToBNF.RuleDefinitionSign.EQUAL: sb.push("="); break; 50 | case GrammarToBNF.RuleDefinitionSign.COLON_EQUAL: sb.push(":="); break; 51 | case GrammarToBNF.RuleDefinitionSign.COLON_COLON_EQUAL: sb.push("::="); break; 52 | } 53 | sb.push(" "); 54 | this.expression.toBNF(grammarToBNF, sb, false); 55 | sb.push(";"); 56 | return sb.join(""); 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /src/model/rulereference.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import RRBreak from '../ui/rrbreak'; 3 | import RRText from '../ui/rrtext'; 4 | import GrammarToRRDiagram from './grammartorrdiagram'; 5 | import RRElement from '../ui/rrelement'; 6 | import GrammarToBNF from './grammartobnf'; 7 | 8 | export default class RuleReference extends Expression { 9 | 10 | /** 11 | * @param {string} ruleName 12 | */ 13 | constructor(ruleName) { 14 | super(); 15 | this.ruleName = ruleName; 16 | } 17 | 18 | getRuleName() { 19 | return this.ruleName; 20 | } 21 | 22 | /** 23 | * @param {GrammarToRRDiagram} grammarToRRDiagram 24 | * @return {RRElement} 25 | */ 26 | toRRElement(grammarToRRDiagram) { 27 | const ruleConsideredAsLineBreak = grammarToRRDiagram.ruleConsideredAsLineBreak; 28 | if (ruleConsideredAsLineBreak != null && ruleConsideredAsLineBreak === this.ruleName) { 29 | return new RRBreak(); 30 | } 31 | const ruleLinkProvider = grammarToRRDiagram.ruleLinkProvider; 32 | return new RRText(RRText.Type.RULE, this.ruleName, ruleLinkProvider == null ? null : ruleLinkProvider(this.ruleName)); 33 | } 34 | 35 | /** 36 | * @param {GrammarToBNF} grammarToBNF 37 | * @param {string[]} sb 38 | * @param {boolean} isNested 39 | */ 40 | toBNF(grammarToBNF, sb, isNested) { 41 | sb.push(this.ruleName); 42 | const ruleConsideredAsLineBreak = grammarToBNF.ruleConsideredAsLineBreak; 43 | if (ruleConsideredAsLineBreak != null && ruleConsideredAsLineBreak === this.ruleName) { 44 | sb.push("\n"); 45 | } 46 | } 47 | 48 | /** 49 | * @param {*} o 50 | * @return {boolean} 51 | */ 52 | equals(o) { 53 | if(!(o instanceof RuleReference)) { 54 | return false; 55 | } 56 | return this.ruleName == o.ruleName; 57 | } 58 | 59 | } 60 | -------------------------------------------------------------------------------- /src/model/sequence.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import RRLoop from '../ui/rrloop'; 3 | import RRSequence from '../ui/rrsequence'; 4 | import RuleReference from './rulereference'; 5 | import Repetition from './repetition'; 6 | import Literal from './literal'; 7 | import GrammarToRRDiagram from './grammartorrdiagram'; 8 | import RRElement from '../ui/rrelement'; 9 | import GrammarToBNF from './grammartobnf'; 10 | 11 | export default class Sequence extends Expression { 12 | 13 | /** 14 | * @param {(Expression | Expression[])} expressions 15 | */ 16 | constructor(expressions) { 17 | super(); 18 | if (arguments.length == 0) { 19 | expressions = []; 20 | } else if (expressions.constructor !== Array) { 21 | expressions = arguments; 22 | } 23 | this.expressions = expressions; 24 | } 25 | 26 | /** 27 | * @param {Expression[]} 28 | */ 29 | getExpressions() { 30 | return this.expressions; 31 | } 32 | 33 | /** 34 | * @param {GrammarToRRDiagram} grammarToRRDiagram 35 | * @return {RRElement} 36 | */ 37 | toRRElement(grammarToRRDiagram) { 38 | const rrElementList = []; 39 | for (let i = 0; i < this.expressions.length; i++) { 40 | const expression = this.expressions[i]; 41 | let rrElement = expression.toRRElement(grammarToRRDiagram); 42 | // Treat special case of: "a (',' a)*" and "a (a)*" 43 | if (i < this.expressions.length - 1 && this.expressions[i + 1] instanceof Repetition) { 44 | const repetition = this.expressions[i + 1]; 45 | const repetitionExpression = repetition.getExpression(); 46 | if (repetitionExpression instanceof Sequence) { 47 | // Treat special case of: "expr (',' expr)*" 48 | const subExpressions = repetitionExpression.getExpressions(); 49 | if (subExpressions.length == 2 && subExpressions[0] instanceof Literal) { 50 | if(expression.equals(subExpressions[1])) { 51 | const maxRepetitionCount = repetition.getMaxRepetitionCount(); 52 | if (maxRepetitionCount == null || maxRepetitionCount > 1) { 53 | rrElement = new RRLoop(expression.toRRElement(grammarToRRDiagram), subExpressions[0].toRRElement(grammarToRRDiagram), repetition.getMinRepetitionCount(), (maxRepetitionCount == null ? null : maxRepetitionCount)); 54 | i++; 55 | } 56 | } 57 | } 58 | } else if(expression instanceof RuleReference) { 59 | const ruleLink = expression; 60 | // Treat special case of: a (a)* 61 | if (repetitionExpression instanceof RuleReference && repetitionExpression.getRuleName().equals(ruleLink.getRuleName())) { 62 | const maxRepetitionCount = repetition.getMaxRepetitionCount(); 63 | if (maxRepetitionCount == null || maxRepetitionCount > 1) { 64 | rrElement = new RRLoop(ruleLink.toRRElement(grammarToRRDiagram), null, repetition.getMinRepetitionCount(), (maxRepetitionCount == null ? null : maxRepetitionCount)); 65 | i++; 66 | } 67 | } 68 | } 69 | } 70 | rrElementList.push(rrElement); 71 | } 72 | return new RRSequence(rrElementList); 73 | } 74 | 75 | /** 76 | * @param {GrammarToBNF} grammarToBNF 77 | * @param {string[]} sb 78 | * @param {boolean} isNested 79 | */ 80 | toBNF(grammarToBNF, sb, isNested) { 81 | if (this.expressions.length == 0) { 82 | sb.push("( )"); 83 | return; 84 | } 85 | if (isNested && this.expressions.length > 1) { 86 | sb.push("( "); 87 | } 88 | const isCommaSeparator = grammarToBNF.isCommaSeparator; 89 | for (let i = 0; i < this.expressions.length; i++) { 90 | if (i > 0) { 91 | if (isCommaSeparator) { 92 | sb.push(" ,"); 93 | } 94 | sb.push(" "); 95 | } 96 | this.expressions[i].toBNF(grammarToBNF, sb, this.expressions.length == 1 && isNested || !isCommaSeparator); 97 | } 98 | if (isNested && this.expressions.length > 1) { 99 | sb.push(" )"); 100 | } 101 | } 102 | 103 | /** 104 | * @param {*} o 105 | * @return {boolean} 106 | */ 107 | equals(o) { 108 | if(!(o instanceof Sequence)) { 109 | return false; 110 | } 111 | if(this.expressions.length != o.expressions.length) { 112 | return false; 113 | } 114 | for (let i = 0; i < this.expressions.length; i++) { 115 | if(!this.expressions[i].equals(o.expressions[i])) { 116 | return false; 117 | } 118 | } 119 | return true; 120 | } 121 | 122 | } 123 | -------------------------------------------------------------------------------- /src/model/specialsequence.js: -------------------------------------------------------------------------------- 1 | import Expression from './expression'; 2 | import RRText from '../ui/rrtext'; 3 | import GrammarToRRDiagram from './grammartorrdiagram'; 4 | import RRElement from '../ui/rrelement'; 5 | import GrammarToBNF from './grammartobnf'; 6 | 7 | export default class SpecialSequence extends Expression { 8 | 9 | /** 10 | * @param {string} text 11 | */ 12 | constructor(text) { 13 | super(); 14 | this.text = text; 15 | } 16 | 17 | /** 18 | * @param {GrammarToRRDiagram} grammarToRRDiagram 19 | * @return {RRElement} 20 | */ 21 | toRRElement(grammarToRRDiagram) { 22 | return new RRText(RRText.Type.SPECIAL_SEQUENCE, this.text, null); 23 | } 24 | 25 | /** 26 | * @param {GrammarToBNF} grammarToBNF 27 | * @param {string[]} sb 28 | * @param {boolean} isNested 29 | */ 30 | toBNF(grammarToBNF, sb, isNested) { 31 | sb.push("(? "); 32 | sb.push(this.text); 33 | sb.push(" ?)"); 34 | } 35 | 36 | /** 37 | * @param {*} o 38 | * @return {boolean} 39 | */ 40 | equals(o) { 41 | if(!(o instanceof SpecialSequence)) { 42 | return false; 43 | } 44 | return this.text == o.text; 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /src/ui/layoutinfo.js: -------------------------------------------------------------------------------- 1 | export default class LayoutInfo { 2 | 3 | /** 4 | * @param {number} width 5 | * @param {number} height 6 | * @param {number} connectorOffset 7 | */ 8 | constructor(width, height, connectorOffset) { 9 | this.width = width; 10 | this.height = height; 11 | this.connectorOffset = connectorOffset; 12 | } 13 | 14 | /** 15 | * @return {number} 16 | */ 17 | getWidth() { 18 | return this.width; 19 | } 20 | 21 | /** 22 | * @return {number} 23 | */ 24 | getHeight() { 25 | return this.height; 26 | } 27 | 28 | /** 29 | * @return {number} 30 | */ 31 | getConnectorOffset() { 32 | return this.connectorOffset; 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /src/ui/rrbreak.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | export default class RRBreak extends RRElement { 3 | 4 | constructor() { 5 | super(); 6 | } 7 | 8 | computeLayoutInfo(rrDiagramToSVG) { 9 | throw "This element must not be nested and should have been processed before entering generation."; 10 | } 11 | 12 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 13 | throw "This element must not be nested and should have been processed before entering generation."; 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/ui/rrchoice.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import LayoutInfo from './layoutinfo'; 3 | 4 | export default class RRChoice extends RRElement { 5 | 6 | /** 7 | * @param {(RRElement[] | RRElement)} rrElements 8 | */ 9 | constructor(rrElements) { 10 | super(); 11 | if(arguments.length == 0) { 12 | rrElements = []; 13 | } else if(rrElements.constructor !== Array) { 14 | rrElements = arguments; 15 | } 16 | this.rrElements = rrElements; 17 | } 18 | 19 | computeLayoutInfo(rrDiagramToSVG) { 20 | let width = 0; 21 | let height = 0; 22 | let connectorOffset = 0; 23 | for (let i = 0; i < this.rrElements.length; i++) { 24 | const rrElement = this.rrElements[i]; 25 | rrElement.computeLayoutInfo(rrDiagramToSVG); 26 | const layoutInfo = rrElement.getLayoutInfo(); 27 | if (i == 0) { 28 | connectorOffset = layoutInfo.getConnectorOffset(); 29 | } else { 30 | height += 5; 31 | } 32 | height += layoutInfo.getHeight(); 33 | width = Math.max(width, layoutInfo.getWidth()); 34 | } 35 | width += 20 + 20; 36 | this.setLayoutInfo(new LayoutInfo(width, height, connectorOffset)); 37 | } 38 | 39 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 40 | const layoutInfo = this.getLayoutInfo(); 41 | const y1 = yOffset + layoutInfo.getConnectorOffset(); 42 | const x1 = xOffset + 10; 43 | const x2 = xOffset + layoutInfo.getWidth() - 10; 44 | const xOffset2 = xOffset + 20; 45 | let y2 = 0; 46 | let yOffset2 = yOffset; 47 | for (let i = 0; i < this.rrElements.length; i++) { 48 | const rrElement = this.rrElements[i]; 49 | const layoutInfo2 = rrElement.getLayoutInfo(); 50 | const width = layoutInfo2.getWidth(); 51 | const height = layoutInfo2.getHeight(); 52 | y2 = yOffset2 + layoutInfo2.getConnectorOffset(); 53 | if (i == 0) { 54 | // Line to first element 55 | svgContent.addLineConnector(x1 - 10, y1, x1 + 10, y1); 56 | } else { 57 | if (i == this.rrElements.length - 1) { 58 | // Curve and vertical down 59 | svgContent.addPathConnector(x1 - 5, y1, "q5 0 5 5", x1, y1 + 5); 60 | svgContent.addLineConnector(x1, y1 + 5, x1, y2 - 5); 61 | } 62 | // Curve and horizontal line to element 63 | svgContent.addPathConnector(x1, y2 - 5, "q0 5 5 5", x1 + 5, y2); 64 | svgContent.addLineConnector(x1 + 5, y2, xOffset2, y2); 65 | } 66 | rrElement.toSVG(rrDiagramToSVG, xOffset2, yOffset2, svgContent); 67 | if (i == 0) { 68 | // Line to first element 69 | svgContent.addLineConnector(xOffset2 + width, y2, x2 + 10, y2); 70 | } else { 71 | // Horizontal line to element and curve 72 | svgContent.addLineConnector(x2 - 5, y2, xOffset2 + width, y2); 73 | svgContent.addPathConnector(x2 - 5, y2, "q5 0 5-5", x2, y2 - 5); 74 | if (i == this.rrElements.length - 1) { 75 | // Vertical up and curve 76 | svgContent.addLineConnector(x2, y2 - 5, x2, y1 + 5); 77 | svgContent.addPathConnector(x2, y1 + 5, "q0-5 5-5", x2 + 5, y1); 78 | } 79 | } 80 | yOffset2 += height + 5; 81 | } 82 | } 83 | 84 | } -------------------------------------------------------------------------------- /src/ui/rrdiagram.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import RRSequence from './rrsequence'; 3 | import SvgContent from './svg/svgcontent'; 4 | import RRBreak from './rrbreak'; 5 | 6 | export default class RRDiagram { 7 | 8 | /** 9 | * @param {RRElement} rrElement 10 | */ 11 | constructor(rrElement) { 12 | this.rrElement = rrElement; 13 | } 14 | 15 | toSVG(rrDiagramToSVG) { 16 | const rrElementList = []; 17 | if (this.rrElement instanceof RRSequence) { 18 | const cursorElementList = []; 19 | for (let element of this.rrElement.getRRElements()) { 20 | if (element instanceof RRBreak) { 21 | if (cursorElementList.length != 0) { 22 | rrElementList.push(cursorElementList.length == 1 ? cursorElementList[0] : new RRSequence(cursorElementList.slice())); 23 | cursorElementList.length = 0; 24 | } 25 | } else { 26 | cursorElementList.push(element); 27 | } 28 | } 29 | if (cursorElementList.length != 0) { 30 | rrElementList.push(cursorElementList.length == 1 ? cursorElementList[0] : new RRSequence(cursorElementList.slice())); 31 | } 32 | } else { 33 | rrElementList.push(this.rrElement); 34 | } 35 | let width = 5; 36 | let height = 5; 37 | for (let i = 0; i < rrElementList.length; i++) { 38 | if (i > 0) { 39 | height += 5; 40 | } 41 | const rrElement_ = rrElementList[i]; 42 | rrElement_.computeLayoutInfo(rrDiagramToSVG); 43 | const layoutInfo = rrElement_.getLayoutInfo(); 44 | width = Math.max(width, 5 + layoutInfo.getWidth() + 5); 45 | height += layoutInfo.getHeight() + 5; 46 | } 47 | const svgContent = new SvgContent(); 48 | // First, generate the XML for the elements, to know the usage. 49 | const xOffset = 0; 50 | let yOffset = 5; 51 | for (let rrElement_ of rrElementList) { 52 | const layoutInfo2 = rrElement_.getLayoutInfo(); 53 | const connectorOffset2 = layoutInfo2.getConnectorOffset(); 54 | const width2 = layoutInfo2.getWidth(); 55 | const height2 = layoutInfo2.getHeight(); 56 | const y1 = yOffset + connectorOffset2; 57 | svgContent.addLineConnector(xOffset, y1, xOffset + 5, y1); 58 | // TODO: add decorations (like arrows)? 59 | rrElement_.toSVG(rrDiagramToSVG, xOffset + 5, yOffset, svgContent); 60 | svgContent.addLineConnector(xOffset + 5 + width2, y1, xOffset + 5 + width2 + 5, y1); 61 | yOffset += height2 + 10; 62 | } 63 | const connectorElement = svgContent.getConnectorElement(rrDiagramToSVG); 64 | const elements = svgContent.getElements(); 65 | // Then generate the rest (CSS and SVG container tags) based on that usage. 66 | const sb = []; 67 | sb.push(""); 68 | /* String styles = svgContent.getCSSStyles(); 69 | if(styles.length() > 0) { 70 | sb.push(""); 73 | }*/ 74 | sb.push(connectorElement); 75 | sb.push(elements); 76 | sb.push(""); 77 | return sb.join(""); 78 | } 79 | 80 | } -------------------------------------------------------------------------------- /src/ui/rrdiagramtosvg.js: -------------------------------------------------------------------------------- 1 | import RRText from './rrtext'; 2 | import RRDiagram from './rrdiagram' 3 | 4 | const BoxShape = { 5 | RECTANGLE: 1, 6 | ROUNDED_RECTANGLE: 2, 7 | HEXAGON: 3, 8 | }; 9 | 10 | export default class RRDiagramToSVG { 11 | 12 | static get BoxShape() { 13 | return BoxShape; 14 | } 15 | 16 | constructor() { 17 | this.cssConnectorClass = "rrConnector";//{fill:none;stroke:#222222;} 18 | this.cssRuleClass = "rrRule";//{fill:#d3f0ff;stroke:#222222;} 19 | this.cssRuleTextClass = "rrRuleText";//{fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 20 | this.cssLiteralClass = "rrLiteral";//{fill:#90d9ff;stroke:#222222;} 21 | this.cssLiteralTextClass = "rrLiteralText";//{fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 22 | this.cssSpecialSequenceClass = "rrSpecialSequence";//{fill:#e4f4ff;stroke:#222222;} 23 | this.cssSpecialSequenceTextClass = "rrSpecialSequenceText";//{fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;} 24 | this.cssLoopCardinalitiesTextClass = "rrLoopCardinalities";//{fill:#000000;font-family:Verdana,Sans-serif;font-size:10px;} 25 | this.ruleShape = BoxShape.RECTANGLE; 26 | this.literalShape = BoxShape.ROUNDED_RECTANGLE; 27 | this.specialSequenceShape = BoxShape.HEXAGON; 28 | } 29 | 30 | /** 31 | * @param {RRDiagram} rrDiagram 32 | * @return {string} 33 | */ 34 | convert(rrDiagram) { 35 | return rrDiagram.toSVG(this); 36 | } 37 | 38 | } -------------------------------------------------------------------------------- /src/ui/rrelement.js: -------------------------------------------------------------------------------- 1 | export default class RRElement { 2 | 3 | constructor() { 4 | this.layoutInfo = null; 5 | } 6 | 7 | setLayoutInfo(layoutInfo) { 8 | this.layoutInfo = layoutInfo; 9 | } 10 | 11 | getLayoutInfo() { 12 | return this.layoutInfo; 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/ui/rrline.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import LayoutInfo from './layoutinfo'; 3 | 4 | export default class RRLine extends RRElement { 5 | 6 | constructor() { 7 | super(); 8 | } 9 | 10 | computeLayoutInfo(rrDiagramToSVG) { 11 | this.setLayoutInfo(new LayoutInfo(0, 10, 5)); 12 | } 13 | 14 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /src/ui/rrloop.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import RRDiagramToSVG from './rrdiagramtosvg'; 3 | import LayoutInfo from './layoutinfo'; 4 | import { escapeXml, getFontInfo } from '../utils/utils'; 5 | 6 | export default class RRLoop extends RRElement { 7 | 8 | /** 9 | * @param {RRElement} rrElement 10 | * @param {RRElement} loopElement 11 | * @param {?number} minRepetitionCount 12 | * @param {?number} maxRepetitionCount 13 | */ 14 | constructor(rrElement, loopElement, minRepetitionCount, maxRepetitionCount) { 15 | super(); 16 | this.rrElement = rrElement; 17 | this.loopElement = loopElement; 18 | if (minRepetitionCount < 0) { 19 | throw new IllegalArgumentException("Minimum repetition must be positive!"); 20 | } 21 | if (maxRepetitionCount != null && maxRepetitionCount < minRepetitionCount) { 22 | throw new IllegalArgumentException("Maximum repetition must not be smaller than minimum!"); 23 | } 24 | this.minRepetitionCount = minRepetitionCount; 25 | this.maxRepetitionCount = maxRepetitionCount; 26 | this.cardinalitiesText = null; 27 | this.cardinalitiesWidth = null; 28 | this.fontYOffset = null; 29 | } 30 | 31 | computeLayoutInfo(rrDiagramToSVG) { 32 | this.cardinalitiesText = null; 33 | this.cardinalitiesWidth = 0; 34 | this.fontYOffset = 0; 35 | if (this.minRepetitionCount > 0 || this.maxRepetitionCount != null) { 36 | this.cardinalitiesText = this.minRepetitionCount + ".." + (this.maxRepetitionCount == null ? "N" : this.maxRepetitionCount); 37 | // TODO: get font from CSS tag. 38 | const fontInfo = getFontInfo(this.cardinalitiesText, rrDiagramToSVG.cssLoopCardinalitiesTextClass); 39 | this.fontYOffset = fontInfo.descent; 40 | this.cardinalitiesWidth = fontInfo.textWidth + 2; 41 | } 42 | this.rrElement.computeLayoutInfo(rrDiagramToSVG); 43 | const layoutInfo1 = this.rrElement.getLayoutInfo(); 44 | let width = layoutInfo1.getWidth(); 45 | let height = layoutInfo1.getHeight(); 46 | let connectorOffset = layoutInfo1.getConnectorOffset(); 47 | if (this.loopElement != null) { 48 | this.loopElement.computeLayoutInfo(rrDiagramToSVG); 49 | const layoutInfo2 = this.loopElement.getLayoutInfo(); 50 | width = Math.max(width, layoutInfo2.getWidth()); 51 | const height2 = layoutInfo2.getHeight(); 52 | height += 5 + height2; 53 | connectorOffset += 5 + height2; 54 | } else { 55 | height += 15; 56 | connectorOffset += 15; 57 | } 58 | width += 20 + 20 + this.cardinalitiesWidth; 59 | this.setLayoutInfo(new LayoutInfo(width, height, connectorOffset)); 60 | } 61 | 62 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 63 | const layoutInfo1 = this.rrElement.getLayoutInfo(); 64 | const width1 = layoutInfo1.getWidth(); 65 | let maxWidth = width1; 66 | let yOffset2 = yOffset; 67 | const layoutInfo = this.getLayoutInfo(); 68 | const connectorOffset = layoutInfo.getConnectorOffset(); 69 | let y1 = yOffset; 70 | let loopOffset = 0; 71 | let loopWidth = 0; 72 | if (this.loopElement != null) { 73 | const layoutInfo2 = this.loopElement.getLayoutInfo(); 74 | loopWidth = layoutInfo2.getWidth(); 75 | maxWidth = Math.max(maxWidth, loopWidth); 76 | loopOffset = xOffset + 20 + Math.floor((maxWidth - loopWidth) / 2); 77 | yOffset2 += 5 + layoutInfo2.getHeight(); 78 | y1 += layoutInfo2.getConnectorOffset(); 79 | } else { 80 | yOffset2 += 15; 81 | y1 += 5; 82 | } 83 | const x1 = xOffset + 10; 84 | const x2 = xOffset + 20 + maxWidth + 10 + this.cardinalitiesWidth; 85 | const y2 = yOffset + connectorOffset; 86 | svgContent.addLineConnector(x1 - 10, y2, x1 + 10 + Math.floor((maxWidth - width1) / 2), y2); 87 | let loopPathStartX = x1 + 5; 88 | svgContent.addPathConnector(x1 + 5, y2, "q-5 0-5-5", x1, y2 - 5); 89 | svgContent.addLineConnector(x1, y2 - 5, x1, y1 + 5); 90 | svgContent.addPathConnector(x1, y1 + 5, "q0-5 5-5", x1 + 5, y1); 91 | if (this.loopElement != null) { 92 | svgContent.addLineConnector(x1 + 5, y1, loopOffset, y1); 93 | this.loopElement.toSVG(rrDiagramToSVG, loopOffset, yOffset, svgContent); 94 | loopPathStartX = loopOffset + loopWidth; 95 | } 96 | svgContent.addLineConnector(loopPathStartX, y1, x2 - 5, y1); 97 | svgContent.addPathConnector(x2 - 5, y1, "q5 0 5 5", x2, y1 + 5); 98 | svgContent.addLineConnector(x2, y1 + 5, x2, y2 - 5); 99 | svgContent.addPathConnector(x2, y2 - 5, "q0 5-5 5", x2 - 5, y2); 100 | if (this.cardinalitiesText != null) { 101 | svgContent.addElement("" + escapeXml(this.cardinalitiesText) + ""); 102 | } 103 | this.rrElement.toSVG(rrDiagramToSVG, xOffset + 20 + Math.floor((maxWidth - width1) / 2), yOffset2, svgContent); 104 | svgContent.addLineConnector(x2 - this.cardinalitiesWidth - 10 - Math.floor((maxWidth - width1) / 2), y2, xOffset + layoutInfo.getWidth(), y2); 105 | } 106 | 107 | } -------------------------------------------------------------------------------- /src/ui/rrsequence.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import LayoutInfo from './layoutinfo'; 3 | 4 | export default class RRSequence extends RRElement { 5 | 6 | 7 | /** 8 | * @param {(RRElement | RRElement[])} rrElements 9 | */ 10 | constructor(rrElements) { 11 | super(); 12 | if(arguments.length == 0) { 13 | rrElements = []; 14 | } else if(rrElements.constructor !== Array) { 15 | rrElements = arguments; 16 | } 17 | this.rrElements = rrElements; 18 | } 19 | 20 | getRRElements() { 21 | return this.rrElements; 22 | } 23 | 24 | computeLayoutInfo(rrDiagramToSVG) { 25 | let width = 0; 26 | let aboveConnector = 0; 27 | let belowConnector = 0; 28 | for (let i = 0; i < this.rrElements.length; i++) { 29 | const rrElement = this.rrElements[i]; 30 | rrElement.computeLayoutInfo(rrDiagramToSVG); 31 | if (i > 0) { 32 | width += 10; 33 | } 34 | const layoutInfo = rrElement.getLayoutInfo(); 35 | width += layoutInfo.getWidth(); 36 | const height = layoutInfo.getHeight(); 37 | const connectorOffset = layoutInfo.getConnectorOffset(); 38 | aboveConnector = Math.max(aboveConnector, connectorOffset); 39 | belowConnector = Math.max(belowConnector, height - connectorOffset); 40 | } 41 | this.setLayoutInfo(new LayoutInfo(width, aboveConnector + belowConnector, aboveConnector)); 42 | } 43 | 44 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 45 | const layoutInfo = this.getLayoutInfo(); 46 | const connectorOffset = layoutInfo.getConnectorOffset(); 47 | let widthOffset = 0; 48 | for (let i = 0; i < this.rrElements.length; i++) { 49 | const rrElement = this.rrElements[i]; 50 | const layoutInfo2 = rrElement.getLayoutInfo(); 51 | const width2 = layoutInfo2.getWidth(); 52 | const connectorOffset2 = layoutInfo2.getConnectorOffset(); 53 | const xOffset2 = widthOffset + xOffset; 54 | const yOffset2 = yOffset + connectorOffset - connectorOffset2; 55 | if (i > 0) { 56 | svgContent.addLineConnector(xOffset2 - 10, yOffset + connectorOffset, xOffset2, yOffset + connectorOffset); 57 | } 58 | rrElement.toSVG(rrDiagramToSVG, xOffset2, yOffset2, svgContent); 59 | widthOffset += 10; 60 | widthOffset += width2; 61 | } 62 | } 63 | 64 | } 65 | -------------------------------------------------------------------------------- /src/ui/rrtext.js: -------------------------------------------------------------------------------- 1 | import RRElement from './rrelement'; 2 | import RRDiagramToSVG from './rrdiagramtosvg'; 3 | import LayoutInfo from './layoutinfo'; 4 | import { escapeXml, getFontInfo } from '../utils/utils'; 5 | 6 | const Type = { 7 | LITERAL: 1, 8 | RULE: 2, 9 | SPECIAL_SEQUENCE: 3, 10 | }; 11 | 12 | export default class RRText extends RRElement { 13 | 14 | static get Type() { 15 | return Type; 16 | } 17 | 18 | /** 19 | * 20 | * @param {Type} type 21 | * @param {string} text 22 | * @param {?string} link 23 | */ 24 | constructor(type, text, link) { 25 | super(); 26 | this.type = type; 27 | this.text = text; 28 | this.link = link; 29 | this.fontInfo = null; 30 | } 31 | 32 | getType() { 33 | return this.type; 34 | } 35 | 36 | getText() { 37 | return this.text; 38 | } 39 | 40 | getLink() { 41 | return this.link; 42 | } 43 | 44 | computeLayoutInfo(rrDiagramToSVG) { 45 | const insets = { 46 | top: 5, 47 | left: 10, 48 | bottom: 5, 49 | right: 10, 50 | }; 51 | let cssTextClass; 52 | if (this.type == Type.RULE) { 53 | cssTextClass = rrDiagramToSVG.cssRuleTextClass; 54 | } else if (this.type == Type.LITERAL) { 55 | cssTextClass = rrDiagramToSVG.cssLiteralTextClass; 56 | } else if (this.type == Type.SPECIAL_SEQUENCE) { 57 | cssTextClass = rrDiagramToSVG.cssSpecialSequenceTextClass; 58 | } else { 59 | throw 'Unknown type: type'; 60 | } 61 | this.fontInfo = getFontInfo(this.text, cssTextClass); 62 | let width = this.fontInfo.textWidth; 63 | let height = this.fontInfo.height; 64 | const fontYOffset = this.fontInfo.descent; 65 | const connectorOffset = insets.top + height - fontYOffset; 66 | width += insets.left + insets.right; 67 | height += insets.top + insets.bottom; 68 | this.setLayoutInfo(new LayoutInfo(width, height, connectorOffset)); 69 | } 70 | 71 | toSVG(rrDiagramToSVG, xOffset, yOffset, svgContent) { 72 | const insets = { 73 | top: 5, 74 | left: 10, 75 | bottom: 5, 76 | right: 10, 77 | }; 78 | const layoutInfo = this.getLayoutInfo(); 79 | const width = layoutInfo.getWidth(); 80 | const height = layoutInfo.getHeight(); 81 | if (this.link != null) { 82 | svgContent.addElement(""); 83 | } 84 | let cssClass; 85 | let cssTextClass; 86 | let shape; 87 | if (this.type == Type.RULE) { 88 | cssClass = rrDiagramToSVG.cssRuleClass; 89 | cssTextClass = rrDiagramToSVG.cssRuleTextClass; 90 | shape = rrDiagramToSVG.ruleShape; 91 | } else if (this.type == Type.LITERAL) { 92 | cssClass = rrDiagramToSVG.cssLiteralClass; 93 | cssTextClass = rrDiagramToSVG.cssLiteralTextClass; 94 | shape = rrDiagramToSVG.literalShape; 95 | } else if (this.type == Type.SPECIAL_SEQUENCE) { 96 | cssClass = rrDiagramToSVG.cssSpecialSequenceClass; 97 | cssTextClass = rrDiagramToSVG.cssSpecialSequenceTextClass; 98 | shape = rrDiagramToSVG.specialSequenceShape; 99 | } else { 100 | throw 'Unknown type: type'; 101 | } 102 | if (shape == RRDiagramToSVG.BoxShape.RECTANGLE) { 103 | svgContent.addElement(""); 104 | } else if (shape == RRDiagramToSVG.BoxShape.ROUNDED_RECTANGLE) { 105 | const rx = Math.floor((insets.left + insets.right + insets.top + insets.bottom) / 4); 106 | svgContent.addElement(""); 107 | } else if (shape == RRDiagramToSVG.BoxShape.HEXAGON) { 108 | // We don't calculate the exact length of the connector: it goes behind the shape. 109 | // We should calculate if we want to support transparent shapes. 110 | const connectorOffset = layoutInfo.getConnectorOffset(); 111 | svgContent.addLineConnector(xOffset, yOffset + connectorOffset, xOffset + insets.left, yOffset + connectorOffset); 112 | svgContent.addElement(""); 113 | svgContent.addLineConnector(xOffset + width, yOffset + connectorOffset, xOffset + width - insets.right, yOffset + connectorOffset); 114 | } 115 | const fontYOffset = this.fontInfo.descent; 116 | const textHeight = this.fontInfo.textHeight; 117 | const textXOffset = xOffset + insets.left; 118 | const textYOffset = yOffset + insets.top + textHeight - fontYOffset; 119 | svgContent.addElement("" + escapeXml(this.text) + ""); 120 | if (this.link != null) { 121 | svgContent.addElement(""); 122 | } 123 | } 124 | 125 | } 126 | -------------------------------------------------------------------------------- /src/ui/svg/svgcontent.js: -------------------------------------------------------------------------------- 1 | import {escapeXml} from '../../utils/utils'; 2 | import SvgLine from './svgline'; 3 | import SvgPath from './svgpath'; 4 | 5 | export default class SvgContent { 6 | 7 | constructor() { 8 | this.connectorList = []; 9 | this.elements = []; 10 | } 11 | 12 | addPathConnector(x1, y1, path, x2, y2) { 13 | const c = this.connectorList.length == 0 ? null : this.connectorList[this.connectorList.length - 1]; 14 | if (c != null) { 15 | if (c instanceof SvgPath) { 16 | c.addPath(new SvgPath(x1, y1, path, x2, y2)); 17 | } else { 18 | const svgLine = c; 19 | const x1_ = svgLine.getX1(); 20 | const y1_ = svgLine.getY1(); 21 | const x2_ = svgLine.getX2(); 22 | const y2_ = svgLine.getY2(); 23 | if (x1_ == x2_ && x1 == x1_) { 24 | if (y2_ == y1 - 1) { 25 | svgLine.mergeLine(x1_, y1_, x2_, y2_ + 1); 26 | } else if (y1_ == y1 + 1) { 27 | svgLine.mergeLine(x1_, y1_ - 1, x2_, y2_); 28 | } 29 | } else if (y1_ == y2_ && y1 == y1_) { 30 | if (x2_ == x1 - 1) { 31 | svgLine.mergeLine(x1_, y1_, x2_ + 1, y2_); 32 | } else if (x1_ == x1 + 1) { 33 | svgLine.mergeLine(x1_ - 1, y1_, x2_, y2_); 34 | } 35 | } 36 | this.connectorList.push(new SvgPath(x1, y1, path, x2, y2)); 37 | } 38 | } else { 39 | this.connectorList.push(new SvgPath(x1, y1, path, x2, y2)); 40 | } 41 | } 42 | 43 | addLineConnector(x1, y1, x2, y2) { 44 | const x1_ = Math.min(x1, x2); 45 | const y1_ = Math.min(y1, y2); 46 | const x2_ = Math.max(x1, x2); 47 | const y2_ = Math.max(y1, y2); 48 | const c = this.connectorList.length == 0 ? null : this.connectorList[this.connectorList.length - 1]; 49 | if (c == null || !(c instanceof SvgLine) || !c.mergeLine(x1_, y1_, x2_, y2_)) { 50 | this.connectorList.push(new SvgLine(x1_, y1_, x2_, y2_)); 51 | } 52 | } 53 | 54 | getConnectorElement(rrDiagramToSVG) { 55 | if (this.connectorList.length == 0) { 56 | return ""; 57 | } 58 | let path0 = null; 59 | for (let connector of this.connectorList) { 60 | if (path0 == null) { 61 | if (connector instanceof SvgPath) { 62 | path0 = connector; 63 | } else { 64 | const svgLine = connector; 65 | const x1 = svgLine.getX1(); 66 | const y1 = svgLine.getY1(); 67 | path0 = new SvgPath(x1, y1, "M" + x1 + (y1 < 0 ? y1 : " " + y1), x1, y1); 68 | path0.addLine(svgLine); 69 | } 70 | } else { 71 | if(connector instanceof SvgPath) { 72 | path0.addPath(connector); 73 | } else { 74 | path0.addLine(connector); 75 | } 76 | } 77 | } 78 | return ""; 79 | } 80 | 81 | addElement(element) { 82 | this.elements.push(element); 83 | } 84 | 85 | getElements() { 86 | return this.elements; 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /src/ui/svg/svgline.js: -------------------------------------------------------------------------------- 1 | export default class svgline { 2 | 3 | constructor(x1, y1, x2, y2) { 4 | this.x1 = x1; 5 | this.y1 = y1; 6 | this.x2 = x2; 7 | this.y2 = y2; 8 | } 9 | 10 | getX1() { 11 | return this.x1; 12 | } 13 | 14 | getY1() { 15 | return this.y1; 16 | } 17 | 18 | getX2() { 19 | return this.x2; 20 | } 21 | 22 | getY2() { 23 | return this.y2; 24 | } 25 | 26 | mergeLine(x1, y1, x2, y2) { 27 | if (x1 == x2 && this.x1 == this.x2 && x1 == this.x1) { 28 | if (y2 >= this.y1 - 1 && y1 <= this.y2 + 1) { 29 | this.y1 = Math.min(this.y1, y1); 30 | this.y2 = Math.max(this.y2, y2); 31 | return true; 32 | } 33 | } else if (y1 == y2 && this.y1 == this.y2 && y1 == this.y1) { 34 | if (x2 >= this.x1 - 1 && x1 <= this.x2 + 1) { 35 | this.x1 = Math.min(this.x1, x1); 36 | this.x2 = Math.max(this.x2, x2); 37 | return true; 38 | } 39 | } 40 | return false; 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /src/ui/svg/svgpath.js: -------------------------------------------------------------------------------- 1 | export default class SvgPath { 2 | 3 | constructor(startX, startY, path, endX, endY) { 4 | this.pathSB = []; 5 | this.startX = startX; 6 | this.startY = startY; 7 | this.pathSB.push(path); 8 | this.endX = endX; 9 | this.endY = endY; 10 | } 11 | 12 | addPath(svgPath) { 13 | const x1 = svgPath.startX; 14 | const y1 = svgPath.startY; 15 | const path = svgPath.getPath(); 16 | const x2 = svgPath.endX; 17 | const y2 = svgPath.endY; 18 | if (x1 != this.endX || y1 != this.endY) { 19 | if (x1 == this.endX && y1 == this.endY + 1) { 20 | this.pathSB.push("v", y1 - y2); 21 | } else if (y1 == this.endY && x1 == this.endX + 1) { 22 | this.pathSB.push("h", x1 - x2); 23 | } else { 24 | this.pathSB.push("m", x1 - this.endX); 25 | if (y1 - this.endY >= 0) { 26 | this.pathSB.push(" "); 27 | } 28 | this.pathSB.push(y1 - this.endY); 29 | } 30 | } 31 | this.pathSB.push(path); 32 | this.endX = x2; 33 | this.endY = y2; 34 | } 35 | 36 | addLine(svgLine) { 37 | const x1 = svgLine.getX1(); 38 | const y1 = svgLine.getY1(); 39 | const x2 = svgLine.getX2(); 40 | const y2 = svgLine.getY2(); 41 | if (x1 == x2 && this.endX == x1) { 42 | if (this.endY == y1 || this.endY == y1 - 1) { 43 | this.pathSB.push("v", y2 - this.endY); 44 | this.endY = y2; 45 | return; 46 | } 47 | if (this.endY == y2 || this.endY == y2 + 1) { 48 | this.pathSB.push("v", y1 - this.endY); 49 | this.endY = y1; 50 | return; 51 | } 52 | } else if (y1 == y2 && this.endY == y1) { 53 | if (this.endX == x1 || this.endX == x1 - 1) { 54 | this.pathSB.push("h", x2 - this.endX); 55 | this.endX = x2; 56 | return; 57 | } 58 | if (this.endX == x2 || this.endX == x2 + 1) { 59 | this.pathSB.push("h", x1 - this.endX); 60 | this.endX = x1; 61 | return; 62 | } 63 | } 64 | this.pathSB.push("m", x1 - this.endX); 65 | if (y1 - this.endY >= 0) { 66 | this.pathSB.push(" "); 67 | } 68 | this.pathSB.push(y1 - this.endY); 69 | if (x1 == x2) { 70 | this.pathSB.push("v", y2 - y1); 71 | } else if (y1 == y2) { 72 | this.pathSB.push("h", x2 - x1); 73 | } else { 74 | this.pathSB.push("l", x2 - x1); 75 | if (y2 - y1 >= 0) { 76 | this.pathSB.push(" "); 77 | } 78 | this.pathSB.push(y2 - y1); 79 | } 80 | this.endX = x2; 81 | this.endY = y2; 82 | } 83 | 84 | getPath() { 85 | return this.pathSB.join(""); 86 | } 87 | 88 | } -------------------------------------------------------------------------------- /src/utils/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {string} unsafe 3 | * @return {string} 4 | */ 5 | export function escapeXml(unsafe) { 6 | return unsafe.replace(/[<>&'"]/g, function (c) { 7 | switch (c) { 8 | case '<': return '<'; 9 | case '>': return '>'; 10 | case '&': return '&'; 11 | case '\'': return '''; 12 | case '"': return '"'; 13 | } 14 | }); 15 | } 16 | 17 | /** 18 | * @param {string} text 19 | * @param {string} fontCssClass 20 | * @return {{textWidth: number, textHeight: number, descent: number, height: number}} 21 | */ 22 | export function getFontInfo(text, fontCssClass) { 23 | // TODO: add caching of fontInfo per CssClass 24 | // Code inspired from: https://galactic.ink/journal/2011/01/html5-typographic-metrics/ 25 | const container = document.body; 26 | const testDiv = document.createElement("div"); 27 | testDiv.className = fontCssClass; 28 | container.appendChild(testDiv); 29 | const computedStyle = window.getComputedStyle(testDiv, null); 30 | const fontSize = computedStyle.getPropertyValue('font-size'); 31 | const fontFamily = computedStyle.getPropertyValue('font-family'); 32 | container.removeChild(testDiv); 33 | const parent = document.createElement("div"); 34 | parent.style.fontFamily = fontFamily; 35 | parent.style.fontSize = fontSize; 36 | const image = document.createElement("img"); 37 | image.width = 1; 38 | image.height = 1; 39 | //image.src = "./media/1x1.png"; 40 | image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGP6DwABBQECz6AuzQAAAABJRU5ErkJggg=='; 41 | const sampleHeight = 500; 42 | const textNode = document.createTextNode(text); 43 | parent.appendChild(textNode); 44 | parent.appendChild(image); 45 | container.appendChild(parent); 46 | // getting css equivalent of ctx.measureText() 47 | image.style.display = "none"; 48 | parent.style.display = "inline"; 49 | const textHeight = parent.offsetHeight; 50 | const textWidth = parent.offsetWidth; 51 | // making sure super-wide text stays in-bounds 52 | image.style.display = "inline"; 53 | const forceWidth = textWidth + image.offsetWidth; 54 | // capturing the "top" and "bottom" baseline 55 | parent.style.cssText = "margin: " + sampleHeight + "px 0; display: block; width: " + forceWidth + "px; white-space: nowrap; overflow: hidden; position: absolute; top: 0;"; 56 | parent.style.fontFamily = fontFamily; 57 | parent.style.fontSize = fontSize; 58 | const descent = textHeight - image.offsetTop; 59 | const height = parent.offsetHeight; 60 | const fontInfo = { 61 | textWidth, 62 | textHeight, 63 | descent, 64 | height, 65 | }; 66 | container.removeChild(parent); 67 | return fontInfo; 68 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | context: path.join(__dirname, 'src'), 6 | entry: [ 7 | 'babel-polyfill', 8 | './main.js', 9 | ], 10 | devtool: 'source-map', 11 | output: { 12 | path: path.join(__dirname, 'www'), 13 | filename: 'rrdiagram.js', 14 | library: 'rrdiagram', 15 | libraryTarget: 'umd', 16 | umdNamedDefine: true, 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.js$/, 22 | exclude: /node_modules/, 23 | use: [ 24 | 'babel-loader', 25 | ], 26 | }, 27 | ], 28 | }, 29 | resolve: { 30 | modules: [ 31 | path.join(__dirname, 'node_modules'), 32 | ], 33 | }, 34 | plugins: [ 35 | new webpack.optimize.UglifyJsPlugin({ 36 | sourceMap: true, 37 | compress: { 38 | warnings: false, 39 | screw_ie8: true, 40 | conditionals: true, 41 | unused: true, 42 | comparisons: true, 43 | sequences: true, 44 | dead_code: true, 45 | evaluate: true, 46 | join_vars: true, 47 | if_return: true 48 | }, 49 | output: { 50 | comments: false 51 | } 52 | }), 53 | ], 54 | }; 55 | -------------------------------------------------------------------------------- /www/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RRDiagam-JS Test 1 7 | 17 | 18 | 19 | 20 | Hello World 21 | 22 | x=
"DSL.least(" ( FieldExpression (", " FieldExpression)* | ObjectExpression (", " ObjectExpression)* ) ")" Field?;
23 | 24 | done. 25 | 43 | 76 | 84 | 94 | 123 | 124 | 125 | 126 | --------------------------------------------------------------------------------