From a254fabaeff7b6aa76dc659d6a0c03153376d703 Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Thu, 26 Sep 2024 16:09:27 +0200
Subject: [PATCH] Cleaned webcomponent example.

---
 .../{canvas9.html => webcomponent.html}       | 230 +++++++-----------
 1 file changed, 92 insertions(+), 138 deletions(-)
 rename spine-ts/spine-webgl/example/{canvas9.html => webcomponent.html} (94%)

diff --git a/spine-ts/spine-webgl/example/canvas9.html b/spine-ts/spine-webgl/example/webcomponent.html
similarity index 94%
rename from spine-ts/spine-webgl/example/canvas9.html
rename to spine-ts/spine-webgl/example/webcomponent.html
index bff8e1d3e..913ed9935 100644
--- a/spine-ts/spine-webgl/example/canvas9.html
+++ b/spine-ts/spine-webgl/example/webcomponent.html
@@ -16,8 +16,6 @@
             font-family: Arial, sans-serif;
         }
         .section {
-            /* height: 100lvh; */
-            /* height: 800px; */
             display: flex;
             justify-content: center;
             align-items: center;
@@ -132,11 +130,11 @@
 
     <!--
     /////////////////////
-    // start section 1 //
+    // start section 0 //
     /////////////////////
     -->
 
-    <div id="section1" class="section vertical-split">
+    <div id="section0" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -173,14 +171,13 @@
 
     <!--
     /////////////////////
-    // end section 1 //
+    // end section 0 //
     /////////////////////
     -->
 
-
     <!--
     /////////////////////
-    // start section 2 //
+    // start section 1 //
     /////////////////////
     -->
 
@@ -254,21 +251,17 @@
 
     <!--
     /////////////////////
-    // end section 2 //
+    // end section 1 //
     /////////////////////
     -->
 
-
-
-
-
     <!--
     /////////////////////
-    // start section 1 //
+    // start section 2 //
     /////////////////////
     -->
 
-    <div id="section1" class="section vertical-split">
+    <div id="section2" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -296,7 +289,6 @@
     animation="walk"
     height="200"
     width="200"
-    fit="fill"
 ></spine-widget>`)
                 </script>
             </code></pre>
@@ -305,25 +297,17 @@
 
     <!--
     /////////////////////
-    // end section 1 //
+    // end section 2 //
     /////////////////////
     -->
 
-
-
-
-
-
-
-
-
     <!--
     /////////////////////
     // start section 3 //
     /////////////////////
     -->
 
-    <div id="section2" class="section vertical-split">
+    <div id="section3" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -371,11 +355,11 @@
 
     <!--
     /////////////////////
-    // start section 3 //
+    // start section 4 //
     /////////////////////
     -->
 
-    <div id="section3" class="section vertical-split">
+    <div id="section4" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -410,17 +394,17 @@
 
     <!--
     /////////////////////
-    // end section 3 //
+    // end section 4 //
     /////////////////////
     -->
 
     <!--
     /////////////////////
-    // start section 4 //
+    // start section 5 //
     /////////////////////
     -->
 
-    <div id="section4" class="section vertical-split">
+    <div id="section5" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -488,7 +472,7 @@
 
     <!--
     /////////////////////
-    // end section 4 //
+    // end section 5 //
     /////////////////////
     -->
 
@@ -533,7 +517,6 @@
     /////////////////////
     -->
 
-
     <!--
     /////////////////////
     // start section 7 //
@@ -546,12 +529,12 @@
             <div class="split-left">
                 You can view the skeleton world origin (green), the root bone position (red), and the bounds rectangle and center (blue) by setting <code>debug</code> to <code>true</code>.
             </div>
-            <div class="split-right" id="section7-element">
+            <div class="split-right">
                 <spine-widget
                     atlas="assets/sack-pma.atlas"
                     skeleton="assets/sack-pro.skel"
                     animation="cape-follow-example"
-                    debug="true"
+                    debug
                 ></spine-widget>
             </div>
         </div>
@@ -563,7 +546,7 @@
     atlas="assets/sack-pma.atlas"
     skeleton="assets/sack-pro.skel"
     animation="cape-follow-example"
-    debug="true"
+    debug
 ></spine-widget>`
 );</script>
             </code></pre>
@@ -581,10 +564,10 @@
 
     <!--
     /////////////////////
-    // start section 7 //
+    // start section 8 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section8" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -646,18 +629,16 @@
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 8 //
     /////////////////////
     -->
 
-
-
     <!--
     /////////////////////
-    // start section 7 //
+    // start section 9 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section9" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -886,19 +867,16 @@
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 9 //
     /////////////////////
     -->
 
-
-
-
     <!--
     /////////////////////
-    // start section 7 //
+    // start section 10 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section10" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -1152,17 +1130,16 @@
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 10 //
     /////////////////////
     -->
 
-
     <!--
     /////////////////////
-    // start section 7 //
+    // start section 11 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section11" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -1275,19 +1252,16 @@
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 11 //
     /////////////////////
     -->
 
-
-
-
    <!--
     /////////////////////
-    // start section 7 //
+    // start section 12 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section12" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -1371,18 +1345,16 @@
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 12 //
     /////////////////////
     -->
 
-
-
    <!--
     /////////////////////
-    // start section 7 //
+    // start section 13 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section13" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
@@ -1438,27 +1410,46 @@
                 <script>
                 escapeHTMLandInject(`
 <spine-widget
-    atlas="assets/spineboy-pma.atlas"
-    skeleton="assets/spineboy-pro.skel"
-    animation="walk"
-    spinner="true"
-></spine-widget>`)
+    identifier="dragon"
+    atlas="assets/dragon-pma.atlas"
+    skeleton="assets/dragon-ess.skel"
+    animation="flying"
+    pages=""
+></spine-widget>
+<input type="button" value="Load page 0" onclick="loadPageDragon(0)">
+<input type="button" value="Load page 1" onclick="loadPageDragon(1)">
+<input type="button" value="Load page 2" onclick="loadPageDragon(2)">
+<input type="button" value="Load page 3" onclick="loadPageDragon(3)">
+<input type="button" value="Load page 4" onclick="loadPageDragon(4)">
+
+...
+
+const dragon = spine.getSpineWidget("dragon");
+function loadPageDragon(pageIndex) {
+    if (!dragon.pages) {
+        dragon.pages = [];
+    }
+    if (!dragon.pages.includes(pageIndex)) {
+        dragon.pages.push(pageIndex);
+        dragon.loadTexturesInPagesAttribute(dragon.textureAtlas);
+    }
+}`)
                 </script>
             </code></pre>
         </div>
     </div>
     <!--
     /////////////////////
-    // end section 7 //
+    // end section 13 //
     /////////////////////
     -->
 
     <!--
     /////////////////////
-    // start section 8 //
+    // start section 14 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section14" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -1531,6 +1522,7 @@
     animation="sneak"
     offscreen="pose"
 ></spine-widget>
+
 ...
 
 const stretchyman = spine.getSpineWidget("stretchyman");
@@ -1551,16 +1543,16 @@
 
     <!--
     /////////////////////
-    // end section 8 //
+    // end section 14 //
     /////////////////////
     -->
 
     <!--
     /////////////////////
-    // start section 8 //
+    // start section 15 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section15" class="section vertical-split">
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
@@ -1656,20 +1648,24 @@
 
     <!--
     /////////////////////
-    // end section 8 //
+    // end section 15 //
     /////////////////////
     -->
 
     <!--
     /////////////////////
-    // start section 8 //
+    // start section 16 //
     /////////////////////
     -->
-    <div id="section1" class="section vertical-split">
+    <div id="section16" class="section vertical-split">
+
+        <div class="split-left" style="width: 80%; box-sizing: border-box;">
+            More examples for <code>clip</code> attribute.
+        </div>
 
         <div class="split" style="width: 100%; flex-direction: column;">
 
-            <div class="split-top split">
+            <div class="split-top split" style="align-items: stretch">
                 <div class="split-left">
                     <spine-widget
                         atlas="assets/spineboy-pma.atlas"
@@ -1677,7 +1673,7 @@
                         animation="walk"
                         scale="3"
                         fit="none"
-                        clip="true"
+                        clip
                     ></spine-widget>
                 </div>
                 <div class="split-right">
@@ -1687,7 +1683,7 @@
                         animation="walk"
                         scale="1.5"
                         fit="none"
-                        clip="true"
+                        clip
                     ></spine-widget>
                 </div>
                 <div class="split-right">
@@ -1697,7 +1693,7 @@
                         animation="walk"
                         scale="1"
                         fit="none"
-                        clip="true"
+                        clip
                     ></spine-widget>
                 </div>
                 <div class="split-right">
@@ -1707,7 +1703,7 @@
                         animation="playing-in-the-rain"
                         scale="0.5"
                         fit="none"
-                        clip="true"
+                        clip
                     ></spine-widget>
                 </div>
                 <div class="split-right">
@@ -1715,9 +1711,8 @@
                         identifier="celeste"
                         atlas="assets/celestial-circus-pma.atlas"
                         skeleton="assets/celestial-circus-pro.skel"
-                        animation="wings-and-feet"
-                        clip="true"
-                        draggable="true"
+                        clip
+                        draggable
                     ></spine-widget>
 
                     <script>
@@ -1744,7 +1739,7 @@
         animation="walk"
         scale="3"
         fit="none"
-        clip="true"
+        clip
     ></spine-widget>
 </div>
 <div class="split-right">
@@ -1754,7 +1749,7 @@
         animation="walk"
         scale="1.5"
         fit="none"
-        clip="true"
+        clip
     ></spine-widget>
 </div>
 <div class="split-right">
@@ -1764,7 +1759,7 @@
         animation="walk"
         scale="1"
         fit="none"
-        clip="true"
+        clip
     ></spine-widget>
 </div>
 <div class="split-right">
@@ -1774,7 +1769,7 @@
         animation="playing-in-the-rain"
         scale="0.5"
         fit="none"
-        clip="true"
+        clip
     ></spine-widget>
 </div>
 <div class="split-right">
@@ -1783,8 +1778,8 @@
         atlas="assets/celestial-circus-pma.atlas"
         skeleton="assets/celestial-circus-pro.skel"
         animation="wings-and-feet"
-        clip="true"
-        draggable="true"
+        clip
+        draggable
     ></spine-widget>
 </div>
 
@@ -1802,7 +1797,7 @@
 
     <!--
     /////////////////////
-    // end section 8 //
+    // end section 16 //
     /////////////////////
     -->
 
@@ -1811,17 +1806,17 @@
 
     <!--
     /////////////////////
-    // start section 8 //
+    // start section 17 //
     /////////////////////
     -->
 
-    <div id="section8" class="section vertical-split">
+    <div id="section17" class="section vertical-split">
 
         <div class="split-top split">
             <div class="split-left">
                 As a bonus item, you can move you skeleton around just by setting the <code>draggable</code> property to <code>true</code>.
             </div>
-            <div class="split-right" id="section8-element">
+            <div class="split-right">
                 <spine-widget
                     atlas="assets/celestial-circus-pma.atlas"
                     skeleton="assets/celestial-circus-pro.skel"
@@ -1831,7 +1826,6 @@
             </div>
         </div>
 
-
         <div class="split-bottom">
             <pre><code id="code-display">
                 <script>escapeHTMLandInject(`
@@ -1849,48 +1843,14 @@
 
     <!--
     /////////////////////
-    // end section 8 //
+    // end section 17 //
     /////////////////////
     -->
 
 
-    <!-- <div class="navigation">
-        <button class="nav-btn" onclick="scrollToSection('section1')">1</button>
-        <button class="nav-btn" onclick="scrollToSection('section2')">2</button>
-        <button class="nav-btn" onclick="scrollToSection('section3')">3</button>
-        <button class="nav-btn" onclick="scrollToSection('section4')">4</button>
-        <button class="nav-btn" onclick="scrollToSection('section5')">5</button>
-        <button class="nav-btn" onclick="scrollToSection('section6')">6</button>
-        <button class="nav-btn" onclick="scrollToSection('section7')">7</button>
-        <button class="nav-btn" onclick="scrollToSection('section8')">8</button>
-    </div> -->
-
-    <script>
-        // function scrollToSection(id) {
-        //     document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
-        // }
-
-        // let sections = document.querySelectorAll('.section');
-        // let currentSection = 0;
-
-        // window.addEventListener('wheel', (e) => {
-        //     if (e.deltaY > 0 && currentSection < sections.length - 1) {
-        //         currentSection++;
-        //     } else if (e.deltaY < 0 && currentSection > 0) {
-        //         currentSection--;
-        //     }
-        //     sections[currentSection].scrollIntoView({ behavior: 'smooth' });
-        // });
-    </script>
 
 <script>
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    // Drag utility
-
-
+    // Drag and resize utility for section 6
     function makeDraggable(element) {
         element.style["touch-action"] = "none";
 
@@ -1934,12 +1894,6 @@
         }
     }
 
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////
-    // Resize utility
-
     function makeResizable(element) {
         const resizeHandle = document.createElement('div');
         element.appendChild(resizeHandle);