STEINNI
546 lines
17 KiB
JavaScript
546 lines
17 KiB
JavaScript
|
|
/**
|
|
* @augments EicComponent
|
|
* @category EICUI/AdvancedComponents
|
|
*/
|
|
class NodeMap extends EicComponent {
|
|
|
|
entities = [];
|
|
relations = [];
|
|
|
|
constructor(el, options) {
|
|
|
|
let defaultOptions = {
|
|
resizable: true,
|
|
allowDrag: true,
|
|
orientation: 'linear',
|
|
entity: {
|
|
width: 200,
|
|
height: 50,
|
|
gap: 40
|
|
},
|
|
map: {
|
|
position: { x: 0, y: 0 },
|
|
size: { width: 0, height: 0 },
|
|
dragging: false,
|
|
},
|
|
scale: {
|
|
current: 1.0,
|
|
factor: 0.085,
|
|
min: 0.5,
|
|
max: 4
|
|
},
|
|
guides: true
|
|
}
|
|
|
|
super(el, {...defaultOptions, ...(options || {})});
|
|
|
|
if(this._constructed) return this;
|
|
|
|
this.el.setAttribute('eicnodemap','');
|
|
|
|
if(this.options.resizable)
|
|
this.el.setAttribute('resizable','');
|
|
else
|
|
this.el.removeAttribute('resizable');
|
|
|
|
this.el.innerHTML = '';
|
|
this.map = ui.create(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"></svg>`)
|
|
this.el.append(this.map);
|
|
|
|
this.viewbox = { x: 0, y: 0, w: this.el.clientWidth, h: this.el.clientHeight };
|
|
|
|
if(this.options.allowDrag) {
|
|
this.map.addEventListener('wheel', this.onMapScroll.bind(this));
|
|
this.map.addEventListener('mousedown', this.onMapDragStart.bind(this));
|
|
this.map.addEventListener('mousemove', this.onMapDragMove.bind(this));
|
|
this.mouseUpHandler = this.onMapDragStop.bind(this);
|
|
this.entityUpHandler = this.onEntityDragStop.bind(this);
|
|
}
|
|
}
|
|
|
|
set loading(state) {
|
|
if(state == true)
|
|
this.el.setAttribute('loading','');
|
|
else
|
|
this.el.removeAttribute('loading');
|
|
}
|
|
get loading() { return this.el.hasAttribute('loading') }
|
|
|
|
set data(value) {
|
|
|
|
this.clear();
|
|
|
|
if(value.entities) for(let entity of value.entities) this.addEntity(entity);
|
|
if(value.relations) for(let relation of value.relations) this.addRelation(relation);
|
|
|
|
this.reorder();
|
|
}
|
|
|
|
clear() {
|
|
this.map.innerHTML = '';
|
|
this.entities = [];
|
|
}
|
|
|
|
reorder() {
|
|
switch(this.options.orientation) {
|
|
case 'linear':
|
|
this.reorderLinear();
|
|
break;
|
|
case 'radial':
|
|
default:
|
|
this.reorderRadial();
|
|
}
|
|
}
|
|
|
|
reorderLinear() {
|
|
|
|
// 1. prepare geometries and identify starters and enders
|
|
for(let entity of this.entities) {
|
|
entity.geometry = {
|
|
starter: false,
|
|
ender: false,
|
|
depth: null,
|
|
siblings: null,
|
|
index: null
|
|
};
|
|
|
|
if(!entity.relations.find(r => r.target.id == entity.id)) {
|
|
entity.geometry.starter = true;
|
|
entity.geometry.depth = 0
|
|
}
|
|
|
|
entity.geometry.ender = !entity.relations.find(r => r.source.id == entity.id);
|
|
}
|
|
|
|
// 2. dig paths using starters
|
|
let starters = this.entities.filter(o => o.geometry.starter == true)
|
|
for(let entity of starters) {
|
|
this.digLinearPath(entity)
|
|
}
|
|
|
|
// 3. resolve siblings
|
|
let maxSiblings = 0;
|
|
for(let entity of this.entities) {
|
|
entity.geometry.siblings = this.entities.filter(o => o.geometry.depth == entity.geometry.depth).length - 1
|
|
maxSiblings = Math.max(maxSiblings, entity.geometry.siblings);
|
|
let i = 0;
|
|
|
|
for(let relation of entity.relations) {
|
|
if(relation.target.id != entity.id && !relation.target.geometry.index) {
|
|
relation.target.geometry.index = i;
|
|
i++;
|
|
}
|
|
}
|
|
}
|
|
// 4. reposition
|
|
let maxHeight = 3 * maxSiblings * (this.options.entity.height + (this.options.entity.gap))
|
|
for(let entity of this.entities) {
|
|
|
|
entity.x = this.options.entity.gap + (this.options.entity.width + this.options.entity.gap) * entity.geometry.depth;
|
|
|
|
entity.y = maxHeight * (entity.geometry.index + 1) / (entity.geometry.siblings + 2);
|
|
for(let relation of entity.relations) {
|
|
relation.redraw();
|
|
}
|
|
}
|
|
|
|
this.center();
|
|
}
|
|
|
|
digLinearPath(entity) {
|
|
for(let relation of entity.relations) {
|
|
if(relation.target.id != entity.id) {
|
|
if(!relation.target.geometry.depth) {
|
|
relation.target.geometry.depth = entity.geometry.depth + 1;
|
|
this.digLinearPath(relation.target)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
center() {
|
|
let box = this.map.getBBox();
|
|
this.options.scale.current = Math.max(
|
|
(box.height + this.options.entity.gap) / (this.viewbox.h ),
|
|
(box.width + this.options.entity.gap) / (this.viewbox.w )
|
|
)
|
|
|
|
this.viewbox.y = box.y - (this.options.entity.gap / 2);
|
|
this.viewbox.x = 20;
|
|
this.setViewbox();
|
|
}
|
|
|
|
reorderRadial() {
|
|
let a = (Math.PI * 2) / this.entities.length;
|
|
let r = (this.options.entity.width) * Math.log(this.entities.length);
|
|
let i = 0;
|
|
let center = { x: this.viewbox.w / 2, y: this.viewbox.h / 2 }
|
|
|
|
for(let entity of this.entities) {
|
|
let pos = {
|
|
x: center.x + (Math.cos(a * i - Math.PI * .5) * r) - (this.options.entity.width / 2),
|
|
y: center.y + (Math.sin(a * i - Math.PI * .5) * r) - (this.options.entity.height / 2)
|
|
}
|
|
entity.x = pos.x;
|
|
entity.y = pos.y;
|
|
|
|
for(let relation of entity.relations) relation.redraw();
|
|
|
|
i++;
|
|
}
|
|
}
|
|
|
|
getEntityById(id) { return this.entities.find(entity => entity.id == id); }
|
|
|
|
addEntity(entity) {
|
|
let index = this.entities.length;
|
|
let options = { ...entity, ...this.options.entity };
|
|
let item = new NodeMapNode(null, options);
|
|
item.x = this.options.entity.gap + (this.options.entity.width + this.options.entity.gap) * index;
|
|
item.y = 30;
|
|
|
|
item.el.addEventListener('selected', this.onEntitySelect.bind(this));
|
|
|
|
this.entities.push(item);
|
|
this.map.append(item.el);
|
|
}
|
|
|
|
removeEntity(entity) {
|
|
let parents = entity.relations.filter(r => r.target.id == entity.id);
|
|
let childs = entity.relations.filter(r => r.source.id == entity.id);
|
|
|
|
for(let relation of parents) {
|
|
let parent = relation.source;
|
|
parent.relations = parent.relations.filter(r => r.target.id != entity.id);
|
|
|
|
for(let relation of childs) {
|
|
let child = relation.target;
|
|
child.relations = child.relations.filter(r => r.source.id != entity.id);
|
|
this.addRelation({source: parent.id, target: child.id});
|
|
}
|
|
}
|
|
|
|
entity.relations.forEach(r => r.el.remove())
|
|
entity.el.remove();
|
|
this.entities = this.entities.filter(e => e.id != entity.id)
|
|
|
|
this.reorder();
|
|
}
|
|
|
|
addRelation(relation) {
|
|
let source = this.entities.find(entity => entity.id == relation.source);
|
|
let target = this.entities.find(entity => entity.id == relation.target);
|
|
let item = new NodeMapRelation(source, target);
|
|
source.relations.push(item);
|
|
target.relations.push(item);
|
|
this.map.prepend(item.el);
|
|
}
|
|
|
|
onEntityDragStart(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
this.current = event.currentTarget
|
|
|
|
this.mouseStartPosition = { x: event.pageX, y: event.pageY }
|
|
this.entityStartPosition = { x: Number.parseFloat(this.current.getAttribute("x")), y: Number.parseFloat(this.current.getAttribute("y")) }
|
|
|
|
window.addEventListener("mouseup", this.entityUpHandler);
|
|
|
|
this.entityDrag = true;
|
|
}
|
|
|
|
|
|
onEntityMove(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
this.mousePosition = { x: event.offsetX, y: event.offsetY };
|
|
|
|
if(this.entityDrag) {
|
|
this.current.setAttribute("x", this.entityStartPosition.x - (this.mouseStartPosition.x - event.pageX) * this.options.scale.current)
|
|
this.current.setAttribute("y", this.entityStartPosition.y - (this.mouseStartPosition.y - event.pageY) * this.options.scale.current)
|
|
|
|
let entity = this.entities.find(item => item.data.id == (this.options.entity.current.getAttribute("data-id")))
|
|
let pos = { x: Number.parseFloat(this.options.entity.current.getAttribute("x")), y: Number.parseFloat(this.options.entity.current.getAttribute("y")) }
|
|
|
|
/*
|
|
for(let line of entity.lines) {
|
|
if(line.getAttribute("data-source") == entity.data.id) {
|
|
line.setAttribute("x1", pos.x + (this.options.entity.width / 2));
|
|
line.setAttribute("y1", pos.y + (this.options.entity.height / 2));
|
|
} else {
|
|
line.setAttribute("x2", pos.x + (this.options.entity.width / 2));
|
|
line.setAttribute("y2", pos.y + (this.options.entity.height / 2));
|
|
}
|
|
}
|
|
*/
|
|
}
|
|
}
|
|
|
|
onEntityDragStop(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
window.removeEventListener("mouseup", this.entityUpHandler);
|
|
this.options.entity.dragging = false;
|
|
}
|
|
|
|
onEntitySelect(event) {
|
|
let entity = event.detail;
|
|
|
|
this.entities.forEach(item => {
|
|
item.el.classList.remove('selected');
|
|
item.el.classList.remove('related');
|
|
//item.lines.forEach(line => line.classList.remove('related'))
|
|
});
|
|
entity.el.classList.add('selected');
|
|
|
|
/*
|
|
entity.lines.forEach(line => {
|
|
line.classList.add('related');
|
|
let other = this.entities.find(item => (item.data.id == line.getAttribute('data-target') && line.getAttribute('data-source') == selected.data.id) || (item.data.id == line.getAttribute('data-source') && line.getAttribute('data-target') == selected.data.id));
|
|
other.el.classList.add('related');
|
|
});
|
|
*/
|
|
|
|
this.click(entity);
|
|
}
|
|
|
|
onMapScroll(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
let scale = 1. + (event.deltaY < 0 ? - this.options.scale.factor : this.options.scale.factor);
|
|
|
|
if((this.options.scale.current * scale < this.options.scale.max) && (this.options.scale.current * scale > this.options.scale.min))
|
|
{
|
|
let pos = {
|
|
x: (this.mousePosition.x * this.options.scale.current) + this.viewbox.x,
|
|
y: (this.mousePosition.y * this.options.scale.current) + this.viewbox.y
|
|
}
|
|
|
|
this.viewbox.x = (this.viewbox.x - pos.x) * scale + pos.x;
|
|
this.viewbox.y = (this.viewbox.y - pos.y) * scale + pos.y;
|
|
this.options.scale.current *= scale;
|
|
|
|
this.setViewbox();
|
|
}
|
|
}
|
|
|
|
onMapDragStart(event) {
|
|
this.mouseStartPosition = { x: event.pageX, y: event.pageY }
|
|
this.viewboxStartPosition = { x: this.viewbox.x, y: this.viewbox.y }
|
|
this.options.map.dragging = true;
|
|
|
|
window.addEventListener("mouseup", this.mouseUpHandler);
|
|
}
|
|
|
|
onMapDragMove(event) {
|
|
this.mousePosition = { x: event.offsetX, y: event.offsetY };
|
|
|
|
if(this.options.map.dragging) {
|
|
this.viewbox.x = this.viewboxStartPosition.x + (this.mouseStartPosition.x - event.pageX) * this.options.scale.current;
|
|
this.viewbox.y = this.viewboxStartPosition.y + (this.mouseStartPosition.y - event.pageY) * this.options.scale.current;
|
|
this.setViewbox();
|
|
}
|
|
}
|
|
|
|
onMapDragStop(event) {
|
|
window.removeEventListener("mouseup", this.mouseUpHandler);
|
|
this.options.map.dragging = false;
|
|
}
|
|
|
|
onMapResize(event) {
|
|
this.viewbox.w = this.find('.results').clientWidth;
|
|
//this.viewbox.w = this.map.viewBox.baseVal.width;
|
|
this.viewbox.h = this.find('.results').clientHeight;
|
|
//this.viewbox.h = this.map.viewBox.baseVal.height;
|
|
|
|
this.setViewbox();
|
|
}
|
|
|
|
setViewbox() { this.map.setAttribute("viewBox", this.viewbox.x + " " + this.viewbox.y + " " + (this.viewbox.w * this.options.scale.current) + " " + (this.viewbox.h * this.options.scale.current)); }
|
|
|
|
click() {}
|
|
}
|
|
|
|
/**
|
|
* @augments EicComponent
|
|
* @category EICUI/AdvancedComponents
|
|
*/
|
|
class NodeMapNode extends EicComponent {
|
|
|
|
/**
|
|
*
|
|
*/
|
|
relations = [];
|
|
|
|
/**
|
|
*
|
|
*/
|
|
id = "";
|
|
|
|
/**
|
|
*
|
|
*/
|
|
options = {
|
|
badge: {
|
|
size: 'large',
|
|
severity: 'danger'
|
|
}
|
|
}
|
|
|
|
constructor(el, options) {
|
|
super(el, options);
|
|
|
|
this.setOptions(options);
|
|
|
|
if(!el) {
|
|
this.el = ui.create(
|
|
`<svg class="entity" ${options.severity ? options.severity: '' } x="0" y="0" text-anchor="middle">
|
|
<rect class="bg" width="${options.width}" height="${options.height}" x="2" y="5" rx="4"></rect>
|
|
<text dominant-baseline="middle" text-anchor="middle" class="title" x="${options.width / 2}" y="${options.height / 3}">${options.title}</text>
|
|
<text dominant-baseline="middle" text-anchor="middle" class="subtitle" x="${options.width / 2}" y="${(options.height / 3) * 2}">${options.subtitle}</text>
|
|
</svg>`
|
|
);
|
|
|
|
if(options.badge) this.badge = options.badge;
|
|
}
|
|
|
|
if(options.data) {
|
|
for(let property in options.data) {
|
|
this.el.setAttribute('data-' + property, options.data[property]);
|
|
if(property == "id") this.id = options.data[property];
|
|
}
|
|
}
|
|
|
|
this.el.addEventListener('click', this.onClick.bind(this));
|
|
}
|
|
/**
|
|
*
|
|
*/
|
|
set x(value) { this.el.setAttribute('x', value); }
|
|
get x() { return parseInt(this.el.getAttribute('x')); }
|
|
|
|
/**
|
|
*
|
|
*/
|
|
set y(value) { this.el.setAttribute('y', value); }
|
|
get y() { return parseInt(this.el.getAttribute('y')); }
|
|
|
|
/**
|
|
*
|
|
*/
|
|
set disabled(state) { state ? this.el.setAttribute('disabled',''): this.el.removeAttribute('disabled'); }
|
|
get disabled() { return this.el.hasAttribute('disabled'); }
|
|
|
|
/**
|
|
*
|
|
*/
|
|
get width() { return parseInt(this.el.querySelector('rect').getAttribute('width')); }
|
|
get height() { return parseInt(this.el.querySelector('rect').getAttribute('height')); }
|
|
|
|
/**
|
|
*
|
|
*/
|
|
set title(str) { this.el.querySelector('.title').innerHTML = str; }
|
|
set subtitle(str) { this.el.querySelector('.subtitle').innerHTML = str; }
|
|
|
|
/**
|
|
*
|
|
*/
|
|
set badge(value) {
|
|
|
|
if(!this._badge && value != 0) {
|
|
let r = 14;
|
|
|
|
switch(this.options.badge.size) {
|
|
case 'xxsmall': r = 8; break;
|
|
case 'xsmall': r = 10; break;
|
|
case 'small': r = 12; break;
|
|
case 'large': r = 16; break;
|
|
case 'xlarge': r = 18; break;
|
|
case 'xxlarge': r = 20; break;
|
|
case 'xxxlarge': r = 24; break;
|
|
}
|
|
|
|
this._badge = ui.create(
|
|
`<svg class="badge" x="${this.options.width - r}" y="0" ${this.options.badge.size} ${this.options.badge.severity} text-anchor="middle">
|
|
<circle class="bg" cx="${r}" cy="${r}" r="${r}"></circle>
|
|
<text dominant-baseline="middle" text-anchor="middle" x="${r}" y="${r}"></text>
|
|
</svg>`
|
|
);
|
|
this.el.append(this._badge)
|
|
|
|
}
|
|
|
|
this._badge.querySelector('text').textContent = value;
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
set data(value) { }
|
|
|
|
onClick(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
|
|
this.el.dispatchEvent(new CustomEvent('selected', {detail: this}))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @augments EicComponent
|
|
* @category EICUI/AdvancedComponents
|
|
*/
|
|
class NodeMapRelation extends EicComponent {
|
|
|
|
source = null;
|
|
target = null;
|
|
|
|
constructor(source, target, options) {
|
|
super(null, options);
|
|
|
|
this.setOptions(options);
|
|
|
|
this.source = source;
|
|
this.target = target;
|
|
|
|
//this.el = ui.create( `<line class="relation" x1="0" y1="0" x2="0" y2="0" data-source="${source.id}" data-target="${target.id}" />` );
|
|
this.el = document.createElementNS('http://www.w3.org/2000/svg','path');
|
|
this.el.setAttribute('class', 'relation');
|
|
|
|
this.el.dataset.source = source.id;
|
|
this.el.dataset.target = target.id;
|
|
|
|
this.redraw();
|
|
}
|
|
|
|
redraw() {
|
|
|
|
let o = {
|
|
x: this.source.x + this.source.width / 2,
|
|
y: this.source.y + this.source.height / 2
|
|
}
|
|
|
|
let d = {
|
|
x: o.x + Math.abs((this.target.y + this.target.height / 2) - o.y),
|
|
y: this.target.y + this.target.height / 2
|
|
}
|
|
|
|
let p1 = { x: o.x, y: d.y }
|
|
|
|
let f = {
|
|
x: this.target.x + this.target.width / 2,
|
|
y: this.target.y + this.target.height / 2
|
|
}
|
|
|
|
let path = `M ${o.x} ${o.y} C ${p1.x} ${p1.y} ${p1.x} ${p1.y} ${d.x} ${d.y} L ${f.x} ${f.y}`
|
|
|
|
this.el.setAttribute('d', path)
|
|
}
|
|
}
|