tomcrane
commented
2 years ago In summary - make https://iiif-canvas-panel.netlify.app/docs/examples/drawing-boxes/ work!
Closed tomcrane closed 7 months ago
tomcrane
commented
2 years ago In summary - make https://iiif-canvas-panel.netlify.app/docs/examples/drawing-boxes/ work!
tomcrane
commented
2 years ago What CSS can be applied to a DisplayAnnotation?
This is not for painting annotations. This is for all other annotations whose presence on
The fact that these annos are not painting means that it's OK for CP to have limits to how they are displayed - we're activating a display "mode" for what's really a piece of data.
Often the only thing CP will be doing is highlighting a box and responding to pointer or selection events on that box, because the actual content of the anno will be dealt with outside of Canvas Panel, or superimposed on top of it - e.g., Ocean Liners text and image content (is that right? Is CP being asked to display this? Or is it the Ocean Liners app?)
There's the style applied directly to the displayAnnotation's corresponding DIV element, and then there's styles for content within it. E.g., how would you specify what links should like with an annotation whose body is text/html?
There's also the marker for point annotations - e.g., Ocean Liners again - does CP show the map marker / button? Or the app built on top of it?
stephenwf
commented
2 years ago Summary of supported canvas styles:
Border / Outline
Same rules for both, just border -> outline.
{ border: '1px solid red' }; // ✅ short hand properties
{ border: '1px solid rgb(255, 0, 0)' }; // ✅ RGB colour values (and other functions)
{ border: '1px solid rgba(255, 0, 0, .5)' }; // ✅ Colours with alpha
{ borderColor: 'red', borderWidth: '1px', borderStyle: 'solid' }; // ✅ borderXYZ properties
{ border: '1px 10px 0 0 solid red' }; // 🟡 Extra widths will be ignored, width will be 1px
{ border: '1em solid red' }; // 🟡 em/relative units will be read as pixels (1em -> 1px)
{ border: '1px dashed red' }; // ❌ Only "solid" supported currently
{ borderLeftWidth: '1px' }; // ❌ No per-side propertiesBackground
Currently only backgroundColor is supported, and shorthand is not supported.
{ background: 'red' }; // ✅ shorthand background color
{ backgroundColor: 'red' }; // ✅ background colour property
{ backgroundColor: 'rgba(255, 0, 0, 0.5)' }; // ✅ background colour property with alpha
{ backgroundImage: 'url(...)' }; // ❌ No other types of background
{ backgroundRepeat: 'repeat' }; // ❌ No other types of background
{ background: 'linear-gradient(...)' }; // ❌ No shorthand background that is not a colourBox shadow Most box shadows are supported. From the mozilla docs:
{ boxShadow: '10px 5px 5px red' }; // ✅ normal shadows
{ boxShadow: '60px -16px teal' }; // ✅ negative values and short hand props
{ boxShadow: '12px 12px 2px 1px rgba(0, 0, 255, .2)' }; // ✅ alpha colours
{ boxShadow: '3px 3px red, 4px 0 4px olive' }; // ✅ Multiple shadows
{ boxShadow: '5em 1em gold' }; // 🟡 em/relative units will be displays as pixels.
{ boxShadow: 'inset 5px 1px gold' }; // ❌ Inset shadows are not supportedHover / active states Similar to CSS-in-JS libraries, you can style hover/active states for annotations.
{
background: 'green',
// Hover styles
':hover': {
background: 'red'
},
// Active/pressed styles
':active': {
background: 'blue'
},
}Note: active styles will be removed when your pointer/mouse leaves the box. This is slightly different to browser behaviour.
stephenwf
commented
2 years ago If you want to style something using CSS/HTML without these limitations then you can. Adding a classname to an annotation or annotation-list will de-optimise it. The style properties above will continue to work, but without the states limitations (and all other CSS properties).
However, due to how web components work, you can't apply CSS directly with a class name. You need to link your CSS to the web component. There are 3 ways to achieve this.
There are 3 ways of styling with CSS.
1. Reference an external stylesheet.
<canvas-panel stylesheet="/annotations.css" annotation-css-class="example-annotation" />2. Reference a style tag
<style id="my-style">
.example-annotation {
background: red;
}
</style>
...
<canvas-panel style-id="my-style" annotation-css-class="example-annotation" />3. Using CSS ::part selector
<style>
/* ✅ tip: you can optionally add a class name if you have multiple */
canvas-panel.custom-class::part(example-annotation) {
background: red;
}
</style>
<canvas-panel class="custom-class" annotation-css-class="example-annotation" />CSS using the ::part selector can be in external or inline stylesheets. The part will always match the classname.
In the underlying viewer, although you may have an HTML <div /> to represent an annotation, that doesn't mean that pointer events will be handled by that element. All events are handled internally by the viewer by default. This allows panning, zooming and other event handlers to continue to work with a mix of canvas and HTML elements. One side effect of this is that your CSS class may not work with states. For example:
<style>
.my-annotation {
background: red;
}
.my-annotation:hover { /* ❌ :hover may not react to pointer events */
background: blue;
}
canvas-panel::part(my-annotation) {
background: red;
}
canvas-panel::part(my-annotation):hover { /* ❌ :hover may not react to pointer events */
background: blue;
}
</style>May not work as expected. When you hover in atlas, we will take your class name and append --hover or --active to the class name. The following style is recommended:
<style>
/** Using CSS classes **/
.my-annotation {
background: red;
}
.my-annotation--hover, /* ✅ covers both types of hover */
.my-annotation:hover {
background: blue;
}
.my-annotation--active, /* ✅ covers both types of active */
.my-annotation:hover:active {
background: orange;
}
/** Using CSS ::part() **/
canvas-panel::part(my-annotation) {
background: red;
}
canvas-panel::part(my-annotation):hover,
canvas-panel::part(my-annotation--hover) { /* ✅ covers both types of hover */
background: blue;
}
canvas-panel::part(my-annotation):hover:active,
canvas-panel::part(my-annotation--active) { /* ✅ covers both types of active */
background: orange;
}
</style>There are a few attributes on the canvas panel component that you can set to control which class names appear on annotations.
annotation-css-classThis is a catch all, this will convert all annotations rendered to use the HTML renderer and will not be drawn on canvas. They will have a class AND part matching the value of this property. So annotation-css-class="my-anno" would set class="my-annot" and part="my-anno" for your styling needs.
highlight-css-classThis is to be used in conjunction with the highlight="100,200,300,400" where highlight is a box selector xywh. This CSS class will only apply to that highlight annotation.
linking-css-classThis is to be used in conjunction with the follow-annotations="true" property and text-enabled="true"
"Draw a box" - but not the user drawing a box (that come later!)
This issue is supporting the features described here: https://deploy-preview-50--iiif-canvas-panel.netlify.app/docs/examples/drawing-boxes/
CP showing a region is covered by #69
This is making a visible change. Via attributes:
In code, this reveals dependencies on two other features, Target and DisplayAnnotation as wrapper. These features are still under discussion. (https://github.com/digirati-co-uk/iiif-canvas-panel/discussions/33)