Modules/Tools changing.

[dr34d13h]

how can i swap some modules with tools? what files should i change? i tried to do it myself, i wanted to move 'Undo' from module to tool. I had a 'class undo not found error'. can i copy undo.js and use it as a tool and not a module? or i need to write a separate undo.js for the tools?

[Giwayume]

Module and tool code is not interchangeable, but a tool can execute a function just like a module can.

Follow the extending guide to create an empty tool. media.js is probably a good example to base this off of, since it executes a command the second it is selected.

Calling the undo function itself is pretty simple.

import app from  '../app.js';

app.State.undo();

[dr34d13h]

I tried to call it like in the example.

mybundle.js :

import app from '../src/js/app.js';

function undoClick(){
    app.State.undo();
}

and have error

do i need any additional parameters?

[Giwayume]

That error is saying the "State" variable is null, which means you're calling it too soon, before MiniPaint has loaded.

See it gets set here on window load.

[dr34d13h]

strangely, I just moved the code from mybundle.js to the end of bundle.js. I added undo button to tools, made onclick function on click. After that I draw something and I try to click on the undo button I added and I get the same error.

[Giwayume]

Don't modify bundle.js directly, that file is created as part of the build process.

https://github.com/viliusle/miniPaint/wiki/Build-instructions

[Giwayume]

Have you worked with a webpack app before?

[dr34d13h]

No

[Giwayume]

You need to modify files in the src directory only, then follow the link to build guide I sent above which will take all the files in src and build them into dist/bundle.js.

[dr34d13h]

i have registered my undo in src/js/config.js, on variable config.TOOLS. I created a new file src/js/tools/undo.js

undo.js

import config from './../config.js';
import Base_tools_class from './../core/base-tools.js';
import File_open_class from './../modules/file/open.js';
import Tools_settings_class from './../modules/tools/settings.js';
import Dialog_class from './../libs/popup.js';
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';

class Undo_class extends Base_tools_class{

        load(){
                // nothing
        }

        render(){
                // nothing
        }
}

export default Undo_class;

but the instrument does not appear.

[Giwayume]

You need to assign the name in the tool constructor, that's how it matches the tool class to the config.

import app from './../app.js';
import Base_tools_class from './../core/base-tools.js';

class Undo_class extends Base_tools_class{
    constructor(ctx) {
        super();
        this.name = 'undo';
    }
    load(){
            // nothing
    }
    render(){
            // nothing
    }
}

export default Undo_class;

[dr34d13h]

yes. it works. thanks