Tweaks
This commit is contained in:
parent
f9d19cac2e
commit
7048665f8e
1 changed files with 34 additions and 40 deletions
|
@ -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)){
|
||||
|
@ -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;
|
||||
|
||||
|
@ -286,10 +282,10 @@ 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)
|
||||
|
@ -313,8 +309,8 @@ export class SimpleLine {
|
|||
};
|
||||
|
||||
// determine the bounding rectangle of the
|
||||
console.info("cStartPos",cStartPos);
|
||||
console.info("cEndPos",cEndPos);
|
||||
//console.info("cStartPos",cStartPos);
|
||||
//console.info("cEndPos",cEndPos);
|
||||
|
||||
const margin = (!isNaN(this.specs.stroke)?5*this.specs.stroke:25);
|
||||
const bounds = {
|
||||
|
@ -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,8 +361,8 @@ 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',
|
||||
`M ${startPos.x} ${startPos.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);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue