yesworld

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!

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!?

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

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. https://codepen.io/yesworld/pen/gOrbGyO

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

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.

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!