anchor.diff:        return Math.min(Math.max(this.targetRect.top - wrapperRect.top,
                                  viewportTop + 20),
                         this.targetRect.bottom - wrapperRect.top).toString(10) + "px";
  +    }
  +  },
  +  methods: {
  +    create: type => {
  +      alert(type)
  +    },
  +    add: type => {
  +      alert(type)
  +    },
  +    destroy: () => {
  +      alert("destroy")
  +    },
  +    reveal: () => {
  +      alert("reveal")
  +    },
  +    save_changes: () => {
  +      alert("save changes");
  +    },
  +    cancel_changes: type => {
  +      alert(type)
  +    },
  +    edit_link: () => {
  +      alert("edit link");
  +    },
  +    update_link: () => {
  +      alert("update link");
  +    },
  +    submit: type => {
  +      alert("submit");
       }
     }
   }
  
positive.code:   data: () => ({
      mode: "edit-handle",
      newAnnotationType: "link",
      annotationType: "link"
    }),
    computed: {
      offset: function() {
  
negative.code: <div id="vue_annotator" v-if="mode != 'inactive'" :style="'{top: `${offset}`}'">
    <div class="annotator-inner">
      <template v-if="mode == 'create-menu'">
        <a @click="create('highlight')">Highlight</a>
        <a @click="create('elide')">Elide</a>
        <a @click="create('replace')">Replace</a>
        <a @click="add('link')">Add link</a>
        <a @click="add('note')">Add note</a>
      </template>
      <template v-else-if="mode == 'new-form'">
        <form v-if="newAnnotationtype == 'link'" v-on:submit.prevent="submit('link')" class="create-form">
          <input name="content" type="url" placeholder="Paste URL"  />
        </form>
        <form v-if="newAnnotationtype == 'note'" v-on:submit.prevent="submit('note')" class="create-form">
          <textarea name="content" placeholder="Note text..."></textarea>
          <input class="save-note" type="submit" value="Save" />
        </form>
      </template>
      <template v-else-if="mode == 'edit-link'">
        <form v-on:submit.prevent="update_link">
          <input name="content" type="url" placeholder="Url to link to..." value="${(this.getLinkValue())}" />
        </form>
      </template>
      <template v-else-if="mode == 'edit-handle'">
        <a v-if="annotationType == 'highlight'" @click="destroy">Remove highlighting</a>
        <a v-if="annotationType == 'elide'" @click="destroy">Remove elision</a>
        <template v-if="annotationType == 'replace'">
          <a @click="reveal">Reveal original text</a>
          <a @click="destroy">Remove replacement text</a>
        </template>
        <template v-if="annotationType == 'link'">
          <a @click="destroy">Remove link</a>
          <a class="edit-link" @click="edit_link">Edit link</a>
        </template>
        <a v-if="annotationType == 'note'" @click="destroy">Remove Note</a>
      </template>
      <template v-else-if="mode == 'save-changes'">
        <a @click="save_changes">Save</a>
        <a @click="cancel_changes('elide')">Cancel</a>
      </template>
    </div>
  </div>
  