{"_id":"@carljin/vue-konva","name":"@carljin/vue-konva","dist-tags":{"latest":"3.0.1"},"versions":{"3.0.1":{"name":"@carljin/vue-konva","version":"3.0.1","description":"Vue binding to canvas element via Konva framework","keywords":["vue","konva","canvas"],"homepage":"https://github.com/konvajs/vue-konva#readme","author":{"name":"carljin","email":"buffpal@gmail.com"},"main":"./dist/vueKonva.umd.js","module":"./dist/vueKonva.es.js","funding":[{"type":"patreon","url":"https://www.patreon.com/lavrton"},{"type":"opencollective","url":"https://opencollective.com/konva"},{"type":"github","url":"https://github.com/sponsors/lavrton"}],"repository":{"type":"git","url":"git+https://github.com/konvajs/vue-konva.git"},"license":"MIT","bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"scripts":{"build":"vite build","clean":"nwb clean-module && nwb clean-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server"},"peerDependencies":{"konva":">7"},"devDependencies":{"@vue/compiler-sfc":"^3.2.31","@vue/test-utils":"^2.0.0-rc.17","chai":"^4.3.6","eslint":"^8.11.0","eslint-plugin-vue":"^8.5.0","konva":">7","nwb":"^0.25.2","sinon":"^13.0.1","vue":"3.2"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vite":"^3.1.0"},"gitHead":"53b2e8a189d18ad44cb14b724b50ec21eb4ae130","_id":"@carljin/vue-konva@3.0.1","_nodeVersion":"16.6.2","_npmVersion":"7.20.3","dist":{"integrity":"sha512-p9ug8+XVesE5UMzEHg6qERYZZBG0OeRsbnnS04I5WAh7byIIyFMyuaw7VUsrUxxr1RuIqtKNSB42zoKKzUaGWg==","shasum":"8ebdd87a5a5d84573fcae5ac97653cff91f72d79","tarball":"https://registry.npmjs.org/@carljin/vue-konva/-/vue-konva-3.0.1.tgz","fileCount":5,"unpackedSize":26135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP+hYiQXNQrCCvjzymTvFNCjwQSe/MnFoNbHtsgK5SIAIhANaGjVJP6yBewgeCMmJWGfxDnfR0ffoF3ANEbmUZxsiH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG66lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfKg//aaTbyIvO6jk3HQpzxZ1ujmTyf8NJf5QmwCyPE4d/pxbJEZDP\r\nA6gcNxVz9fJq/FPTmfsT+J8844fnogrLsv3sKyuErauvDGI+LtNcPEGEA3cB\r\n66LHbGMa8RkyZ8QuJjNPuBQEGWXrnNCj3rOxsjrRz91KtBdso+we+B6FyhD4\r\nAIYYSDug9iFrcuK+b0t6Ycp8IalqKmKoXzAwWf4KjlfzDeHMkX0+DIVFLyJC\r\nt8VUMgHdBs6+qASvqI7L62Q0dpABnMwaRpfIxrDXYAZQLRKlDFrZOYkrt8dG\r\ntRP+SzyNkBCkJQ+9/67B8NcK0ie/Lnfn9BtDgjs6WOmUIpO6bBAnfl1K4BFq\r\ndj1RzHT6RwNalYhE7PEUQaVPW2+vrIdA4AHLtV0DpisZVl6oYYFlSrJXq7vc\r\nKm19yXrI//kkZYJ0morbuuqXPCVDYCp58uDuhh4e74dhyO2DL/mtJSkbmMi1\r\noKZ7zDFGQrayHQrNsNBE9ExUVrvsK+hp8sf6leeMSBKxEJZlQdRiEZ9npwDr\r\nya327KWlPUshSGzcLm3Ox3Qm3O1vdLNZmnsxq84tOxXuS1/SOjV/xJsYjv20\r\nQ+B1y1B/bygRkVpmX+LTr09S9ZFFKKjaxzwkQA3zCbiG728+wBJb4Iv87bpG\r\nve5sEpUYMlVLd1ZEl4/IxQY2wS5yXftqGGU=\r\n=nOg7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"buff2017","email":"buffpal2016@gmail.com"},"directories":{},"maintainers":[{"name":"buff2017","email":"buffpal2016@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-konva_3.0.1_1662758564922_0.506797554045127"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-09T21:22:44.854Z","3.0.1":"2022-09-09T21:22:45.085Z","modified":"2022-09-09T21:22:45.230Z"},"maintainers":[{"name":"buff2017","email":"buffpal2016@gmail.com"}],"description":"Vue binding to canvas element via Konva framework","homepage":"https://github.com/konvajs/vue-konva#readme","keywords":["vue","konva","canvas"],"repository":{"type":"git","url":"git+https://github.com/konvajs/vue-konva.git"},"author":{"name":"carljin","email":"buffpal@gmail.com"},"bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"license":"MIT","readme":"# Vue Konva\n\n<span class=\"badge-npmdownloads\">\n  <a href=\"https://www.npmjs.com/package/vue-konva\">\n    <img src=\"https://img.shields.io/npm/v/vue-konva.svg\" alt=\"Version\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/vue-konva\">\n    <img src=\"https://img.shields.io/npm/l/vue-konva.svg\" alt=\"License\">\n  </a>\n  </span>\n\n![ReactKonva Logo](https://github.com/rafaesc/vue-konva/raw/master/vue-konva.png)\n\nVue Konva is a JavaScript library for drawing complex canvas graphics using Vue.\n\nIt provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/).\n\nAll `vue-konva` components correspond to `Konva` components of the same name with the prefix 'v-'. All the parameters available for `Konva` objects can add as `config` in the prop for corresponding `vue-konva` components.\n\nCore shapes are: `v-rect`, `v-circle`, `v-ellipse`, `v-line`, `v-image`, `v-text`, `v-text-path`, `v-star`, `v-label`, `v-path`, `v-regular-polygon`.\nAlso you can create custom shape.\n\nTo get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html).\n\n## Documentation / live edit\n\nSee [Tutorials page](https://konvajs.org/docs/vue/)\n\n## Quick Start\n\n[Vue.js](https://vuejs.org) version 2.4+ is required.\n\n### 1 Install via npm\n\n`vue@3`:\n\n```npm\nnpm install vue-konva konva --save\n```\n\n`vue@2`:\n\n```npm\nnpm install vue-konva@2 konva --save\n```\n\n### 2 Import and use VueKonva\n\n`vue@3`:\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport VueKonva from 'vue-konva';\n\nconst app = createApp(App);\napp.use(VueKonva);\napp.mount('#app');\n```\n\n`vue@2`:\n\n```javascript\nimport Vue from 'vue';\nimport VueKonva from 'vue-konva';\n\nVue.use(VueKonva);\n```\n\n### 3 Reference in your component templates\n\n```html\n<template>\n  <v-stage :config=\"configKonva\">\n    <v-layer>\n      <v-circle :config=\"configCircle\"></v-circle>\n    </v-layer>\n  </v-stage>\n</template>\n```\n\n```javascript\n<script>\nexport default {\n  data() {\n    return {\n      configKonva: {\n        width: 200,\n        height: 200\n      },\n      configCircle: {\n        x: 100,\n        y: 100,\n        radius: 70,\n        fill: \"red\",\n        stroke: \"black\",\n        strokeWidth: 4\n      }\n    };\n  }\n};\n\n</script>\n```\n\n### Or use a CDN\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" />\n  </head>\n  <body>\n    <div id=\"app\">\n      <v-stage ref=\"stage\" :config=\"configKonva\">\n        <v-layer ref=\"layer\">\n          <v-circle :config=\"configCircle\"></v-circle>\n        </v-layer>\n      </v-stage>\n    </div>\n    <!--1. Link Vue Javascript & Konva-->\n    <script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n    <script src=\"https://unpkg.com/konva/konva.js\"></script>\n    <!--2. Link VueKonva Javascript -->\n    <script src=\"https://unpkg.com/vue-konva/umd/vue-konva.min.js\"></script>\n    <script>\n      // 3. Create the Vue instance\n      new Vue({\n        el: '#app',\n        data: {\n          configKonva: {\n            width: 200,\n            height: 200,\n          },\n          configCircle: {\n            x: 100,\n            y: 100,\n            radius: 70,\n            fill: 'red',\n            stroke: 'black',\n            strokeWidth: 4,\n          },\n        },\n      });\n    </script>\n  </body>\n</html>\n```\n\n# Core API\n\n## Getting reference to Konva objects\n\nYou can use `ref` feature from `vue`.\n\n```html\n<template>\n  <v-stage ref=\"stage\">\n    <v-layer ref=\"layer\">\n      <v-rect ref=\"rect\" />\n    </v-layer>\n  </v-stage>\n</template>\n\n<script>\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  export default {\n    mounted() {\n      const stage = this.$refs.stage.getNode();\n      const layer = this.$refs.layer.getNode();\n      const rect = this.$refs.rect.getNode();\n    },\n  };\n</script>\n```\n\n### Strict mode\n\nBy default `vue-konva` works in \"non-strict\" mode. If you changed a property **manually** (or by user action like `drag&drop`) properties of the node will be not matched with properties passed as `config`. `vue-konva` updates ONLY changed properties.\n\nIn strict mode `vue-konva` will update all properties of the nodes to the values that you provided in `config`, no matter changed they or not.\n\nYou should decide what mode is better in your actual use case.\n\nTo enable strict mode pass \\_\\_useStrictMode attribute:\n\n```html\n<v-rect :config=\"{}\" __useStrictMode></v-rect>\n```\n\n## Configurable prefix\n\nBy default `vue-konva` is using `v-` prefix for all components.\n\nYou can use your own prefix if default one conflicts with some other libs or your components.\n\n```javascript\nimport Vue from 'vue';\nimport VueKonva from 'vue-konva'\n\nVue.use(VueKonva, { prefix: 'Konva'});\n\n// in template:\n<konva-stage ref=\"stage\" :config=\"stage\">\n```\n\n## Change log\n\nThe change log can be found on the [Releases page](https://github.com/konvajs/vue-konva/releases).\n","readmeFilename":"README.md"}