<commit_before>import { ActivatedRoute, Params, Router } from '@angular/router';
import { Component, ViewEncapsulation, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostmanService } from './postman.service';
import { StorageService } from './storage.service';

import { ModalComponent } from './modal.component';

import { ArtboardClass } from './artboard.class';
import { RendererClass } from './renderer.class';

import { DesignProperty, DesignProperties } from './interfaces';

import * as tool from './tools';

import WebFont = require('webfontloader');

@Component({
    moduleId: module.id,
    selector: 'page-editor',
    templateUrl: './app/page-editor.component.html',
    styleUrls: ['./app/page-editor.component.css'],
    providers: [ PostmanService ],
    host: {
        '(window:resize)': 'onWindowResize()'
    }
})
export class PageEditorComponent {
    
    private designProperties: DesignProperties;
    private designPropertiesArray: DesignProperty[] = [];

    private designStyle: string;
    private designTemplate: string;
    private designFonts: any;
    private designSize: any;

    private artboard: ArtboardClass;
    private artboardScaleStyle: string;

    // For unsubscribing later at ngOnDestroy()
    private alive: boolean = true;

    // For preventing changing router
    public hasChanges: boolean = false;

    // For loading spinner
    public loadingThings: any = {};
    public somethingIsLoading: boolean = false;

    // Modal for changing router confirmation
    @ViewChild(ModalComponent)
    public modal: ModalComponent;

    constructor(
        private storageService: StorageService,
        private postmanService: PostmanService, 
        private route: ActivatedRoute,
        private router: Router ) { }

    ngOnInit() {
        this.artboard = new ArtboardClass();

        this.setLoading('webfont');

        // getting params from url
        this.route.params
            // doing get again (get design data using params)
            .switchMap((params: Params) => this.postmanService.getDesign(params['groupID'], params['designID']))
            .takeWhile(() => this.alive)
            .subscribe(data => {

                // extract data from the promise
                this.designTemplate = data[0];
                this.designStyle = data[1];
                this.designProperties = data[2].designProperties;
                this.designFonts = data[2].fonts;
                this.designSize = data[2].size;

                // Load fonts
                let webFontConfig: any = {
                    classes: false,
                    active: () => { 
                        this.unsetLoading('webfont');
                    },
                };

                if(this.designFonts.google) {
                    webFontConfig.google = {
                        families: this.designFonts.google
                    }
                }

                WebFont.load(webFontConfig);

                // Make designPropertioes an array, so it can be looped for design controllers on sidebar
                this.designPropertiesArray = tool.objToArray(this.designProperties);

                // Make artboards
                this.artboard
                    .setWidth(this.designSize.w)
                    .setHeight(this.designSize.h)
                    .setStyle(this.designStyle)
                    .setTemplate(this.designTemplate)
                    .capsulize()
                    .drawAll(this.designProperties)

                this.scaleArtboard();
            });
    }

    // Add key to loadingthings, a list that shows something (a key) is still loading;
    setLoading(key: string):void {
        this.loadingThings[key] = true;
        this.somethingIsLoading = true;
    }

    unsetLoading(key: string):void {
        delete this.loadingThings[key];

        // If there's no more thing in this.loadingThings, make it false
        this.somethingIsLoading = !!Object.keys(this.loadingThings).length;
    }

    // For textarea and range
    onInputChange(arg: any) {
        // Prevent exiting this page, turn on guard
        this.hasChanges = true;

        // Get designPropertyBinder from the text input and its value for designProperties
        let key = arg.target.getAttribute('designPropertyBinder');
        let value = arg.target.value;

        let renderableDesignProperties = this.designProperties;

        if(arg.target.tagName == "TEXTAREA") {
            // resize text area based on its height 
            arg.target.style.height = "auto";
            arg.target.style.height = arg.target.scrollHeight + 20;
    
            // Change new line in input to <br>
            renderableDesignProperties[key].value = value.replace(/\r\n|\r|\n/g,"<br>");

        } else {
            renderableDesignProperties[key].value = value.toString();
        }

        this.artboard.drawAll(renderableDesignProperties);
    }

    // For file input
    onFileChange(arg: any) {
        // Prevent exiting this page, turn on guard
        this.hasChanges = true;

        // Get designPropertyBinder from the file input and its value for designProperties
        let key = arg.target.getAttribute('designPropertyBinder');

        if (arg.target.files && arg.target.files[0]) {
            let reader = new FileReader();

            reader.readAsDataURL(arg.target.files[0]);

            // If reading data successfuly loads picture
            reader.onload = (e: any) => {
                this.designProperties[key].value = e.target.result;

                this.artboard.drawAll(this.designProperties);
            }
        } else {
            console.log('Failed');
        }
    }

    render() {
        let aElement = document.createElement('a');
        let today = new Date();
        let dataURL: string;

        let renderer = new RendererClass();

        renderer
            .setWidth(this.artboard.getWidth())
            .setHeight(this.artboard.getHeight())
            .setRawMaterial(this.artboard.getOutput())
            .render()
            .then((canvas: any) => {
                dataURL = canvas.toDataURL();
                aElement.href = dataURL;
                aElement.setAttribute('download', `postyposter.com_${today.getFullYear()}-${today.getMonth()}-${today.getDate()}.png`);<commit_msg>Updated renderableDesignProperties things<commit_after>import { ActivatedRoute, Params, Router } from '@angular/router';
import { Component, ViewEncapsulation, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostmanService } from './postman.service';
import { StorageService } from './storage.service';

import { ModalComponent } from './modal.component';

import { ArtboardClass } from './artboard.class';
import { RendererClass } from './renderer.class';

import { DesignProperty, DesignProperties } from './interfaces';

import * as tool from './tools';

import WebFont = require('webfontloader');

@Component({
    moduleId: module.id,
    selector: 'page-editor',
    templateUrl: './app/page-editor.component.html',
    styleUrls: ['./app/page-editor.component.css'],
    providers: [ PostmanService ],
    host: {
        '(window:resize)': 'onWindowResize()'
    }
})
export class PageEditorComponent {
    
    private designProperties: DesignProperties;
    private designPropertiesArray: DesignProperty[] = [];
    private designPropertiesRenderable: DesignProperties;

    private designStyle: string;
    private designTemplate: string;
    private designFonts: any;
    private designSize: any;

    private artboard: ArtboardClass;
    private artboardScaleStyle: string;

    // For unsubscribing later at ngOnDestroy()
    private alive: boolean = true;

    // For preventing changing router
    public hasChanges: boolean = false;

    // For loading spinner
    public loadingThings: any = {};
    public somethingIsLoading: boolean = false;

    // Modal for changing router confirmation
    @ViewChild(ModalComponent)
    public modal: ModalComponent;

    constructor(
        private storageService: StorageService,
        private postmanService: PostmanService, 
        private route: ActivatedRoute,
        private router: Router ) { }

    ngOnInit() {
        this.artboard = new ArtboardClass();

        this.setLoading('webfont');

        // getting params from url
        this.route.params
            // doing get again (get design data using params)
            .switchMap((params: Params) => this.postmanService.getDesign(params['groupID'], params['designID']))
            .takeWhile(() => this.alive)
            .subscribe(data => {

                // extract data from the promise
                this.designTemplate = data[0];
                this.designStyle = data[1];
                this.designProperties = data[2].designProperties;
                this.designFonts = data[2].fonts;
                this.designSize = data[2].size;
                
                // For initial, designPropertiesRenderable is exactly the same as designProperties
                this.designPropertiesRenderable = this.designProperties;

                // Load fonts
                let webFontConfig: any = {
                    classes: false,
                    active: () => { 
                        this.unsetLoading('webfont');
                    },
                };

                if(this.designFonts.google) {
                    webFontConfig.google = {
                        families: this.designFonts.google
                    }
                }

                WebFont.load(webFontConfig);

                // Make designPropertioes an array, so it can be looped for design controllers on sidebar
                this.designPropertiesArray = tool.objToArray(this.designProperties);

                // Make artboards
                this.artboard
                    .setWidth(this.designSize.w)
                    .setHeight(this.designSize.h)
                    .setStyle(this.designStyle)
                    .setTemplate(this.designTemplate)
                    .capsulize()
                    .drawAll(this.designProperties)

                this.scaleArtboard();
            });
    }

    // Add key to loadingthings, a list that shows something (a key) is still loading;
    setLoading(key: string):void {
        this.loadingThings[key] = true;
        this.somethingIsLoading = true;
    }

    unsetLoading(key: string):void {
        delete this.loadingThings[key];

        // If there's no more thing in this.loadingThings, make it false
        this.somethingIsLoading = !!Object.keys(this.loadingThings).length;
    }

    // For textarea and range
    onInputChange(arg: any) {
        // Prevent exiting this page, turn on guard
        this.hasChanges = true;

        // Get designPropertyBinder from the text input and its value for designProperties
        let key = arg.target.getAttribute('designPropertyBinder');
    
        // Put the value to designProperties
        this.designProperties[key].value = arg.target.value;

        // If it's from textarea input
        if(arg.target.tagName == "TEXTAREA") {
            // resize text area based on its height 
            arg.target.style.height = "auto";
            arg.target.style.height = arg.target.scrollHeight + 20;
    
            // Change new line in input to <br> in output
            this.designPropertiesRenderable[key].value = this.designProperties[key].value.replace(/\r\n|\r|\n/g, "<br>");
        } 
        
        // If it's from range input
        else {
            this.designPropertiesRenderable[key].value = this.designProperties[key].value.toString();
        }

        this.artboard.drawAll(this.designPropertiesRenderable);
    }

    // For file input
    onFileChange(arg: any) {
        // Prevent exiting this page, turn on guard
        this.hasChanges = true;

        // Get designPropertyBinder from the file input and its value for designProperties
        let key = arg.target.getAttribute('designPropertyBinder');

        // If file is successfuly loaded
        if (arg.target.files && arg.target.files[0]) {
            let reader = new FileReader();

            reader.readAsDataURL(arg.target.files[0]);

            // If reading data successfuly loads picture
            reader.onload = (e: any) => {
                this.designProperties[key].value = e.target.result;
                this.designPropertiesRenderable[key].value = e.target.result;

                this.artboard.drawAll(this.designPropertiesRenderable);
            }
        } else {
            console.log('Failed');
        }
    }

    render() {
        let aElement = document.createElement('a');
        let today = new Date();
        let dataURL: string;

        let renderer = new RendererClass();

        renderer
            .setWidth(this.artboard.getWidth())
            .setHeight(this.artboard.getHeight())
            .setRawMaterial(this.artboard.getOutput())
            .render()
            .then((canvas: any) => {
                dataURL = canvas.toDataURL();
                aElement.href = dataURL;
                aElement.setAttribute('download', `postyposter.com_${today.getFullYear()}-${today.getMonth()}-${today.getDate()}.png`);
{'fraction_non_alphanumeric': 0.10585686538174212, 'fraction_numerical': 0.001344688480502017, 'mean_word_length': 2.0411176737846435, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '950647', 'n_tokens_mistral': 3550, 'n_tokens_neox': 3373, 'n_words': 830}