security_vision/diagram_web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

override styles moved to collage

Browse source
This commit is contained in:
Ruben van de Ven 2023-12-18 11:50:20 +01:00
parent b18e7da900
commit ef3fe001dc
2 changed files with 49 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/annotate.js
View file

@ -1619,14 +1619,10 @@ class AnnotationPlayer extends HTMLElement {
styleEl.textContent = `
:host{
overflow: hidden;
}
:host(.active){
--override-color: orange
--disactive-path: rgba(220,220,220,.7)
}
svg{
--disactive-path: rgba(220,220,220,.7)
}
div.imgWrap{
@ -1856,13 +1852,16 @@ class AnnotationPlayer extends HTMLElement {
.play:not(.crop-selection) details .config-future{
display:none;
}
.annotation path.path{stroke: var(--override-color) !important; transition: stroke 1s;}
.annotation path.path{
stroke: var(--override-color) !important;
transition: stroke 1s;
}
`;
if(config.stroke_color) {
// styleEl.textContent += `.annotation path.path{stroke: ${config.stroke_color} !important;}`
styleEl.textContent += `:host{--override-color: ${config.stroke_color}; }`
}
// if(config.stroke_color) {
// // styleEl.textContent += `.annotation path.path{stroke: ${config.stroke_color} !important;}`
// styleEl.textContent += `:host{--override-color: ${config.stroke_color}; }`
// }
this.shadowRoot.appendChild(styleEl);
this.shadowRoot.appendChild(imgWrapEl);

38
canvas.html
View file

@ -84,6 +84,20 @@
const canvasCenter = [20077 / 2, 10331 / 2]
let scale = .5;
const sheet = new CSSStyleSheet
sheet.replaceSync(
`
:host(){
--override-color: gray
}
:host(.active){
--override-color: blue;
}
:host(.ending){
--override-color: blue;
--disactive-path: rgba(100,100,100,.7)
}`);
function easeInOutQuart(x) {
@ -114,9 +128,18 @@
scroll_offsets = calculateScrollOffsets()
const windowEl = document.getElementById('collage_window')
const anchorEls = document.getElementsByClassName('anchor')
const lastAnchorEl = anchorEls[anchorEls.length - 1];
console.log(lastAnchorEl)
for(const player of windowEl.children){
player.shadowRoot.adoptedStyleSheets = [sheet];
}
function updateScroll() {
// calculate the zooming & positioning of the plot
center_y = window.scrollY + window.innerHeight / 2
prev = null;
next = null;
@ -174,6 +197,19 @@
windowEl.style.transform = `scale(${scale})`
windowEl.style.left = `${x}px`
windowEl.style.top = `${y}px`
// calculate whether we're nearing the conlusion, and color accordingly
const last = Math.max(...Array.from(anchorEls).map((e) => e.getBoundingClientRect().bottom))
console.log(last)
if (last < 0) {
for (const playerEl of windowEl.children) {
playerEl.classList.add('ending')
}
} else {
for (const playerEl of windowEl.children) {
playerEl.classList.remove('ending')
}
}
}
windowEl.style.transform = `scale(${scale})`
@ -209,7 +245,7 @@
})
}, options);
const anchorEls = document.getElementsByClassName('anchor');
// const anchorEls = document.getElementsByClassName('anchor');
for (const anchorEl of anchorEls) {
observer.observe(anchorEl)
}