javascript - Hur man beräknar möjliga minDepth där ett objekt kan placeras

Jag har byggt en trädvykomponent som har fri drag-och-släpp utan att få använda tredjepartsbibliotek.

Jag arbetar på en idé om att använda arrayer med index och djup som datastrukturer för det.

Mina mål:

  • Förutom ROOT(depth=0), kan objekt och deras underobjekt dras och släppas

  • Kan dra vertikalt

    • Kan inte flytta högre än ROOT (index måste > 0)

  • Kan dra horisontellt

    • Kan inte ha samma djup som ROOT (djup måste vara > 0)
    • Kan inte ha djup med 1 enhet högre än föregående objekt (för att vara barn)
    • Bryt inte trädstrukturen på platsen där det släpps (om det finns)

De flesta av dem har lösts förutom den sista. Till exempel:

I have items A(depth = 1), B(depth = 2), C(depth = 2), D(depth = 1) , E(depth = 2). 
The tree will look like this
----------
ROOT
 - A
    - B
    - C
 - D
    - E

----------
* B will not be able to move left (with depth < A.depth) because it will break the structure of A/B/C
   (A and B will be same depth, C will become B's child, which is wrong)
* C will be able to move left because it doesn't break the structure of A/B/C
   (A and C will be same depth, B will still be A's child, that true)

Självklart kan datan vara mer komplex, jag är inte säker på hur man beräknar minDepth med denna struktur, alla idéer som kan hjälpa uppskattas

Se min nuvarande kod på CodeSanbox

UPPDATERING: min idé är att kontrollera föregående objekt vid målsindex för att lösa det.

With the above example data
 * When move E to between A and B
    - previous is A
    - parent of A is ROOT
    - cause A is not the last of ROOT childs, E.depth cant smaller than A.depth
    - A have childs B and C, so E.depth cant smaller than A childs (A.depth + 1)
    - finally E.depth cant smaller than A.depth and A.depth+1, we take the bigger one is A.depth+1

 * When move E to between C and D
    - previous is C
    - parent of C is A
    - cause C is the last of A childs, so E can be move out of A struct without breaking, we will keep and not change the minDepth
    - C dont have any childs, E.depth can be move out of C struct cause he is have no struct
    - finally we have no limit the minDepth, use defaut 1.

 * When move C to between D and E
    - previous is D
    - parent of D is ROOT
    - cause D is the last of ROOT childs, so C can be move out of D struct without breaking, we will keep and not change the minDepth
    - D have childs E, so C.depth cant smaller than D childs (D.depth + 1)
    - finally C.depth cant smaller than D.depth+1

Svar #1

Följ ovanstående idé, jag skrev den här rutan, verkar som den fungerar bra.

Det är inte fullt testat, jag är inte säker på om det finns ett särskilt fall som kan förstöra saker, så jag lämnar den här kommentaren här tills det har kontrollerats, eller tills det finns ett bättre svar.

Demo video nedan

https://user-images.githubusercontent.com/17797115/222080006-71171aa0-0a43-4050-b6ba-6b03498ac738.mp4

Boxkoden nedan

Relaterade artiklar