### File

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

### Index

###### Properties

- Public containerElement
- Public containerHeight
- Public containerWidth
- Public data
- Public el
- Public elements
- Public height
- Public maxScale
- Public maxScaleX
- Public maxScaleY
- Private options
- Public routerMenu
- Public routerMenuItems
- Public scaleFit
- Public selectedIndex
- Public tspans
- Public width

###### Methods

- init
- initPageMenuRoutes
- onWindowResize
- parseTextSpans
- scaleTemplate

### Constructor

`constructor(options: )`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:20

Parameters :

Name | Optional
options | no

### Properties

Public containerElement
`containerElement: `HTMLElement``
Type : `HTMLElement`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:5

Public containerHeight
`containerHeight: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:11

Public containerWidth
`containerWidth: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:10

Public data
`data: `any``
Type : `any`
Default value : `{}`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:18

Public el
`el: `HTMLElement``
Type : `HTMLElement`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:4

Public elements
`elements: `[]``
Type : `[]`
Default value : `[]`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:6

Public height
`height: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:9

Public maxScale
`maxScale: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:12

Public maxScaleX
`maxScaleX: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:13

Public maxScaleY
`maxScaleY: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:14

Private options
`options: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:20

Public routerMenu
`routerMenu: ```
Default value : `false`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:15

Public routerMenuItems
`routerMenuItems: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:16

Public scaleFit
`scaleFit: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:19

Public selectedIndex
`selectedIndex: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:17

Public tspans
`tspans: `[]``
Type : `[]`
Default value : `[]`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:7

Public width
`width: `number``
Type : `number`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:8

### Methods

init
`init()`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:76
Returns : `any`

initPageMenuRoutes
`initPageMenuRoutes()`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:85
Returns : `void`

onWindowResize
`onWindowResize(event: )`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:110

Parameters :

Name | Optional
event | no

Returns : `void`

parseTextSpans
`parseTextSpans()`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:185
Returns : `void`

scaleTemplate
`scaleTemplate(options: )`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:114

Parameters :

Name | Optional
options | no

Returns : `void`

### Accessors

rect
get `rect()`
Defined in projects/app-base-library/src/lib/shared/ui/sketch-artboard.ts:180

    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 ""