releasebird-javascript-sdk 1.0.2

package/src/SVGEditor.js

@@ -0,0 +1,518 @@
+import RbirdScreenshotManager from "./RbirdScreenshotManager";
+
+const svgns = "http://www.w3.org/2000/svg";
+
+class Menu {
+    shapes;
+    colors;
+    fills;
+    sizes;
+    resets;
+
+    reset;
+
+    settings;
+
+    constructor(settings, reset) {
+        this.reset = reset;
+        this.settings = settings;
+    }
+
+    setShapes(shapes) {
+
+        const temp = [];
+
+        const pathButton = document.createElement("button");
+        pathButton.addEventListener("click", (event) => this.onClick("shape", "path"));
+        pathButton.style.background = "none";
+        pathButton.style.boxShadow = "none";
+        pathButton.style.border = "none";
+        pathButton.style.cursor = "pointer";
+        pathButton.innerHTML = "<svg fill=\"none\" height=\"20pt\" viewBox=\"0 0 120 120\" width=\"20px\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "    <path clip-rule=\"evenodd\"\n" +
+            "          d=\"m76.25 82.5c-.6904 0-1.25.5596-1.25 1.25s.5596 1.25 1.25 1.25h21.25c6.904 0 12.5 5.5964 12.5 12.5 0 6.904-5.596 12.5-12.5 12.5h-71.5c-2.2091 0-4-1.791-4-4s1.7909-4 4-4h71.5c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5h-21.25c-5.1086 0-9.25-4.1414-9.25-9.25s4.1414-9.25 9.25-9.25h24.75c2.209 0 4 1.7909 4 4s-1.791 4-4 4z\"\n" +
+            "          fill=\"#ffd482\" fill-rule=\"evenodd\"/>\n" +
+            "    <path d=\"m37.626 72.6258c-1.0469-1.0469-2.4429-1.6793-3.9205-1.5873-3.232.2012-9.1224 1.1271-12.6358 5.0559-7.0697 7.9054-5.1282 17.0827-8.9811 19.7647-5.51917 3.8419-.6888 14.1409 13.9114 14.1409 11.321 0 20.5606-5.883 22.7243-23.246.2166-1.7381-.4371-3.4669-1.6756-4.7055z\"\n" +
+            "          fill=\"#ffba33\"/>\n" +
+            "    <path d=\"m34.0099 80.1329c-2.3432-2.3431-2.3432-6.1421 0-8.4853l58.1289-58.1289c3.9053-3.90529 10.2372-3.90528 14.1422 0l.7.7005c3.906 3.9052 3.906 10.2368 0 14.1421l-58.1285 58.1289c-2.3431 2.3432-6.1421 2.3432-8.4853 0z\"\n" +
+            "          fill=\"#944700\"/>\n" +
+            "</svg>";
+        pathButton.value = "path";
+        temp.push(pathButton);
+
+        const rectButton = document.createElement("button");
+        rectButton.addEventListener("click", (event) => this.onClick("shape", "rect"));
+        rectButton.style.background = "none";
+        rectButton.style.cursor = "pointer";
+        rectButton.style.boxShadow = "none";
+        rectButton.style.border = "none";
+        rectButton.innerHTML = "<svg id=\"Layer_1\" enable-background=\"new 0 0 48 48\" height=\"20pt\" viewBox=\"0 0 48 48\" width=\"20pt\"\n" +
+            "     xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "    <path d=\"m44 12.5h-40c-.83 0-1.5.67-1.5 1.5v20c0 .83.67 1.5 1.5 1.5h40c.83 0 1.5-.67 1.5-1.5v-20c0-.83-.67-1.5-1.5-1.5zm-1.5 20h-37v-17h37z\"/>\n" +
+            "</svg>";
+        rectButton.value = "rect";
+        temp.push(rectButton);
+
+        const circleButton = document.createElement("button");
+        circleButton.addEventListener("click", (event) => this.onClick("shape", "circle"));
+        circleButton.style.background = "none";
+        circleButton.style.cursor = "pointer";
+        circleButton.style.boxShadow = "none";
+        circleButton.style.border = "none";
+        circleButton.innerHTML = "<svg height=\"20pt\" viewBox=\"0 0 512 512\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
+            "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
+            "</svg>";
+        circleButton.value = "circle";
+        temp.push(circleButton);
+
+        const ellipseButton = document.createElement("button");
+        ellipseButton.style.background = "none";
+        ellipseButton.style.boxShadow = "none";
+        ellipseButton.style.cursor = "pointer";
+        ellipseButton.style.border = "none";
+        ellipseButton.addEventListener("click", (event) => this.onClick("shape", "ellipse"));
+        ellipseButton.innerHTML = "<svg clip-rule=\"evenodd\" fill-rule=\"evenodd\" height=\"20pt\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"\n" +
+            "     viewBox=\"0 0 24 24\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "    <g id=\"Icon\">\n" +
+            "        <path d=\"m12 5.25c-3.509 0-6.615 1.048-8.544 2.627-1.407 1.151-2.206 2.588-2.206 4.123s.799 2.972 2.206 4.123c1.929 1.579 5.035 2.627 8.544 2.627s6.615-1.048 8.544-2.627c1.407-1.151 2.206-2.588 2.206-4.123s-.799-2.972-2.206-4.123c-1.929-1.579-5.035-2.627-8.544-2.627zm0 1.5c3.114 0 5.883.887 7.595 2.288 1.02.835 1.655 1.848 1.655 2.962s-.635 2.127-1.655 2.962c-1.712 1.401-4.481 2.288-7.595 2.288s-5.883-.887-7.595-2.288c-1.02-.835-1.655-1.848-1.655-2.962s.635-2.127 1.655-2.962c1.712-1.401 4.481-2.288 7.595-2.288z\"/>\n" +
+            "    </g>\n" +
+            "</svg>";
+        ellipseButton.value = "ellipse";
+        temp.push(ellipseButton);
+
+
+        this.shapes = temp;
+
+    }
+
+    setResets() {
+        const button = document.createElement("button");
+        button.addEventListener("click", (event) => this.reset());
+        button.style.setProperty("border-color", 'black');
+        button.style.border = "none";
+        button.style.background = "none";
+        button.style.cursor = "pointer";
+        button.style.marginTop = '3px';
+        button.innerHTML = "<svg id=\"Capa_1\" enable-background=\"new 0 0 511.697 511.697\" height=\"15pt\" viewBox=\"0 0 511.697 511.697\" width=\"15pt\"\n" +
+            "     xmlns=\"http://www.w3.org/2000/svg\">\n" +
+            "    <g>\n" +
+            "        <path clip-rule=\"evenodd\"\n" +
+            "              d=\"m450.09 150.319c82.253 82.41 82.126 215.896-.284 298.149-39.451 39.376-92.891 61.526-148.63 61.606h-301.176v-60.235h301.176c83.167-.214 150.414-67.809 150.199-150.976-.214-82.864-67.335-149.985-150.199-150.199h-98.676v86.806l-202.5-116.922 202.5-116.926v86.807h98.678c55.893.006 109.48 22.278 148.912 61.89z\"\n" +
+            "              fill=\"#0291f7\" fill-rule=\"evenodd\"/>\n" +
+            "    </g>\n" +
+            "</svg>";
+        this.resets = [button];
+    }
+
+    setColors(colors) {
+        const temp = [];
+        const color = document.createElement("div");
+        color.id = 'colorCircle';
+        color.addEventListener("click", (event) => this.openColorPicker());
+        color.style.cursor = 'pointer';
+        color.style.marginTop = '3px';
+        color.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"18pt\" width=\"18pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:" + this.settings['color'] + "\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n"
+        temp.push(color);
+        this.colors = temp;
+    }
+
+    closeColorPicker = () => {
+        const picker = document.getElementById("rbirdColorPicker");
+        if (picker) {
+            document.body.removeChild(picker);
+        }
+    }
+
+    openColorPicker = () => {
+        const colorPicker = document.createElement("div");
+        colorPicker.id = "rbirdColorPicker";
+        colorPicker.style.width = "200px";
+        colorPicker.style.height = "60px";
+        colorPicker.style.cursor = "pointer";
+        colorPicker.style.backgroundColor = "white";
+        colorPicker.style.position = "absolute";
+        colorPicker.style.top = "80px";
+        colorPicker.style.zIndex = "900000000000";
+        colorPicker.style.left = "50%";
+        colorPicker.style.border = "1px solid lightgrey";
+        colorPicker.style.padding = "10px";
+        colorPicker.style.paddingTop = "15px";
+        document.body.appendChild(colorPicker);
+
+        const blackIcon = document.createElement("div");
+        blackIcon.style.float = "left";
+        blackIcon.addEventListener("click", (event) => {
+            this.onClick("color", "black");
+            if (this.colors[0]) {
+                this.colors[0].innerHTML =  "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                    "     y=\"0px\"\n" +
+                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                    "<path style=\"fill:black;\"\n" +
+                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+                    "/>\n" +
+                    "</svg>\n";
+            }
+        });
+        blackIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:#000000;\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n";
+        colorPicker.appendChild(blackIcon);
+
+        const redIcon = document.createElement("div");
+        redIcon.style.float = "left";
+        redIcon.style.marginLeft = "10px";
+        redIcon.addEventListener("click", (event) => {
+            this.onClick("color", "red");
+            if (this.colors[0]) {
+                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                    "     y=\"0px\"\n" +
+                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                    "<path style=\"fill:red;\"\n" +
+                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+                    "/>\n" +
+                    "</svg>\n";
+            }
+        });
+        redIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:red;\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n";
+        colorPicker.appendChild(redIcon);
+
+        const blueIcon = document.createElement("div");
+        blueIcon.style.float = "left";
+        blueIcon.style.marginLeft = "10px";
+        blueIcon.addEventListener("click", (event) => {
+            this.onClick("color", "blue");
+            if (this.colors[0]) {
+                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                    "     y=\"0px\"\n" +
+                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                    "<path style=\"fill:blue;\"\n" +
+                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+                    "/>\n" +
+                    "</svg>\n";
+            }
+
+        });
+        blueIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:blue;\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n";
+        colorPicker.appendChild(blueIcon);
+
+        const yellowIcon = document.createElement("div");
+        yellowIcon.style.float = "left";
+        yellowIcon.style.marginLeft = "10px";
+        yellowIcon.addEventListener("click", (event) => {
+            this.onClick("color", "yellow");
+            if (this.colors[0]) {
+                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                    "     y=\"0px\"\n" +
+                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                    "<path style=\"fill:yellow;\"\n" +
+                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+                    "/>\n" +
+                    "</svg>\n";
+            }
+        });
+        yellowIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:yellow;\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n";
+        colorPicker.appendChild(yellowIcon);
+
+        const greenIcon = document.createElement("div");
+        greenIcon.style.float = "left";
+        greenIcon.style.marginLeft = "10px";
+        greenIcon.addEventListener("click", (event) => {
+            this.onClick("color", "green");
+            if (this.colors[0]) {
+                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                    "     y=\"0px\"\n" +
+                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                    "<path style=\"fill:green;\"\n" +
+                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+                    "/>\n" +
+                    "</svg>\n";
+            }
+        });
+        greenIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+            "     y=\"0px\"\n" +
+            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+            "<path style=\"fill:green;\"\n" +
+            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
+            "/>\n" +
+            "</svg>\n";
+        colorPicker.appendChild(greenIcon);
+
+        colorPicker.addEventListener("click", (event) => this.closeColorPicker());
+    }
+
+    setFills(fills) {
+        this.fills = [];
+    }
+
+    setSizes(sizes) {
+        this.sizes = [];
+    }
+
+    getElement() {
+        this.updateButtons();
+
+        const menu = document.createElement("div");
+        menu.classList.add("menu")
+
+        Object.keys(this.settings).forEach((setting) => {
+            const section = document.createElement("div");
+            section.style.float = "left";
+            this[setting + "s"].forEach((button) => section.appendChild(button));
+            menu.appendChild(section);
+        });
+
+        const nextButton = document.createElement('div')
+        nextButton.style.backgroundColor = 'green';
+        nextButton.style.color = 'white';
+        nextButton.style.fontWeight = '500';
+        nextButton.innerHTML = "Take Screenshot";
+        nextButton.style.float = "left";
+        nextButton.style.padding = "13px";
+        nextButton.style.paddingTop = "8px";
+        nextButton.style.paddingBottom = "8px";
+        nextButton.style.fontFamily = "Arial";
+        nextButton.style.fontSize = "16px";
+        nextButton.style.borderRadius = "8px";
+        nextButton.style.marginLeft = "10px";
+        nextButton.style.cursor = "pointer";
+
+        nextButton.addEventListener("click", (event) => {
+            RbirdScreenshotManager.getInstance().screenshot();
+        });
+
+        menu.appendChild(nextButton);
+
+        return menu;
+    }
+
+    onClick(setting, value) {
+        this.settings[setting] = value;
+        this.updateButtons();
+    }
+
+    updateButtons() {
+        Object.keys(this.settings).forEach((setting) => {
+            this[setting + "s"].forEach((button) => {
+                if (button.value == this.settings[setting])
+                    button.classList.add("selected");
+                else
+                    button.classList.remove("selected");
+            });
+        });
+    }
+}
+
+export default class SVGEditor {
+    svg;
+    objects= [];
+
+    codeSection;
+
+    originalMousePosition= null;
+    lastMousePosition = null;
+    currentMousePosition = null;
+    createdObject=  null;
+    focusedObject = null;
+    menuSettings;
+
+    constructor(editorConfig) {
+        this.svg = SVGEditor.createSVG(editorConfig.dimension);
+        this.attachEvents(this.svg);
+
+        const menu = this.createMenu();
+        this.codeSection = document.createElement("pre");
+
+        const editor = document.createElement("div");
+        editor.classList.add("svg-editor");
+        editor.style.height = '100%';
+        editor.appendChild(menu);
+        editor.appendChild(this.svg);
+        editorConfig?.element?.appendChild(editor);
+        // editor.appendChild(this.codeSection);
+        if (editorConfig?.element?.getElementsByClassName('svg-editor').length === 0) {
+            editorConfig?.element?.appendChild(editor);
+        }
+
+    }
+
+    reset() {
+        const element = this.objects.pop();
+        if (element) {
+            this.svg.removeChild(element);
+        }
+    }
+
+    static createSVG(dimension) {
+        const svg = document.createElementNS(svgns, "svg");
+        svg.setAttribute("width", dimension.width);
+        svg.setAttribute("height", dimension.height);
+
+        return svg;
+    }
+
+    attachEvents(svg) {
+        svg.addEventListener("mousedown", this.onMouseDown.bind(this));
+        svg.addEventListener("mousemove", this.onMouseMove.bind(this));
+        svg.addEventListener("mouseup", this.onMouseUp.bind(this));
+    }
+
+    createMenu() {
+        this.menuSettings = {
+            shape: "path",
+            color: "black",
+            fill: "none",
+            size: 5,
+            reset: "reset"
+        };
+
+        const menu = new Menu(this.menuSettings, () => this.reset());
+        menu.setColors(["black", "red", "blue", "yellow"]);
+        menu.setFills(["none", "black", "red", "blue", "yellow"]);
+        menu.setSizes([1, 2, 3, 4, 5]);
+        menu.setShapes(["rect", "line", "circle", "ellipse", "path"]);
+        menu.setResets();
+        const element = menu.getElement();
+        element.style.position = 'absolute';
+        element.style.top = '10px';
+        element.style.left = '50%';
+        element.style.backgroundColor = 'white';
+        element.style.border = '1px solid lightgrey';
+        element.style.padding = '10px';
+        element.style.borderRadius = '8px';
+        element.style.transform = 'translateX(-50%)';
+        return element;
+    }
+
+    updateCode() {
+        this.codeSection.innerText = this.svg.innerHTML.replace(new RegExp("><", "g"), ">\n<");
+    }
+
+    onMouseDown(event) {
+        this.createdObject = document.createElementNS(svgns, this.menuSettings.shape);
+        this.createdObject.setAttributeNS(null, "fill", this.menuSettings.fill);
+        this.createdObject.setAttributeNS(null, "stroke", this.menuSettings.color);
+        this.createdObject.setAttributeNS(null, "stroke-width", String(this.menuSettings.size));
+        this.svg.appendChild(this.createdObject);
+
+        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = {
+            x: event.offsetX,
+            y: event.offsetY
+        };
+
+        switch (this.menuSettings.shape) {
+            case "path":
+                const start = "M " + this.currentMousePosition.x + " " + this.currentMousePosition.y;
+                this.createdObject.setAttributeNS(null, "d", start);
+        }
+    }
+
+    onMouseMove(event) {
+        // Ignore if not in mouse event
+        if (this.originalMousePosition === null)
+            return;
+
+        this.lastMousePosition = this.currentMousePosition;
+        this.currentMousePosition = {x: event.offsetX, y: event.offsetY};
+
+        this.updateCurrentObject();
+    }
+
+    onMouseUp() {
+        // If shape is nothing
+        if (this.originalMousePosition?.x != this.currentMousePosition?.x ||
+            this.originalMousePosition?.y != this.currentMousePosition?.y) {
+            this.objects.push(this.createdObject);
+            this.focus(this.createdObject);
+        } else if (this.menuSettings.shape !== "path") {
+            this.svg.removeChild(this.createdObject);
+        }
+
+        // TODO: If path, compress
+
+        // @ts-ignore
+        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = null;
+        // @ts-ignore
+        this.createdObject = null;
+    }
+
+    focus(object) {
+
+    }
+
+    updateCurrentObject() {
+        const topLeft = {
+            x: Math.min(this.currentMousePosition?.x, this.originalMousePosition?.x),
+            y: Math.min(this.currentMousePosition?.y, this.originalMousePosition?.y)
+        };
+
+        const bottomRight = {
+            x: Math.max(this.currentMousePosition?.x, this.originalMousePosition?.x),
+            y: Math.max(this.currentMousePosition?.y, this.originalMousePosition?.y)
+        };
+
+        switch (this.menuSettings.shape) {
+            case "line":
+                this.createdObject.setAttributeNS(null, "x1", String(this.originalMousePosition.x));
+                this.createdObject.setAttributeNS(null, "y1", String(this.originalMousePosition.y));
+                this.createdObject.setAttributeNS(null, "x2", String(this.currentMousePosition.x));
+                this.createdObject.setAttributeNS(null, "y2", String(this.currentMousePosition.y));
+                break;
+            case "rect":
+                this.createdObject.setAttributeNS(null, "x", String(topLeft.x));
+                this.createdObject.setAttributeNS(null, "y", String(topLeft.y));
+                this.createdObject.setAttributeNS(null, "width", String(bottomRight.x - topLeft.x));
+                this.createdObject.setAttributeNS(null, "height", String(bottomRight.y - topLeft.y));
+                break;
+            case "circle":
+                this.createdObject.setAttributeNS(null, "cx", String((topLeft.x + bottomRight.x) / 2));
+                this.createdObject.setAttributeNS(null, "cy", String((topLeft.y + bottomRight.y) / 2));
+                const radius = Math.max(bottomRight.x - topLeft.x, bottomRight.y - topLeft.y) / 2;
+                this.createdObject.setAttributeNS(null, "r", String(radius));
+                break;
+            case "ellipse":
+                this.createdObject.setAttributeNS(null, "cx", String((topLeft.x + bottomRight.x) / 2));
+                this.createdObject.setAttributeNS(null, "cy", String((topLeft.y + bottomRight.y) / 2));
+                this.createdObject.setAttributeNS(null, "rx", String((bottomRight.x - topLeft.x) / 2));
+                this.createdObject.setAttributeNS(null, "ry", String((bottomRight.y - topLeft.y) / 2));
+                break;
+            case "path":
+                let d = this.createdObject.getAttribute("d") + " l ";
+                d += this.currentMousePosition.x - this.lastMousePosition.x;
+                d += " ";
+                d += this.currentMousePosition.y - this.lastMousePosition.y;
+                this.createdObject.setAttributeNS(null, "d", d);
+
+        }
+
+        this.updateCode();
+    }
+}