projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts
Properties |
|
Methods |
constructor(options: )
|
||||
Parameters :
|
Public containerElement |
containerElement:
|
Type : HTMLElement
|
Public containerHeight |
containerHeight:
|
Type : number
|
Public containerWidth |
containerWidth:
|
Type : number
|
Public data |
data:
|
Type : any
|
Default value : {}
|
Public el |
el:
|
Type : HTMLElement
|
Public elements |
elements:
|
Type : []
|
Default value : []
|
Public height |
height:
|
Type : number
|
Public maxScale |
maxScale:
|
Type : number
|
Public maxScaleX |
maxScaleX:
|
Type : number
|
Public maxScaleY |
maxScaleY:
|
Type : number
|
Private options |
options:
|
Type : any
|
Public routerMenu |
routerMenu:
|
Default value : false
|
Public routerMenuItems |
routerMenuItems:
|
Type : any
|
Public scaleFit |
scaleFit:
|
Type : any
|
Public selectedIndex |
selectedIndex:
|
Type : number
|
Public tspans |
tspans:
|
Type : []
|
Default value : []
|
Public width |
width:
|
Type : number
|
init |
init()
|
Returns :
any
|
initPageMenuRoutes |
initPageMenuRoutes()
|
Returns :
void
|
onWindowResize | ||||
onWindowResize(event: )
|
||||
Parameters :
Returns :
void
|
parseTextSpans |
parseTextSpans()
|
Returns :
void
|
scaleTemplate | ||||
scaleTemplate(options: )
|
||||
Parameters :
Returns :
void
|
rect |
getrect()
|
export class SketchArtboard {
public el: HTMLElement;
public containerElement: HTMLElement;
public elements = [];
public tspans = [];
public width: number;
public height: number;
public containerWidth: number;
public containerHeight: number;
public maxScale: number;
public maxScaleX: number;
public maxScaleY: number;
public routerMenu = false;
public routerMenuItems: any;
public selectedIndex: number;
public data: any = {};
public scaleFit: any;
private options: any;
constructor(options) {
this.el = options.el;
this.elements = [];
this.scaleFit = {
xDown: true,
xUp: false,
yDown: false,
yUp: false,
xCenter: true,
yCenter: false,
};
this.options = options;
if (options.data){
this.data = options.data;
}
if (options.containerElement){
this.containerElement = options.containerElement;
}
if (options.scaleFit){
for(let k in options.scaleFit) {
this.scaleFit[k] = options.scaleFit[k];
}
}
if (!this.scaleFit.xCenter || options.center === false){
this.el.style.margin = 'inherit';
}
Array.from(this.el.querySelectorAll('*')).forEach(el => {
let attrs: any = {};
Object.keys(el['attributes']).forEach((key) => {
attrs[el['attributes'][key].name] = el['attributes'][key].value;
});
let element = {
el: el,
id: attrs['id'],
attrs: attrs,
rect: el.getBoundingClientRect(),
rectHome: JSON.parse(JSON.stringify(el.getBoundingClientRect())),
};
if(attrs.transform) {
element['transform'] = attrs.transform;
element['transformHome'] = JSON.parse(JSON.stringify(attrs.transform));
}
this.elements.push(element);
});
if (typeof window !== 'undefined') {
window.addEventListener('resize', (e) => {
this.onWindowResize(e);
});
this.onWindowResize(false);
};
// routerMenu
this.init();
}
init () {
return new Promise((resolve) => {
setTimeout(() => {
this.initPageMenuRoutes();
resolve();
},100)
});
}
initPageMenuRoutes(){
if (document.querySelector('.sk-router-menu')) {
let href: string;
this.routerMenuItems = [];
if (this.options.routerMenu === false || Array.from(document.querySelectorAll('.sk-router-menu ul li a')).length < 2) {
let el = document.querySelector('.sk-router-menu') as HTMLElement;
el.style.display = 'none';
}
if (this.options.routerMenuTitle === false) {
let el = document.querySelector('.sk-router-menu h2') as HTMLElement;
el.style.display = 'none';
}
Array.from(document.querySelectorAll('.sk-router-menu ul li a')).forEach((el: HTMLElement) => {
href = el.attributes['href'].value;
if (href.startsWith('#/')) {
href = href.replace('#/', '');
}
this.routerMenuItems.push({
title: el.innerHTML,
href: href,
});
});
}
}
onWindowResize(event) {
this.scaleTemplate(this.options);
}
scaleTemplate(options) {
let vH, vW, newscale, difference;
let margin = options.margin || [0,0,0,0];
this.width = this.el.offsetWidth;
this.height = this.el.offsetHeight;
if(this.width === 0) {
setTimeout( () => {
this.scaleTemplate(options)
},10);
return;
}
if (window.innerHeight) {
vH = window.innerHeight;
vW = window.innerWidth;
} else {
vW = document.documentElement.clientWidth;
vH = document.documentElement.clientHeight;
}
this.containerWidth = vW;
this.containerHeight = vH;
if(this.containerElement) {
// fixme: returns 0
// this.containerWidth = this.containerElement.offsetWidth;
// this.containerHeight = this.containerElement.offsetHeight;
// this.containerHeight = this.containerElement.getBoundingClientRect().height;
}
this.maxScale = 1;
if (this.scaleFit.xDown && (this.width >= this.containerWidth)) {
// console.log('-down x');
let marginW = margin[1] + margin[3]
difference = this.width - this.containerWidth - marginW;
newscale = 1 - (difference / (this.width / 100) / 100);
this.maxScale = newscale;
this.el.style.transform = 'scale(' + newscale + ')';
}
if (this.scaleFit.xUp && (this.width < this.containerWidth)) {
// console.log('-up x');
let marginW = margin[1]+margin[3];
difference = this.containerWidth - marginW - this.width;
newscale = 1 + (difference / (this.width / 100) / 100);
this.maxScale = newscale;
this.el.style.transform = 'scale(' + newscale + ')';
}
if (this.scaleFit.yDown && (newscale * this.height > (this.containerHeight - margin[0] - margin[2]))) {
// console.log('-down y');
let marginH = margin[0]+margin[2];
difference = this.containerHeight - marginH - this.height;
newscale = 1 + (difference / (this.height / 100) / 100);
this.maxScale = newscale;
this.el.style.transform = 'scale(' + newscale + ')';
}
// console.log('this.container',this.containerWidth,this.containerHeight);
// console.log('this',this.width,this.height);
// console.log('maxScale=',this.maxScale);
// console.log('scaleFit=',this.scaleFit);
// todo: ???
if (this.scaleFit.yDown && this.scaleFit.yCenter) {
this.el.style.transformOrigin = '50% 50%';
}
setTimeout(()=> this.parseTextSpans(),200)
}
get rect() {
return this.el.getBoundingClientRect();
}
// todo:
parseTextSpans() {
// fixme: center svg text
this.tspans = [];
Array.from(this.el.querySelectorAll('tspan')).forEach(el => {
let charWidth;
let chars;
let correction = 0;
let maxChars;
let maxWidth;
let textWidth;
let center;
let computedTextLength;
let className = el.className.baseVal;
this.tspans.push(el);
if(className.match('sk-tspan-center')){
if (el.getComputedTextLength()) {
computedTextLength = Number(el.getComputedTextLength());
}
chars = el.innerHTML.length;
// fixme: is not constant
charWidth = el.getComputedTextLength() / chars;
maxChars = Number(className.split('-')[className.split('-').length - 1]);
maxWidth = maxChars * charWidth;
textWidth = chars * charWidth;
center = maxWidth / 2;
correction = (maxWidth-textWidth) / 2;
for(let k in this.data){
if(el.innerHTML === this.data[k]){
console.log('- - - - - - - - ');
console.log('chars=',chars, 'maxChars=',maxChars, 'charWidth=',charWidth);
console.log('maxWidth=',maxWidth,'textWidth=',textWidth);
console.log('computedTextLength='+computedTextLength, 'textWidth=',textWidth);
}
}
// center dynamic data text
for(let k in this.data){
if(el.innerHTML === this.data[k]){
el.setAttribute('x', String(Number(el.attributes['x'].value) + correction))
}
}
}
});
this.elements.forEach((element) => {
if (element.attrs.id && element.attrs.id.match('placeholder,')) {
console.log('text placeholder: '+element.attrs.id)
}
});
}
}