misc/architype
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

More compact editor layout using symbols

Browse Source
This commit is contained in:
Ian Gulliver
2019-07-09 17:57:35 +00:00
parent 25545e51ab
commit 15c55d0b8d
4 changed files with 27 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
EditorGroup.js
View File

@@ -2,17 +2,9 @@ class EditorGroup extends EditorEntryBase {
constructor() {
super();
this.elem_.innerText = 'Group:';
this.elem_.innerText = '□';
this.elem_.classList.add('group');
this.input_ = document.createElement('input');
this.input_.type = 'text';
this.input_.placeholder = 'group name';
this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e));
this.listen(this.input_, 'input', (e) => this.onInput());
this.listen(this.input_, 'blur', (e) => this.onInput());
this.elem_.appendChild(this.input_);
let nodeList = document.createElement('div');
this.nodes_ = new Editor(nodeList, [Editor.NODE]);
this.nodes_.setMinEntries(1);
@@ -21,7 +13,7 @@ class EditorGroup extends EditorEntryBase {
}
afterDomAdd() {
this.input_.focus();
this.nodes_.selectNext();
}
serialize() {
@@ -56,80 +48,34 @@ class EditorGroup extends EditorEntryBase {
}
getLabel() {
return this.input_.value;
// TODO
return '';
}
setLabel(label) {
this.input_.value = label;
this.onInput();
// TODO
//this.input_.value = label;
//this.input_.setAttribute('data-arch-value', this.input_.value);
}
getElement() {
return this.elem_;
}
onInputKeyDown(e) {
switch (e.key) {
case 'Enter':
e.stopPropagation();
e.preventDefault();
this.stopEdit();
{
let nodes = this.nodes_.getEntries();
if (nodes.length == 1 && nodes[0].getLabel() == '') {
nodes[0].startEdit();
}
}
break;
case 'Escape':
e.stopPropagation();
e.preventDefault();
this.stopEdit();
break;
case 'ArrowUp':
case 'ArrowDown':
case 'PageUp':
case 'PageDown':
this.stopEdit();
break;
default:
e.stopPropagation();
break;
}
}
onKeyDown(e) {
super.onKeyDown(e);
switch (e.key) {
case 'Enter':
this.startEdit();
e.stopPropagation();
e.preventDefault();
break;
case 'ArrowRight':
case 'l':
this.nodes_.selectNext();
e.stopPropagation();
e.preventDefault();
break;
}
}
onInput() {
this.input_.setAttribute('data-arch-value', this.input_.value);
}
startEdit() {
this.input_.focus();
}
stopEdit() {
this.elem_.focus();
}
static unserialize(ser) {
let group = new EditorGroup();
group.setLabel(ser.label);

73
EditorLink.js
View File

@@ -2,17 +2,9 @@ class EditorLink extends EditorEntryBase {
constructor() {
super();
this.elem_.innerText = 'Link:';
this.elem_.innerText = '↓';
this.elem_.classList.add('link');
this.input_ = document.createElement('input');
this.input_.type = 'text';
this.input_.placeholder = 'label';
this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e));
this.listen(this.input_, 'input', (e) => this.onInput());
this.listen(this.input_, 'blur', (e) => this.onInput());
this.elem_.appendChild(this.input_);
let nodeList = document.createElement('div');
this.nodes_ = new Editor(nodeList, [Editor.NODE]);
this.nodes_.setMinEntries(2);
@@ -23,7 +15,7 @@ class EditorLink extends EditorEntryBase {
}
afterDomAdd() {
this.input_.focus();
this.nodes_.selectNext();
}
serialize() {
@@ -64,82 +56,33 @@ class EditorLink extends EditorEntryBase {
}
getLabel() {
return this.input_.value;
// TODO
return '';
}
setLabel(label) {
this.input_.value = label;
this.onInput();
// TODO
//this.input_.setAttribute('data-arch-value', this.input_.value);
}
getElement() {
return this.elem_;
}
onInput() {
this.input_.setAttribute('data-arch-value', this.input_.value);
}
onInputKeyDown(e) {
switch (e.key) {
case 'Enter':
e.stopPropagation();
e.preventDefault();
this.stopEdit();
{
let nodes = this.nodes_.getEntries();
if (nodes[0].getLabel() == '') {
nodes[0].startEdit();
} else if (nodes[1].getLabel() == '') {
nodes[1].startEdit();
}
}
break;
case 'Escape':
e.stopPropagation();
e.preventDefault();
this.stopEdit();
break;
case 'ArrowUp':
case 'ArrowDown':
case 'PageUp':
case 'PageDown':
this.stopEdit();
break;
default:
e.stopPropagation();
break;
}
}
onKeyDown(e) {
super.onKeyDown(e);
switch (e.key) {
case 'Enter':
this.startEdit();
e.stopPropagation();
e.preventDefault();
break;
case 'ArrowRight':
case 'l':
this.nodes_.selectNext();
e.stopPropagation();
e.preventDefault();
break;
}
}
startEdit() {
this.input_.focus();
}
stopEdit() {
this.elem_.focus();
}
static unserialize(ser) {
let link = new EditorLink();
link.setLabel(ser.label);

1
EditorNode.js
View File

@@ -2,7 +2,6 @@ class EditorNode extends EditorEntryBase {
constructor() {
super();
this.elem_.innerText = 'Node:';
this.elem_.classList.add('node');
this.input_ = document.createElement('input');

18
architype.css
View File

@@ -7,14 +7,15 @@
--text: #ffffff;
--placeholder: rgba(255,255,255,0.2);
--outline: #323434;
--background: #202020;
--editor-background: #000000;
--grid-background: #202020;
--group-background: rgba(0,0,0,0.5);
--node-background: #000000;
--input: rgba(255,255,255,0.2);
}
:root {
--editor-width: 305px;
--editor-width: 280px;
}
body {
@@ -30,7 +31,6 @@ body {
box-sizing: border-box;
width: 100%;
height: 100%;
background: var(--background);
color: var(--text);
font-family: 'Courier', monospace;
font-size: 16px;
@@ -48,13 +48,11 @@ body {
padding: 0;
outline: 1px solid var(--outline);
height: 100%;
width: 100%;
overflow-y: scroll;
user-select: none;
background: var(--editor-background);
}
.editor:focus {
@@ -74,6 +72,8 @@ body {
border-left: 10px solid var(--nonfocus);
outline: 1px solid var(--outline);
font-size: 30px;
cursor: default;
}
@@ -116,17 +116,19 @@ body {
.editor .editor {
margin: 3px;
margin-left: 5px;
}
.grid {
width: calc(100% - 20px);
height: calc(100% - 20px);
display: grid;
background: var(--grid-background);
align-items: center;
justify-items: center;
align-content: center;
justify-content: center;
margin: 10px;
padding: 10px;
}
.gridNode, .gridGroup, .gridGroupLabel {