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

Bypass the rendering pipeline for highlighting to reduce (eliminate) latency

Browse Source 
Fixes #15
This commit is contained in:
Ian Gulliver
2019-07-14 02:26:00 +00:00
parent a4630ba92a
commit f3823812c7
18 changed files with 96 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Grid.js
View File

@@ -22,7 +22,7 @@ class Grid {
break;
case 'arrow':
this.drawArrow(step.id, step.pos, step.cls, step.highlight);
this.drawArrow(step.id, step.pos, step.cls);
break;
case 'graphLabel':
@@ -30,12 +30,11 @@ class Grid {
break;
case 'group':
this.drawGroup(step.id, step.min, step.max, step.label,
step.highlight);
this.drawGroup(step.id, step.min, step.max, step.label);
break;
case 'line':
this.drawLine(step.id, step.pos, step.cls, step.highlight);
this.drawLine(step.id, step.pos, step.cls);
break;
case 'linkLabel':
@@ -43,7 +42,7 @@ class Grid {
break;
case 'node':
this.drawNode(step.id, step.label, step.pos, step.highlight);
this.drawNode(step.id, step.label, step.pos);
break;
}
}
@@ -60,14 +59,14 @@ class Grid {
size[0] + ')))';
}
drawArrow(id, pos, cls, highlight) {
drawArrow(id, pos, cls) {
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.container_.appendChild(svg);
svg.classList.add('gridArrow');
svg.classList.add('grid-' + id);
this.maybeHighlight(svg, id);
svg.style.gridColumn = pos[0] + 1;
svg.style.gridRow = pos[1] + 1;
svg.classList.toggle('highlight', highlight);
let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svg.appendChild(use);
@@ -79,26 +78,29 @@ class Grid {
this.container_.appendChild(elem);
elem.classList.add('gridGraphLabel');
elem.classList.add('grid-' + id);
this.maybeHighlight(elem, id);
elem.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
elem.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
elem.innerText = label;
this.toSize_.push(elem);
}
drawGroup(id, min, max, label, highlight) {
drawGroup(id, min, max, label) {
let group = document.createElement('div');
this.container_.appendChild(group);
group.classList.add('gridGroup');
group.classList.add('grid-' + id);
this.maybeHighlight(group, id);
group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
group.classList.toggle('highlight', highlight);
if (label != '') {
// TODO: split this into its own draw step type
let labelNode = document.createElement('div');
this.container_.appendChild(labelNode);
labelNode.classList.add('gridGroupLabel');
labelNode.classList.add('grid-' + id);
this.maybeHighlight(labelNode, id);
labelNode.innerText = label;
labelNode.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
labelNode.style.gridRow = min[1] + 1;
@@ -106,14 +108,14 @@ class Grid {
}
}
drawLine(id, pos, cls, highlight) {
drawLine(id, pos, cls) {
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.container_.appendChild(svg);
svg.classList.add('gridLines');
svg.classList.add('grid-' + id);
this.maybeHighlight(svg, id);
svg.style.gridColumn = pos[0] + 1;
svg.style.gridRow = pos[1] + 1;
svg.classList.toggle('highlight', highlight);
let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svg.appendChild(use);
@@ -125,27 +127,35 @@ class Grid {
this.container_.appendChild(elem);
elem.classList.add('gridLinkLabel');
elem.classList.add('grid-' + id);
this.maybeHighlight(elem, id);
elem.innerText = label;
elem.style.gridColumn = pos[0] + 1;
elem.style.gridRow = pos[1] + 1;
this.toSize_.push(elem);
}
drawNode(id, label, pos, highlight) {
drawNode(id, label, pos) {
let node = document.createElement('div');
this.container_.appendChild(node);
node.classList.add('gridNode');
node.classList.add('grid-' + id);
this.maybeHighlight(node, id);
node.innerText = label;
node.classList.toggle('highlight', highlight);
node.style.gridColumn = pos[0] + 1;
node.style.gridRow = pos[1] + 1;
this.toSize_.push(node);
}
node.addEventListener('click', () => {
maybeHighlight(elem, id) {
let source = document.getElementById(id);
if (!source) {
return;
}
elem.classList.toggle('highlight', source.classList.contains('highlight'));
elem.addEventListener('click', () => {
let editorElem = document.getElementById(id);
editorElem.classList.toggle('highlight');
editorElem.setAttribute('data-arch-refresh', '');
editorElem.xArchObj.toggleHighlight();
});
}