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

demo draw lines and click to playback

Browse source
This commit is contained in:
Ruben van de Ven 2023-12-18 15:28:52 +01:00
parent ef3fe001dc
commit c59b198b54
3 changed files with 132 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/annotate.js
View file

@ -1619,7 +1619,7 @@ class AnnotationPlayer extends HTMLElement {
styleEl.textContent = `
:host{
overflow: hidden;
--disactive-path: rgba(220,220,220,.7)
}
svg{

143
canvas.html
View file

@ -44,6 +44,10 @@
margin: 0.5rem auto;
}
.anchor{
cursor: pointer;
}
/*Filenames with code blocks: https://stackoverflow.com/a/58199362*/
div.sourceCode::before {
content: attr(data-filename);
@ -69,6 +73,18 @@
top: -1000px;
left: -1000px;
}
#collage_window svg {
position: absolute;
left: 0;
top: 0;
}
div[data-custom-style='Body Text'] p{
padding: 1em 0;
margin: 0;
background-color: rgba(255,255,255, 0.8);
}
</style>
<link rel="stylesheet" href="paper.css" />
<script src="assets/wNumb-1.2.0.min.js"></script>
@ -81,14 +97,15 @@
[7137, 3869], // left in practice is -5746px;, top: -2988px;:
]
// test with FPR
const canvasCenter = [20077 / 2, 10331 / 2]
let scale = .5;
const sheet = new CSSStyleSheet
sheet.replaceSync(
`
:host(){
--override-color: gray
:host{
--override-color: gray;
}
:host(.active){
--override-color: blue;
@ -96,8 +113,10 @@
:host(.ending){
--override-color: blue;
--disactive-path: rgba(100,100,100,.7)
}`);
}
div.controls{display:none !important;}`
);
console.log(sheet, sheet.rules)
function easeInOutQuart(x) {
@ -129,11 +148,18 @@
const windowEl = document.getElementById('collage_window')
const anchorEls = document.getElementsByClassName('anchor')
const playerEls = document.getElementsByTagName('annotation-player')
const paths = [document.getElementById('path1'), document.getElementById('path2'), document.getElementById('path3')]
paths.forEach((el) => el.style.strokeDasharray = Math.ceil(el.getTotalLength()) + 'px');
const lastAnchorEl = anchorEls[anchorEls.length - 1];
console.log(lastAnchorEl)
for(const player of windowEl.children){
for (const anchorEl of anchorEls) {
anchorEl.addEventListener('click', ev => playerEls[anchorEl.dataset.i].annotator.playPause());
}
for (const player of playerEls) {
player.shadowRoot.adoptedStyleSheets = [sheet];
}
@ -143,36 +169,63 @@
center_y = window.scrollY + window.innerHeight / 2
prev = null;
next = null;
for (let offset of scroll_offsets) {
step_idx = null;
for (let idx in scroll_offsets) {
const offset = scroll_offsets[idx]
if (offset[0] > center_y) {
next = offset
step_idx = idx;
break;
}
prev = offset
}
let source_pos, target_pos, source_scale, target_scale;
let source_pos, target_pos, source_scale, target_scale, source_color, target_color, source_x_offset, target_x_offset;
const x_column_width = window.innerWidth - document.body.getBoundingClientRect().width+200; // for some reason the 200 is neccesary
const x_center_map = x_column_width / 2;
const x_center_column = document.body.getBoundingClientRect().left + document.body.getBoundingClientRect().width / 2;
const fit_scale = x_column_width / (canvasCenter[0] * 1.7)
if (prev === null) {
prev = [next[0] - window.innerHeight / 2, null]
source_scale = .1
source_scale = fit_scale
target_scale = .45
source_pos = canvasCenter
target_pos = centerPoints[next[1]]
source_color = 100;
target_color = 220;
source_x_offset = x_center_map;
target_x_offset = x_center_column;
} else if (next === null) {
next = [prev[0] + window.innerHeight / 2, null]
source_scale = .45
target_scale = .1
target_scale = fit_scale
source_pos = centerPoints[prev[1]]
target_pos = canvasCenter
source_color = 220;
target_color = 50;
source_x_offset = x_center_column;
target_x_offset = x_center_map;
} else {
source_pos = centerPoints[prev[1]]
target_pos = centerPoints[next[1]]
target_scale = .45
source_scale = .45
source_color = target_color = 220;
source_x_offset = target_x_offset = x_center_column;
}
@ -188,9 +241,38 @@
scale = source_scale + t_ease * ds;
x = -1 * (source_pos[0] + dx * t_ease) * scale + window.innerWidth / 2;
x_offset = (target_x_offset - source_x_offset) * t_ease + source_x_offset
x = -1 * (source_pos[0] + dx * t_ease) * scale + x_offset;
y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2;
// console.log('x', x, 'y', y, 'scale', scale)
const color = (target_color - source_color) * t_ease + source_color
console.log(sheet)
// sheet.rules[0].style.setProperty('--override-color', `rgba(${color},${color},${color},0.7)`);
sheet.rules[0].style.setProperty('--disactive-path', `rgba(${color},${color},${color},0.7)`);
// draw the line
if (step_idx === null) {
// full paths
paths.forEach(el => el.style.strokeDashoffset = 0)
}
else {
// no paths
paths.forEach((el, idx) => {
if (idx >= step_idx ) {
el.style.strokeDashoffset = Math.ceil(el.getTotalLength()) + 'px';
} else if (idx == step_idx-1 ) {
// console.log('anim', el)
el.style.strokeDashoffset = Math.ceil(el.getTotalLength() - el.getTotalLength()*t_ease) + 'px';
} else {
el.style.strokeDashoffset = 0;
}
});
// paths.forEach((el) => stroke)
}
// console.log('x', x, 'y', y, 'scale', scale, 'color', color)
// console.log(x, y);
@ -202,11 +284,11 @@
const last = Math.max(...Array.from(anchorEls).map((e) => e.getBoundingClientRect().bottom))
console.log(last)
if (last < 0) {
for (const playerEl of windowEl.children) {
for (const playerEl of playerEls) {
playerEl.classList.add('ending')
}
} else {
for (const playerEl of windowEl.children) {
for (const playerEl of playerEls) {
playerEl.classList.remove('ending')
}
}
@ -233,7 +315,7 @@
entries.forEach((entry) => {
index = entry.target.dataset.i;
console.log(entry)
if (index >= windowEl.children.length) {
if (index >= playerEls.length) {
return;
}
playerEl = windowEl.children[index];
@ -241,6 +323,10 @@
playerEl.classList.add('active')
} else {
playerEl.classList.remove('active')
if(typeof playerEl.annotator.paused !== 'undefined' && !playerEl.annotator.paused){
console.log('pause', playerEl.annotator, playerEl.annotator.paused)
playerEl.annotator.pause()
}
}
})
}, options);
@ -348,6 +434,35 @@
<annotation-player style="position:absolute;width:2952px; height:5043px;left:0;top:0;"
data-url-prefix="assets" stroke="blue" data-crop='whole'
data-annotation-url="annotation-BIXG4VTL.json"></annotation-player>
<svg height="10331.54" version="1.1" viewBox="61.650009 -1201.8501 20077.92 10331.539" width="20077.92"
id="svg1410" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs4">
<marker style="overflow:visible" id="marker39470" refX="0" refY="0" orient="auto-start-reverse"
markerWidth="5.3244081" markerHeight="6.155385" viewBox="0 0 5.3244081 6.1553851"
preserveAspectRatio="xMidYMid">
<path transform="scale(0.5)"
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
d="M 5.77,0 -2.88,5 V -5 Z" id="path39468-6" />
</marker>
</defs>
<g id="layer1">
<path
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
d="M 3153.037,4991.1869 C 3627.9651,3806.502 10134,2080.0386 13783.189,4095.2221" id="path1" />
<path
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
d="M 14473.211,4826.0987 C 14487.638,6297.2524 9146.0135,8823.4797 5997.8383,8868.5177"
id="path2" />
<path
style="fill:none;stroke:#00f;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:20, 40;stroke-dashoffset:0;stroke-opacity:1;marker-end:url(#marker39470)"
d="M 5562.416,8572.101 C 5561.5237,7310.7009 7556.3295,6911.6966 7557.7371,3111.5328"
id="path3" />
</g>
</svg>
<!--data-poster-url="annotation-F19O9PGE.svg"-->
<!--data-poster-url="annotation-XYGE65SB.svg"-->
<!--data-poster-url="annotation-NKOUGNWE.svg"-->

2
paper.css
View file

@ -6,7 +6,7 @@ html {
background-color: #fafafa;
}
body {
margin: 0 auto;
margin: 0 50px 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;