Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can we use layout without DOM? #1644

Open
trusktr opened this issue Dec 18, 2022 · 0 comments
Open

How can we use layout without DOM? #1644

trusktr opened this issue Dec 18, 2022 · 0 comments

Comments

@trusktr
Copy link

trusktr commented Dec 18, 2022

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant