Skip to content

Fix/object-hierarchy #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexZ005 merged 4 commits into from
Dec 22, 2024
Merged

Fix/object-hierarchy #21

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f8ef8d
display hierarchy for Object3D and Mesh types
AlexZ005 Dec 22, 2024
9b40a48
[fix] conditionally render expand/collapse icons based on children pr…
AlexZ005 Dec 22, 2024
3de9e73
[feat] object icons for collapsible
AlexZ005 Dec 22, 2024
d23fc83
[fix] settings for expandable items
AlexZ005 Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 18 additions & 80 deletions src/components/menu/Objects.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,26 @@
</script>


{#if element.type === 'Group'}

<p id={element.uuid}>
<ListgroupItem itemDefaultClass="flex items-center text-overflow-ellipsis w-full overflow-hidden inline-flex" >
{#if !isExpanded}
<div class="inline-flex text-overflow-ellipsis w-full overflow-hidden items-center grid grid-cols-12">
<div class="flex inline-flex justify-start items-center col-span-9" onclick={() => { select(element.uuid); }}>
<i class="pl-2 fa-regular fa-plus pr-2" title="Expand group" onclick={() => isExpanded = !isExpanded}></i>
{#if !isExpanded && element.children.length > 0}
<i class="fa-regular fa-plus pr-2 pl-2" title="Expand group" onclick={() => isExpanded = !isExpanded}></i>
{:else if element.children.length > 0}
<i class="fa-solid fa-minus pr-2 pl-2" title="Collapse group" onclick={() => isExpanded = !isExpanded}></i>
{:else}
<i class="fa-solid fa-minus pr-2 pl-2" style="opacity: 0"></i>
{/if}

{#if element.type.endsWith('Group')}
<i class="fa-solid fa-layer-group pr-2" title="Group"></i>
{:else if element.type.endsWith('Light')}
<i class="fa-regular fa-sun pr-2" title="Light"></i>
{:else}
<i class="fa-solid fa-cube pr-2" title="Object"></i>
{/if}
<p class={`overflow-hidden whitespace-nowrap ${$selectedObject && $selectedObject.uuid === element.uuid ? 'text-blue-200' : ''}`}>{element.name}</p>
</div>
{#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)}
Expand All @@ -134,89 +147,14 @@
</div>
{/if}
</div>
{:else}
<div class="pl-2 container flex inline-flex justify-start items-center" onclick={() => { select(element.uuid); }}>
<i class="fa-solid fa-minus pr-2" title="Collapse group" onclick={() => isExpanded = !isExpanded}></i>
<p class={`overflow-hidden whitespace-nowrap ${$selectedObject && $selectedObject.uuid === element.uuid ? 'text-blue-200' : ''}`}>{element.name}</p>
</div>
{/if}
</ListgroupItem>
</p>

{#if isExpanded}
{#each element.children as item}
<p class="pl-8">
{#if item.type === 'Group'}
<svelte:self element={item} key={item.uuid} />
{:else}
<p id={item.uuid}>
<ListgroupItem itemDefaultClass="flex items-center text-overflow-ellipsis w-full overflow-hidden inline-flex" >
<div class="inline-flex text-overflow-ellipsis w-full overflow-hidden items-center grid grid-cols-12">
<div class="flex inline-flex justify-start items-center col-span-9" onclick={() => { select(item.uuid); }}>
{#if item.type.endsWith('Light')}
<i class="pl-2 fa-regular fa-sun pr-2" title="Light"></i>
{:else}
<i class="pl-2 fa-solid fa-cube pr-2" title="Object"></i>
{/if}
<p class={`overflow-hidden whitespace-nowrap ${$selectedObject && $selectedObject.uuid === item.uuid ? 'text-blue-200' : ''}`}>{item.name}</p>
</div>

{#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === item.uuid)}
<div class="flex inline-flex justify-end col-span-3">
<li class="configure inline-flex">🔒</li>
<p class="configure grayscale">⚙️</p>
<p class="delete grayscale">✖️</p>
</div>
<Tooltip placement='left' arrow={false}>Locked by {$lockedObjects.find((lockedUuid) => lockedUuid[1] === item.uuid)[0]}</Tooltip>
{:else}
<div class="flex inline-flex justify-end col-span-3">
<!-- <li class="configure inline-flex">🔓</li> -->
<p class="configure hover:brightness-200" onclick={() => configure(item)}>⚙️</p>
<p class="delete hover:brightness-200" onclick={() => deleteItem(item)}>✖️</p>
</div>
{/if}
</div>
</ListgroupItem>
</p>
{/if}

<p class="pl-6">
<svelte:self element={item} key={item.uuid} />
</p>
{/each}
{/if}

{:else}


<p class="pl-8">
<p id={element.uuid} onclick={() => { select(element.uuid); }}>
<ListgroupItem itemDefaultClass="flex items-center text-overflow-ellipsis w-full overflow-hidden inline-flex" >
<div class="inline-flex text-overflow-ellipsis w-full overflow-hidden items-center grid grid-cols-12">
<div class="flex inline-flex justify-start items-center col-span-9">
{#if element.type.endsWith('Light')}
<i class="pl-2 fa-regular fa-sun pr-2" title="Light"></i>
{:else}
<i class="pl-2 fa-solid fa-cube pr-2" title="Object"></i>
{/if}
<p class={`overflow-hidden whitespace-nowrap ${$selectedObject && $selectedObject.uuid === element.uuid ? 'text-blue-200' : ''}`}>{element.name}</p>
</div>

{#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)}
<div class="flex inline-flex justify-end col-span-3">
<li class="configure inline-flex">🔒</li>
<p class="configure grayscale">⚙️</p>
<p class="delete grayscale">✖️</p>
</div>
<Tooltip placement='left' arrow={false}>Locked by {$lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)[0]}</Tooltip>
{:else}
<div class="flex inline-flex justify-end col-span-3">
<!-- <li class="configure inline-flex">🔓</li> -->
<p class="configure hover:brightness-200" onclick={() => configure(element)}>⚙️</p>
<p class="delete hover:brightness-200" onclick={() => deleteItem(element)}>✖️</p>
</div>
{/if}
</div>
</ListgroupItem>
</p>


{/if}