From 721295f6850899d9d812ac489bcf8214cd884bed Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 14 Aug 2020 10:50:55 +0100 Subject: [PATCH] commented on use of store within a component --- .../userInterface/ComponentsHierarchy.svelte | 5 +++++ .../ComponentsHierarchyChildren.svelte | 17 +++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index beb31b084b..c4a7132af5 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -11,6 +11,11 @@ export let screens = [] + /* + Using a store here seems odd.... + have a look in the code file to find out why. + I have commented the dragDropStore parameter + */ const dragDropStore = writable({}) let confirmDeleteDialog diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index c4da59144d..4aff08cf9a 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -16,6 +16,23 @@ export let currentComponent export let onSelect = () => {} export let level = 0 + + /* + "dragDropStore" is a svelte store. + This component is recursive... a tree. + Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree. + + e.g. Say i have the structure + - Heading 1 + - Container + - Heading 2 + - Heading 3 + - Heading 4 + + 1. When I dragover "Heading 1", a placeholder drop-slot appears below it + 2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child ) + 3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container. + */ export let dragDropStore let dropUnderComponent