diff --git a/amd/src/simpleline.js b/amd/src/simpleline.js index 0c43552..0ab95ca 100644 --- a/amd/src/simpleline.js +++ b/amd/src/simpleline.js @@ -1,8 +1,12 @@ /*eslint no-console: "off"*/ /*eslint no-trailing-spaces: "off"*/ + + + + /** * Copies defined properties in to, over from the from object. Does so recursively - * Ysed to copy user defined parameters onto a pre-existing object with defaults preset. + * Used to copy user defined parameters onto a pre-existing object with defaults preset. * @param {Object} to The object to copy to * @param {Object} from The object tp copy from (but only the properties already named in "to") */ @@ -70,30 +74,19 @@ const getElementPosition = (el, reference) => { export class SimpleLine { static idCounter = 0; - constructor(start, end, specs){ + /** + * Create a new line object + * + * @param {HTMLElement|string} start The element the line starts from + * @param {HTMLElement|string} end The element the line ends at + * @param {object} config Configuration for the + * @returns {SimpleLine} object + */ + constructor(start, end, config){ this.svg = null; this.id = SimpleLine.idCounter++; - // setup defaults - this.specs = { - autorefresh: 10, - class: "", - anchors: { - // top, middle, bottom - // left, center, right - start: ["middle","right"], - end: ["middle", "left"], - }, - gravity: { - start: 1, - end: 1, - }, - stroke: "4px", - }; - - if(specs && typeof specs == "object"){ - specsCopy(this.specs,specs); - } + this.setConfig(config); // Validate start element if(start instanceof HTMLElement) { this.start = start; @@ -138,6 +131,60 @@ export class SimpleLine { this.update(); // fist draw } + /** + * Change the simpleline config + * @param {object} config The object containing the specs + */ + setConfig(config){ + // setup defaults + if(!(this.specs)){ + this.specs = { + autorefresh: 10, + class: "", + anchors: { + // top, middle, bottom + // left, center, right + start: ["middle","right"], + end: ["middle", "left"], + }, + gravity: { + start: 1, + end: 1, + }, + stroke: "4px", + }; + } + + if(config && typeof config == "object"){ + specsCopy(this.specs,config); + } + if(this.svg){ + // Re-initialize the refresh timer + clearInterval(this.refreshTimer); + if(this.specs.autorefresh > 0){ + this.refreshTimer = setInterval(()=>{this.positionCheck();},this.specs.autorefresh); + } + // Update the svg image + this.update(); + } + } + + /** + * Get the css class of the line + */ + get cssClass(){ + return this.specs.class; + } + + /** + * Set the css class of the line + */ + set cssClass(cssClass) + { + this.specs.class = cssClass; + this.update(); + } + positionCheck(){ const startPos = {x: this.start.offsetLeft, y: this.start.offsetTop}; const endPos = {x: this.end.offsetLeft, y: this.end.offsetTop};