@svgram/svgram-wc-core
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Built With Stencil

SVGram Core WebComponent

Intro

This is a data driven diagram tool hosted by a SVG canvas in a webcomponent (WC).

Usage:
index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="https://unpkg.com/@svgram/svgram-wc-core/dist/svgram-wc-core.js"></script>
  <script type="text/javascript">
    function setSv5Shapes(){
      let container =  {
      shapes: [{ "x": "100px", "y": "10px", "width": "80px", "heigth": "70px", "stroke": "red", "fill": "green"},
      { "x": "200px", "y": "10px", "width": "70px", "heigth": "60px", "stroke": "blue", "fill": "brown"}]
      };
      let containerJson = JSON.stringify(container);
      let canvas = document.getElementById("canvas");
      canvas.setAttribute("content", containerJson);
    };
  </script>
</head>
<body onload="setSv5Shapes()">
  <svgram-canvas id="canvas" first="Sv5" last="Canvas" content="" ></svgram-canvas>
</body>
</html>

How this project was build

npm init stencil
# you get a menu - choose component
# Name of proejct: scgram-wc-core

# Test run: Build, start a webserver and a browser:
npm start

# Kill webserver:
ctrl-c
  • Copy demo WC /src/components/my-component/ to /src/components/sv5-canvas/
  • Add content to new WC
  • Send data to the WC from /src/index.html

Credits

Thanks to

Refs

Npm

npm test
npm run build --prod
npm login --scope=@svgram
npm publish --access=public

The End.

Readme

Keywords

none

Package Sidebar

Install

npm i @svgram/svgram-wc-core

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

250 kB

Total Files

69

Last publish

Collaborators

  • rasor