search

DrSensor / vue-annotator

Vue Component for drawing annotation (rect, polygon, etc) using SVG element
http://vue-annotator.surge.sh
MIT License
79 stars 16 forks source link

Couldn’t move object #24

Open lunaeidolon opened 5 years ago

lunaeidolon commented 5 years ago

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 commented 5 years ago

@DrSensor You forgot import svg.js in some files

DrSensor commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

🤔...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 commented 5 years ago

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 commented 5 years ago

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

ZeroAuto commented 5 years ago

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 commented 5 years ago

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

lunaeidolon commented 5 years ago

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 commented 5 years ago

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.

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.