Generates relations between DOM elements depending on their depth

@dflex/dom-gen

Generates relations between DOM elements depending on their depth.

npm install @dflex/dom-gen

It figures out relations between DOM elements without storing them or creating actual dom tree. Instead, it gets relationship based on element depth. In case you are studying any dom-tree, you can build entire branches and navigate through them using generated unique keys.

const domGen = new Generator()

domGen.getElmPointer(id: string, depth: number)

Returns pointer object refers to element relation with its unique keys and related index:

• order: Object <elementOrder>

  self: number
  parent: number
  

• keys: Object <relationKey>

  sK: string
  pK: string
  chK: string
  

import Generator from "@dflex/dom-gen";

const domGen = new Generator();

let pointer = domGen.getElmPointer("id-0", 0);

// pointer = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 0,
//   },
// };

Internally Generator has build dom tree as following:

DOM-root
│
│───id-0 => order: { parent: 0, self: 0 } || keys: { chK: null , pK: "1-0", sK: "0-0" }

Adding more elements on the same level:

const domGen = new Generator();

const pointer1 = domGen.getElmPointer("id-1", 0);

// pointer1 = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 1,
//   },
// };

const pointer2 = domGen.getElmPointer("id-2", 0);

// pointer2 = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 2,
//   },
// };

And dom tree is:

DOM-root
│
│───id-0 => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"}
│
│───id-1 => order: {parent: 0, self: 1} || keys: {chK: null, pK: "1-0", sK: "0-0"}
│
│───id-2 => order: {parent: 0, self: 2} || keys: {chK: null, pK: "1-0", sK: "0-0"}

Note:id/0-2 all have same parent and siblings key. So any incoming parent will carry key 1-0 and exists in position 0 . And this goes also for any parent which means for any element you can go up↑ and down↓ .

Following the same logic we can go deeper:

const domGen = new Generator();

const pointer = domGen.getElmPointer("id-parent-1", 1);

// pointer = {
//   keys: {
//     chK: "0-0",
//     pK: "2-0",
//     sK: "1-0", // this key was generated previously in children level
//   },
//   order: {
//     parent: 0,
//     self: 0,
//   },
// };

And dom tree is with relational key is as following:

DOM-root
├───id-parent-1  => order: {parent: 0, self: 0} || keys: {chK: "0-0", pK: "2-0", sK: "1-0"}
    |
    │───id-0  => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"}
    │
    │───id-1 => ..
    │
    │───id-2 => ..

dom-gen doesn't store keys and ids. All the id's validations should be done outside Generator logic. Also, storing relationships should be done separately in a store.

Test

npm test

License

This project is licensed under the GPL-3.0 License