sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
103 lines • 6.39 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 _LinkWhereBottom_instances, _LinkWhereBottom_drawWhereConnection, _LinkWhereBottom_drawUpperVertical, _LinkWhereBottom_drawHorizontal, _LinkWhereBottom_drawLowerVertical, _LinkWhereBottom_getLine;
import { I18n } from "../../../settings/I18n";
import { HTMLComponent } from "../../HtmlComponent";
import { OptionTypes } from "./criteriagroup/optionsgroup/OptionsGroup";
/*
This Component consists of three lines.
The first vertical goes from the EndClassGroup to the end of the CriteriaGroup
Then the Horizontal connects the first vertical to the left. Till the height of the WhereStartClassGroup
The last vertical connects the Horizontal line with the new whereChild.StartClassGroup
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 Element
- bx & by are the position of the lower Element
- (posUpperStart.left + (posUpperStart.right - posUpperStart.left) / 4) is used to calculate one quarter of the width from the left side
*/
class LinkWhereBottom extends HTMLComponent {
constructor(parentComponent) {
super("link-where-bottom", parentComponent, null);
_LinkWhereBottom_instances.add(this);
this.widgetHTML = $(`<span>${I18n.labels.Where}</span>`);
this.upperVertical = $(`<div class="upper-vertical"></div>`);
this.horizontal = $(`<div class="horizontal"></div>`).append(this.widgetHTML);
this.lowerVertical = $(`<div class="lower-vertical"></div>`);
// noOption or optionalEnabled or notExists, etc.
this.currentOptionState = OptionTypes.NONE;
this.parentGroupWrapper = parentComponent;
// inherit the optionState from its parent
this.currentOptionState = this.parentGroupWrapper.currentOptionState;
}
render() {
super.render();
// add an explicit class for the option
this.html.addClass(this.currentOptionState);
this.html.add(this.upperVertical);
this.html.append(this.upperVertical);
this.html.append(this.horizontal);
this.html.append(this.lowerVertical);
__classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_drawWhereConnection).call(this, this.parentGroupWrapper.criteriaGroup.endClassGroup, this.parentGroupWrapper.whereChild);
return this;
}
setCurrentOptionState(newState) {
HTMLComponent.switchState(this.html[0], this.currentOptionState, newState);
this.currentOptionState = newState;
}
}
_LinkWhereBottom_instances = new WeakSet(), _LinkWhereBottom_drawWhereConnection = function _LinkWhereBottom_drawWhereConnection(EndClassGroup, whereChild) {
const xyUpper = __classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_drawUpperVertical).call(this, EndClassGroup, whereChild);
const xyLower = __classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_drawLowerVertical).call(this, whereChild);
__classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_drawHorizontal).call(this, xyLower, xyUpper);
}, _LinkWhereBottom_drawUpperVertical = function _LinkWhereBottom_drawUpperVertical(endClassGroup, whereChild) {
const endClassClientRect = endClassGroup.html[0].getBoundingClientRect();
const whereChildRect = whereChild.html[0].getBoundingClientRect();
const ax = (endClassClientRect.left + (endClassClientRect.right - endClassClientRect.left) / 2) + window.scrollX;
const ay = endClassClientRect.bottom + 3 + window.scrollY;
const by = whereChildRect.top + window.scrollY;
// ax can be used twice since the line is orthogonal to the upper element
let css = __classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_getLine).call(this, ax, ax, ay, by);
this.upperVertical.css(css);
return { x: ax, y: by };
}, _LinkWhereBottom_drawHorizontal = function _LinkWhereBottom_drawHorizontal(xyLower, xyUpper) {
// adapt line length according to width of the WHERE span.
const width = this.widgetHTML.outerWidth();
const adaptedLowerx = xyLower.x - (width / 2);
const css = __classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_getLine).call(this, adaptedLowerx, xyUpper.x, xyLower.y, xyUpper.y);
this.horizontal.css(css);
}, _LinkWhereBottom_drawLowerVertical = function _LinkWhereBottom_drawLowerVertical(whereChild) {
const startClassClientRect = whereChild.criteriaGroup.startClassGroup.html[0].getBoundingClientRect();
const bx = (startClassClientRect.left + (startClassClientRect.right - startClassClientRect.left) / 4) + window.scrollX;
// -2 so that it looks connected to white group
const by = startClassClientRect.top + window.scrollY - 2;
const whereChildRect = whereChild.html[0].getBoundingClientRect();
const ay = whereChildRect.top + window.scrollY;
// bx can be used twice since line is orthogonal from the lower element
const css = __classPrivateFieldGet(this, _LinkWhereBottom_instances, "m", _LinkWhereBottom_getLine).call(this, bx, bx, ay, by);
this.lowerVertical.css(css);
return { x: bx, y: ay };
}, _LinkWhereBottom_getLine = function _LinkWhereBottom_getLine(ax, bx, ay, by) {
if (ax > bx) {
bx = ax + bx;
ax = bx - ax;
bx = bx - ax;
by = ay + by;
ay = by - ay;
by = by - ay;
}
let distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
let calc = Math.atan((by - ay) / (bx - ax));
let degree = (calc * 180) / Math.PI;
return {
transformOrigin: "top left",
width: distance,
top: ay + "px",
left: ax + "px",
transform: `rotate(${degree}deg)`,
};
};
export default LinkWhereBottom;
//# sourceMappingURL=LinkWhereBottom.js.map