☹️Propriétés

Fuyez ! Fuyez tant que vous le pouvez encore !

La classe 'Interface' prend 4 paramètres en entrée. -> id : Juste un identifiant, parfaitement inutile pour l'instant. Tachez de le garder unique si possible, car il pourrait devenir utile. -> name : Le nom de l'interface actuelle. Il n'a pas a être unique, et est (peu) utilisé. -> transform : un objet transform, déterminant la position, taille et d'autre paramètres d'une interface. -> zIndex : correspond à la "couche" sur laquelle va être l'interface. Si deux interfaces sont sur la même couche, alors celle ajoutée en dernière sera au dessus, sinon celle avec le zIndex le plus haut le sera.

La valeur du zIndex devra se trouver entre 1 et 9 (tous deux inclus), sous peine de causer de sérieux problèmes, notamment sur la gestion de certains outils.

Plus de détails sur les transforms :

Transform

Des propriétés (du même nom) sont créés dans l'interface, ainsi qu'une autre: -> canvas : l'élément HTML qui permet d'afficher sur la page. Chaque interface dispose de son propre canvas, ce qui permet de ne ré-afficher que ceux qui ont changés.

var canvas = document.createElement('canvas');
canvas.id = id;
canvas.width = this.transform.width;
canvas.height = this.transform.height;

//style properties
canvas.style.zIndex = zIndex;
canvas.style.position = "absolute";
canvas.style.top = this.transform.y + "px"; //It needs an unit
canvas.style.left = this.transform.x+"px";
if (this.transform.radius != undefined){
    canvas.style.borderRadius = this.transform.radius+"px";
}

//shadow
canvas.style.boxShadow = "0px 2px 6px 0px #A3A3A3";
//prevent from right clic context menu
canvas.addEventListener('contextmenu', function(evt){evt.preventDefault();});

this.canvas = canvas;

De plus, la classe Interface dispose plusieurs fonctions pré-implémentées. Si vous souhaitez les modifier, n'oublier pas de rappeler celle parent a la fin de votre version.

Les fonction 'hide' et 'show', qui sont plutôt compréhensibles.

hide(){
this.canvas.hidden = true;
}

show(){
this.canvas.hidden = false;
}

Une fonction 'isOnInterface', qui indique si une position ets bien située dans les limites de l'interface ou non. Dans le cas ou vous souhaiteriez faire des interfaces avec des formes plus travaillées, vous devez impérativement ré-écrire cette fonction (dans la classe enfant) sans appeler celle parent !

isOnInterface(x, y){
    if (x >= this.transform.x && x <= this.transform.x + this.transform.width && y >= this.transform.y && y <= this.transform.y + this.transform.height){
        return true;
    }
    return false;
}

Les fonctions move, destroy et draw, rien de particulier à dire.

move(x, y){
    this.transform.x = x;
    this.transform.y = y;
    this.canvas.style.top = this.transform.y + "px";
    this.canvas.style.left = this.transform.x + "px";
}


destroy(mocka){
    if (document.getElementsByTagName('body')[0].contains(this.canvas)){
        document.getElementsByTagName('body')[0].removeChild(this.canvas);
    }

    let done = false;
    mocka.pages.some(page=>{
        page.interfaces.some((itf, index)=>{
            if (itf == this){
                page.interfaces.splice(index, 1);
                done = true;
                return true;
            }
        });
        if (done){
            return true;
        }
    });
}

draw(){
    if (!document.getElementsByTagName('body')[0].contains(this.canvas)){
        document.getElementsByTagName('body')[0].appendChild(this.canvas);
    }
}