[ts][webcomponents] followAttachmentAttach to followVisibility.

spine-ts/spine-webcomponents/example/tutorial.html

@@ -1423,7 +1423,7 @@ function toggleSpinner(element) {
             <div class="split-left" style="width: 80%; box-sizing: border-box; min-height: 0;">
                 It's very easy to display your different skins and animations. Simply create a table and use the <code>skin</code> and <code>animation</code> attributes.
                 <br>
-                <code>skin</code> accepts an comma separated list of skin names. The skins will be combined in a new one, from the first to the last. If multiple skins set the same slot, the latest in the list will be used.
+                <code>skin</code> accepts a comma separated list of skin names. The skins will be combined in a new one, from the first to the last. If multiple skins set the same slot, the latest in the list will be used.
             </div>
 
             <div class="skin-grid">
@@ -3276,7 +3276,7 @@ const darkPicker = document.getElementById("dark-picker");
                                 <li><code>followOpacity</code>: the element opacity is connected to the slot alpha</li>
                                 <li><code>followScale</code>: the element scale is connected to the slot scale</li>
                                 <li><code>followRotation</code>: the element rotation is connected to the slot rotation</li>
-                                <li><code>followAttachmentAttach</code>: the element is shown/hidden depending if the slot contains an attachment or not</li>
+                                <li><code>followVisibility</code>: the element is shown/hidden depending if the slot contains an attachment or not</li>
                                 <li><code>hideAttachment</code>: the slot attachment is hidden as if the element replaced the attachment</li>
                             </ul>
                         </li>
@@ -3301,10 +3301,10 @@ const darkPicker = document.getElementById("dark-picker");
         <script>
             (async () => {
                 const widget = await spine.getSpineWidget("potty").whenReady;
-                widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followAttachmentAttach: false, hideAttachment: true });
+                widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followVisibility: false, hideAttachment: true });
             })();
         </script>
 
@@ -3328,10 +3328,10 @@ const darkPicker = document.getElementById("dark-picker");
 
 (async () => {
     const widget = await spine.getSpineWidget("potty").whenReady;
-    widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followAttachmentAttach: false, hideAttachment: true });
+    widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-green", document.getElementById("rain/rain-green"), { followVisibility: false, hideAttachment: true });
 })();`);</script>
             </code></pre>
         </div>
@@ -3375,10 +3375,10 @@ const darkPicker = document.getElementById("dark-picker");
         <script>
             (async () => {
                 const widget = await spine.getSpineWidget("potty2").whenReady;
-                widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followAttachmentAttach: false, hideAttachment: true });
-                widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followAttachmentAttach: false, hideAttachment: true });
+                widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
             })();
         </script>
 
@@ -3402,10 +3402,10 @@ const darkPicker = document.getElementById("dark-picker");
 
 (async () => {
     const widget = await spine.getSpineWidget("potty2").whenReady;
-    widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followAttachmentAttach: false, hideAttachment: true });
-    widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followAttachmentAttach: false, hideAttachment: true });
+    widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
 })();`);</script>
             </code></pre>
         </div>

spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -653,7 +653,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 				if (widget.isOffScreenAndWasMoved() || !widget.skeleton) continue;
 
 				for (const boneFollower of widget.boneFollowerList) {
-					const { slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale } = boneFollower;
+					const { slot, bone, element, followVisibility, followRotation, followOpacity, followScale } = boneFollower;
 					const { worldX, worldY } = widget;
 					this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY);
 
@@ -674,7 +674,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 					element.style.display = ""
 
-					if (followAttachmentAttach && !slot.attachment) {
+					if (followVisibility && !slot.attachment) {
 						element.style.opacity = "0";
 					} else if (followOpacity) {
 						element.style.opacity = `${slot.color.a}`;

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -1016,7 +1016,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 				skeleton?.setSkinByName(skin[0]);
 			} else {
 				const customSkin = new Skin("custom");
-				for (const s of skin)  customSkin.addSkin(skeleton?.data.findSkin(s) as Skin);
+				for (const s of skin) customSkin.addSkin(skeleton?.data.findSkin(s) as Skin);
 				skeleton?.setSkin(customSkin);
 			}
 
@@ -1231,10 +1231,10 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	* Other utilities
 	*/
 
-	public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followAttachmentAttach: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = [];
-	public followSlot (slotName: string | Slot, element: HTMLElement, options: { followAttachmentAttach?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) {
+	public boneFollowerList: Array<{ slot: Slot, bone: Bone, element: HTMLElement, followVisibility: boolean, followRotation: boolean, followOpacity: boolean, followScale: boolean, hideAttachment: boolean }> = [];
+	public followSlot (slotName: string | Slot, element: HTMLElement, options: { followVisibility?: boolean, followRotation?: boolean, followOpacity?: boolean, followScale?: boolean, hideAttachment?: boolean } = {}) {
 		const {
-			followAttachmentAttach = false,
+			followVisibility = false,
 			followRotation = true,
 			followOpacity = true,
 			followScale = true,
@@ -1253,7 +1253,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 		element.style.left = '0px';
 		element.style.display = 'none';
 
-		this.boneFollowerList.push({ slot, bone: slot.bone, element, followAttachmentAttach, followRotation, followOpacity, followScale, hideAttachment });
+		this.boneFollowerList.push({ slot, bone: slot.bone, element, followVisibility, followRotation, followOpacity, followScale, hideAttachment });
 		this.overlay.addSlotFollowerElement(element);
 	}
 	public unfollowSlot (element: HTMLElement): HTMLElement | undefined {