From a595d05fd68c12952982f743db58606a8b352ba1 Mon Sep 17 00:00:00 2001 From: Junx Date: Wed, 20 Apr 2022 08:01:18 +0800 Subject: [PATCH] Add Annotation Feature (#1858) Add Annotation Feature Users want to annotate images but have no way of doing so. Implementing a and components to help users annotate over images. This allows users to specify the image in and specify the points in . Refer to issue #898 for the initial suggestion. --- docs/images/annotateSampleImage.png | Bin 0 -> 5640 bytes docs/userGuide/fullSyntaxReference.md | 1 + docs/userGuide/syntax/annotations.md | 182 +++++++++++ .../expected/images/annotateSampleImage.png | Bin 0 -> 5640 bytes .../test_site/expected/siteData.json | 6 + .../test_site/expected/testAnnotate.html | 304 ++++++++++++++++++ .../expected/testAnnotate.page-vue-render.js | 25 ++ .../test_site/images/annotateSampleImage.png | Bin 0 -> 5640 bytes .../cli/test/functional/test_site/site.json | 4 + .../test/functional/test_site/testAnnotate.md | 72 +++++ .../src/annotations/Annotate.vue | 102 ++++++ .../src/annotations/AnnotatePoint.vue | 279 ++++++++++++++++ packages/vue-components/src/index.js | 4 + 13 files changed, 979 insertions(+) create mode 100644 docs/images/annotateSampleImage.png create mode 100644 docs/userGuide/syntax/annotations.md create mode 100644 packages/cli/test/functional/test_site/expected/images/annotateSampleImage.png create mode 100644 packages/cli/test/functional/test_site/expected/testAnnotate.html create mode 100644 packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js create mode 100644 packages/cli/test/functional/test_site/images/annotateSampleImage.png create mode 100644 packages/cli/test/functional/test_site/testAnnotate.md create mode 100644 packages/vue-components/src/annotations/Annotate.vue create mode 100644 packages/vue-components/src/annotations/AnnotatePoint.vue diff --git a/docs/images/annotateSampleImage.png b/docs/images/annotateSampleImage.png new file mode 100644 index 0000000000000000000000000000000000000000..f59920f552f2736ce9778277d3eaaa7c9b4c576f GIT binary patch literal 5640 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 are used in conjunction with Annotate +Points (``). + +- ``: Annotate wrappers are used to hold the image and set its width and height. +- ``: Annotate points define the position, text and style of each point within the image. Insert them between the Annotate wrappers. + +The x and y coordinates of each Annotate Point are relative to the image and are written in percentage of total width or height. + + +html + + + + + + + + + + + + + + + + + + + + + + + +**Using triggers and positions for Annotate Point**
+ +Similar to **[popovers](../components/popups.md#popovers)**, Annotate Points also support different types of triggers and positions +for users with different needs. + + +html + + + + + + + + + + + + + + + + + +
+ +**Displaying content as legends in Annotate Point** + +`` allows users to display its content !!inside a popover!! or !!as a legend below the diagram!! or !!both!!. However, the label attribute must be specified in `` in order to display the content below the image. + + +html + + + + + + + + + + + + + +
+ +**Sample use cases for Annotate**
+ +Here we showcase some use cases of the Annotate feature. + +**Example 1: Describing elements in an image**
+ + +html + + + + + + + + + + + +**Example 2: Drawing over elements**
+ + +html + + + + + + + + + + +
+ +****`` Options**** + +| Name | Type | Default | Description | +| --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| x | `String` | | **This must be specified.**
The x-coordinate of the point.
Supports range of values from `0%` to `100%`. | +| y | `String` | | **This must be specified.**
The y-coordinate of the point.
Supports range of values from `0%` to `100%`. | +| content | `String` | `''` | Annotate Point content.
The annotation content will be omitted if this is not provided. | +| header | `String` | `''` | Annotate Point header.
The header will be omitted if this is not provided. | +| trigger | `String` | `click` | Popover trigger type.
Supports: `click`, `focus`, `hover`, or any space-separated combination of these. | +| placement | `String` | `top` | Position of the Popover.
Supports: `top`, `left`, `right`, `bottom`. | +| label | `String` | `''` | The label shown on the point itself.
The label will be omitted if this is not provided.
Note that labels should not be too long as they might overflow out of the point. | +| size | `String` | `'40'` | The size of the point in pixels. | +| color | `String` | `'green'` | The color of the point.
Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. | +| opacity | `String` | `'0.3'` | The opacity of the point.
Supports range of values from `0` to `1`. | +| fontSize | `String` | `'14'` | The font size of the label.
Supports any pixel size smaller than size of the point. | +| textColor | `String` | `'black'` | The color of the label.
Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. | +| legend | `String` | `'popover'` | The position of the Annotate Point content and header.
Supports: `popover`, `bottom`, `both`. | + +****`` Options**** + +This is effectively the same as the options used for the [picture](#pictures) component. + +| Name | Type | Default | Description | +| ------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| alt | `string` | | **This must be specified.**
The alternative text of the image. | +| src | `string` | | **This must be specified.**
The URL of the image.
The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_ | +| height | `string` |`''`| The height of the image in pixels. | +| width | `string` |`''`| The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio. | +| eager | `boolean` | false | The `` component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute. | + + + +
+ +``` + + + + + +``` + +
+ +
+ + + + + + + + + + + +
+ + diff --git a/packages/cli/test/functional/test_site/expected/images/annotateSampleImage.png b/packages/cli/test/functional/test_site/expected/images/annotateSampleImage.png new file mode 100644 index 0000000000000000000000000000000000000000..f59920f552f2736ce9778277d3eaaa7c9b4c576f GIT binary patch literal 5640 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 + + + + + + + + + + + + Annotate Feature Test + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
  • Open Bugs
    • +     +
    +
    + Test Jumbotron
    +
    +
    +
    +

    Relative Link Test This is a relative Intra-Site link in a layout (see link)

    +
    +
    + +
    +
    +
    +

    Default Layout

    +
    +
    +
    +
    +
    + + +
  • +
    Home 🏠
    +
    • +
  • +
    Open Bugs 🐛
    +
    • +
  • +

    Testing Site-Nav

    +
    • +
  • +
    Dropdown title ✏️ + + + + + +
    + +
    • +
  • +
    Third Link 📋
    +
    • +
  • +
    Filler text Youtube 📺 filler text + + + + + +
    + +
    • +
  • +
    Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown + + + + +
    +
      +
    • Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text
      • +
    • +
      Nested Dropdown Title + + + + +
      +
        +
      • Hello Doge Hello Doge 🐶
        • +
      • +
        NESTED LINK Home 🏠
        +
        • +
      • Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit
        • +
      +
      • +
    +
    • +
  • +
    Test line break in navigation layout + + + + +
    +
      +
    • Nested line break text ✂️
      • +
    • +
      Nested line break href + + + + +
      +
        +
      • Nested Nested line break text ✂️
        • +
      +
      • +
    • +
      Nested line break dropdown menu + + + + +
      +
        +
      • Line break item 2 📘
        • +
      +
      • +
    +
    • +     +     +
    +
    +     +
    +

    Annotate with saved Image

    + + + +
    +

    Annotate point positions

    + + + + + + + + + + + + + + + + + + +
    +

    Annotate point attributes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    +     +
    +
    +
    +

    Heading in footer should not be indexed

    +
    + This is a dynamic height footer that supports markdown 😄! +
    +
    +
    +
    + + + + + + + + + + + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js new file mode 100644 index 0000000000..3bf0e40555 --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js @@ -0,0 +1,25 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',[_c('navbar',{attrs:{"type":"dark","default-highlight-on":"sibling-or-child"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind Test Site")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs")])])]),_v(" "),_m(0)],1),_v(" "),_m(1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_c('div',[_c('h2',{attrs:{"id":"default-layout"}},[_c('span',{staticClass:"anchor",attrs:{"id":"default-layout"}}),_v("Default Layout"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#default-layout","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('div',[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Home 🏠")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs 🐛")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-0"},[_c('h3',{attrs:{"id":"testing-site-nav"}},[_c('span',{staticClass:"anchor",attrs:{"id":"testing-site-nav"}}),_v("Testing Site-Nav"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#testing-site-nav","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Dropdown ")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-search",attrs:{"aria-hidden":"true"}}),_v(" title ✏️ "),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Html within site-nav "),_c('span',{staticStyle:{"color":"red"}},[_v("should")]),_v(" be displayed properly")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown title 📐\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('mark',[_v("Third Link")]),_v(" 📋")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Filler text "),_c('a',{attrs:{"href":"https://www.youtube.com/"}},[_c('span',{staticClass:"glyphicon glyphicon-facetime-video",attrs:{"aria-hidden":"true"}}),_v(" Youtube 📺")]),_v(" filler text"),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}},[_v("The answer to everything in the universe")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('mark',[_v("Dropdown title")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-comment",attrs:{"aria-hidden":"true"}}),_v(" ✏️ "),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown Title\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Hello Doge Hello Doge 🐶")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_c('strong',[_v("NESTED LINK")]),_v(" Home 🏠")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Test line break in navigation layout\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Nested line break text ✂️")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Nested line break href")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Nested Nested line break text ✂️")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested line break dropdown menu\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Line break item 2 📘")])])])])])])],1)],1)])]),_v(" "),_c('div',{staticClass:"fixed-header-padding",attrs:{"id":"content-wrapper"}},[_m(2),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(3),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"0%","y":"0%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"100%","y":"100%","content":"Lorem ipsum dolor sit amet"}})],1),_v(" "),_c('br'),_v(" "),_m(4),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"350","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"Lorem ipsum dolor sit amet","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"Lorem ipsum dolor sit amet","header":"Lorem ipsum"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"Lorem ipsum dolor sit amet","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"Lorem ipsum dolor sit amet","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"Lorem ipsum dolor sit amet","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"Lorem ipsum dolor sit amet","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"Lorem ipsum dolor sit amet","fontSize":"30","label":"3"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"600","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"33%","y":"33%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Lorem ipsum dolor sit amet","placement":"right"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"2","legend":"bottom","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"3","legend":"both","header":"some test text"}})],1),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"some test text","label":"1","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"some test text","label":"2","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"some test text","label":"3","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"50%","content":"some test text","label":"4","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"some test text","label":"5","legend":"both","header":"some test text"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"some test text","label":"6","legend":"both","header":"some test text"}})],1),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{staticClass:"fixed-header-padding",attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(5)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{staticClass:"bg-info display-4 text-center text-white"},[_c('br'),_v("\n Test Jumbotron"),_c('br'),_v(" "),_c('br')])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Relative Link Test")]),_v(" This is a relative Intra-Site link in a layout (see "),_c('a',{attrs:{"href":"/test_site/index.html#heading-with-hidden-keyword"}},[_v("link")]),_v(")")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Annotate with saved Image")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Annotate point positions")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Annotate point attributes")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('h1',{attrs:{"id":"heading-in-footer-should-not-be-indexed"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-in-footer-should-not-be-indexed"}}),_v("Heading in footer should not be indexed"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-in-footer-should-not-be-indexed","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"text-center"},[_v("\n This is a dynamic height footer that supports markdown "),_c('span',[_v("😄")]),_v("!\n ")])])])} +}]; + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/images/annotateSampleImage.png b/packages/cli/test/functional/test_site/images/annotateSampleImage.png new file mode 100644 index 0000000000000000000000000000000000000000..f59920f552f2736ce9778277d3eaaa7c9b4c576f GIT binary patch literal 5640 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 + +     + +
    + +**Annotate point positions** + + + + + + + + + + + + + + + + + + + + + + +
    + +**Annotate point attributes** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/vue-components/src/annotations/Annotate.vue b/packages/vue-components/src/annotations/Annotate.vue new file mode 100644 index 0000000000..d44c7370d4 --- /dev/null +++ b/packages/vue-components/src/annotations/Annotate.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/packages/vue-components/src/annotations/AnnotatePoint.vue b/packages/vue-components/src/annotations/AnnotatePoint.vue new file mode 100644 index 0000000000..bd3bc4c95c --- /dev/null +++ b/packages/vue-components/src/annotations/AnnotatePoint.vue @@ -0,0 +1,279 @@ + + + + + diff --git a/packages/vue-components/src/index.js b/packages/vue-components/src/index.js index 1c084852de..377d3feb89 100644 --- a/packages/vue-components/src/index.js +++ b/packages/vue-components/src/index.js @@ -8,6 +8,8 @@ import closeable from './directives/Closeable'; import dropdown from './Dropdown.vue'; import navbar from './Navbar.vue'; import panel from './Panel.vue'; +import annotate from './annotations/Annotate.vue'; +import aPoint from './annotations/AnnotatePoint.vue'; import pic from './Pic.vue'; import quiz from './questions/Quiz.vue'; import question from './questions/Question.vue'; @@ -35,6 +37,8 @@ const components = { dropdown, navbar, panel, + annotate, + aPoint, pic, quiz, question,