IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added minimal navigation breadcrumbs to doctests.

Browse Source
This commit is contained in:
Uwe Oestermeier
2023-05-09 13:25:39 +02:00
parent 13e0473328
commit 9501264f08
71 changed files with 5700 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/scatter.html
+67 -66
View File
@@ -1,39 +1,38 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIXI Scatter Doctest</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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PIXI Scatter Doctest</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>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter</h1>
<p>
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to
"scattered" layouts. The PIXI scatter defined here is a specialization of the
<a href="../scatter.html">abstract scatter pattern</a>.
</p>
<p>
PIXI scatter are organized in <code>ScatterContainer</code> parent nodes and
<code>DisplayObjectScatter</code> child nodes.
</p>
<body onload="Doctest.run()">
<h1>
Scatter
</h1>
<p>
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts.
The PIXI scatter defined here is a specialization of the
<a href="../scatter.html">abstract scatter pattern</a>.
</p>
<p>PIXI scatter are organized in
<code>ScatterContainer</code> parent nodes and
<code>DisplayObjectScatter</code> child nodes.
<p>Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use
case that the scene itself is used as the
<code>ScatterContainer</code>. The
<code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.</p>
<p>
Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a
common use case that the scene itself is used as the <code>ScatterContainer</code>. The
<code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject
zoomable, rotatable and translatable.
</p>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
}
@@ -45,13 +44,13 @@
for (let key of ['women', 'king']) {
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{
x: x, y: y,
startScale: 0.25,
minScale: 0.2,
maxScale: 1
})
let scatter = new DisplayObjectScatter(sprite, this.renderer, {
x: x,
y: y,
startScale: 0.25,
minScale: 0.2,
maxScale: 1
})
this.scene.addChild(sprite)
scatter.zoom(0.5, { animate: 1.0 })
x += 100
@@ -69,21 +68,16 @@
})
.setup()
.run()
</script>
<h1>
Two ScatterContainers in one canvas-element
</h1>
<h1>Two ScatterContainers in one canvas-element</h1>
<p>
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
ScatterContainer. You should interact the two images independently of each other.
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the
King in the second ScatterContainer. You should interact the two images independently of each other.
</p>
<canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class DoubleScatterApp extends PIXIApp {
setup() {
super.setup()
// Obey order in which ScatterContainer are created because the
@@ -103,7 +97,7 @@
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
x: 20,
y: 40,
startScale: .5
startScale: 0.5
})
this.scatterContainerBack.addChild(sprite1)
@@ -113,7 +107,7 @@
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
x: 280,
y: 40,
startScale: .5
startScale: 0.5
})
this.scatterContainerFront.addChild(sprite2)
return this
@@ -125,31 +119,31 @@
autoResize: false,
width: 450,
height: 250
}).setup().run()
})
.setup()
.run()
</script>
<h1>
Nested Scatter
</h1>
<h1>Nested Scatter</h1>
<p>
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
another scatter is displayed on the map.
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed
as scatter and another scatter is displayed on the map.
</p>
<canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class NestedScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { application: this, showBounds: true, showPolygon: true, app: this })
return new ScatterContainer(this.renderer, {
application: this,
showBounds: true,
showPolygon: true,
app: this
})
}
setup() {
super.setup()
// Add the queen to ScatterContainer one
let woman = PIXI.Sprite.from('../examples/women.jpeg')
woman.interactive = true
@@ -164,25 +158,30 @@
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
nestedKing.interactive = true
new DisplayObjectScatter(nestedKing, this.renderer, {
x: 20, y: 20, startScale: 0.3
x: 20,
y: 20,
startScale: 0.3
})
woman.addChild(nestedKing)
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
nestedQueen.interactive = true
new DisplayObjectScatter(nestedQueen, this.renderer, {
x: 40, y: 40, startScale: 0.3
x: 40,
y: 40,
startScale: 0.3
})
woman.addChild(nestedQueen)
let king = PIXI.Sprite.from('../examples/king.jpeg')
king.interactive = true
new DisplayObjectScatter(king, this.renderer, {
x: 200, y: 20, startScale: 1
x: 200,
y: 20,
startScale: 1
})
this.scene.addChild(king)
return this
}
}
@@ -192,7 +191,9 @@
autoResize: false,
width: 450,
height: 250
}).setup().run()
})
.setup()
.run()
</script>
</body>
</body>
</html>