Added the maps-module to the iwmlib.

Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
parent e2ea89cc0b
commit 86b23f4e6f
121 changed files with 12779 additions and 40 deletions
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang='en'>
+
+<head>
+    <meta charset='UTF-8'>
+    <title>Scatter</title>
+    <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
+    <link rel='stylesheet' href='../../../css/doctest.css'> 
+  
+    <script src='../../../dist/iwmlib.3rdparty.js'></script>
+    <script src='../../../dist/iwmlib.pixi.js'></script>
+    <script src='../../../dist/iwmlib.js'></script>
+
+    <style>
+        .inline-showcase {
+            display: flex
+        }
+
+        .map-example {
+            display: inline-block;
+            width: 256px;
+            margin: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Scatter</h1>
+    <p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>
+
+    <h2>CoverScatter</h2>
+    <p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option. This option
+        allows prevents the scatter to move inside the window.
+
+
+
+    </p>
+    <p>
+        <h3>Legend</h3>
+        <ul>
+            <li>
+                <span style="color: deepskyblue">Bounds:</span> The bounds represent the bounding boxes of the elements.
+            </li>
+            <li>
+                <span style="color:red;">Polygon:</span> The polygon property of scatters describe their actual extends and are used for e.g. calculating
+                overlap with the scatter container.
+            </li>
+            <li>
+                <span style="color:greenyellow;">Boundaries:</span> You can set boundaries in the options in the form of
+                <code>opts = {..., boundaries: {min: {x:0,y:0},
+                        max{x:1,y:1},...}}</code> these will be applied relatively to the image dimensions.</li>
+        </ul>
+    </p>
+    <canvas id="map_01">
+
+    </canvas>
+    <script>
+
+        let app = new PIXIApp({
+            view: map_01,
+            width: 512,
+            height: 512
+        })
+
+        app.sceneFactory = () => {
+            window.scatterContainer = new AdvancedScatterContainer(app.renderer, { showBounds: true, showPolygon: true, app })
+            return window.scatterContainer
+        }
+
+        app.setup().run()
+
+
+        /*
+        Create Rotated Container
+        */
+
+        let pad = 128
+        let frame = new RigidContainer(app.width - 2 * pad, app.height - 2 * pad)
+        frame.position.set(pad, pad)
+
+
+        //Create Containers Scatter
+        new CompactScatter(frame, app.renderer, { translatable: false, scalable: false, rotatable: false})
+        app.scene.addChild(frame)
+
+        let oldCenter = new PIXI.Point()
+        oldCenter.copy(frame.scatter.center)
+
+        frame.scatter.rotation = Math.PI / 4
+        let offset = Points.subtract(frame.scatter.center, oldCenter)
+        frame.scatter.position = Points.subtract(frame.scatter.position, offset)
+
+
+        /* 
+        
+        Create Regular Rect
+        
+        */
+
+        let map = new PIXI.Graphics()
+        map.beginFill(0x00FFFF, 0.2)
+        map.drawRect(0, 0, 100, 100)
+        map.position.set(-10, -10)
+        map.interactive = true
+        new CoverScatter(map, app.renderer, { maxScale: Infinity, 
+            autoBringToFront:false,
+            boundaries: {
+                min: { x: 0.2, y: 0.2 },
+                max: { x: 0.8, y: 0.8 }
+            },
+        alpha: 0.5, 
+        cover: true,
+            debug:true
+    })
+        frame.addChild(map)
+
+
+        /*
+
+        Create Rotated Rect
+        
+        */
+
+        let advancedScatter = new PIXI.Graphics()
+        advancedScatter.interactive = true
+        new CoverScatter(advancedScatter, app.renderer, {
+            maxScale: Infinity, 
+            autoBringToFront: false, 
+            alpha: 0.3, cover:false,
+            debug:true
+        })
+        advancedScatter.beginFill(0x000000, 0.2)
+        advancedScatter.drawRect(0, 0, 200, 200)
+        app.scene.addChild(advancedScatter)
+
+
+
+
+
+
+    </script>
+
+    <h2>Note</h2>
+    <ul>
+        <li>
+            Cover behaviour is not yet working on rotated elements.
+        </li>
+    </ul>
+</body>
+
+</html>