ryutai/interf/js/obj/NoodleDM.js

A next generation window manager.

var NoodleDM = function(opts) {
    this.map = [
        [
            {
                ico: "./icon.png",
                name: "nodeos",
                type: "app",
                launch: "cmd"
            },
            {
                ico: "./icon.png",
                name: "nodeos",
                type: "app",
                launch: "cmd"
            },
            {
                ico: "./icon.png",
                name: "nodeos",
                type: "app",
                launch: "cmd"
            }
        ]
    ];

    this.angle = 40;
    this.alteration = -((this.map[0].length - 1) / 2) * this.angle;
    if(opts) {
        this.ctx = opts.ctx;
    }

    var mtH = (evt) => {
        evt.preventDefault();
    };

    var ttH = (evt) => {
        evt.preventDefault();
        this.prevTouch = evt.targetTouches[0];
        if(this.slide) {
            clearInterval(this.slide);
        }
    };

    var mdH = (evt) => {
        evt.preventDefault();
    };

    var tdH = (evt) => {
        evt.preventDefault();
        this.alteration += (evt.touches[0].clientX - this.prevTouch.clientX) / 4;
        this.alterationLock();
        this.prevTouch = evt.touches[0];
        this.repaint();
    };

    var mrH = (evt) => {
        evt.preventDefault();
        this.alteration += this.gap;
        this.alterationLock();
    };

    var trH = (evt) => {
        evt.preventDefault();
    };

    var rep = () => {
        this.repaint();
    };

    this.mesh = {
        dom: "_sys.noodledm",
        type: "CANVAS",
        style: "noodledm",
        init: (obj) => {
            this.canvas = obj;
            this.ctx = this.canvas.getContext("2d");
            this.ctx.fillStyle = "#000000";
            this.ctx.fillRect(0, 0, this.width, this.height);
            this.wallpaper = document.getElementById("back");
            this.wallpaper.onload = function () {
                rep();
            };

            this.wallpaper.src = './def.jpg';
            this.icon = document.getElementById("icon");
            this.icon.onload = function () {
                rep();
            };

            this.icon.src = './graph/logo.png';
            this.canvas.addEventListener("touchstart", ttH, false);
            this.canvas.addEventListener("mousedown", mtH, false);
            this.canvas.addEventListener("touchmove", tdH, false);
            this.canvas.addEventListener("mousemove", mdH, false);
            this.canvas.addEventListener("touchend", trH, false);
            this.canvas.addEventListener("mouseup", mrH, false);
            window.addEventListener("resize", resizeCanvas, false);
            var resizeCanvas = () => {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
                this.width = this.canvas.width;
                this.height = this.canvas.height;
                rep();
            };

            resizeCanvas();
        }
    };
};

NoodleDM.prototype.mapDir = function(map) {

};

NoodleDM.prototype.setDir = function(x, y) {

};

NoodleDM.prototype.alterationLock = function() {
    if(this.alteration > 0) {
        this.alteration = 0;
    } else if(this.alteration < -(this.map[0].length - 1) * this.angle) {
        this.alteration = -(this.map[0].length - 1) * this.angle;
    }
};

NoodleDM.prototype.repaint = function() {
    this.ctx.drawImage(this.wallpaper, 0, 0, this.width, this.height);
    this.ctx.save();
    if(this.width > this.height) {
        this.iconWidth = this.height / 10;
    } else {
        this.iconWidth = this.width / 6;
    }

    this.spacing = this.iconWidth;
    var mapLength = this.map.length;
    var mapLayerLength = 0;
    for(var y = 0; y < mapLength; y++) {
        this.rotate(this.ctx, this.width / 2, this.height, this.alteration);
        mapLayerLength = this.map[y].length;
        for(var x = 0; x < mapLayerLength; x++) {
            this.renderIcon(this.ctx, "#FFFFFF", this.icon, (this.width - this.iconWidth) / 2, this.height - (this.height / 4) - (this.iconWidth * y), this.iconWidth);
            this.rotate(this.ctx, this.width / 2, this.height, this.getAngle(this.angle, y));
        }

        this.ctx.resetTransform();
    }

};

NoodleDM.prototype.renderIcon = function(ctx, color, icon, x, y, w) {
    ctx.beginPath();
    ctx.moveTo(x + (w / 10), y + (w / 10));
    ctx.quadraticCurveTo(x + ((w / 10) * 5), y, x + ((w / 10) * 9), y + (w / 10));
    ctx.moveTo(x + (w / 10), y + (w / 10));
    ctx.quadraticCurveTo(x, y + ((w / 10) * 5), x + (w / 10), y + ((w / 10) * 9));
    ctx.moveTo(x + (w / 10), y + ((w / 10) * 9));
    ctx.quadraticCurveTo(x + ((w / 10) * 5), y + w, x + ((w / 10) * 9), y + ((w / 10) * 9));
    ctx.moveTo(x + ((w / 10) * 9), y + (w / 10));
    ctx.quadraticCurveTo(x + w, y + ((w / 10) * 5), x + ((w / 10) * 9), y + ((w / 10) * 9));
    ctx.lineWidth = 0;
    ctx.fillStyle = color;
    ctx.fill();
    ctx.fillRect(x + (w / 10), y + (w / 10), ( w / 10) * 8, (w / 10) * 8);
    ctx.drawImage(icon, x + (w / 10), y + (w / 10), (w / 10) * 8, (w / 10) * 8);
};

NoodleDM.prototype.rotate = function(ctx, x, y, degrees) {
    ctx.translate(x, y);
    ctx.rotate((Math.PI/180) * degrees);
    ctx.translate(-x, -y);
};

NoodleDM.prototype.getAngle = function(angle, incr) {
    if(incr === 0) {
        return angle;
    } else {
        return angle / (1.1 + (incr * 0.7));
    }
};