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
- Stencil
- Forked from rasor/stncl-svg-poc
Refs
Npm
- Distributing Web Components Built with Stencil
- Contributing packages to the registry
- Creating Node.js modules
- About scopes
- Problems publishing scoped module · Issue #12194 · npm/npm
npm test
npm run build --prod
npm login --scope=@svgram
npm publish --access=public
The End.