Description

This is a vue component that that overlays a drawing tool over a vue component

Usage:

• Import the vue component:

import { OverlayDrawer } from '@michael-chiang-dev5/lib-vue-overlay-draw'

• Import css: import "@michael-chiang-dev5/overlay-drawer/style.css"

import '@michael-chiang-dev5/lib-vue-overlay-draw/style.css'

• Use OverlayDrawer to overlay a drawing tool over another vue component

  <OverlayDrawer>
    <YourComponent />
  </OverlayDrawer>

Example:

<template>
  <div>
      <input type="radio" id="radio1" :value="OVERLAY_MODE.DISABLED" v-model="mode" />
      <label>disable</label>
    
      <input type="radio" id="radio2" :value="OVERLAY_MODE.RECTANGLE" v-model="mode" />
      <label>rectangle</label>

      <input type="radio" id="radio3" :value="OVERLAY_MODE.ELLIPSE" v-model="mode" />
      <label>ellipse</label>

      <input type="radio" id="radio4" :value="OVERLAY_MODE.ARROW" v-model="mode" />
      <label>arrow</label>

      <input type="radio" id="radio5" :value="OVERLAY_MODE.TEXT" v-model="mode" />
      <label>text</label>

      <input type="radio" id="radio6" :value="OVERLAY_MODE.SELECTION" v-model="mode" />
      <label>selection</label>
  </div> 
  <OverlayDrawer 
    :width="800" 
    :height="600" 
    :mode="mode"
    >
      <div 
        :style="{backgroundColor: 'lightcoral', width: '800px', height: '600px'}"
        @click="() => console.info('clicked')"
      ></div>
  </OverlayDrawer>
</template>

<script setup>
  import { ref } from 'vue'
  import { OverlayDrawer } from '@michael-chiang-dev5/lib-vue-overlay-draw'
  import '@michael-chiang-dev5/lib-vue-overlay-draw/style.css'
  import { OVERLAY_MODE } from '@michael-chiang-dev5/lib-vue-overlay-draw'

  const mode = ref(OVERLAY_MODE.TEXT)
</script>