<section id="using-my-framework">
</section>

<script src="../../js/components/my-svg-framework.js"></script>
<script src="../../js/components/using-my-framework.js"></script>
<section id="using-my-framework">
</section>

<script src="{{ path '/js/components/my-svg-framework.js' }}"></script>
<script src="{{ path '/js/components/using-my-framework.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("using-my-framework active");
    
        // Create an SVG and append it to a selected container.
    
        const container = document.querySelector('#using-my-framework');
    
        const svgConfig = {
          container: container,
          targetResolution: {
            width: 1500,
            height: 1500
          },
          targetResolutionMultiplier: 0.5
        }
    
        const _SB = SvgSB(svgConfig);
    
        // Basic dumb rect shape, this should probably go away. Or maybe it has
        // utility as a quickdraw function, when we don't need a full object.
    
        _SB.svg.appendChild(_SB.drawRect(25, 25, 100));
        _SB.svg.appendChild(_SB.drawRect(200, 50, 200));
    
        // Create object-based rect shapes.
    
        const myRect = SvgSB.rect({
          x: 400,
          y: 400,
          svg: _SB.svg
        });
    
        const myOtherRect = SvgSB.rect({
          wv: 25,
          svg: _SB.svg
        });
    
        myRect.announce().draw();
        myOtherRect.draw().announce();
    
        // Make some rects and draw them all
    
        for (let i = 0; i < 5; i++) {
          const x = _SB.getRandomInt(0, _SB.svgAttrs.width);
          const y = _SB.getRandomInt(0, _SB.svgAttrs.height);
    
          _SB.makeRect(x, y, 255);
        }
    
        _SB.rects.forEach((rect) => {
          rect.draw().announce();
        })
    
        // Very dumb animation to test my update function.
    
        let start;
    
        function step(timestamp) {
          if (start === undefined) {
            start = timestamp;
          }
    
          const elapsed = timestamp - start;
    
          if (elapsed > 2000) {
            start = timestamp;
            (myRect.x === 300) ? myRect.update(400, 400) : myRect.update(300, 300);
          }
    
          window.requestAnimationFrame(step);
        }
    
        window.requestAnimationFrame(step);
      });
    })();
    
  • URL: /components/raw/using-my-framework/using-my-framework.js
  • Filesystem Path: components/02-my-framework/06-using-my-framework/01-using-my-framework/using-my-framework.js
  • Size: 1.8 KB
  • Content:
    #using-my-framework {
      width: 100vw;
      height: 100vh;
    
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
    
      background-color: #000;
    
      // Placeholder values; set in JS
      --svgWidth: 100px;
      --svgHeight: 100px;
    
      svg {
        border: 1px solid #fff;
        width: var(--svgWidth);
        height: var(--svgHeight);
        display: block;
        overflow: hidden;
      }
    }
    
  • URL: /components/raw/using-my-framework/using-my-framework.scss
  • Filesystem Path: components/02-my-framework/06-using-my-framework/01-using-my-framework/using-my-framework.scss
  • Size: 400 Bytes
  • Handle: @using-my-framework
  • Preview:
  • Filesystem Path: components/02-my-framework/06-using-my-framework/01-using-my-framework/using-my-framework.hbs

No notes defined.