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