whitebophir/client-data/tools/ellipse/ellipse.js

/**
 *                        WHITEBOPHIR
 *********************************************************
 * @licstart  The following is the entire license notice for the
 *  JavaScript code in this page.
 *
 * Copyright (C) 2020  Ophir LOJKINE
 *
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend
 */

(function () { //Code isolation
    var curUpdate = { //The data of the message that will be sent for every new point
        'type': 'update',
        'id': "",
        'x': 0,
        'y': 0,
        'x2': 0,
        'y2': 0
    },
        lastPos = { x: 0, y: 0 },
        lastTime = performance.now(); //The time at which the last point was drawn

    function start(x, y, evt) {

        //Prevent the press from being interpreted by the browser
        evt.preventDefault();

        curUpdate.id = Tools.generateUID("e"); //"e" for ellipse

        Tools.drawAndSend({
            'type': 'ellipse',
            'id': curUpdate.id,
            'color': Tools.getColor(),
            'size': Tools.getSize(),
            'opacity': Tools.getOpacity(),
            'x': x,
            'y': y,
            'x2': x,
            'y2': y
        });

        curUpdate.id = curUpdate.id;
        curUpdate.x = x;
        curUpdate.y = y;
    }

    function move(x, y, evt) {
        if (!curUpdate.id) return; // Not currently drawing
        if (evt) {
            circleTool.secondary.active = circleTool.secondary.active || evt.shiftKey;
            evt.preventDefault(); 
        }
        lastPos.x = x;
        lastPos.y = y;
        doUpdate();
    }

    function doUpdate(force) {
        if (!curUpdate.id) return; // Not currently drawing
        if (drawingCircle()) {
            var x0 = curUpdate['x'], y0 = curUpdate['y'];
            var deltaX = lastPos.x - x0, deltaY = lastPos.y - y0;
            var diameter = Math.max(Math.abs(deltaX), Math.abs(deltaY));
            curUpdate['x2'] = x0 + (deltaX > 0 ? diameter : -diameter);
            curUpdate['y2'] = y0 + (deltaY > 0 ? diameter : -diameter);
        } else {
            curUpdate['x2'] = lastPos.x;
            curUpdate['y2'] = lastPos.y;
        }

        if (performance.now() - lastTime > 70 || force) {
            Tools.drawAndSend(curUpdate);
            lastTime = performance.now();
        } else {
            draw(curUpdate);
        }
    }

    function stop(x, y) {
        lastPos.x = x;
        lastPos.y = y;
        doUpdate(true);
        curUpdate.id = "";
    }

    function draw(data) {
        Tools.drawingEvent = true;
        switch (data.type) {
            case "ellipse":
                createShape(data);
                break;
            case "update":
                var shape = svg.getElementById(data['id']);
                if (!shape) {
                    console.error("Ellipse: Hmmm... I received an update for a shape that has not been created (%s).", data['id']);
                    createShape({ //create a new shape in order not to loose the points
                        "id": data['id'],
                        "x": data['x2'],
                        "y": data['y2']
                    });
                }
                updateShape(shape, data);
                break;
            default:
                console.error("Ellipse: Draw instruction with unknown type. ", data);
                break;
        }
    }

    var svg = Tools.svg;
    function createShape(data) {
        //Creates a new shape on the canvas, or update a shape that already exists with new information
        var shape = svg.getElementById(data.id) || Tools.createSVGElement("ellipse");
        updateShape(shape, data);
        shape.id = data.id;
        //If some data is not provided, choose default value. The shape may be updated later
        shape.setAttribute("stroke", data.color || "black");
        shape.setAttribute("stroke-width", data.size || 10);
        shape.setAttribute("opacity", Math.max(0.1, Math.min(1, data.opacity)) || 1);
        Tools.drawingArea.appendChild(shape);
        return shape;
    }

    function updateShape(shape, data) {
        shape.cx.baseVal.value = Math.round((data['x2'] + data['x']) / 2);
        shape.cy.baseVal.value = Math.round((data['y2'] + data['y']) / 2);
        shape.rx.baseVal.value = Math.abs(data['x2'] - data['x']) / 2;
        shape.ry.baseVal.value = Math.abs(data['y2'] - data['y']) / 2;
    }

    function drawingCircle() {
        return circleTool.secondary.active;
    }

    var circleTool = { //The new tool
        "name": "Ellipse",
        "icon": "tools/ellipse/icon-ellipse.svg",
        "secondary": {
            "name": "Circle",
            "icon": "tools/ellipse/icon-circle.svg",
            "active": false,
            "switch": doUpdate,
        },
        "shortcut": "c",
        "listeners": {
            "press": start,
            "move": move,
            "release": stop,
        },
        "draw": draw,
        "mouseCursor": "crosshair",
        "stylesheet": "tools/ellipse/ellipse.css"
    };
    Tools.add(circleTool);

})(); //End of code isolation