demo draw lines and click to playback

assets/annotate.js

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

canvas.html

@@ -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(){
+            :host{
-                --override-color: gray
+                --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"-->

paper.css

@@ -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;