Commit 702ca7cf authored by Klaus Ramm's avatar Klaus Ramm

Add config file and color coating

parent 3076932e
......@@ -62,13 +62,25 @@ $main-background-color: rgba(128,212,255, 0.5);
flex: auto;
}
.justify-center {
justify-content: center;
}
.columnInput {
flex: 48%;
}
@media screen and (min-width: 486px) {
.columnInput {
flex-grow: 0;
flex-basis: 48%;
}
}
@media screen and (min-width: 800px) {
.columnInput {
flex: 32%;
flex-grow: 0;
flex-basis: 32%;
}
}
......@@ -153,6 +165,12 @@ $main-background-color: rgba(128,212,255, 0.5);
flex: 1;
}
.moveText {
flex: auto;
margin: auto;
padding-bottom: 0.15em;
}
.bottomHeader {
align-self: flex-end;
}
......
......@@ -24,6 +24,10 @@ body {
}
}
strong {
color: rgb(38, 64, 64);
}
.container {
display: flex;
flex-direction: row;
......@@ -225,3 +229,10 @@ body {
height: 0.1em;
margin: 0.2em 0;
}
.borderWidth {
flex: 0 0 2px;
}
.borderHeight {
height: 2px;
}
export const config = {
InsertNode: {
color: 'rgb(255,255,243)'
},
Placeholder: {
color: 'rgb(255,255,243)'
},
InsertCase: {
color: 'rgb(250, 218, 209)'
},
InputNode: {
use: true,
id: 'InputButton',
text: 'Eingabe-Feld',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
OutputNode: {
use: true,
id: 'OutputButton',
text: 'Ausgabe-Feld',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
TaskNode: {
use: true,
id: 'TaskButton',
text: 'Anweisung',
icon: 'taskIcon',
color: 'rgb(253, 237, 206)'
},
CountLoopNode: {
use: true,
id: 'CountLoopButton',
text: 'Zählergesteuerte Schleife',
icon: 'countLoopIcon',
color: 'rgb(220, 239, 231)'
},
HeadLoopNode: {
use: true,
id: 'HeadLoopButton',
text: 'Kopfgesteuerte Schleife',
icon: 'countLoopIcon',
color: 'rgb(220, 239, 231)'
},
FootLoopNode: {
use: true,
id: 'FootLoopButton',
text: 'Fußgesteuerte Schleife',
icon: 'footLoopIcon',
color: 'rgb(220, 239, 231)'
},
BranchNode: {
use: true,
id: 'BranchButton',
text: 'Verzweigung',
icon: 'branchIcon',
color: 'rgb(250, 218, 209)'
},
CaseNode: {
use: true,
id: 'CaseButton',
text: 'Fallunterscheidung',
icon: 'caseIcon',
color: 'rgb(250, 218, 209)'
}
}
import { config } from '../config.js';
export class Structogram {
constructor(presenter, domRoot) {
this.presenter = presenter;
this.domRoot = domRoot;
this.size = 7;
this.buttonList = [{
id: 'InputButton',
text: 'Eingabe-Feld',
icon: 'taskIcon'
},{
id: 'OutputButton',
text: 'Ausgabe-Feld',
icon: 'taskIcon'
},{
id: 'TaskButton',
text: 'Anweisung',
icon: 'taskIcon'
},{
id: 'CountLoopButton',
text: 'Zählergesteuerte Schleife',
icon: 'countLoopIcon'
},{
id: 'HeadLoopButton',
text: 'Kopfgesteuerte Schleife',
icon: 'countLoopIcon'
},{
id: 'FootLoopButton',
text: 'Fußgesteuerte Schleife',
icon: 'footLoopIcon'
},{
id: 'BranchButton',
text: 'Verzweigung',
icon: 'branchIcon'
},{
id: 'CaseButton',
text: 'Fallunterscheidung',
icon: 'caseIcon'
}];
this.buttonList = [
'InputNode',
'OutputNode',
'TaskNode',
'CountLoopNode',
'HeadLoopNode',
'FootLoopNode',
'BranchNode',
'CaseNode'
];
this.preRender();
}
......@@ -53,9 +32,11 @@ export class Structogram {
divInsert.appendChild(divHeader);
let divButtons = document.createElement('div');
divButtons.classList.add('container');
divButtons.classList.add('container', 'justify-center');
for (const item of this.buttonList) {
divButtons.appendChild(this.createButton(item));
if (config[item].use) {
divButtons.appendChild(this.createButton(item));
}
}
divInsert.appendChild(divButtons);
......@@ -66,62 +47,50 @@ export class Structogram {
editorHeadline.appendChild(document.createTextNode('Editor:'));
divEditorHeadline.appendChild(editorHeadline);
const divEditorContent = document.createElement('div');
divEditorContent.classList.add('vcontainer', 'columnEditorStructogram');
const divEditorContentSplitTop = document.createElement('div');
divEditorContentSplitTop.classList.add('columnAuto', 'container');
const divEditorContentSplitBottom = document.createElement('div');
divEditorContentSplitBottom.classList.add('columnAuto');
const divFixRightBorder = document.createElement('div');
divFixRightBorder.classList.add('borderWidth', 'frameLeft');
let divWorkingArea = document.createElement('div');
divWorkingArea.classList.add('columnEditorStructogram');
//divWorkingArea.classList.add('col-' + this.size);
divWorkingArea.id = 'Sizelimiter';
// dirty workaround
divWorkingArea.innerHTML = `<div class="frameLeftRight">
<div id="structogram" class="frameBottom"></div>
</div>`;
this.domRoot.prepend(divWorkingArea);
this.domRoot.prepend(divEditorHeadline);
this.domRoot.prepend(divInsert);
this.domRoot = document.getElementById('structogram');
divWorkingArea.classList.add('columnAuto');
divWorkingArea.id = 'structogram';
divEditorContent.appendChild(divEditorContentSplitTop);
divEditorContentSplitTop.appendChild(divWorkingArea);
divEditorContentSplitTop.appendChild(divFixRightBorder);
divEditorContent.appendChild(divEditorContentSplitBottom);
this.domRoot.appendChild(divInsert);
this.domRoot.appendChild(divEditorHeadline);
this.domRoot.appendChild(divEditorContent);
// add option buttons
// let sizeButtons = document.createElement('div');
// //sizeButtons.classList.add('column', 'col-auto', 'hide-md');
// let sizeText = document.createElement('span');
// sizeText.appendChild(document.createTextNode('Breite ändern:'));
// let sizeDecrease = document.createElement('button');
// //sizeDecrease.classList.add('btn', 'cubic');
// sizeDecrease.addEventListener('click', () => this.decreaseSize());
// sizeDecrease.appendChild(document.createTextNode('-'));
// let sizeIncrease = document.createElement('button');
// //sizeIncrease.classList.add('btn', 'cubic');
// sizeIncrease.addEventListener('click', () => this.increaseSize());
// sizeIncrease.appendChild(document.createTextNode('+'));
// sizeButtons.appendChild(sizeText);
// sizeButtons.appendChild(document.createTextNode(' '));
// sizeButtons.appendChild(sizeDecrease);
// sizeButtons.appendChild(document.createTextNode(' '));
// sizeButtons.appendChild(sizeIncrease);
// document.getElementById('optionButtons').appendChild(sizeButtons);
this.domRoot = document.getElementById('structogram');
}
createButton(button) {
let div = document.createElement('div');
div.classList.add('columnInput', 'insertButton');
//let anker = document.createElement('a');
div.classList.add('hand');
//anker.style.height = '3em';
div.id = button.id;
div.classList.add('columnInput', 'insertButton', 'hand');
div.style.backgroundColor = config[button].color;
div.id = config[button].id;
div.draggable = 'true';
div.addEventListener('click', (event) => this.presenter.insertNode(button.id, event));
div.addEventListener('dragstart', (event) => this.presenter.insertNode(button.id, event));
div.addEventListener('click', (event) => this.presenter.insertNode(config[button].id, event));
div.addEventListener('dragstart', (event) => this.presenter.insertNode(config[button].id, event));
div.addEventListener('dragend', () => this.presenter.resetDrop());
let spanText = document.createElement('span');
spanText.appendChild(document.createTextNode(button.text));
spanText.appendChild(document.createTextNode(config[button].text));
let divIcon = document.createElement('div');
divIcon.classList.add(button.icon, 'buttonLogo');
//divIcon.classList.add('p-centered');
divIcon.classList.add(config[button].icon, 'buttonLogo');
div.append(divIcon);
div.append(spanText);
//div.appendChild(anker);
return div
}
......@@ -134,6 +103,9 @@ export class Structogram {
for (const elem of this.renderElement(tree, false, false)) {
this.domRoot.appendChild(elem);
}
const lastLine = document.createElement('div');
lastLine.classList.add('frameTop', 'borderHeight');
this.domRoot.appendChild(lastLine);
}
......@@ -147,13 +119,13 @@ export class Structogram {
noInsert = true;
}
const background = document.createElement('div');
background.classList.add('vcontainer', 'columnAuto');
const container = document.createElement('div');
if (subTree.id) {
container.id = subTree.id;
}
container.classList.add('vcontainer', 'frameTop', 'columnAuto');
container.classList.add('vcontainer', 'frameTopLeft', 'columnAuto');
container.style.backgroundColor = config[subTree.type].color;
//container.style.margin = '0 .75px';
//const element = document.createElement('div');
//element.classList.add('column', 'vcontainer', 'frameTop');
//container.appendChild(element);
......@@ -171,14 +143,15 @@ export class Structogram {
//container.classList.add('line');
const div = document.createElement('div');
div.classList.add('container', 'fixedHalfHeight', 'symbol', 'hand', 'text-center');
div.addEventListener('dragover', function(event) {
container.addEventListener('dragover', function(event) {
event.preventDefault();
});
div.addEventListener('drop', () => this.presenter.appendElement(subTree.id));
div.addEventListener('click', () => this.presenter.appendElement(subTree.id));
container.addEventListener('drop', () => this.presenter.appendElement(subTree.id));
container.addEventListener('click', () => this.presenter.appendElement(subTree.id));
if (this.presenter.getMoveId() && subTree.followElement && subTree.followElement.id == this.presenter.getMoveId()) {
const bold = document.createElement('strong');
bold.classList.add('moveText');
bold.appendChild(document.createTextNode('Verschieben abbrechen'));
div.appendChild(bold);
} else {
......@@ -215,8 +188,8 @@ export class Structogram {
break;
case 'InsertCase':
{
container.classList.remove('frameTop', 'columnAuto');
container.classList.add('fixedHeight');
container.classList.remove('frameTopLeft', 'columnAuto');
container.classList.add('frameLeft', 'fixedHeight');
}
case 'InputNode':
case 'OutputNode':
......@@ -341,6 +314,10 @@ export class Structogram {
for (const elem of this.renderElement(subTree.child, false, noInsert)) {
divLoop.appendChild(elem);
}
// Fix for overlapped bottom line
const lastLine = document.createElement('div');
lastLine.classList.add('borderHeight');
divLoop.appendChild(lastLine);
divChild.appendChild(divLoop);
div.appendChild(divChild);
......@@ -427,7 +404,9 @@ export class Structogram {
resetButtons() {
// remove color of buttons
for (const button of this.buttonList) {
document.getElementById(button.id).classList.remove('btn-primary');
if (config[button].use) {
document.getElementById(config[button].id).classList.remove('btn-primary');
}
}
}
......@@ -507,9 +486,6 @@ export class Structogram {
let optionDiv = document.createElement('div');
optionDiv.classList.add('optionContainer');
// case nodes have two additional options
if (type == 'CaseNode') {
// add another new case
......@@ -550,7 +526,7 @@ export class Structogram {
// every element can be deleted
let deleteElem = document.createElement('div');
deleteElem.classList.add('deleteIcon');
deleteElem.classList.add('trashcan');
deleteElem.classList.add('optionIcon');
deleteElem.classList.add('hand');
deleteElem.classList.add('tooltip');
......
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<rect x="0%" y="0%" width="100%" height="100%" fill="rgba(255, 255, 255, 0.7)" />
<line x1="5%" y1="5%" x2="95%" y2="95%" stroke="black" stroke-linecap="round" stroke-width="10%" />
<line x1="5%" y1="95%" x2="95%" y2="5%" stroke="black" stroke-linecap="round" stroke-width="10%" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0%" y1="0%" x2="100%" y2="0%" stroke="black" stroke-width="3" />
<line x1="0%" y1="0%" x2="0%" y2="100%" stroke="black" stroke-width="3" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0%" y1="0%" x2="100%" y2="0%" stroke="black" stroke-width="3" />
<line x1="0%" y1="0%" x2="0%" y2="100%" stroke="black" stroke-width="3" />
<line x1="0%" y1="100%" x2="100%" y2="100%" stroke="black" stroke-width="3" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<!-- <rect x="0%" y="0%" width="100%" height="100%" fill="rgba(255, 255, 255, 0.7)" /> -->
<circle cx="50%" cy="50%" r="50%" fill="rgba(250, 250, 250, 0.9)" />
<line x1="5%" y1="50%" x2="95%" y2="50%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="5%" x2="50%" y2="95%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="14%" y1="50%" x2="86%" y2="50%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="14%" x2="50%" y2="86%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="5%" x2="65%" y2="20%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="5%" x2="35%" y2="20%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="14%" x2="60%" y2="24%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="14%" x2="40%" y2="24%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="95%" y1="50%" x2="80%" y2="35%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="95%" y1="50%" x2="80%" y2="65%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="86%" y1="50%" x2="76%" y2="40%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="86%" y1="50%" x2="76%" y2="60%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="5%" y1="50%" x2="20%" y2="35%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="5%" y1="50%" x2="20%" y2="65%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="14%" y1="50%" x2="24%" y2="40%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="14%" y1="50%" x2="24%" y2="60%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="95%" x2="35%" y2="80%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="95%" x2="65%" y2="80%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<line x1="50%" y1="86%" x2="40%" y2="76%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="86%" x2="60%" y2="76%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
</svg>
......@@ -3,7 +3,7 @@
viewBox="0 0 100 100">
<rect x="2.5%" y="2.5%" width="95%" height="95%" rx="5%" ry="5%" fill="white" stroke="rgb(38, 64, 64)" stroke-width="5%"/>
<g transform="scale(1, -1) translate(0, -100)">
<g transform="scale(1, -1) translate(0, -100) rotate(90, 50, 50)">
<circle cx="50%" cy="50%" r="38%" fill="white" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="10%" />
<circle cx="50%" cy="50%" r="5%" fill="rgb(38, 64, 64)" />
......
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<circle cx="50%" cy="50%" r="50%" fill="rgba(250, 250, 250, 0.9)" />
<rect x="26%" y="36%" width="48%" height="51%" rx="3%" ry="3%" fill="none" stroke="rgb(38, 64, 64)" stroke-width="7%" />
<rect x="18%" y="24%" width="64%" height="12%" rx="3%" ry="3%" fill="none" stroke="rgb(38, 64, 64)" stroke-width="7%" />
<rect x="38%" y="14%" width="24%" height="10%" rx="3%" ry="3%" fill="none" stroke="rgb(38, 64, 64)" stroke-width="7%" />
<line x1="38%" y1="48%" x2="38%" y2="75%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="50%" y1="48%" x2="50%" y2="75%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
<line x1="62%" y1="48%" x2="62%" y2="75%" stroke="rgb(38, 64, 64)" stroke-linecap="round" stroke-width="7%" />
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment