From 501ce98e41c2dd4123aeb7da4f22cc23ab95e6a4 Mon Sep 17 00:00:00 2001 From: AlexZ005 Date: Sat, 23 Nov 2024 00:03:36 +0200 Subject: [PATCH 1/9] [ui] object icons and group properties --- src/components/menu/Controls.svelte | 22 ++++++++++++++++++++-- src/components/menu/Properties.svelte | 12 +++++++++--- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/menu/Controls.svelte b/src/components/menu/Controls.svelte index 87bdbfaa..7acab566 100644 --- a/src/components/menu/Controls.svelte +++ b/src/components/menu/Controls.svelte @@ -130,7 +130,16 @@
-
+
+ + {#if item.type === 'Group'} + + {:else if item.type.endsWith('Light')} + + {:else} + + {/if} +

{item.name}

@@ -150,7 +159,16 @@ {:else}
-
+
+ + {#if item.type === 'Group'} + + {:else if item.type.endsWith('Light')} + + {:else} + + {/if} + {#if $selectedObject.uuid === item.uuid}

{item.name}

{:else} diff --git a/src/components/menu/Properties.svelte b/src/components/menu/Properties.svelte index 070babb3..fa672718 100644 --- a/src/components/menu/Properties.svelte +++ b/src/components/menu/Properties.svelte @@ -73,9 +73,11 @@ function event(node) { }); window.addEventListener('mousemove', (e) => { - if (!$selectedObject.type.endsWith('Light')) { + if (!$selectedObject.type != 'Group') + if (!$selectedObject.type.endsWith('Light')) if ($selectedObject.material.type !== "MeshNormalMaterial") color = $selectedObject.material.color.getHexString() + if (moving) { $peers.send({ type: 'move', @@ -85,7 +87,7 @@ function event(node) { scale: $selectedObject.scale.toArray() }); } - } + }); window.addEventListener('mouseup', () => { @@ -152,7 +154,7 @@ function sendUpdate() { >
- Properties + {$selectedObject.type} Properties
{(propertiesClose.set(true)); st=0}} class="mb-4 dark:text-white" />
@@ -176,6 +178,7 @@ function sendUpdate() { UUID
+ {#if $selectedObject.type !== "Group"} Color @@ -208,6 +211,7 @@ function sendUpdate() { /> { $selectedObject.material.color.set('#'+color); }} /> + {/if} Transform

Position:

@@ -300,6 +304,7 @@ function sendUpdate() {
+ {#if $selectedObject.type !== "Group"} Material

@@ -331,6 +336,7 @@ function sendUpdate() { + {/if}

{:else} From 9fed51ee02cc0c478ee734fca18c44ff93b5f184 Mon Sep 17 00:00:00 2001 From: AlexZ005 Date: Mon, 25 Nov 2024 02:42:58 +0200 Subject: [PATCH 2/9] object group visualization with recursive contents --- src/components/menu/Controls.svelte | 166 ++-------------------------- src/components/menu/Objects.svelte | 156 ++++++++++++++++++++++++++ src/components/menu/Sidebar.svelte | 2 +- 3 files changed, 168 insertions(+), 156 deletions(-) create mode 100644 src/components/menu/Objects.svelte diff --git a/src/components/menu/Controls.svelte b/src/components/menu/Controls.svelte index 7acab566..27d3d430 100644 --- a/src/components/menu/Controls.svelte +++ b/src/components/menu/Controls.svelte @@ -1,16 +1,9 @@ + + +{#if element.type === 'Group'} +

{ select(element); }}> + + {#if !isExpanded} +

+
+ isExpanded = !isExpanded}> +

{element.name}

+
+ {#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)} +
+
  • 🔒
    • +

    ⚙️

    +

    ✖️

    +
    + Locked by {$lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)[0]} + {:else} +
    + +

    configure(element)}>⚙️

    +

    deleteItem(element)}>✖️

    +
    + {/if} +
    + {:else} + isExpanded = !isExpanded}> + {element.name}
    + {/if} + +

    + + {#if isExpanded} + {#each element.children as item} +

    + {#if item.type === 'Group'} + + {:else} +

    { select(item); }}> + + {#if item.type.endsWith('Light')} + +

    {item.name}

    + {:else} +
    +
    + +

    {item.name}

    +
    + {#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === item.uuid)} +
    +
  • 🔒
    • +

    ⚙️

    +

    ✖️

    +
    + Locked by {$lockedObjects.find((lockedUuid) => lockedUuid[1] === item.uuid)[0]} + {:else} +
    + +

    configure(item)}>⚙️

    +

    deleteItem(item)}>✖️

    +
    + {/if} +
    + {/if} + +

    + {/if} +

    + {/each} + {/if} +{:else if element.type.endsWith('Light')} +

    { select(element); }}> + + {element.name}
    +

    +{:else} +

    { select(element); }}> + + {element.name}
    +

    +{/if} \ No newline at end of file diff --git a/src/components/menu/Sidebar.svelte b/src/components/menu/Sidebar.svelte index b46a497a..3200a64d 100644 --- a/src/components/menu/Sidebar.svelte +++ b/src/components/menu/Sidebar.svelte @@ -34,7 +34,7 @@ dark:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700\ dark:focus:ring-blue-500 dark:focus:text-white bg-white'; - let open = $state(true); + let open = $state(false); let transitionParamsRight = { x: -320, From c24859b27ea261393b6e221841e189f8d0a4f5b5 Mon Sep 17 00:00:00 2001 From: AlexZ005 Date: Mon, 25 Nov 2024 23:29:38 +0200 Subject: [PATCH 3/9] [fix] show settings for first level objects --- src/components/menu/Objects.svelte | 54 ++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/menu/Objects.svelte b/src/components/menu/Objects.svelte index 97bc19ef..85b40949 100644 --- a/src/components/menu/Objects.svelte +++ b/src/components/menu/Objects.svelte @@ -112,15 +112,16 @@ {:else}

    { select(item); }}> - {#if item.type.endsWith('Light')} - -

    {item.name}

    - {:else}
    + {#if item.type.endsWith('Light')} + + {:else} -

    {item.name}

    + {/if} +

    {item.name}

    + {#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === item.uuid)}
  • 🔒
    • @@ -136,21 +137,46 @@
    {/if}
    - {/if}

    {/if}

    {/each} {/if} -{:else if element.type.endsWith('Light')} -

    { select(element); }}> - - {element.name}
    -

    + {:else} -

    { select(element); }}> - - {element.name}
    + + +

    +

    { select(element); }}> + +

    +
    + {#if element.type.endsWith('Light')} + + {:else} + + {/if} +

    {element.name}

    +
    + + {#if $lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)} +
    +
  • 🔒
    • +

    ⚙️

    +

    ✖️

    +
    + Locked by {$lockedObjects.find((lockedUuid) => lockedUuid[1] === element.uuid)[0]} + {:else} +
    + +

    configure(element)}>⚙️

    +

    deleteItem(element)}>✖️

    +
    + {/if} +
    +

    + + {/if} \ No newline at end of file From dca2c1c70b7429b5f84a0ce204b933aae9a18787 Mon Sep 17 00:00:00 2001 From: AlexZ005 Date: Tue, 26 Nov 2024 02:08:40 +0200 Subject: [PATCH 4/9] [ui] constraints and resize of list of objects --- src/app.html | 2 +- src/components/menu/Controls.svelte | 46 +++++++++++++---- src/components/menu/Objects.svelte | 80 ++++++++++++++--------------- 3 files changed, 77 insertions(+), 51 deletions(-) diff --git a/src/app.html b/src/app.html index 77a5ff52..8eb1b902 100644 --- a/src/app.html +++ b/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
    %sveltekit.body%
    diff --git a/src/components/menu/Controls.svelte b/src/components/menu/Controls.svelte index 27d3d430..dd9e92a2 100644 --- a/src/components/menu/Controls.svelte +++ b/src/components/menu/Controls.svelte @@ -4,6 +4,7 @@ import { chatHidden } from '../../stores/appStore.js'; import Objects from './Objects.svelte'; + let resizing = $state(false); let classActive = 'group inline-flex items-center justify-center hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300'; @@ -12,14 +13,28 @@ let left = 300; let top = 100; + let startX = 0; + let startY = 0; + let startWidth = -300; + let startHeight = -130; + node.style.position = 'absolute'; node.style.top = `${top}px`; node.style.left = `${left}px`; - node.style.cursor = 'move'; + // node.style.cursor = 'move'; node.style.userSelect = 'none'; + node.style.width = '500px'; + node.style.height = '250px'; - node.addEventListener('mousedown', () => { - moving = true; + node.addEventListener('mousedown', (e) => { + if (e.target.classList.contains('resize-handle')) { + resizing = true; + startX = 0; + startY = 0; + } + if (e.target.classList.contains('move-handle')) { + moving = true; + } }); window.addEventListener('mousemove', (e) => { @@ -28,11 +43,22 @@ top += e.movementY; node.style.top = `${top}px`; node.style.left = `${left}px`; + if (left < 0) left = 0; + if (top < 0) top = 0; + if (left > window.innerWidth - node.offsetWidth) left = window.innerWidth - node.offsetWidth; + if (top > window.innerHeight - node.offsetHeight) top = window.innerHeight - node.offsetHeight; + } + if (resizing) { + const width = startWidth + (e.clientX - startX); + const height = startHeight + (e.clientY - startY); + node.style.width = `${width}px`; + node.style.height = `${height}px`; } }); window.addEventListener('mouseup', () => { moving = false; + resizing = false; }); } @@ -93,12 +119,13 @@ >

    -