File

projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts

Index

Properties
Methods

Constructor

constructor(options: )
Parameters :
Name Optional
options no

Properties

Public containerElement
containerElement: HTMLElement
Type : HTMLElement
Public containerHeight
containerHeight: number
Type : number
Public containerWidth
containerWidth: number
Type : number
Public data
data: any
Type : any
Default value : {}
Public el
el: HTMLElement
Type : HTMLElement
Public elements
elements: []
Type : []
Default value : []
Public height
height: number
Type : number
Public maxScale
maxScale: number
Type : number
Public maxScaleX
maxScaleX: number
Type : number
Public maxScaleY
maxScaleY: number
Type : number
Private options
options: any
Type : any
Public routerMenu
routerMenu:
Default value : false
Public routerMenuItems
routerMenuItems: any
Type : any
Public scaleFit
scaleFit: any
Type : any
Public selectedIndex
selectedIndex: number
Type : number
Public tspans
tspans: []
Type : []
Default value : []
Public width
width: number
Type : number

Methods

init
init()
Returns : any
initPageMenuRoutes
initPageMenuRoutes()
Returns : void
onWindowResize
onWindowResize(event: )
Parameters :
Name Optional
event no
Returns : void
parseTextSpans
parseTextSpans()
Returns : void
scaleTemplate
scaleTemplate(options: )
Parameters :
Name Optional
options no
Returns : void

Accessors

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)
            }
        });
    }

}

results matching ""

    No results matching ""