[Premium plugins - VueJS + WebPack]

Hey there!

 

I am trying to include the MorphSVGPlugin plugin to Vue and I get the error.

This dependency was not found:

* gsap/MorphSVGPlugin in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/games/drag-and-drop/Shapes.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save gsap/MorphSVGPlugin
Type checking in progress...
(node:15996) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/home/yesworld/.steampath'
(node:15996) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:15996) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

My code

import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin' // doesn't work
import { Draggable } from 'gsap/Draggable' // works fine
import gsap from 'gsap'

gsap.registerPlugin(Draggable)
gsap.registerPlugin(MorphSVGPlugin)

 

package.json

 

  "dependencies": {
    "axios": "^0.19.2",
    "blockly": "^3.20200402.1",
    "core-js": "^3.6.5",
    "gsap": "^3.4.2",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-i18n": "^8.17.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/gsap": "^1.20.2",
    "@types/webpack": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-plugin-pwa": "^4.4.0",
    "@vue/cli-plugin-typescript": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "copy-webpack-plugin": "^5.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "^1.0.1",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.6.11"
  }

 

Thank you!

[SVG shapes positioning with <USE> tag]

Guys thanks for the help!

This is the best forum I've seen!

 

I think that the topic can be closed.

Have a nice day!🥳

[SVG shapes positioning with <USE> tag]

11 hours ago, ZachSaucier said:

No, I think you're mistaken there. If you copy an inline SVG you can still refer to the inner parts of the clone. That sounds like the way to go here (if you can't just use the original inline SVG).

Sorry, right now I just realized what you exactly meant, I'll try to do so. Thank!

[SVG shapes positioning with <USE> tag]

10 hours ago, ZachSaucier said:

No, I think you're mistaken there. If you copy an inline SVG you can still refer to the inner parts of the clone. That sounds like the way to go here (if you can't just use the original inline SVG).

Yes, you are right. BUT, I'm dynamically include the SVG file with sprite (example #sprite-draggable) that need to be draggable.

And I have to drop this sprite into another SVG (#workspace) tag. The dropzone will not work on the second SVG tag.

 

See the Pen gOrbGyO?editors=1010 by yesworld (@yesworld) on CodePen

[SVG shapes positioning with <USE> tag]

10 minutes ago, PointC said:

Or create it:

Maybe I’m better off getting the <g> <path> ... </g> part of the tags and building the main SVG?

[SVG shapes positioning with <USE> tag]

I need to dynamically include svg files. From there I will extract the sprites. Which will then be used for drag and drop plugins.

 

But, If I use svg copies, then when hovering over the shapes, the interaction area will be the square of the svg element, and not the silhouette of the shape.

[SVG shapes positioning with <USE> tag]

Hi everyone!

 

Sorry, if the answer is already there, but I couldn't find it.

 

I have 2 SVG tags.
1) Source SVG sprite with 2 <rect> shapes.
2) And the second SVG is pulling elements from the first SVG with <use> tag.

 

The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. 

Thanks for your attention, and any help would be greatly appreciated. 

 

Thank you! 

See the Pen LYNEZBE by yesworld (@yesworld) on CodePen