Initial commit

Author: Thor-x86

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{yml,yaml}]
+indent_size = 4

.gitignore

@@ -0,0 +1,40 @@
+# Template from: https://gist.github.com/salcode/10017553
+
+# ignore all files starting with . or ~
+.*
+~*
+
+# ignore node/grunt dependency directories
+node_modules/
+
+# ignore build and types directory
+build/
+types/
+
+# ignore OS generated files
+ehthumbs.db
+Thumbs.db
+
+# ignore Editor files
+*.sublime-project
+*.sublime-workspace
+*.komodoproject
+
+# ignore log files
+*.log
+
+# ignore packaged files
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# track these files, if they exist
+!.gitignore
+!.editorconfig
+!.npmignore
+!.prettierignore

.npmignore

@@ -0,0 +1,46 @@
+# Template from: https://gist.github.com/salcode/10017553
+
+# ignore all files starting with . or ~
+.*
+~*
+
+# ignore node/grunt dependency directories
+node_modules/
+
+# ignore source directory
+src/
+
+# ignore test directory
+tests/
+
+# ignore example directory
+examples/
+
+# ignore OS generated files
+ehthumbs.db
+Thumbs.db
+
+# ignore Editor files
+*.sublime-project
+*.sublime-workspace
+*.komodoproject
+
+# ignore log files
+*.log
+
+# ignore packaged files
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# ignore configuration files
+webpack.config.json
+tsconfig.json
+
+# track these files, if they exist
+!.npmignore

.prettierignore

@@ -0,0 +1,9 @@
+# ignore node/grunt dependency directories
+node_modules/
+
+# ignore build and types directory
+build/
+types/
+
+# ignore self-tidy files
+tsconfig.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Athaariq Ardhiansyah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# CompoDraw JS
+
+**Compose & Draw for JavaScript**
+
+Easiest way to **compose shapes and effects** with **XML** or **JSX** then **draw them** into **HTML5 Canvas**, without sacrifices **modularity** and **compatibility** among web frameworks.
+
+CompoDraw uses multiple **instruct**s with each of them tells Canvas API how to draw specific thing like a shape or visual effect (e.g. Rotate, Move, Mask, ...). All you need to do is **just arrange them** by writing XML, or JSX if you are ReactJS user.
+
+Instructs are bundled into one package, commonly wrapped with [UMD module](https://www.devguide.at/en/javascript/amd-cjs-umd-esm-modular-javascript/#Universal_Module_Definition_UMD) format. So you can import it to any web framework of your choice :)
+
+## How to Install
+
+1. Add to your project with Yarn:
+   ```bash
+   yarn add compodraw
+   ```
+   or with NPM:
+   ```bash
+   npm install compodraw --save
+   ```
+   or you can download the bundled JavaScript file for plain HTML or PHP project
+2. Then pick your preferred `instructs package`.
+   For basic operation, use [compodraw-instructs](https://github.com/Thor-x86/compodraw-js-instructs). If you want, you can build your own instructs package with each instruct is a [class](https://www.w3schools.com/js/js_classes.asp) that has at least `draw(canvasContext)` method
+3. That's it! now you can use CompoDraw 😁
+
+## How to Use
+
+First of all, make sure your front-end project already initialized. You can choose either [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Angular](https://angular.io/), [PHP](https://www.quora.com/Which-is-the-best-PHP-framework-for-beginners), or plain HTML. And then, choose your usage method:
+
+### Use with React's JSX
+
+With React, you are able to use the benefit of JSX. Here's [the example](https://github.com/Thor-x86/compodraw-js/blob/dev/examples/usage-with-jsx.md).
+
+### Use with React's JSX (with Tree Shaking)
+
+For production, we recommend you to follow [this example](https://github.com/Thor-x86/compodraw-js/blob/dev/examples/usage-with-jsx-treeshaking.md) instead of above.
+
+### Use with XML
+
+For other than React-based web project, you can still use XML data and compose it without parse by yourself. Here's [the example](https://github.com/Thor-x86/compodraw-js/blob/dev/examples/usage-with-xml.md).
+
+### Use with Embedded XML inside HTML Tag
+
+Embedding XML into HTML is now possible for CompoDrawJS. See [the example](https://github.com/Thor-x86/compodraw-js/blob/dev/examples/usage-with-dom.md).
+
+## How to Contribute
+
+You are free to contribute by opening an issue or pull-request. But before pull-request, it's better to test your changes locally with this command:
+
+```bash
+yarn run test
+```
+
+or with NPM:
+
+```bash
+npm run test
+```
+
+Then pull request after all of those tests passed.
+
+**NOTE:** Test is not necessary if you only modify the docs or source code style
+
+## Test on a Computer without GPU
+
+If you are using VM like Hyper-V or Windows Subsystem for Linux (WSL), install [docker](https://docs.docker.com/docker-for-windows/install/#install-docker-desktop-on-windows) first. Then run this command:
+
+```bash
+yarn run test:no-gpu
+```
+
+or with NPM:
+
+```bash
+npm run test:no-gpu
+```

examples/usage-with-dom.md

@@ -0,0 +1,83 @@
+# Example with DOM
+
+**NOTE:** In this example, we're assuming you are using [compodraw-instructs](https://github.com/Thor-x86/compodraw-js-instructs).
+
+In some cases, we have to embed XML data into HTML. It's possible with CompoDraw! You just have to put XML data (as comment) into Canvas tag, or another HTML tag you like.
+
+For this example, there is 3 files in a single folder:
+- `index.html` -> Your HTML file
+- `compodraw.js` -> CompoDraw bundled javascript file (Download link soon...)
+- `compodraw-instructs.js` -> bundled instructs package (Download link soon...)
+
+Then write this snippet code to `index.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CompoDraw Example with XML</title>
+        <style>
+            html, body, canvas {
+                width: 100vw;
+                height: 100vh;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+
+            * {
+                box-sizing: border-box;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="viewport">
+            <!--
+              <move x="100" y="125">
+                <rectangle
+                  color="pink"
+                  x="10" width="200"
+                  y="20" height="150"
+                />
+                <rectangle
+                  color="cyan"
+                  x="210" width="200"
+                  y="170" height="150"
+                />
+              </move>
+            -->
+        </canvas>
+
+        <!-- Load the bundled JavaScripts -->
+        <!-- make sure they are in the same folder -->
+        <script src="compodraw.js"></script>
+        <script src="compodraw-instructs.js"></script>
+
+        <script>
+            // If instructs package name contains
+            // dash character "-", make an alias for it
+            const instructs = self['compodraw-instructs'].all;
+
+            // Get the canvas element
+            const element = document.getElementById('viewport');
+
+            // Compose from canvas element inner text
+            const composed = compodraw.composeFromXml(element, instructs);
+
+            // Redraw on browser window resize,
+            // otherwise it will stretches
+            window.onresize = () => {
+                compodraw.draw(composed, element);
+            };
+
+            // Now, let's draw the canvas!
+            compodraw.draw(composed, element);
+        </script>
+
+    </body>
+</html>
+```
+
+**WARNING 1:** The XML **must** be commented. Why? that's because HTML will simply mess up the embedded XML data.
+
+**WARNING 2:** If an element tag contains commented XML data, don't mix it with other HTML tag or text.

examples/usage-with-jsx-treeshaking.md

@@ -0,0 +1,94 @@
+# Usage with React JSX (with Tree Shaking Support)
+
+**NOTE:** In this example, we're assuming you are using [compodraw-instructs](https://github.com/Thor-x86/compodraw-js-instructs).
+
+Unlike other method, we can actually use the real benefit of JSX which allows us to do [Tree Shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking) for smaller output JS file.
+
+Here's the simple code snippet for `src/App.js` to draw pink and cyan rectangle:
+
+```jsx
+// Import dependencies:
+import React, {useEffect} from 'react';
+import {composeFromJsx, draw} from 'compodraw';
+
+// Import CSS style, remove this
+// if you don't need it
+import './App.css';
+
+// Import only required instructs:
+import {Move, Rectangle} from 'compodraw-instructs';
+
+// Compose with JSX:
+const composed = composeFromJsx(
+  <Move x={100} y={125}>
+    <Rectangle
+      color="pink"
+      x={10} width={200}
+      y={20} height={150}
+    />
+    <Rectangle
+      color="cyan"
+      x={210} width={200}
+      y={170} height={150}
+    />
+  </Move>
+); // Notice that you don't have to
+///// insert the second parameter
+
+// Create a function to handle draw
+// everytime browser need to do that
+function onDraw() {
+  // Get the canvas element
+  const element = document.getElementById('viewport');
+
+  // Making sure canvas is exist,
+  // otherwise don't draw
+  if(!element) return;
+
+  // Now, let's draw the canvas!
+  draw(composed, element);
+}
+
+// Your React App
+function App() {
+  // Use hook to make sure canvas element is ready
+  useEffect(() => {
+    // Draw immediately after canvas is ready
+    onDraw();
+
+    // Redraw on browser window resize,
+    // otherwise it will stretches
+    window.addEventListener('resize', onDraw);
+
+    // Remove the event when user
+    // navigates to other page
+    return () => window.removeEventListener('resize', onDraw);
+  });
+
+  // Render canvas element:
+  return (
+    <canvas id="viewport">
+      <strong>Canvas is NOT supported!</strong>
+    </canvas>
+  );
+}
+
+// Don't forget this
+export default App;
+```
+
+For experimental purpose, you can use this CSS snippet for `src/App.css` to make canvas fills entire webpage:
+
+```css
+html, body, canvas {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+```