Removed the stylus folder and added stylus.js with doctest to lib/pixi

2019-07-04 09:09:19 +02:00
parent da212ac188
commit af932a9911
4 changed files with 1048 additions and 51 deletions
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Stylus</title>
+
+    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../../css/doctest.css">
+
+    <script src="../3rdparty/highlight/highlight.pack.js"></script>
+
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
+</head>
+
+<body onload="Doctest.run()">
+    <h1>Stylus</h1>
+    <p>The Stylus class extends the PIXI.Graphics class and allows to draw into
+        a graphics object. Select the pen tool in the following example app and draw into the canvas.
+    </p>
+    <canvas id="canvas" style="border: 1px solid gray; width: 640px; height: 480px;" class="interactive"></canvas>
+    <p>
+        What you should see: A blank sytlus canvas.
+    </p>
+    <script class="doctest">
+        class StylusApp extends PIXIApp {
+
+            sceneFactory() {
+                return new Stylus(this.renderer)
+            }
+
+            setup() {
+                let buttonColor = 0x666666
+                super.setup()
+
+                this.tools = new ButtonGroup({
+                    type: 'checkbox',
+                    margin: 0,
+                    x: 16,
+                    y: 16,
+                    fill: buttonColor,
+                    buttons: [{
+                        icon: 'edit',
+                        iconColorActive: 0xFFFF00,
+                        action: (event, button) => this.toggleEditMode()
+                    },
+                    {
+                        icon: 'undo',
+                        action: (event, button) => this.undo(button)
+                    },
+                    {
+                        icon: 'redo',
+                        action: (event, button) => this.redo(button)
+                    },
+                    {
+                        icon: 'delete',
+                        action: (event, button) => this.clear(button)
+                    }
+                    ]
+                })
+                this.scene.addChild(this.tools)
+
+                let defaults = {
+                    icon: 'brightness_1',
+                    action: (event, button) => this.selectColor(button),
+                    fillAlpha: 0,
+                    strokeAlpha: 0,
+                    fillActiveAlpha: 0,
+                    strokeActiveAlpha: 0
+                }
+
+                this.palette = new ButtonGroup({
+                    type: "radio",
+                    x: 200,
+                    y: 16,
+                    margin: 0,
+                    strokeAlpha: 0,
+                    fill: buttonColor,
+                    buttons: [
+                        Object.assign({}, defaults, {
+                            iconColor: 0x111111,
+                            iconColorActive: 0x111111
+                        }),     // tooltip: "Black",
+                        Object.assign({}, defaults, {
+                            iconColor: 0xFFFF00,
+                            iconColorActive: 0xFFFF00
+                        }),     // tooltip: "Yellow",
+                        Object.assign({}, defaults, {
+                            iconColor: 0x00FF00,
+                            iconColorActive: 0x00FF00
+                        }),          // tooltip: "Green",
+                        Object.assign({}, defaults, {
+                            iconColor: 0xFF00FF,
+                            iconColorActive: 0xFF00FF
+                        })     // tooltip: "Violet",
+                    ]
+                })
+                this.scene.addChild(this.palette)
+                this.scene.interactive = false
+            }
+
+            toggleEditMode() {
+                this.scene.interactive = !this.scene.interactive
+
+                console.log("this.scene.interactive")
+            }
+
+            selectColor(button) {
+                this.scene.color = button.opts.iconColor
+            }
+
+            undo(button) {
+                this.scene.undo()
+                setTimeout(() => {
+                    button.active = false
+                }, 200)
+            }
+
+            redo(button) {
+                this.scene.redo()
+                setTimeout(() => {
+                    button.active = false
+                }, 200)
+            }
+
+            clear(button) {
+                this.scene.clearAll()
+                setTimeout(() => {
+                    button.active = false
+                }, 200)
+            }
+        }
+
+        const app = new StylusApp({
+            view: canvas,
+            width: 640,
+            height: 480,
+            autoResize: false
+        })
+        window.app = app
+        app.setup()
+        app.run()
+
+
+    </script>
+</body>