lovasoa / whitebophir

Online collaborative Whiteboard that is simple, free, easy to use and to deploy
https://wbo.ophir.dev
GNU Affero General Public License v3.0
2.01k stars 395 forks source link

Button for clearing a whiteboard #151

Open mwllgr opened 3 years ago

mwllgr commented 3 years ago

Similar to #120 - why isn't there a button to clear the whole board? It's easier than deleting the file or sharing a new link.

topninja commented 3 years ago

hello @mwllgr I tried to make myself.

/client-data/board.html insert this code under any icon what you want. if you want to lay this icon at top of menu, then add under <script src="../tools/pencil/wbo_pencil_point.js"></script> <script src="../tools/new/new.js"></script>

create "new" folder inside /tools inside this directory, make new file as new.js, new.svg(add any icon what you want) this is new.js file content.


(function grid() { //Code isolation

    function newPanel(evt) {
        Tools.drawingArea.innerHTML = ''
    }

    Tools.add({ //The new tool
        "name": "New",
        "shortcut": "n",
        "listeners": {},
        "icon": "tools/new/new.svg",
        "oneTouch": true,
        "onstart": newPanel,
        "mouseCursor": "crosshair",
    });

})(); //End of code isolation

Thanks

mwllgr commented 3 years ago

Thanks @topninja! Any info on how I can integrate this with the Docker container?

lovasoa commented 3 years ago

(function grid() { //Code isolation

    function newPanel(evt) {
        Tools.drawingArea.innerHTML = ''
    }

    Tools.add({ //The new tool
        "name": "New",
        "shortcut": "n",
        "listeners": {},
        "icon": "tools/new/new.svg",
        "oneTouch": true,
        "onstart": newPanel,
        "mouseCursor": "crosshair",
    });

})(); //End of code isolation

This does not clear the board. This just clears the drawing area locally on your own screen, without sending anything to the server or to other connected users. If you simply refresh the page, you will the the board reappear.

topninja commented 3 years ago

Thanks @topninja! Any info on how I can integrate this with the Docker container? revise like below and run inside docker as before

This does not clear the board. This just clears the drawing area locally on your own screen, without sending anything to the server or to other connected users. If you simply refresh the page, you will the the board reappear.

sorry for check in deep. I revised again. I checked this is working as well.

revise above new.js like this


(function grid() {

    function newPanel() {
        Tools.socket.emit('broadcast', {
            board: Tools.boardName,
            data : {
                tool : "New",
                type : "deleteall"
            }
        });
        Tools.drawingArea.innerHTML = '';
    }

    function eraseAll(data) {
        switch (data.type) {
            case "deleteall":
                Tools.drawingArea.innerHTML = '';
                break;
        }
    }

    Tools.add({
        "name": "New",
        "shortcut": "n",
        "listeners": {},
        "icon": "tools/new/new.svg",
        "oneTouch": true,
        "onstart": newPanel,
        "draw": eraseAll,
        "mouseCursor": "crosshair",
    });

})(); 

server/boardData.js

input this function

BoardData.prototype.deleteall = function (id) {
    //KISS
    this.board = [];
    this.delaySave();
};

server/socket.js add this case in saveHistory function

case "deleteall":
            board.deleteall();
            break;
lovasoa commented 3 years ago

This is already better, but isn't this.board supposed to be an object ? Anyway, can you please submit this as a pull request ? This will be easier to review