Couldn’t move object

[lunaeidolon]

followed the console error:

interact.js?fb3a:8321 Uncaught TypeError: Cannot read property '0' of undefined
    at Object.__set_38 [as set] (interact.js?fb3a:8321)
    at setAll (interact.js?fb3a:7121)
    at __beforeMove_30 (interact.js?fb3a:7147)
    at Signals.fire (interact.js?fb3a:2762)
    at Interaction._doPhase (interact.js?fb3a:1144)
    at Interaction.move (interact.js?fb3a:925)
    at Interaction.pointerMove (interact.js?fb3a:887)
    at HTMLDocument.eval (interact.js?fb3a:566)

[lunaeidolon]

@DrSensor You forgot import svg.js in some files

[DrSensor]

I think you need to explicitly install svg.js since I make them as a peer dependency https://github.com/DrSensor/vue-annotator/blob/ec8edc4a9d485628adab6421a039caa404daf062/package.json#L52-L54

[lunaeidolon]

Hi, DrSensor

There is something wrong with move and resize action after created some shape. Here is video: https://www.dropbox.com/s/ttya2tieou7uq0a/create%26move.mp4?dl=0

The online version works well, what’s wrong with my local cloned copy?

Thank you!

[DrSensor]

Does it have the same behavior with other shapes like circles or ellipse?

Also,

what’s wrong with my local cloned copy?

Do you mean you clone this repo and run it or are you using npm install vue-annotator? If you clone this repo, the problem might be lay on the dependency that has been updated automatically (probably some bugs in interact.js after updating it). As a side note, this repo doesn't have a lock file.

[ZeroAuto]

Is there a stable version of interactjs where this behavior isn't displayed? I have gone back to version 1.2.9 and I still see the above behavior when moving a drawn rectangle.

[DrSensor]

🤔...Try to use the exact version in dependencies by removing ^ then hit npm install. Also, try to install the exact version of svgjs if that doesn't work.

[ZeroAuto]

I explicitly installed the exact versions from the lock file that you referenced here (I'm using yarn btw) and I'm still seeing the above behavior.

I think you need to explicitly install svg.js since I make them as a peer dependency https://github.com/DrSensor/vue-annotator/blob/ec8edc4a9d485628adab6421a039caa404daf062/package.json#L52-L54

[DrSensor]

Install the exact version not only in the peerDependencies, but also all of the dependencies. Probably bug in one of svgjs plugins 🤔

[ZeroAuto]

these are the package versions i installed in dependencies:

  "dependencies": {
    "interactjs": "1.3.3",
    "svg.draw.js": "2.0.3",
    "svg.js": "2.6.4",
    "svg.select.js": "2.1.2",
  },

[ZeroAuto]

which versions are you using in your live demo here: http://vue-annotator.surge.sh

[lunaeidolon]

My dependencies are strict to package.json. @DrSensor could you try to clone and run under a new environment?

btw, what's your node.js and npm version?

[DrSensor]

Just digging the CI log (glad that unlike Azure Pipelines, CircleCI still retain the build log without tagging) and here is what I got, hope this help.

• yarn run v1.5.1
• Bundling with Webpack 3.11.0

[1/4] Resolving packages...
warning surge > fstream-ignore > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning surge > [email protected]: ⚠️  WARNING ⚠️ tar.gz module has been deprecated and your application is vulnerable. Please use tar module instead: https://npmjs.com/tar
warning surge > tar.gz > fstream > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
warning surge > request > [email protected]: Use uuid module instead
warning surge > [email protected]: no longer maintained
warning surge > tar.gz > fstream > graceful-fs > [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-actions > [email protected]" has unmet peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
warning "@storybook/addon-actions > @storybook/[email protected]" has unmet peer dependency "react@*".
warning "@storybook/addon-actions > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning " > @storybook/[email protected]" has unmet peer dependency "react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-knobs > [email protected]" has unmet peer dependency "react@>=0.13".
warning "@storybook/addon-knobs > [email protected]" has unmet peer dependency "react-dom@>=0.13".
warning "@storybook/addon-knobs > [email protected]" has unmet peer dependency "react@>=0.14.0 <17.0.0".
warning "@storybook/addon-knobs > react-datetime > [email protected]" has unmet peer dependency "react@^15.5.x || ^16.x".
warning "@storybook/addon-knobs > react-datetime > [email protected]" has unmet peer dependency "react-dom@^15.5.x || ^16.x".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning " > @storybook/[email protected]" has unmet peer dependency "babel-core@^6.26.0 | ^7.0.0-0".
warning " > @storybook/[email protected]" has unmet peer dependency "[email protected]".
warning " > @storybook/[email protected]" has unmet peer dependency "[email protected]".
warning " > @storybook/[email protected]" has unmet peer dependency "[email protected]".
warning "@storybook/vue > [email protected]" has unmet peer dependency "babel-core@6".
warning " > [email protected]" has unmet peer dependency "vue@^2.0.0".

Unfortunately I can't get the version of node.js but I believe it's irrelevant since the example run on the browser, not electron. Ah yes, this project use POI as a bundler but I can't get the exact version when this example is deployed (poi by default doesn't print it's version). I suspect there is different behaviors in the build tools (webpack or babel) about shimming latest ES api on the time I write this component into ESxxxx of the default babel target transformation. Also, seems like the CDN of the background image in the example is down 😅 down -> https://cdn.css-tricks.com/wp-content/uploads/2017/01/vue-2-1.jpg

My dependencies are strict to package.json. @DrSensor could you try to clone and run under a new environment?

I'm afraid cloning and running in the new environment will be useless without knowing the causes.