Fix variants panel missing button and scrolling

Author: SnaveSutit

exporters/datapackExporter/exporter/datapackGen/data.ts

@@ -17,6 +17,7 @@ export function getScoreboard() {
 export function getTags() {
 	return {
 		new: 'aj.new',
+		globalRigRoot: `aj.rig_root`,
 		rigEntity: `aj.${G.NAMESPACE}.rig_entity`,
 		rootEntity: `aj.${G.NAMESPACE}.root`,
 		boneEntity: `aj.${G.NAMESPACE}.bone`,

exporters/datapackExporter/exporter/datapackGen/namespaceFolderGen.ts

@@ -243,6 +243,7 @@ export function generateNamespaceFolder() {
 	summonTags.add(new NbtString(G.TAGS.new))
 	summonTags.add(new NbtString(G.TAGS.rigEntity))
 	summonTags.add(new NbtString(G.TAGS.rootEntity))
+	summonTags.add(new NbtString(G.TAGS.globalRigRoot))
 	summonNbt.set('Tags', summonTags)
 
 	const variantSummonFolder = functionsFolder

src/ui/ajVariantsPanel.ts

@@ -63,6 +63,7 @@ createBlockbenchMod(
 			name: translate('animated_java.panels.variants.name'),
 			icon: 'movie',
 			expand_button: true,
+			growable: true,
 			condition: () =>
 				Format === ajModelFormat && Mode.selected && Mode.selected.id === 'edit',
 			svelteComponent: SvelteComponent,

src/ui/components/variantsPanel.svelte

@@ -3,7 +3,7 @@
 	import { Variant, VariantsContainer } from '../../variants'
 	import * as events from '../../events'
 	import { ajModelFormat } from '../../modelFormat'
-	import { state, VARIANT_PANEL_MENU } from '../ajVariantsPanel'
+	import { VARIANT_PANEL_MENU, addVariantAction } from '../ajVariantsPanel'
 	import { onDestroy } from 'svelte'
 
 	let variantsContainer: VariantsContainer | undefined
@@ -48,6 +48,11 @@
 		<p>Loading...</p>
 	</div>
 {:then}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="tool" on:click={e => addVariantAction.click(e)}>
+		<div class="tooltip">Add Variant</div>
+		<i class="fa_big icon fa fa-plus-circle" />
+	</div>
 	<div class="container" on:contextmenu|stopPropagation={e => VARIANT_PANEL_MENU.open(e)}>
 		{#key update}
 			{#if variantsContainer}
@@ -66,11 +71,12 @@
 <style>
 	div.container {
 		display: flex;
+		flex-grow: 1;
 		flex-direction: column;
+		justify-content: flex-start;
 		background-color: var(--color-back);
 		align-items: stretch;
 		overflow-y: auto;
-		min-height: 10em;
-		max-height: 20em;
+		min-height: 8em;
 	}
 </style>

src/ui/util/sveltePanel.ts

@@ -25,7 +25,7 @@ export class SveltePanel extends Panel {
 
 		void pollPromise(() => document.querySelector(`#${mountId}`)).then(el => {
 			this.instance = new options.svelteComponent({
-				target: el.parentElement as any,
+				target: el as any,
 				props: options.svelteComponentProps,
 			})
 		})