path.on('drag', ...) not called when using view.on('drag', ...)

[bmacnaughton]

Here's a sketch showing two different ways to implement the view.on handler - one uses a tool (implicitly via global declaration); the other uses view.on.

It looks like the problem is 1) that the following code in View.js doesn't invoke tool._handleEvent because there is no tool, combined with 2) view._handleEvent doesn't invoke the same functionality as tool._fireEvent where the logic to do path.remove() on mousedrag events is invoked.

function handleMouseMove(view, point, event) {
        view._handleEvent('mousemove', point, event);
        var tool = view._scope.tool;
        if (tool) {
            // If there's no onMouseDrag, fire onMouseMove while dragging.
            tool._handleEvent(dragging && tool.responds('mousedrag')
                    ? 'mousedrag' : 'mousemove', point, event);
        }
        view.update();
        return tool;
    }

I could take a stab at fixing it but the simple way is to duplicate code. It seems like a more comprehensive rationalization of the implicit global tool handlers might be a better approach, but it's not clear to me the right way to approach that.

[bmacnaughton]

Thinking about this maybe there should be a default tool, not a tool from a user-perspective, that calls all the handlers. It would avoid all checks like if (tool) and would keep the invocation of all handlers consistent.

[lehni]

If I understand you right, the problem is that removeOn() isn't working as it should when not using a tool handler, correct?

[bmacnaughton]

That's a correct summary, because tool._handleEvent and view._handleEvent don't handle events in the same manner. tool._handleEvent invokes tool._fireEvent while view._handleEvent doesn't. And that's where the various remove-on events are handled.

[lehni]

@bmacnaughton I have just committed a longer effort of refactoring the whole mouse-handling code. This needs some testing, but it should now handle these cases much better! Please let me know if this works for you.

[bmacnaughton]

@lehni - to test I should just pull the develop branch? I seem to remember something that can be used to load the separate files? Or how do I combine them correctly?

[lehni]

I've built a package for you here since the nightly builds are frozen on the latest release at the moment:

https://www.dropbox.com/s/nvklyibrpemsmqv/paperjs.zip?dl=0

[lehni]

If you pull the develop branch and are on Linux or OSX, it is already in the state that allows you to load from the separate files directly, no additional actions required (see the symbolic link from paper-full.js → src/load.js)

[bmacnaughton]

I'm on Linux. After a quick look through it appears taht if I pull develop and reference src/load.js then everything will work, right?

[lehni]

Yes that should work too. But you can also just reference dist/paperjs-full.js, and then use load.sh to create the sym-links for direct loading, or build.sh to create a proper build. Switching is really easy then.

[bmacnaughton]

Yes, this works now.

Thanks for the .zip file; I had trouble getting the develop branch running. What version of nodejs are you using? I'm on 4.2.3 by default and there were issues with bower install and npm install.

[lehni]

Oh! Could you show me the issues you had? Could be linked to compiling node-canvas? I'm on 4.2.4 right now, I don't think that should make the difference.

And could you test again with this: https://www.dropbox.com/s/nvklyibrpemsmqv/paperjs.zip?dl=0

I've improved many more things in the event handling code since. It's been quite the undertaking, but I think we're good now.

[bmacnaughton]

Yes, the version you just sent works as well - view.on("mousedrag", ...) handles the removeOn({drag: true, up: true}) logic. And it continues to work with tool.onMouseDrag.

The errors with npm install are related to building node-canvas it seems and specifically pangocairo. I have libcairo2 and libpangocairo-1.0-1:amd64 installed (as well as many other variations).

Errors:

canvas@1.3.7 install /home/bruce/Scripts/github/paper.js/node_modules/canvas node-gyp rebuild

Package pangocairo was not found in the pkg-config search path. Perhaps you should add the directory containing pangocairo.pc' to the PKG_CONFIG_PATH environment variable No package 'pangocairo' found gyp: Call to 'pkg-config pangocairo --libs' returned exit status 1. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error:gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/home/bruce/.nvm/versions/v4.2.3/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:355:16) gyp ERR! stack at emitTwo (events.js:87:13) gyp ERR! stack at ChildProcess.emit (events.js:172:7) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12) gyp ERR! System Linux 3.13.0-74-generic gyp ERR! command "/home/bruce/.nvm/versions/v4.2.3/bin/node" "/home/bruce/.nvm/versions/v4.2.3/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" gyp ERR! cwd /home/bruce/Scripts/github/paper.js/node_modules/canvas gyp ERR! node -v v4.2.3 gyp ERR! node-gyp -v v3.0.3 gyp ERR! not ok npm WARN optional dep failed, continuing canvas@1.3.7

bower completes now without error

The specific issues I have are:

1. when I reference paper.js/dist/paper-full.js from another directory the results of src.match() are null so the [1] reference fails. src at that point is paper/paper-full.js, my local reference that my local web server translates. I will play with this some more. I could mv the whole tree under my test directory but that seems a bit odd. I started out just doing ln -s ~/Scripts/github/paper.js/dist/paper-full.js in the local directory where I usually keep paper, but it failed in the same way.
2. when I execute build.sh it has problems finding acorn.min.js (at least that's my reading).

Maybe I need to run a gulp process before I try executing build.sh? The output follows:

#!/bin/bash

# Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
# http://paperjs.org/
#
# Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
# http://scratchdisk.com/ & http://jonathanpuckey.com/
#
# Distributed under the MIT license. See LICENSE file for details.
#
# All rights reserved.

# Usage:
# build.sh MODE
#
# MODE:
#   commented       Preprocessed, still formated and commented
#   stripped        Preprocessed, formated but without comments

if [ $# -eq 0 ]
then
    MODE="stripped"
else
    MODE=$1
fi

# Create the dist folder if it does not exist yet.
if [ ! -d ../dist/ ]
then
    mkdir ../dist/
fi

if [ -f ../dist/paper-full.js ]
then
    rm ../dist/paper-full.js
fi

if [ -f ../dist/paper-node.js ]
then
    rm ../dist/paper-node.js
fi

./preprocess.sh $MODE ../src/paper.js "-i '../src/constants.js'" ../dist/paper-full.js
./preprocess.sh $MODE ../src/paper.js "-o '{ \"paperScript\": false, \"palette\": false }' -i '../src/constants.js'" ../dist/paper-core.js
./preprocess.sh $MODE ../src/paper.js "-o '{ \"environment\": \"node\", \"legacy\": false }' -i '../src/constants.js'" ../dist/paper-node.js
bruce@uxmal:~/Scripts/github/paper.js/build$ ./build.sh commented
fs.js:549
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/home/bruce/Scripts/github/paper.js/bower_components/acorn/acorn.min.js'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:397:15)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:39:19)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)
fs.js:549
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/home/bruce/Scripts/github/paper.js/bower_components/acorn/acorn.min.js'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:397:15)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:39:19)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)
fs.js:549
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/home/bruce/Scripts/github/paper.js/bower_components/acorn/acorn.min.js'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:397:15)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:39:19)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)
    at /home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:54:13
    at Array.forEach (native)
    at Object.exports.include (/home/bruce/Scripts/github/paper.js/node_modules/prepro/lib/prepro.js:40:32)

[lehni]

Did you look at the README? It should explain the required steps. You probably need these dependencies:

sudo apt-get install libcairo2-dev libpango1.0-dev libssl-dev libjpeg62-dev libgif-dev

And for acorn.min.js:

cd build
./minify-components.sh

[bmacnaughton]

Nope, my bad. I thought I was set from back when I'd written the Ubuntu portion of the README back on issue #381. I'm not sure how this computer lost the dependencies, but it did. And I hadn't looked at the README in a long time. Either it's far more complete than it used to be or I didn't know enough to assimilate it when I looked at it long ago.

Thanks.

[lehni]

No worries! I forgot you started that section quite a while back :) I think I updated it when I installed paper.js on Ubuntu once, also quite a while a go. Let me know if it's not up-to-date anymore, yes?

[bmacnaughton]

It's working now when I run either way. I was putting a symbolic link in my application local directory but then the scripts didn't have the correct directory base for their references.

The setup that wasn't working used <script src="vendor/paper-full.js"></script> where the server mapped vendor/ to app/vendor/paper-full.js. I put the following symbolic link in the vendor directory but that meant the scripts didn't have the right working directory to execute in.

app/vendor/paper-full.js -> /home/bruce/Scripts/github/paper.js/dist/paper-full.js

The setup that works for me is to use <script src="paper/paper-full.js"></script> where the server maps paper/ to /home/bruce/Scripts/github/paper.js/dist/paper-full.js.

I think everything is up-to-date. Executing those steps got me working; I had just presumed I was set up from long ago and then compounded the error with trying to go one symbolic link too far. I hadn't thought through the fact that the scripts aren't working-directory independent.

The documentation is quite nice actually. Thanks for pointing me at it.

[lehni]

Yes the symbol link trick through prepro.js is really just a hack for me to rapidly develop and debug thing without having to built the library each time. It's so much nicer to be able to do the debugging in those separate files which have a much more manageable size than the full library once built. Depending on where you load it from, this may or may not work for you.

[bmacnaughton]

Agreed - working from the source files makes debugging and developing much better. I do the same thing for a much smaller system though I've used gulp-html-replace to munge the files that load the scripts. Your solution is cleaner; it's nice to learn.