Skip to content
This repository has been archived by the owner on May 25, 2021. It is now read-only.

Commit

Permalink
bug: fixed UI bugs (#1420)
Browse files Browse the repository at this point in the history
  • Loading branch information
@feeloor
feeloor committed Nov 18, 2019
1 parent f065b8d commit f26de35
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 77 deletions.
115 changes: 52 additions & 63 deletions src/feature-modules/highlighter/backend/Highlighter.class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MutableTree, Node } from '../module-dependencies.barrel';

// ----

const HIGHLIGHT_STYLES = require('to-string!raw!./highlightOverlayStyle.raw');
const HIGHLIGHT_STYLES = require('to-string!css!./highlightOverlayStyle.raw');

interface Offsets {
left: number;
Expand All @@ -22,7 +22,6 @@ interface Offsets {
// ----

export class Highlighter {

// injectables
private _dom: Document;
private _componentTree: MutableTree;
Expand All @@ -43,7 +42,7 @@ export class Highlighter {
};
};

constructor() { }
constructor() {}

// --- Injectables ---

Expand All @@ -62,7 +61,9 @@ export class Highlighter {
public useOnUpdateNotifier(notifier: Observable<void>) {
this._onUpdateNotifier = notifier;
this._onUpdateNotifier.subscribe(() => {
if (!this.targetIsStillThere()) { return; }
if (!this.targetIsStillThere()) {
return;
}
this.highlightAuguryNode(this._currentHighlight.target.auguryNode);
});
}
Expand All @@ -73,21 +74,29 @@ export class Highlighter {
this._pipe = pipe;
this._pipe.addHandler((message: Message<any>) => {
switch (message.messageType) {

case MessageType.Highlight:
if (this._componentTree == null) { return; }
if (this._componentTree == null) {
return;
}
const id: string = message.content.nodes[0];
if (!id) { return; }
if (!id) {
return;
}
const node: Node = this._componentTree.lookup(id);
this.highlightAuguryNode(node);
break;

case MessageType.FindElement:
if (this._componentTree == null) { return; }
if (message.content.start) { this.startFinding(); }
if (message.content.stop) { this.stopFinding(); }
if (this._componentTree == null) {
return;
}
if (message.content.start) {
this.startFinding();
}
if (message.content.stop) {
this.stopFinding();
}
break;

}
});
}
Expand All @@ -98,11 +107,7 @@ export class Highlighter {
* @returns boolean
*/
public isReady() {
return (
this._dom &&
this._componentTree &&
this._pipe
);
return this._dom && this._componentTree && this._pipe;
}

// --- Private Methods ---
Expand All @@ -126,18 +131,22 @@ export class Highlighter {
/**
*/
private clear() {
if (!this._currentHighlight) { return; }
if (!this._currentHighlight) {
return;
}
const overlay = this._currentHighlight.overlay.element;
try { overlay.remove(); }
catch (e) { console.error('error removing highlight', overlay, e); }
try {
overlay.remove();
} catch (e) {
console.error('error removing highlight', overlay, e);
}
clearInterval(this._currentHighlight.watcher);
this._currentHighlight = null;
}

/**
*/
private startFinding() {

const detainEvent = (e: Event) => {
e.preventDefault();
e.stopPropagation();
Expand All @@ -156,42 +165,22 @@ export class Highlighter {
detainEvent(event);
};

window.addEventListener(
'mouseover',
this._onHoverListener,
false
);
window.addEventListener(
'mousedown',
this._onSelectListener,
false
);

window.addEventListener('mouseover', this._onHoverListener, false);
window.addEventListener('mousedown', this._onSelectListener, false);
}

/**
*/
private stopFinding() {
window.removeEventListener(
'mouseover',
this._onHoverListener,
false
);
window.removeEventListener(
'mousedown',
this._onSelectListener,
false
);
window.removeEventListener('mouseover', this._onHoverListener, false);
window.removeEventListener('mousedown', this._onSelectListener, false);
}

/**
*/
private selectNodeFromElement(element) {
const node: Node = this.findNearestAuguryParent(element);
this._pipe.sendQueuedMessage(
this._pipe.createMessage(
MessageType.FindElement, { node, stop: true }
));
this._pipe.sendQueuedMessage(this._pipe.createMessage(MessageType.FindElement, { node, stop: true }));
}

/**
Expand All @@ -207,27 +196,26 @@ export class Highlighter {
/**
*/
private findNearestAuguryParent(element): Node {

const ne = (n: Node): Element => n.nativeElement();

let nearestParentNode = null;
this._componentTree.recurseAll((currentNode: Node) => {
if (
ne(currentNode).contains(element) &&
(
!nearestParentNode ||
ne(nearestParentNode).contains(ne(currentNode))
)
) { nearestParentNode = currentNode; }
(!nearestParentNode || ne(nearestParentNode).contains(ne(currentNode)))
) {
nearestParentNode = currentNode;
}
});
return nearestParentNode;

}

/**
*/
private targetIsStillThere() {
if (!this._currentHighlight) { return false; }
if (!this._currentHighlight) {
return false;
}
if (!this._dom.contains(this._currentHighlight.target.domElement)) {
this.clear();
return false;
Expand All @@ -244,7 +232,9 @@ export class Highlighter {
/**
*/
private repaintOverlay() {
if (!this.targetIsStillThere()) { return; }
if (!this.targetIsStillThere()) {
return;
}
this.highlightAuguryNode(this._currentHighlight.target.auguryNode);
}

Expand All @@ -254,7 +244,9 @@ export class Highlighter {
const overlay = this._dom.createElement('div');
overlay.setAttribute('style', HIGHLIGHT_STYLES);

if (label) { overlay.textContent = label; }
if (label) {
overlay.textContent = label;
}

overlay.style.left = `${offsets.left}px`;
overlay.style.top = `${offsets.top}px`;
Expand All @@ -265,20 +257,20 @@ export class Highlighter {

return overlay;
}

}

// ----

function addUpElementAndChildrenOffsets(domElement): Offsets {

let offsets = getElementOffsets(domElement);

const children = Array.from(domElement.children);
if (!children.length) { return offsets; }
if (!children.length) {
return offsets;
}

let child;
while (child = children.pop()) {
while ((child = children.pop())) {
const childOffsets = addUpElementAndChildrenOffsets(child);
// offsets.top = Math.max(offsets.top, childOffsets.top);
// offsets.left = Math.max(offsets.left, childOffsets.left);
Expand All @@ -287,11 +279,9 @@ function addUpElementAndChildrenOffsets(domElement): Offsets {
}

return offsets;

}

function getElementOffsets(domElement): Offsets {

const computedStyle = getComputedStyle(domElement);

let offsets = {
Expand All @@ -303,11 +293,10 @@ function getElementOffsets(domElement): Offsets {
marginHeight: parseInt(computedStyle.marginTop, 10) + parseInt(computedStyle.marginBottom, 10)
};

while (domElement = <HTMLElement> domElement.offsetParent) {
while ((domElement = <HTMLElement>domElement.offsetParent)) {
offsets.left += domElement.offsetLeft;
offsets.top += domElement.offsetTop;
}

return offsets;

}
35 changes: 22 additions & 13 deletions src/frontend/components/tab-menu/tab-menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,35 @@
<header class="flex flex-justify bg-panel border-bottom">
<header class="flex justify-between bg-panel border-bottom">
<div class="flex">
<img src="../images/augury-logo.svg" class="logo">
<div (click)="selectElement()" class="select-element"
[ngClass]="{'select-element-active': domSelectionActive}">
<img src="../images/augury-logo.svg" class="logo" />
<div (click)="selectElement()" class="select-element" [ngClass]="{'select-element-active': domSelectionActive}">
<svg width="16px" height="16px" viewBox="0 0 28 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="pointer" transform="translate(2.000000, 2.000000)">
<g id="point">
<path class="path"
d="M10.4848307,22.0014302 L0.996394205,21.9689396 C0.446100881,21.9641553 0,21.521612 0,20.9596252 L0,1.00065163 C0,0.448006995 0.45528388,0 0.993260896,0 L20.8048191,0 C21.3533819,0 21.79808,0.438413103 21.79808,1.00033649 L21.9493556,9.67706599"
id="frame" stroke="#000000"></path>
<polygon class="polygon" id="cursor" fill="#000000"
transform="translate(18.259351, 16.690224) rotate(-38.000000) translate(-18.259351, -16.690224) "
points="17.2853408 8.69022414 23.7593509 17.7744263 19.4788724 18.3375109 20.0969384 24.3519163 18.4014965 24.6902241 17.5267532 18.6423945 12.7593509 19.3063155"></polygon>
<path
class="path"
d="M10.4848307,22.0014302 L0.996394205,21.9689396 C0.446100881,21.9641553 0,21.521612 0,20.9596252 L0,1.00065163 C0,0.448006995 0.45528388,0 0.993260896,0 L20.8048191,0 C21.3533819,0 21.79808,0.438413103 21.79808,1.00033649 L21.9493556,9.67706599"
id="frame"
stroke="#000000"
></path>
<polygon
class="polygon"
id="cursor"
fill="#000000"
transform="translate(18.259351, 16.690224) rotate(-38.000000) translate(-18.259351, -16.690224) "
points="17.2853408 8.69022414 23.7593509 17.7744263 19.4788724 18.3375109 20.0969384 24.3519163 18.4014965 24.6902241 17.5267532 18.6423945 12.7593509 19.3063155"
></polygon>
</g>
</g>
</g>
</svg>
</div>
<div class="primary-color tab-menu-title px2 py2 border-transparent mt1"
[ngClass]="{'bg-base border-top border-right border-left selected': t.tab === selectedTab}"
*ngFor="let t of tabs; let i = index" (click)="onSelect(t)">
<div
class="primary-color tab-menu-title px2 py2 border-transparent mt1"
[ngClass]="{'bg-base border-top border-right border-left selected': t.tab === selectedTab}"
*ngFor="let t of tabs; let i = index"
(click)="onSelect(t)"
>
{{t.title}}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@

/* Base */

html,
body {
/* Override basscss default white background to prevent a white flash during load. */
background-color: inherit !important;
margin: 0px;

font-size: 11px;
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
Expand Down

0 comments on commit f26de35

Please sign in to comment.