Skip to content

Commit

Permalink
Code editor improvements: refactoring, selection handling, and new co…
Browse files Browse the repository at this point in the history 
…mmands (#5)

* Improve editor

Fix security warning
Remove elseif element
Change Swift definition to remove confusion between "switch" and "else if"
```
   switch (...)
   case ...
      result...
   default
      result...
```
Add multi-line tabulation with "Tab" and "Shift+Tab" button
Fix deprecation in JavaScript
Add scroll synchronisation between code input and DA result

* Text zoom

Add button to zoom in and zoom out in editor
Add command Ctrl+; Ctrl-;Ctrl0 to manage quickly zoom

* Update Switch

Refactor: Replace ‘switch’ keyword with ‘match’ for better clarity and understanding in code logic.

* Improvements to zoom, textarea resize, and reintroduction of compatibility with old switch syntax

- Disabled `textarea` resizing as the resize button was not functional.
- Updated the zoom function to use relative units (`rem`) instead of absolute units (`px`), ensuring better zoom behavior based on the document's font size.
- Reintroduced compatibility with the old switch syntax (`if`, `elseif`, `else`, `endif`) while maintaining the new switch syntax, allowing both to coexist and ensuring compatibility with older code.
- Implemented the requested changes from the review for better code alignment and functionality.

* Minor Code Optimizations

Refactoring of repetitive code blocks to reduce redundancy.
  • Loading branch information
@maxland255
maxland255 authored Oct 28, 2024
1 parent c8f42f2 commit 96257e8
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 100 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.idea/*
12 changes: 7 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@

<script src="https://use.fontawesome.com/ca53c7c19d.js"></script>
<script src="scripts/PseudoCodeParser.js"></script>
<script defer src="scripts/libraries/jquery-3.2.1.min.js"></script>
<script defer src="scripts/libraries/toastr.min.js"></script>
<script defer src="scripts/app.js"></script>
</head>
<body>
<div class="welcome-overlay" id="welcomePanel">
Expand Down Expand Up @@ -53,13 +56,16 @@ <h1 class="topbar-title">Editeur de diagrammes d'actions (pseudo-code)</h1>
<header class="editor-header">
<h2 class="header-title">Source</h2>

<ul class="header-option-items">
<ul class="header-option-items horizontal-scroll hide-scrollbar">
<li class="option-item" id="buttonInsert__Main">Bloc principal</li>
<li class="option-item" id="buttonInsert__Condition">Condition</li>
<li class="option-item" id="buttonInsert__Switch">Switch</li>
<li class="option-item" id="buttonInsert__Loop">Boucle</li>
<li class="option-item" id="buttonInsert__Module">Module</li>
<li class="option-item" id="buttonInsert__Paragraph">Paragraphe</li>
<li class="option-item" id="buttonZoomPlus" title="Ctrl +" style="margin-left: 16px;">+</li>
<li class="option-item" id="buttonZoomReset" title="Ctrl 0">Reset</li>
<li class="option-item" id="buttonZoomMinus" title="Ctrl -" style="margin-right: 16px;">-</li>
<li class="option-item option-item--align-end option-item--active" id="buttonDarkTheme">Thème sombre</li>
</ul>
</header>
Expand All @@ -85,9 +91,5 @@ <h2 class="header-title">Résultat</h2>
</div>
</section>
</main>

<script src="scripts/libraries/jquery-3.2.1.min.js"></script>
<script src="scripts/libraries/toastr.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
94 changes: 50 additions & 44 deletions scripts/PseudoCodeParser.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,47 @@
var PseudoCodeParser = function(ownValues) {
const PseudoCodeParser = function(ownValues) {
this.borders = "";

this.delimiters = [
{ pattern: /---\*/i, replacement: "┌─── *", border: "│" },
{ pattern: /---[-]+/i, replacement: "└──────────", border: false },
{ pattern: /\bif\b/i, replacement: "┌── if", border: "│" },
{ pattern: /\belseif\b/i, replacement: "├── if", border: true },
{ pattern: /\belse\b/i, replacement: "├── else", border: true },
{ pattern: /\bendif\b/i, replacement: "└──", border: false },
{ pattern: /\b___\b/i, replacement: "└──", border: false },
{ pattern: /\bdo\b/i, replacement: "╔══ do", border: "║" },
{ pattern: /\bwhile\b/i, replacement: "╔══ while", border: "║" },
{ pattern: /\benddo\b/i, replacement: "╙──", border: false },
{ pattern: /\bendwhile\b/i, replacement: "╙──", border: false },
{ pattern: /===/i, replacement: "╙──", border: false }
{ pattern: /---\*/i, replacement: "┌─── *", border: "│" },
{ pattern: /---+/i, replacement: "└──────────", border: false },
{ pattern: /\bif\b/i, replacement: "┌── if", border: "│" },
{ pattern: /\belseif\b/i, replacement: "├── if", border: true },
{ pattern: /\belse\b/i, replacement: "├── else", border: true },
{ pattern: /\bendif\b/i, replacement: "└──", border: false },
{ pattern: /\b___\b/i, replacement: "└──", border: false },
{ pattern: /\bdo\b/i, replacement: "╔══ do", border: "║" },
{ pattern: /\bwhile\b/i, replacement: "╔══ while", border: "║" },
{ pattern: /\benddo\b/i, replacement: "╙──", border: false },
{ pattern: /\bendwhile\b/i, replacement: "╙──", border: false },
{ pattern: /===+/i, replacement: "╙──", border: false },
{ pattern: /\bmatch\b/i, replacement: "┌── match", border: "│" },
{ pattern: /\bcase\b/i, replacement: "├── case", border: true },
{ pattern: /\bdefault\b/i, replacement: "├── default", border: true },
{ pattern: /\bendmatch\b/i, replacement: "└──", border: false },
];

this.symbols = [
{ pattern: /<=/g, replacement: "≤" },
{ pattern: />=/g, replacement: "≥" },
{ pattern: /!=/g, replacement: "≠" },
{ pattern: /<->/g, replacement: "←→" },
{ pattern: /->/g, replacement: "→" },
{ pattern: /=>/g, replacement: "⇒" },
{ pattern: /sqrt\^/g, replacement: "√" },
{ pattern: /&&/g, replacement: "AND" }
{ pattern: /<=/g, replacement: "≤" },
{ pattern: />=/g, replacement: "≥" },
{ pattern: /!=/g, replacement: "≠" },
{ pattern: /<->/g, replacement: "←→" },
{ pattern: /->/g, replacement: "→" },
{ pattern: /=>/g, replacement: "⇒" },
{ pattern: /sqrt\^/g, replacement: "√" },
{ pattern: /&&/g, replacement: "AND" },
{ pattern: /\|\|/g, replacement: "OR" },
];

this.extendedExpressions = [
{ pattern: /"([^"\n]*)"/ig, replacement: '<span class="quote">"$1"</span>' },
{ pattern: /'([^'\n]*)'/ig, replacement: '<span class="quote">\'$1\'</span>' },
{ pattern: /\/\/ (.*)/ig, replacement: '<span class="comment">// $1</span>' },
{ pattern: /\/\*([^*/]*)\*\//ig, replacement: '<span class="comment">/*$1*/</span>' },
{ pattern: /\b(if|else|do|while|until|times|and|or|is|not|than|est|non)\b/ig, replacement: '<span class="reserved-word">$1</span>' },
{ pattern: /\b(true|false|break|stop|vrai|faux|hv|lv|null|nil|equal)\b/ig, replacement: '<span class="reserved-word">$1</span>' },
{ pattern: /\b(obtenir|sortir|libérer|liberer|traiter|get|print|return|free|process)\b/ig, replacement: '<span class="keyword">$1</span>' },
{ pattern: /┌─── \* (.*)/ig, replacement: '┌─── * <span class="diagram-title">$1</span>' },
{ pattern: /\[([^\]]+)\]ent/ig, replacement: '<span class="whole-part">[</span>$1<span class="whole-part">]ENT</span>' }
{ pattern: /"([^"\n]*)"/ig, replacement: '<span class="quote">"$1"</span>' },
{ pattern: /'([^'\n]*)'/ig, replacement: '<span class="quote">\'$1\'</span>' },
{ pattern: /\/\/ (.*)/ig, replacement: '<span class="comment">// $1</span>' },
{ pattern: /\/\*([^*/]*)\*\//ig, replacement: '<span class="comment">/*$1*/</span>' },
{ pattern: /\b(if|else|do|while|until|times|and|or|is|not|than|est|non|match|case|default)\b/ig, replacement: '<span class="reserved-word">$1</span>' },
{ pattern: /\b(true|false|break|stop|vrai|faux|hv|lv|null|nil|equal)\b/ig, replacement: '<span class="reserved-word">$1</span>' },
{ pattern: /\b(obtenir|sortir|libérer|liberer|traiter|get|print|return|free|process)\b/ig, replacement: '<span class="keyword">$1</span>' },
{ pattern: /┌─── \* (.*)/ig, replacement: '┌─── * <span class="diagram-title">$1</span>' },
{ pattern: /\[([^\]]+)]ent/ig, replacement: '<span class="whole-part">[</span>$1<span class="whole-part">]ENT</span>' },
];

if (ownValues) {
Expand All @@ -55,14 +60,14 @@ var PseudoCodeParser = function(ownValues) {
PseudoCodeParser.prototype.getFormattedDiagram = function(string, useExtendedFormatting) {
this.borders = "";

var diagram = this.normalize(string);
let diagram = this.normalize(string);
diagram = this.replaceSymbols(diagram);
diagram = this.escapeHtml(diagram);
diagram = this.parseModules(diagram);

var lines = diagram.split("\n");
const lines = diagram.split("\n");

for (var i in lines) {
for (const i in lines) {
lines[i] = this.parseBlock(lines[i].trim());
}

Expand Down Expand Up @@ -103,10 +108,11 @@ PseudoCodeParser.prototype.replaceExtendedExpressions = function(string) {
};

PseudoCodeParser.prototype.escapeHtml = function(string) {
var entityMap = {
const entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;"
">": "&gt;",
"|": "&#124;",
};

return string.replace(/[&<>]/g, function(symbol) {
Expand Down Expand Up @@ -136,10 +142,10 @@ PseudoCodeParser.prototype.parseModules = function(string) {
};

PseudoCodeParser.prototype.parseBlock = function(string) {
var matchesFirstWord = string.match(/^[a-z-_\*=]+/i);
var firstWord = (matchesFirstWord) ? matchesFirstWord[0] : "";
const matchesFirstWord = string.match(/^[a-z-_*=]+/i);
const firstWord = (matchesFirstWord) ? matchesFirstWord[0] : "";

var delimiter = this.getDelimiterObject(firstWord);
const delimiter = this.getDelimiterObject(firstWord);

if (!delimiter) {
return this.addBorders(string, "", true);
Expand All @@ -148,25 +154,25 @@ PseudoCodeParser.prototype.parseBlock = function(string) {
string = string.replace(delimiter.pattern, delimiter.replacement);
string = this.addBorders(string, delimiter.border, false);

return string;
return string;
};

PseudoCodeParser.prototype.createModule = function(title, inputs, outputs, corners) {
var border = "";
let border = "";

for (var i = 0; i < title.length; i++) {
for (let i = 0; i < title.length; i++) {
border += "─";
}

var moduleBlock = corners.topLeft + "─" + border + "─" + corners.topRight + inputs + "\n";
let moduleBlock = corners.topLeft + "─" + border + "─" + corners.topRight + inputs + "\n";
moduleBlock += "│ " + title + " │\n";
moduleBlock += corners.bottomLeft + "─" + border + "─" + corners.bottomRight + outputs;

return moduleBlock;
};

PseudoCodeParser.prototype.addBorders = function(string, border, whitespace) {
var borders = this.borders;
let borders = this.borders;

if (typeof border === "string" && border.length > 0) {
this.borders += border;
Expand All @@ -182,7 +188,7 @@ PseudoCodeParser.prototype.addBorders = function(string, border, whitespace) {
};

PseudoCodeParser.prototype.getDelimiterObject = function(string) {
var i = 0;
let i = 0;

while (i < this.delimiters.length && !string.match(this.delimiters[i].pattern)) {
i++;
Expand Down
Loading

0 comments on commit 96257e8

Please sign in to comment.