isotope icon indicating copy to clipboard operation
isotope copied to clipboard

How can we use layout without DOM?

Open trusktr opened this issue 3 years ago • 0 comments

For example, I just want to tell Isotope to make a layout, then apply the numbers to custom objects (f.e. Three.js, canvas 2D, pixi.js, etc).

How do we use isotope layout without it automatically applying to DOM? Example:

const meshes = [/* An array of Three.js meshes. */]

const iso = new Isotope()
// ...
iso.layout();

for (const mesh of meshes) {
  mesh.position.x = /*apply value from iso*/
  mesh.position.y = /*apply value from iso*/
}

renderer.render(scene, camera);

I do also have custom elements (LUME) that render using WebGL. Is there a way to tell isotope how to map values to attributes of DOM elements it controls? Example:

<lume-scene webgl id="scene">
  <lume-mesh has="box-geometry physical-material" class=".card"></lume-mesh>
  ...
</lume-scene>

<script>
  var iso = new Isotope(document.querySelector('#scene'), {
    itemSelector: '.card',
    // ...

    applyValue(el, {x, y, width, height}) { // hypothetical
      // ... apply value to `el` (<lume-mesh>) ...
    }
  });

  iso.layout();

  // or similar to three.js example
  for (const el of document.querySelector('lume-mesh')) {
    el.position.x = /*apply value from iso*/
    el.position.y = /*apply value from iso*/
  }
</script>

trusktr avatar Dec 18 '22 05:12 trusktr