ArtArchive/Class5/marc_network/public/sigma/examples/share-camera.html

<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<div id="container">
  <style>
    #webgl {
      top: 0;
      bottom: 0;
      left: 0;
      right: 50%;
      color: #fff;
      background: #000;
      position: absolute;
    }

    #canvas {
      top: 0;
      bottom: 0;
      left: 50%;
      right: 0;
      color: #000;
      background: #fff;
      position: absolute;
    }

    .label {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
      font-family: sans-serif;
    }
  </style>
  <div id="webgl">
    <div class="label">WebGL renderer</div>
  </div>
  <div id="canvas">
    <div class="label">Canvas renderer</div>
  </div>
</div>
<script>
/**
 * This example spawns two different renderers with the same camera. When
 * the users will drag any of the renderers, it will move the other one
 * as well.
 *
 * Also, settings are different fo both renderers.
 *
 * It might look a bit useless (I prefer overkill...), but it makes
 * possible to develop renderers linked by their camera, for example to
 * implement a minimap.
 */

var i,
    N = 100,
    E = 500,
    s = new sigma(),
    cam = s.addCamera();

// Generate a random graph:
for (i = 0; i < N; i++)
  s.graph.addNode({
    id: 'n' + i,
    label: 'Node ' + i,
    x: Math.random(),
    y: Math.random(),
    size: 4 + (3 * Math.random()) | 0
  });

for (i = 0; i < E; i++)
  s.graph.addEdge({
    id: 'e' + i,
    source: 'n' + (Math.random() * N | 0),
    target: 'n' + (Math.random() * N | 0),
    size: 1 + Math.random()
  });

// Initialize two distinct renderers, each with its own settings:
s.addRenderer({
  container: document.getElementById('webgl'),
  type: 'webgl',
  camera: cam,
  settings: {
    defaultLabelColor: '#fff',
    defaultNodeColor: '#999',
    defaultEdgeColor: '#333',
    edgeColor: 'default'
  }
});

s.addRenderer({
  container: document.getElementById('canvas'),
  type: 'canvas',
  camera: cam,
  settings: {
    batchEdgesDrawing: true,
    hideEdgesOnMove: true,
    defaultLabelColor: '#000',
    defaultNodeColor: '#666',
    defaultEdgeColor: '#999',
    edgeColor: 'default'
  }
});

// Refresh the instance to refresh the new renderers:
s.refresh();
</script>