https://github.com/cyclecycle/vue-annotated-text

VueJS component to visually represent annotations over text
https://github.com/cyclecycle/vue-annotated-text

javascript vue-components

Last synced: 3 months ago
JSON representation

VueJS component to visually represent annotations over text

• Host: GitHub
• URL: https://github.com/cyclecycle/vue-annotated-text
• Owner: cyclecycle
• License: mit
• Created: 2019-05-28T14:08:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:36:44.000Z (about 2 years ago)
• Last Synced: 2023-03-04T13:46:16.916Z (almost 2 years ago)
• Topics: javascript, vue-components
• Language: Vue
• Homepage:
• Size: 3.64 MB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-annotated-text

![Example output](https://github.com/cyclecycle/vue-annotated-text/blob/master/example_output.png)

## Features

- Renders the text as a set of spans representing the segments composing the sentence

- These spans can be associated with custom styles or events

- Overlapping annotations are represented by mixed colors

## Installation

With npm:

```bash

npm install vue-annotated-text

```

With yarn:

```bash

yarn add vue-annotated-text

```

## Example usage

```html

    


        

            :annotations="annotations"  

            :getAnnotationColor="getAnnotationColor"  

            :getSpanClasses="getSpanClasses"  

            :spanEvents="spanEvents"  

            :spanAttributes="spanAttributes"  

        />

    


```

```js

import AnnotatedText from 'vue-annotated-text'

export default {

  name: 'MyComponent',

  components: {

    AnnotatedText

  },

  data() {

    return {

      text: "Forging is performed by a smith using hammer and anvil.",

      annotations: [

        {  // All annotations must have a unique 'id', and values for 'start' and 'length'

          id: "forging",

          start: 0,

          length: 7,

          class: "process"

        },

        {

          id: "smith_using_hammer",

          start: 26,

          length: 18,

          class: "process"

        },

        {

          id: "hammer",

          start: 38,

          length: 6,

          class: "tool"

        },

        {

          id: "anvil",

          start: 49,

          length: 5,

          class: "tool"

        }

      ],

      spanEvents: {

        'click': function(e, annotations) {  // All event callbacks take arguments: (event, annotations)

          console.log(annotations)

        },

      },

    }

  },

  methods: {

    getAnnotationColor: function(annotation) {

      const classToColor = {

        'process': '#f44283',

        'tool': '#41acf4',

      }

      const color = classToColor[annotation.class]

      return color  // Must return hex value

    },

    getSpanClasses: function(span) {

      const classes = ['my-span-class']

      const annotationIds = span.annotationIds

      if (annotationIds.length > 0) {

        classes.push('annotated')

      }

      return classes

    }

  }

}

```

```css

.my-span-class:hover {

  outline: 1px solid black;

}

.annotated {

  font-weight: bold;  

}

```

## Acknowledgements

Uses:

- [flatten-overlapping-ranges](https://github.com/derhuerst/flatten-overlapping-ranges)

- [color-mixer](https://github.com/kosamari/color-mixer)

## TODO

- Add default info box on hover