Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 4 Packages Wiki Activity

Tweaks

Browse source
This commit is contained in:
PMKuipers 2023-07-17 15:08:14 +02:00
parent f9d19cac2e
commit 7048665f8e
1 changed files with 34 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
amd/src/simpleline.js
View file

@ -34,15 +34,15 @@ const debounce = (func, delay) => {
clearTimeout(timer); clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
func.apply(context, args); func.apply(context, args);
}, delay) }, delay);
} };
} };
/** /**
* Get the position of an element relative to another * Get the position of an element relative to another
* @param {HTMLElement} el The element whose position to determine * @param {HTMLElement} el The element whose position to determine
* @param {HTMLElement} reference Relative to this element * @param {HTMLElement} reference Relative to this element
* @returns * @returns {object} Position object with {x: ..., y:...}
*/ */
const getElementPosition = (el, reference) => { const getElementPosition = (el, reference) => {
if(!el || !(el instanceof HTMLElement)){ if(!el || !(el instanceof HTMLElement)){
@ -56,13 +56,13 @@ const getElementPosition = (el, reference) => {
} }
if( el.offsetParent === reference){ if( el.offsetParent === reference){
// easily done if the reference element is also the offsetParent.. // easily done if the reference element is also the offsetParent..
return {x: el.offsetLeft, y: el.offsetTop}; return {x: el.offsetLeft, y: el.offsetTop};
} else { } else {
const elR = el.getBoundingClientRect(); const elR = el.getBoundingClientRect();
const refR = reference.getBoundingClientRect(); const refR = reference.getBoundingClientRect();
return {x: elR.left - refR.left, return {x: elR.left - refR.left,
y: elR.top - refR.top}; y: elR.top - refR.top};
} }
}; };
@ -159,11 +159,7 @@ export class SimpleLine {
this.positionCheck(); // Initialize refresh this.positionCheck(); // Initialize refresh
if(this.specs.autorefresh > 0){ if(this.specs.autorefresh > 0){
const refresh = () => { this.refreshTimer = setInterval(()=>{this.positionCheck();},this.specs.autorefresh);
setTimeout(refresh,this.specs.autorefresh);
this.positionCheck(); // Check if position ch
};
setTimeout(refresh,this.specs.autorefresh);
} }
this.update(); // fist draw this.update(); // fist draw
} }
@ -174,14 +170,14 @@ export class SimpleLine {
let needUpdate = false; let needUpdate = false;
if(this.startPos){ if(this.startPos){
needUpdate |= (this.startPos.x != startPos.x || this.startPos.y != startPos.y); needUpdate = needUpdate || (this.startPos.x != startPos.x || this.startPos.y != startPos.y);
console.info("Offset position changed for",this.start); //console.info("Offset position changed for",this.start);
} }
this.startPos = startPos; this.startPos = startPos;
if(this.endPos){ if(this.endPos){
needUpdate |= (this.endPos.x != endPos.x || this.endPos.y != endPos.y); needUpdate = needUpdate || (this.endPos.x != endPos.x || this.endPos.y != endPos.y);
console.info("Offset position changed for",this.end); //console.info("Offset position changed for",this.end);
} }
this.endPos = endPos; this.endPos = endPos;
@ -224,7 +220,7 @@ export class SimpleLine {
} else { // center } else { // center
x = el.offsetWidth / 2; x = el.offsetWidth / 2;
dirX = 0; dirX = 0;
} }
if(this.specs.anchors[anchor].includes("top")){ if(this.specs.anchors[anchor].includes("top")){
y = 0; y = 0;
dirY = 1; dirY = 1;
@ -234,7 +230,7 @@ export class SimpleLine {
} else { // middle } else { // middle
y = el.offsetHeight / 2; y = el.offsetHeight / 2;
dirY = 0; dirY = 0;
} }
return { x: x, y: y, dir: {x: dirX, y: dirY}}; return { x: x, y: y, dir: {x: dirX, y: dirY}};
} }
@ -286,15 +282,15 @@ export class SimpleLine {
const elStartPos = getElementPosition(this.start,container); const elStartPos = getElementPosition(this.start,container);
const elEndPos = getElementPosition(this.end,container); const elEndPos = getElementPosition(this.end,container);
console.info("startAnchor",startAnchor); //console.info("startAnchor",startAnchor);
console.info("endAnchor",endAnchor); //console.info("endAnchor",endAnchor);
console.info("elStartPos",elStartPos); //console.info("elStartPos",elStartPos);
console.info("elEndPos",elEndPos); //console.info("elEndPos",elEndPos);
// Determine basic h/w between start and end anchor to help determine desired control point length // Determine basic h/w between start and end anchor to help determine desired control point length
const w = Math.max(elStartPos.x + startAnchor.x,elEndPos.x + endAnchor.x) const w = Math.max(elStartPos.x + startAnchor.x,elEndPos.x + endAnchor.x)
- Math.min(elStartPos.x + startAnchor.x,elEndPos.x + endAnchor.x); - Math.min(elStartPos.x + startAnchor.x,elEndPos.x + endAnchor.x);
const h = Math.max(elStartPos.y + startAnchor.y,elEndPos.x + endAnchor.y) const h = Math.max(elStartPos.y + startAnchor.y,elEndPos.x + endAnchor.y)
- Math.min(elStartPos.y + startAnchor.y,elEndPos.x + endAnchor.y); - Math.min(elStartPos.y + startAnchor.y,elEndPos.x + endAnchor.y);
// Determine start positions and end positions relative to container // Determine start positions and end positions relative to container
@ -312,20 +308,20 @@ export class SimpleLine {
diry: elEndPos.y + endAnchor.y + endAnchor.dir.y * this.specs.gravity.end * (h/2), diry: elEndPos.y + endAnchor.y + endAnchor.dir.y * this.specs.gravity.end * (h/2),
}; };
// determine the bounding rectangle of the // determine the bounding rectangle of the
console.info("cStartPos",cStartPos); //console.info("cStartPos",cStartPos);
console.info("cEndPos",cEndPos); //console.info("cEndPos",cEndPos);
const margin = (!isNaN(this.specs.stroke)?5*this.specs.stroke:25); const margin = (!isNaN(this.specs.stroke)?5*this.specs.stroke:25);
const bounds = { const bounds = {
x: Math.min(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx) - margin, x: Math.min(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx) - margin,
y: Math.min(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry) - margin, y: Math.min(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry) - margin,
w: Math.max(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx) w: Math.max(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx)
- Math.min(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx) + 2*margin, - Math.min(cStartPos.x,cEndPos.x,cStartPos.dirx,cEndPos.dirx) + 2*margin,
h: Math.max(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry) h: Math.max(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry)
- Math.min(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry) + 2*margin, - Math.min(cStartPos.y,cEndPos.y,cStartPos.diry,cEndPos.diry) + 2*margin,
}; };
// Now convert the coordinates to the svg space // Now convert the coordinates to the svg space
const startPos = { const startPos = {
x: cStartPos.x - bounds.x, x: cStartPos.x - bounds.x,
@ -340,9 +336,9 @@ export class SimpleLine {
diry: cEndPos.diry - bounds.y, diry: cEndPos.diry - bounds.y,
}; };
console.info("Bounds",bounds); //console.info("Bounds",bounds);
console.info("startPos",startPos); //console.info("startPos",startPos);
console.info("endPos",endPos); //console.info("endPos",endPos);
// Update the svg attributes // Update the svg attributes
this.svg.setAttribute("viewBox",`0 0 ${bounds.w}, ${bounds.h}`); this.svg.setAttribute("viewBox",`0 0 ${bounds.w}, ${bounds.h}`);
this.svg.setAttribute("width",`${bounds.w}px`); this.svg.setAttribute("width",`${bounds.w}px`);
@ -365,10 +361,10 @@ export class SimpleLine {
if(!isNaN(strokeWidth) && strokeWidth != 0){ if(!isNaN(strokeWidth) && strokeWidth != 0){
strokeWidth = `${strokeWidth}px`; strokeWidth = `${strokeWidth}px`;
} }
this.line.style.stroke = "currentColor" this.line.style.stroke = "currentColor";
this.line.style.fill = "none" this.line.style.fill = "none";
this.line.style.strokeWidth= strokeWidth; this.line.style.strokeWidth= strokeWidth;
this.line.setAttribute('d', this.line.setAttribute('d',
`M ${startPos.x} ${startPos.y} `M ${startPos.x} ${startPos.y}
C ${startPos.dirx} ${startPos.diry}, ${endPos.dirx} ${endPos.diry}, ${endPos.x} ${endPos.y}`); C ${startPos.dirx} ${startPos.diry}, ${endPos.dirx} ${endPos.diry}, ${endPos.x} ${endPos.y}`);
} }
@ -379,12 +375,10 @@ export class SimpleLine {
this.svg = null; this.svg = null;
this.line = null; this.line = null;
// clear the refresh timer
clearInterval(this.refreshTimer);
// stop the observers
this.resizeObserver.unobserve(this.start); this.resizeObserver.unobserve(this.start);
this.resizeObserver.unobserve(this.end); this.resizeObserver.unobserve(this.end);
this.mutationObserver.unobserve(this.start);
this.mutationObserver.unobserve(this.end);
} }
} }