@valten/regulex-visualizer 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +17 -16
  2. package/index.d.ts +0 -10
  3. package/src/assets/regulex.js +0 -27
  4. package/src/components/RegulexVisualizer.vue +0 -486
  5. package/src/index.js +0 -2
  6. package/src/test/regulex.html +0 -366
  7. package/src/test/regulex_vue.html +0 -357
  8. package/src/test/style.css +0 -208
  9. /package/dist/{index.mjs → index.js} +0 -0
  10. /package/dist/{index.umd.js → index.umd.cjs} +0 -0
package/src/test/regulex.html DELETED
@@ -1,366 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
- <title>Regulex：JavaScript Regular Expression Visualizer</title>
6
- <link rel="stylesheet" href="./style.css">
7
- </head>
8
- <body>
9
- <script>
10
- var params = getParams();
11
- if (params.embed || params.cmd === "export") {
12
- document.body.className += " embed";
13
- }
14
-
15
- function trim(s) {
16
- return s.replace(/^\s+/, '').replace(/\s+$/, '');
17
- }
18
-
19
- function getParams() {
20
- var params = location.hash;
21
- if (!params || params.length < 2) {
22
- params = {embed: false, re: "", highlight: true, flags: ''};
23
- } else {
24
- params = params.slice(2);
25
- params = params.split("&").reduce(function (p, a) {
26
- a = a.split("=");
27
- p[a[0]] = a[1];
28
- return p;
29
- }, {});
30
- params.embed = params.embed === 'true';
31
- params.flags = params.flags || '';
32
- params.re = params.re ? trim(decodeURIComponent(params.re)) : '';
33
- }
34
- return params;
35
- }
36
- </script>
37
- <h1>Regulex <em>JavaScript Regular Expression Visualizer.</em></h1>
38
- <div id="inputCt">
39
- <div class="re code">
40
- <table>
41
- <tr>
42
- <td style="width:1em">/</td>
43
- <td style="width:auto">
44
- <input id="input" class="input" value="^(a|b)*?$"/>
45
- </td>
46
- <td style="width:1em">/</td>
47
- <td style="width:3em" id="flagBox"></td>
48
- </tr>
49
- </table>
50
- </div>
51
- <button id="visualIt">Visualize</button>
52
- <button id="exportIt">Export Image</button>
53
- <button id="embedIt">Embed On My Site!</button>
54
- <label><input type="checkbox" name="flag" value="i"/>IgnoreCase</label>
55
- <label><input type="checkbox" name="flag" value="m"/>Multiline</label>
56
- <label><input type="checkbox" name="flag" value="g"/>GlobalMatch</label>
57
- </div>
58
- <p id="errorBox" class="code">Error Message</p>
59
- <div id="graphCt" class="code"></div>
60
-
61
- <script type="text/javascript" charset="utf-8">
62
-
63
- function $(id) {
64
- return document.getElementById(id)
65
- }
66
-
67
- function $$(q) {
68
- return document.querySelector(q)
69
- }
70
-
71
- var raphael = 'src/libs/raphael';
72
- var visualize = 'src/visualize';
73
- var parse = 'src/parse';
74
- var Kit = 'src/Kit';
75
-
76
- document.write('<script src="../assets/regulex.js" charset="utf-8"><' + '/script>');
77
- window.addEventListener('DOMContentLoaded', function () {
78
- raphael = require('regulex').Raphael;
79
- parse = require('regulex').parse;
80
- visualize = require('regulex').visualize;
81
- Kit = require('regulex').Kit;
82
- init(raphael, visualize, parse, Kit);
83
- });
84
-
85
-
86
- function init(R, visualize, parse, K) {
87
- var paper = R('graphCt', 10, 10);
88
- var input = $('input');
89
- var inputCt = $('inputCt');
90
- var visualBtn = $('visualIt');
91
- var embedBtn = $('embedIt');
92
- var exportBtn = $('exportIt');
93
- var errorBox = $('errorBox');
94
- var flags = document.getElementsByName('flag');
95
- var flagBox = $('flagBox');
96
- var getInputValue = function () {
97
- return trim(input.value);
98
- };
99
- var setInputValue = function (v) {
100
- return input.value = trim(v);
101
- };
102
- if (params.flags) {
103
- setFlags(params.flags);
104
- }
105
- if (params.re) {
106
- setInputValue(params.re);
107
- }
108
- visualIt();
109
- if (params.cmd == 'export') {
110
- showExportImage();
111
- return;
112
- } else {
113
- initListeners();
114
- dragGraph($('graphCt'));
115
- }
116
-
117
-
118
- function visualIt(skipError) {
119
- var re = getInputValue();
120
- changeHash();
121
- hideError();
122
- var ret;
123
- try {
124
- ret = parse(re)
125
- } catch (e) {
126
- if (e instanceof parse.RegexSyntaxError) {
127
- if (!skipError) {
128
- showError(re, e);
129
- }
130
- } else throw e;
131
- return false;
132
- }
133
- visualize(ret, getFlags(), paper);
134
- return true;
135
- }
136
-
137
- function hideError() {
138
- errorBox.style.display = 'none';
139
- }
140
-
141
- function showError(re, err) {
142
- errorBox.style.display = 'block';
143
- var msg = ["Error:" + err.message, ""];
144
- if (typeof err.lastIndex === 'number') {
145
- msg.push(re);
146
- msg.push(K.repeats('-', err.lastIndex) + "^");
147
- }
148
- setInnerText(errorBox, msg.join("\n"));
149
- }
150
-
151
- function serializeHash(params) {
152
- var re = getInputValue();
153
- var flags = getFlags();
154
- return "#!" +
155
- (params.debug ? "debug=true&" : "") +
156
- (params.cmd ? "cmd=" + params.cmd + "&" : "") +
157
- (params.embed ? "embed=true&" : "") +
158
- "flags=" + flags + "&re=" + encodeURIComponent(params.re = re);
159
-
160
- }
161
-
162
- function changeHash() {
163
- location.hash = serializeHash(params);
164
- }
165
-
166
- function initListeners() {
167
- var LF = '\n'.charCodeAt(0), CR = '\r'.charCodeAt(0);
168
- input.addEventListener('keydown', onEnter);
169
- input.addEventListener('keyup', onKeyup);
170
- input.addEventListener('paste', function (evt) {
171
- var content = trim(evt.clipboardData.getData('text'));
172
- if (content[0] === '/' && /\/[img]*$/.test(content)) {
173
- evt.preventDefault();
174
- var endIndex = content.lastIndexOf('/');
175
- setFlags(content.slice(endIndex + 1));
176
- content = content.slice(1, endIndex);
177
- setInputValue(content);
178
- }
179
- setTimeout(visualIt, 50);
180
- });
181
- visualBtn.addEventListener('click', function () {
182
- visualIt();
183
- });
184
- embedBtn.addEventListener('click', function () {
185
- if (!visualIt()) return false;
186
- var src = location.href;
187
- var i = src.indexOf('#');
188
- src = i > 0 ? src.slice(0, i) : src;
189
- changeHash();
190
- var re = getInputValue();
191
- var html = '<iframe frameborder="0" width="' + Math.ceil(paper.width) + '" height="' + Math.ceil(paper.height) + '" src="' + src + '#!embed=true&flags=' + getFlags() + '&re=' + encodeURIComponent(re) + '"></iframe>'
192
- window.prompt("Copy the html code:", html);
193
- });
194
-
195
- exportBtn.addEventListener('click', function () {
196
- var newParams = Object.assign({}, params);
197
- newParams.cmd = 'export';
198
- var hash = serializeHash(newParams);
199
- window.open(location.href.split('#!')[0] + hash, "_blank");
200
- });
201
-
202
-
203
- /*
204
- window.addEventListener('hashchange',function () {
205
- if (manualHash) return;
206
- var p=getParams();
207
- if (p.re && p.re!==params.re) {
208
- params.re=p.re;
209
- setInputValue(p.re);
210
- visualIt();
211
- }
212
- });*/
213
- for (var i = 0, l = flags.length; i < l; i++) {
214
- flags[i].addEventListener('change', onChangeFlags);
215
- }
216
-
217
- function onChangeFlags(e) {
218
- setInnerText(flagBox, getFlags());
219
- visualIt();
220
- changeHash();
221
- }
222
-
223
-
224
- var onKeyupTid;
225
-
226
- function onKeyup(e) {
227
- if (e.keyCode === LF || e.keyCode === CR) {
228
- return true;
229
- }
230
- clearTimeout(onKeyupTid);
231
- onKeyupTid = setTimeout(function () {
232
- var skipError = true;
233
- visualIt(skipError);
234
- }, 100);
235
- }
236
-
237
- function onEnter(e) {
238
- if (e.keyCode === LF || e.keyCode === CR) {
239
- e.preventDefault();
240
- e.stopPropagation();
241
- visualIt();
242
- }
243
- }
244
- }
245
-
246
- function getFlags() {
247
- var fg = '';
248
- for (var i = 0, l = flags.length; i < l; i++) {
249
- if (flags[i].checked) fg += flags[i].value;
250
- }
251
- return fg;
252
- }
253
-
254
- function setFlags(fg) {
255
- for (var i = 0, l = fg.length; i < l; i++) {
256
- if (~fg.indexOf(flags[i].value)) flags[i].checked = true;
257
- else flags[i].checked = false;
258
- }
259
- setInnerText(flagBox, fg);
260
- }
261
-
262
- function showExportImage() {
263
- var ratio = window.devicePixelRatio || 1;
264
- svg = graphCt.getElementsByTagName('svg')[0];
265
- var w = svg.clientWidth || parseInt(getComputedStyle(svg).width);
266
- var h = svg.clientHeight || parseInt(getComputedStyle(svg).height);
267
- var img = new Image;
268
- img.width = w;
269
- img.height = h;
270
- img.setAttribute('src', svgDataURL(svg));
271
-
272
- var canvas = document.createElement("canvas");
273
-
274
- canvas.width = w * ratio;
275
- canvas.height = h * ratio;
276
- canvas.style.width = w + "px";
277
- canvas.style.height = h + "px";
278
- canvas.className = "exportCanvas";
279
- var ctx = canvas.getContext("2d");
280
- ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
281
- img.onload = function () {
282
- ctx.drawImage(img, 0, 0);
283
- graphCt.style.display = 'none';
284
- document.body.appendChild(canvas);
285
- };
286
- }
287
-
288
- function svgDataURL(svg) {
289
- var svgAsXML = (new XMLSerializer).serializeToString(svg);
290
- return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
291
- }
292
-
293
-
294
- function dragGraph(g) {
295
- g.addEventListener('mousedown', startMove);
296
-
297
- function startMove(e) {
298
- clearSelect();
299
- var x = e.clientX, y = e.clientY;
300
- g.addEventListener('mousemove', onMove);
301
-
302
- document.addEventListener('mouseup', unbind, true);
303
- window.addEventListener('mouseup', unbind, true);
304
-
305
- function unbind(e) {
306
- g.removeEventListener('mousemove', onMove);
307
- document.removeEventListener('mouseup', unbind, true);
308
- window.removeEventListener('mouseup', unbind, true);
309
- }
310
-
311
- function onMove(e) {
312
- var dx = x - e.clientX, dy = y - e.clientY;
313
- if (dx > 0 && g.scrollWidth - g.scrollLeft - g.clientWidth < 2
314
- || dx < 0 && g.scrollLeft < 1) {
315
- document.documentElement.scrollLeft += dx;
316
- document.body.scrollLeft += dx;
317
- } else {
318
- g.scrollLeft += dx;
319
- }
320
- if (dy > 0 && g.scrollHeight - g.scrollTop - g.clientHeight < 2
321
- || dy < 0 && g.scrollTop < 1) {
322
- document.documentElement.scrollTop += dy;
323
- document.body.scrollTop += dy;
324
- } else {
325
- g.scrollTop += dy;
326
- }
327
- x = e.clientX;
328
- y = e.clientY;
329
- }
330
- }
331
- }
332
-
333
- function getInnerText(ele) {
334
- if (!ele) return '';
335
- var node = ele.firstChild, results = [];
336
- if (!node) return '';
337
- do {
338
- if (node.nodeType === document.TEXT_NODE) results.push(node.nodeValue);
339
- else results.push(getInnerText(node));
340
- } while (node = node.nextSibling);
341
- return results.join('');
342
- }
343
-
344
- function setInnerText(ele, s) {
345
- ele.innerHTML = '';
346
- var t = document.createTextNode('');
347
- t.nodeValue = s;
348
- ele.appendChild(t);
349
- return s;
350
- }
351
-
352
- function clearSelect() {
353
- if (window.getSelection) {
354
- if (window.getSelection().empty) { // Chrome
355
- window.getSelection().empty();
356
- } else if (window.getSelection().removeAllRanges) { // Firefox
357
- window.getSelection().removeAllRanges();
358
- }
359
- } else if (document.selection) { // IE
360
- document.selection.empty();
361
- }
362
- }
363
- }
364
- </script>
365
- </body>
366
- </html>