From c06d2d2a77bd6c277a21aba9ff6e3fe0855f0256 Mon Sep 17 00:00:00 2001 From: Chan Yu Cheng <77204346+yucheng11122017@users.noreply.github.com> Date: Thu, 25 Jan 2024 14:05:43 +0800 Subject: [PATCH] Annotate support different labels (#2388) * add slot to a-point * add documentation about customised annotate point * add tests for customised shapes --- docs/userGuide/syntax/annotations.md | 68 ++++++++++++++----- .../test_site/expected/testAnnotate.html | 12 ++++ .../expected/testAnnotate.page-vue-render.js | 5 +- .../test/functional/test_site/testAnnotate.md | 13 ++++ .../src/annotations/AnnotatePoint.vue | 6 +- 5 files changed, 84 insertions(+), 20 deletions(-) diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md index 78aaa92c88..524a87b515 100644 --- a/docs/userGuide/syntax/annotations.md +++ b/docs/userGuide/syntax/annotations.md @@ -22,15 +22,49 @@ The x and y coordinates of each Annotate Point are relative to the image and are - + - + + + + Badge label + + + + + +**Customising shapes for Annotate Point**
+ +Annotate Points supports different shapes and customisation. + +The default shape used is a rounded button. + + +When using a customised shape, the options shape, color and opacity will not work. + +Style the shape to achieve the same effect. + + + + + + + + Badge label + + + + + + +
Custom
+ @@ -119,21 +153,21 @@ Here we showcase some use cases of the Annotate feature. ****`` 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`. | +| 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.
Does not work with customised shapes | +| 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.
Does not work with customised shapes | +| opacity | `String` | `'0.3'` | The opacity of the point.
Supports range of values from `0` to `1`.
Does not work with customised shapes | +| 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**** diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.html b/packages/cli/test/functional/test_site/expected/testAnnotate.html index 3778c72035..580a95e3b3 100644 --- a/packages/cli/test/functional/test_site/expected/testAnnotate.html +++ b/packages/cli/test/functional/test_site/expected/testAnnotate.html @@ -266,6 +266,18 @@

Testing Site-Nav +

Annotate Point customised shapes

+ + + Label + + + + + +
Text label
+ +
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 index aa21b753be..63688f287d 100644 --- 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 @@ -1,7 +1,7 @@ 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',{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"}},[_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"}},[_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_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)],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(5)])} +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',{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"}},[_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"}},[_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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.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',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_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(" "),_m(5),_v(" "),_c('annotate',{attrs:{"src":"./images/annotateSampleImage.png","width":"1500","alt":"sampleImage"}},[_c('a-point',{attrs:{"x":"25%","y":"25%"}},[_c('span',{staticClass:"badge rounded-pill bg-primary"},[_v("Label")])]),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%"}},[_c('pic',{attrs:{"src":"/test_site/images/deer.jpg","width":"50","height":"50"}})],1),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%"}},[_c('div',{staticStyle:{"background-color":"black","color":"white","width":"100px","height":"50px"}},[_v("Text label")])])],1)],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(6)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -20,6 +20,9 @@ with(this){return _c('p',[_c('strong',[_v("Annotate point positions")])])} with(this){return _c('p',[_c('strong',[_v("Annotate point attributes")])])} },function anonymous( ) { +with(this){return _c('p',[_c('strong',[_v("Annotate Point customised shapes")])])} +},function anonymous( +) { with(this){return _c('div',[_c('footer',[_c('h1',{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/testAnnotate.md b/packages/cli/test/functional/test_site/testAnnotate.md index b3004eae37..bfa25d5cc9 100644 --- a/packages/cli/test/functional/test_site/testAnnotate.md +++ b/packages/cli/test/functional/test_site/testAnnotate.md @@ -70,3 +70,16 @@ + +**Annotate Point customised shapes** + + + Label + + + + + +
Text label
+ + diff --git a/packages/vue-components/src/annotations/AnnotatePoint.vue b/packages/vue-components/src/annotations/AnnotatePoint.vue index bd3bc4c95c..870a1ef736 100644 --- a/packages/vue-components/src/annotations/AnnotatePoint.vue +++ b/packages/vue-components/src/annotations/AnnotatePoint.vue @@ -26,8 +26,10 @@ shift-cross-axis >
- + + +
{{ label }}