sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
59 lines • 3.24 kB
JavaScript
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _LinkAndBottom_instances, _LinkAndBottom_drawLinkAndBottom, _LinkAndBottom_getLine;
import { I18n } from "../../../settings/I18n";
import { HTMLComponent } from "../../HtmlComponent";
/*
This class is used to draw the connecting line between two group wrappers if an AND connection is made
Some helpful notes:
- window.scrollX | window.scrollY is used to correct the positioning of the line if the window is scrollable.
- ax & ay are the position of the upper (Parent) group wrapper
- bx & by are the position of the lower (Sibling) group wrapper
- (posUpperStart.left + (posUpperStart.right - posUpperStart.left) / 4) is used to calculate one quarter of the width from the left side
*/
class LinkAndBottom extends HTMLComponent {
constructor(ParentComponent) {
let widgetHTML = $(`<span>${I18n.labels.And}</span>`);
super("link-and-bottom", ParentComponent, widgetHTML);
_LinkAndBottom_instances.add(this);
this.ParentGroupWrapper = ParentComponent;
}
render() {
super.render();
__classPrivateFieldGet(this, _LinkAndBottom_instances, "m", _LinkAndBottom_drawLinkAndBottom).call(this, this.ParentGroupWrapper);
return this;
}
}
_LinkAndBottom_instances = new WeakSet(), _LinkAndBottom_drawLinkAndBottom = function _LinkAndBottom_drawLinkAndBottom(grpWrapper) {
const posUpperStart = grpWrapper.criteriaGroup.startClassGroup.html[0].getBoundingClientRect();
const posLowerStart = grpWrapper.andSibling.criteriaGroup.startClassGroup.html[0].getBoundingClientRect();
// from the upper and from the upperelement move 25% into the middle
const ax = (posUpperStart.left + (posUpperStart.right - posUpperStart.left) / 4) + window.scrollX;
let bx = (posLowerStart.left + (posLowerStart.right - posLowerStart.left) / 4) + window.scrollX;
// +3 so that it looks connected to white group and not orange arrow
const ay = posUpperStart.bottom + window.scrollY + 3;
const by = posLowerStart.top + window.scrollY;
const css = __classPrivateFieldGet(this, _LinkAndBottom_instances, "m", _LinkAndBottom_getLine).call(this, ax, bx, ay, by);
this.html.css(css);
}, _LinkAndBottom_getLine = function _LinkAndBottom_getLine(ax, bx, ay, by) {
if (ax > bx) {
bx = ax + bx;
ax = bx - ax;
bx = bx - ax;
}
const distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
// we always need a vertical line. So 90degree is fixed
const degree = 90;
return {
transformOrigin: "top left",
width: distance,
top: ay + "px",
left: ax + "px",
transform: `rotate(${degree}deg)`,
};
};
export default LinkAndBottom;
//# sourceMappingURL=LinkAndBottom.js.map