Switch to svelte-feather-icons + BasicObjectArray rework

package.json

@@ -20,6 +20,7 @@
 		"sass": "^1.54.0",
 		"svelte": "^4.2.15",
 		"svelte-check": "^3.4.3",
+		"svelte-feather-icons": "^4.1.0",
 		"svelte-preprocess": "^5.0.4",
 		"tslib": "^2.4.0",
 		"typesafe-event-emitter": "^1.1.0",

src/app.html

@@ -4,8 +4,6 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-		<script src="https://unpkg.com/feather-icons"></script>
 
 		%sveltekit.head%
 	</head>

src/elf/fileTypes.ts

@@ -662,7 +662,7 @@ function generateTypedefFor(dataType: DataType, typedef: TypeDefinition): FileTy
 
 		instantiate(): object {
 			let result = {}
-			result[VALUE_UUID] = ValueUuid()
+			result[VALUE_UUID] = ValueUuid('instantiate()')
 			result[DATA_TYPE] = dataType
 
 			for (const [fieldName, type] of Object.entries(fieldTypes)) {

src/elf/parser.ts

@@ -281,6 +281,8 @@ export default function parseElfBinary(dataType: DataType, arrayBuffer: ArrayBuf
 			let obj = objFromReader(reader, dataType) as Instance<T>
 			applyRelocations(obj, offset, relocations, symbolTable, stringSection, dataType, allowSkippingRelocations)
 
+			obj[VALUE_UUID] = ValueUuid(DataType[dataType] + " " + obj[FILE_TYPES[dataType].identifyingField])
+
 			result.push(obj)
 		}
 
@@ -290,9 +292,9 @@ export default function parseElfBinary(dataType: DataType, arrayBuffer: ArrayBuf
 }
 
 function objFromReader(reader: BinaryReader, dataType: DataType): UuidTagged {
-	let result = {
-		[VALUE_UUID]: ValueUuid(),
-		[DATA_TYPE]: dataType,
+	// @ts-expect-error
+	let result: UuidTagged = {
+		[DATA_TYPE]: dataType
 	}
 
 	for (const [fieldName, fieldType] of Object.entries(FILE_TYPES[dataType].typedef)) {

src/elf/util.ts

@@ -55,7 +55,7 @@ export function duplicateObjectInBinary<T extends object>(binary: ElfBinary, dat
 		let clone = {...obj}
 		Object.setPrototypeOf(clone, Object.getPrototypeOf(obj))
 
-		clone[VALUE_UUID] = ValueUuid()
+		clone[VALUE_UUID] = ValueUuid(`cloned ${DataType[dataType]} ${clone[FILE_TYPES[dataType].identifyingField]}`)
 
 		if (incrementId && FILE_TYPES[dataType].identifyingField == "id") {
 			// @ts-ignore

src/elf/valueIdentifier.ts

@@ -10,6 +10,6 @@ export interface UuidTagged {
 	[DATA_TYPE]: DataType
 }
 
-export function ValueUuid() {
-	return Symbol()
+export function ValueUuid(label: string) {
+	return Symbol(`UUID: ${label}`)
 }

src/lib/editor/fileEditor/cardListEditor/BasicObjectArray.svelte

@@ -12,23 +12,29 @@
     import { toReadableString } from "$lib/util";
     import { showModal } from "$lib/modal/modal";
     import FieldOptionAlert from "$lib/modals/FieldOptionAlert.svelte";
-
+	
+	const INITIAL_COUNT_SHOWN = 60
+	
 	export let binary: ElfBinary
 	export let objects: UuidTagged[]
-	export let referenceObjects: UuidTagged[]
 	export let dataType: DataType
+	export let indices: Set<number> = undefined
 	export let highlightedFields: WeakMap<object, string[]> = undefined
 	
 	let objectEditors: ObjectEditor[] = []
 	let areEditorsOpen: boolean[] = []
-	let countShown = 60
+	let countShown = INITIAL_COUNT_SHOWN
 	
 	let debouncer: Debouncer
 	
-	$: objectSlice = objects.slice(0, countShown)
+	$: objectSlice = indices
+		? [...indices].slice(0, countShown).map(i => objects[i])
+		: objects.slice(0, countShown)
 	
 	$: if (objects && debouncer) debouncer.reset()
 	
+	$: if (indices) countShown = INITIAL_COUNT_SHOWN
+	
 	onMount(() => {
 		let isDebug = !!parseInt(PUBLIC_DEBUG)
 		
@@ -45,7 +51,6 @@
 		}
 	})
 	
-	
 	export function scrollIntoView(object?: UuidTagged) {
 		let index = object ? objects.indexOf(object) : objects.length - 1
 		
@@ -93,7 +98,7 @@
 	
 	function titleOf(obj: any) {
 		let { displayName, identifyingField } = FILE_TYPES[dataType]
-		let index = referenceObjects.indexOf(obj)
+		let index = objects.indexOf(obj)
 		return `${displayName} ${index}: ${obj[identifyingField]}`
 	}
 	
@@ -104,7 +109,7 @@
 	}
 </script>
 
-<Debouncer bind:this={debouncer} requiredDelaySeconds={2} autoStart={true} on:finished={() => countShown += 80} />
+<Debouncer bind:this={debouncer} requiredDelaySeconds={1} autoStart={true} on:finished={() => countShown += 80} />
 
 {#each objectSlice as obj, i (obj[VALUE_UUID])}
 	<ObjectEditor bind:this={objectEditors[i]} bind:obj={obj} bind:open={areEditorsOpen[i]}

src/lib/editor/fileEditor/cardListEditor/FileToolbar.svelte

@@ -3,6 +3,7 @@
     import SearchBar from "../../search/SearchBar.svelte";
     import type { SearchIndex } from "../../search/searchIndex";
     import { nonnativeButton } from "$lib/nonnativeButton";
+    import { PlusIcon, XIcon } from "svelte-feather-icons";
 	
 	export let searchIndex: SearchIndex
 	export let searchTerm: string = ""
@@ -13,11 +14,11 @@
 
 <div class="toolbar">
 	<div class="card btn" use:nonnativeButton={() => dispatch('add')}>
-		<div class="icon"><i data-feather="plus"></i></div>
+		<div class="icon"><PlusIcon /></div>
 		<span>Add new Object</span>
 	</div>
 	<div class="card btn" use:nonnativeButton={() => dispatch('clear')}>
-		<div class="icon"><i data-feather="x"></i></div>
+		<div class="icon"><XIcon /></div>
 		Delete all Objects
 	</div>
 	<SearchBar index={searchIndex} bind:searchTerm={searchTerm} bind:results={searchResults} />

src/lib/editor/fileEditor/cardListEditor/InnerIndexPageEditor.svelte

@@ -5,6 +5,7 @@
     import { nonnativeButton } from "$lib/nonnativeButton";
     import { OpenWindowEvent } from "$lib/editor/events";
     import type { ElfBinary } from "paper-mario-elfs/elfBinary";
+    import { ExternalLinkIcon } from "svelte-feather-icons";
 
 	const dispatch = createEventDispatcher()
 	
@@ -22,11 +23,6 @@
 		editorElements.forEach(editor => editor.open = true)
 	}
 	
-	onMount(() => {
-		// @ts-ignore
-		feather.replace()
-	})
-	
 	$: items = Object.entries(dataTypeExtensions(DataTypeExtension.ComplexEditorCategory, dataType))
 </script>
 
@@ -39,7 +35,7 @@
 				dataType,
 			}))
 		}}>
-			<i data-feather="external-link" class="icon-link"></i>
+			<ExternalLinkIcon class="icon-link" />
 			<div style="user-select: none">
 				{label ?? name}
 			</div>
@@ -53,7 +49,7 @@
 		max-width: 56rem;
 		height: 20px;
 		
-		.icon-link {
+		:global(.icon-link) {
 			float: left;
 			margin-top: -2px;
 			margin-right: 6px;

src/lib/editor/fileEditor/cardListEditor/LinearEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterUpdate } from "svelte";
 	import type { ElfBinary } from "paper-mario-elfs/elfBinary";
-	import type { DataType } from "paper-mario-elfs/dataType";
+	import { DataType } from "paper-mario-elfs/dataType";
 	import { FILE_TYPES } from "paper-mario-elfs/fileTypes";
 	import { Symbol } from "paper-mario-elfs/types";
 	import type { SearchIndex } from "$lib/editor/search/searchIndex";
@@ -22,27 +22,14 @@
 	let addingNewObject = false
 	let searchTerm = ""
 	let searchResults: SearchIndex
-	let searchResultObjects: UuidTagged[]
-	
-	let searchResultObjectBuffer: UuidTagged[]
 	
 	$: objects = overrideObjects ?? binary.data[FILE_TYPES[dataType].dataDivision]
 	$: index = createIndex(objects)
 	
 	$: if (tabVisible) initialized = true
 	
-	$: highlightedFields = searchResults && new WeakMap(
-		searchResultObjects.map(obj => [
-			obj, 
-			searchResults.filter(result => result.obj == obj).map(result => result.field),
-		]))
-	
-	$: if (searchResults) {
-		searchResultObjects = []
-		searchResultObjectBuffer = [...new Set(searchResults.map(result => result.obj))]
-	} else {
-		searchResultObjects = null
-	}
+	$: highlightedFields = searchResults && getHighlightedFields(searchResults)
+	
 	
 	export function collapseAll() {
 		arrayComponent.collapseAll()
@@ -55,11 +42,13 @@
 	function createIndex(objects: UuidTagged[]) {
 		let index: SearchIndex = []
 		
-		for (const obj of objects) {
+		for (let i = 0; i < objects.length; i++) {
+			const obj = objects[i]
+			
 			for (const key in obj) {
 				if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] == 'string') {
 					index.push({
-						obj,
+						index: i,
 						field: key,
 						value: obj[key],
 					})
@@ -71,19 +60,29 @@
 	}
 	
 	afterUpdate(() => {
-		// @ts-ignore
-		feather.replace()
-		
 		if (addingNewObject) {
 			addingNewObject = false
 			arrayComponent.scrollIntoView(objects[objects.length - 1])
 		}
+	})
+	
+	function getHighlightedFields(searchResults: SearchIndex) {
+		let highlightedFields: WeakMap<UuidTagged, string[]> = new WeakMap()
 		
-		if (searchResultObjectBuffer) {
-			searchResultObjects = searchResultObjectBuffer
-			searchResultObjectBuffer = null
+		for (const index of new Set(searchResults.map(result => result.index))) {
+			let fields: string[] = []
+			
+			for (const result of searchResults) {
+				if (result.index == index) {
+					fields.push(result.field)
+				}
+			}
+			
+			highlightedFields.set(objects[index], fields)
 		}
-	})
+		
+		return highlightedFields
+	}
 	
 	function addObject() {
 		objects.push(createObject(dataType))
@@ -155,14 +154,11 @@
 
 {#if initialized}
 <div class="editor">
-	<!-- TODO: if objects contain symbol references, it's important that there is always one object left -->
-	<!-- Ask for confirmation in this case when pressing Delete All -->
-	<!-- TODO: do the same on delete button in object editors -->
 	<FileToolbar on:add={addObject} on:clear={deleteAll} searchIndex={index} bind:searchTerm={searchTerm} bind:searchResults={searchResults} />
 
 	<div class="listing" style="--content-height: {objects?.length * 60 + 80}px;">
 		{#if searchResults}
-			<div class="resultlabel">Showing {searchResultObjects.length} results
+			<div class="resultlabel">Showing {searchResults.length} results
 				(out of {objects.length} objects):</div>
 		{/if}
 
@@ -171,8 +167,8 @@
 		{/if}
 
 		<BasicObjectArray on:open on:createContent={e => handleCreateContent(e.detail)}
-			bind:this={arrayComponent} binary={binary} dataType={dataType} referenceObjects={objects}
-			objects={searchResults ? searchResultObjects : objects} highlightedFields={highlightedFields} />
+			bind:this={arrayComponent} bind:objects={objects} binary={binary} dataType={dataType}
+			highlightedFields={highlightedFields} indices={searchResults && new Set(searchResults.map(result => result.index))} />
 	</div>
 
 	<!-- TODO: use a dedicated special elf editor instead -->