Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Annotate support different labels #2388

Merged
merged 3 commits into from
Jan 25, 2024
Merged

Annotate support different labels #2388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ad6ac6
add slot to a-point
yucheng11122017 Jan 21, 2024
d1ea400
add documentation about customised annotate point
yucheng11122017 Jan 21, 2024
7d09d4f
add tests for customised shapes
yucheng11122017 Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 51 additions & 17 deletions docs/userGuide/syntax/annotations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,49 @@ The x and y coordinates of each Annotate Point are relative to the image and are
<!-- Customize Point Header (default is empty) -->
<a-point x="75%" y="25%" content="This point is 75% from the left and 25% from the top" header="This has a header"/>
<!-- Customize Point Color (default color is green) -->
<a-point x="33%" y="50%" content="This point is 33% from the left and 50% from the top" color="red"/>
<a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top" color="red"/>
<!-- Customize Point Opacity (default opacity is 0.3) -->
<a-point x="66%" y="50%" content="This point is 66% from the left and 50% from the top" opacity="0.7"/>
<a-point x="50%" y="50%" content="This point is 50% from the left and 50% from the top" opacity="0.7"/>
<!-- Customize Point Label (default is empty) -->
<a-point x="25%" y="75%" content="This point is 25% from the left and 75% from the top" label="1"/>
<!-- Customize Text Color (default color is black) -->
<a-point x="50%" y="75%" content="This point is 50% from the left and 75% from the top" textColor="white" color="black" label="2" opacity="1"/>
<!-- Customize Font Size (default font size is 14) -->
<a-point x="75%" y="75%" content="This point is 75% from the left and 75% from the top" fontSize="30" label="3"/>
<!-- Customize Label (default is a rounded button) -->
<a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
<span class="badge bg-primary">Badge label</span>
</a-point>
</annotate>
</variable>
</include>

**Customising shapes for Annotate Point** <br>

Annotate Points supports different shapes and customisation.

The default shape used is a rounded button.

<box type="warning" seamless>
When using a customised shape, the options shape, color and opacity will not work.

Style the shape to achieve the same effect.
</box>

<include src="codeAndOutput.md" boilerplate>
<variable name="code">

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
<a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
<span class="badge bg-primary">Badge label</span>
</a-point>
<a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top">
<pic src="../../images/deer.jpg" width="50" height="50">
</a-point>
<!-- Customised Annotate Point with styling-->
<a-point x="50%" y="50%" content="This point is 25% from the left and 50% from the top">
<div style="opacity: 90%; color: red">Custom</div>
</a-point>
</annotate>
</variable>
</include>
Expand Down Expand Up @@ -119,21 +153,21 @@ Here we showcase some use cases of the Annotate feature.

****`<a-point>` Options****

| Name | Type | Default | Description |
| --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| x | `String` | | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
| y | `String` | | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
| content | `String` | `''` | Annotate Point content.<br>The annotation content will be omitted if this is not provided. |
| header | `String` | `''` | Annotate Point header.<br>The header will be omitted if this is not provided. |
| trigger | `String` | `click` | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these. |
| placement | `String` | `top` | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`. |
| label | `String` | `''` | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>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.<br>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.<br>Supports range of values from `0` to `1`. |
| fontSize | `String` | `'14'` | The font size of the label.<br>Supports any pixel size smaller than size of the point. |
| textColor | `String` | `'black'` | The color of the label.<br>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.<br>Supports: `popover`, `bottom`, `both`. |
| Name | Type | Default | Description |
| --------- | -------- | ----------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| x | `String` | | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
| y | `String` | | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`. |
| content | `String` | `''` | Annotate Point content.<br>The annotation content will be omitted if this is not provided. |
| header | `String` | `''` | Annotate Point header.<br>The header will be omitted if this is not provided. |
| trigger | `String` | `click` | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these. |
| placement | `String` | `top` | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`. |
| label | `String` | `''` | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>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. <br> Does not work with customised shapes |
| color | `String` | `'green'` | The color of the point.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. <br> Does not work with customised shapes |
| opacity | `String` | `'0.3'` | The opacity of the point.<br>Supports range of values from `0` to `1`. <br> Does not work with customised shapes |
| fontSize | `String` | `'14'` | The font size of the label.<br>Supports any pixel size smaller than size of the point. |
| textColor | `String` | `'black'` | The color of the label.<br>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.<br>Supports: `popover`, `bottom`, `both`. |

****`<annotate>` Options****

Expand Down
12 changes: 12 additions & 0 deletions packages/cli/test/functional/test_site/expected/testAnnotate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,18 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
<a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"></a-point>
<a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"></a-point>
</annotate>
<p><strong>Annotate Point customised shapes</strong></p>
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
<a-point x="25%" y="25%">
<span class="badge rounded-pill bg-primary">Label</span>
</a-point>
<a-point x="50%" y="25%">
<pic src="/test_site/images/deer.jpg" width="50" height="50"></pic>
</a-point>
<a-point x="75%" y="25%">
<div style="background-color: black; color: white; width: 100px; height: 50px;">Text label</div>
</a-point>
</annotate>
</div>
<overlay-source id="page-nav" tag-name="nav" to="page-nav">
<div class="nav-component slim-scroll">
Expand Down
Loading