JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 22
  • Score
    100M100P100Q44041F
  • License MIT

Vue wrapper for zDog

Package Exports

  • vue-zdog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-zdog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-zdog

Vue wrapper for zDog

Demo

See here

source

Installation

yarn add vue-zdog This plugin requires Vue and zDog as a peer dependencie. If you are using a bundler please make sure to add them to your package.json / if you are using it directly in the browser make sure those two are loaded before vue-zdog (see example source here)

Usage

with Vue-CLI

Import components and use them in the template

<script>
import { ZIllustration, ZRect} from 'vue-zdog'

export default {
  components: {
    ZIllustration,
    ZRect
  },
}
</script>

<template>

  <ZIllustration>
    <ZRect :stroke="20" color="red" :translate="{ x: 20, y: 40 }"/>
  </ZIllustration>

</template>

API

ZIllustration

This is the root component under which all the shapes will be created

props

  • svg
  • resize
  • dragRotate
  • zoom
  • centered

Auto-rendering

WIP

Shapes (Z{shape})

vue-zdog is meant to expose as vue components all the shapes provided by zdog:

  • Anchor
  • Group
  • Rect
  • RoundedRect
  • Ellipse
  • Polygon
  • Shape
  • Hemisphere
  • Cone
  • Cylinder
  • Box

NB: it will be provided be vue-zdog as Z{shape} (prefixed by Z) ie: Box -> ZBox

In order to use them you'll have to nest them under a root ZIllustration

props

see zdog API doc