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

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/abstractpopup.js
+80 -63
View File
@@ -11,10 +11,9 @@ import Theme from './theme.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
export default class AbstractPopup extends PIXI.Graphics {
/**
* Creates an instance of an AbstractPopup (only for internal use).
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {number} [opts.id=auto generated] - The id of the popup.
@@ -45,34 +44,37 @@ export default class AbstractPopup extends PIXI.Graphics {
* to landscape, the popup cannot be displayed in portrait mode.
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
},
opts
)
this.id = this.opts.id
@@ -81,10 +83,12 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.maxWidth) {
this.headerStyle.wordWrap = true
this.headerStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
this.headerStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true
this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
}
this.alpha = 0
@@ -99,7 +103,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// padding
this.innerPadding = this.opts.padding * 1.5
// interaction
//-----------------
this.interactive = true
@@ -107,15 +111,14 @@ export default class AbstractPopup extends PIXI.Graphics {
this.show()
})
}
/**
* Creates the framework and instantiates everything.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
// position
//-----------------
this.sy = this.opts.padding
@@ -123,15 +126,17 @@ export default class AbstractPopup extends PIXI.Graphics {
// header
//-----------------
if (this.opts.header != null) {
let header = null
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header
} else if (typeof this.opts.header === 'number') {
header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
header = new PIXI.Text(
this.opts.header.toString(),
this.headerStyle
)
} else {
header = new PIXI.Text(this.opts.header, this.headerStyle)
header = new PIXI.Text(this.opts.header, this.headerStyle)
}
header.x = this.opts.padding
@@ -151,13 +156,15 @@ export default class AbstractPopup extends PIXI.Graphics {
// content
//-----------------
if (this.opts.content != null) {
let content = null
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle)
} else if (typeof this.opts.content === 'number') {
content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
content = new PIXI.Text(
this.opts.content.toString(),
this.textStyle
)
} else {
content = this.opts.content
}
@@ -174,24 +181,23 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Should be called to refresh the layout of the popup. Can be used after resizing.
*
*
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
// wanted width & wanted height
//-----------------
const padding = this.opts.padding
const size = this.getInnerSize()
const width = size.width + (2 * padding)
const height = size.height + (2 * padding)
const width = size.width + 2 * padding
const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight)
if (this.opts.maxWidth) {
this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth)
}
@@ -221,41 +227,54 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const square =
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2)
this.clear()
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
if (square && diameter === this.wantedWidth) {
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
this.drawCircle(
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
} else {
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
}
this.endFill()
return this
}
/**
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let width = 0
let height = 0
@@ -273,17 +292,16 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height
}
return {width, height}
return { width, height }
}
/**
* Shows the popup (sets his alpha values to 1).
*
*
* @param {callback} [cb] - Executed when show animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
show(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 1,
onComplete: () => {
@@ -295,15 +313,14 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Hides the popup (sets his alpha values to 0).
*
*
* @param {callback} [cb] - Executed when hide animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
hide(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => {
@@ -324,7 +341,7 @@ export default class AbstractPopup extends PIXI.Graphics {
/**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string, a number or a PIXI.Text object.
*
*
* @member {string|number|PIXI.Text}
*/
get header() {
@@ -337,11 +354,11 @@ export default class AbstractPopup extends PIXI.Graphics {
this.opts.header = value
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject.
*
*
* @member {string|number|PIXI.DisplayObject}
*/
get content() {
lib/pixi/app.js
+122 -74
View File
@@ -4,7 +4,7 @@ import Theme from './theme.js'
import Progress from './progress.js'
import Modal from './modal.js'
import Message from './message.js'
import {debounce} from '../utils.js'
import { debounce } from '../utils.js'
/**
* A special InteractionManager for fullscreen apps, which may
@@ -21,7 +21,6 @@ import {debounce} from '../utils.js'
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
*/
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution
let extendWidth = 1.0
@@ -29,8 +28,10 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height) {
if (
context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@@ -63,7 +64,6 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
* @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
*/
export default class PIXIApp extends PIXI.Application {
/**
* Creates an instance of a PixiApp.
*
@@ -86,12 +86,23 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
*/
constructor({
width = null, height = null, view = null,
transparent = true, backgroundColor = 0x282828, theme = 'dark',
antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true,
fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true,
graphql = false }) {
width = null,
height = null,
view = null,
transparent = true,
backgroundColor = 0x282828,
theme = 'dark',
antialias = true,
resolution = window.devicePixelRatio || 1,
autoResize = true,
fpsLogging = false,
progress = {},
forceCanvas = false,
roundPixels = true,
monkeyPatchMapping = true,
adaptive = true,
graphql = false
}) {
const fullScreen = !width || !height
if (fullScreen) {
@@ -109,7 +120,7 @@ export default class PIXIApp extends PIXI.Application {
autoResize,
backgroundColor,
forceCanvas,
roundPixels // not needed for PixiJS >= 5
roundPixels // not needed for PixiJS >= 5
})
this.width = width
@@ -132,7 +143,10 @@ export default class PIXIApp extends PIXI.Application {
console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
document.body.addEventListener(
'orientationchange',
this.checkOrientation.bind(this)
)
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping')
@@ -159,15 +173,17 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL
if (this.graphql && typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const wsClient = new subscriptions.SubscriptionClient(
`wss://${location.hostname}/subscriptions`,
{
reconnect: true,
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
@@ -180,7 +196,11 @@ export default class PIXIApp extends PIXI.Application {
}
// progress
this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this }))
this._progress = new Progress(
Object.assign({ theme: this.theme }, this.progressOpts, {
app: this
})
)
this._progress.visible = false
this.stage.addChild(this._progress)
@@ -205,9 +225,12 @@ export default class PIXIApp extends PIXI.Application {
checkOrientation(event) {
var value = this.orientation()
if (value != this.orient) {
setTimeout(100, function () {
this.orientationChanged(true)
}.bind(this))
setTimeout(
100,
function() {
this.orientationChanged(true)
}.bind(this)
)
this.orient = value
}
}
@@ -230,9 +253,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [width] - The width of the app.
* @param {number} [height] - The height of the app.
*/
layout(width, height) {
}
layout(width, height) {}
/**
* Draws the display tree of the app. Typically this can be delegated
@@ -303,7 +324,10 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
resize(
event,
{ width = window.innerWidth, height = window.innerHeight } = {}
) {
this.width = width
this.height = height
this.expandRenderer()
@@ -324,7 +348,8 @@ export default class PIXIApp extends PIXI.Application {
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
this.originalMapPositionToPoint =
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y)
}
@@ -332,7 +357,7 @@ export default class PIXIApp extends PIXI.Application {
}
/**
* In some browsers the canvas is distorted if the screen resolution and
* In some browsers the canvas is distorted if the screen resolution and
* overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels).
* To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates.
@@ -351,8 +376,11 @@ export default class PIXIApp extends PIXI.Application {
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context !== null && (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)) {
if (
context !== null &&
(context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@@ -360,7 +388,12 @@ export default class PIXIApp extends PIXI.Application {
}
x *= extendWidth
y *= extendHeight
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
return this.originalMapPositionToPoint.call(
interactionManager,
local,
x,
y + dy
)
}
/**
@@ -394,7 +427,6 @@ export default class PIXIApp extends PIXI.Application {
* called without a parameter.
*/
progress(value) {
if (typeof value === 'undefined') {
return this._progress
}
@@ -412,8 +444,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
let modal = new Modal(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(modal)
return modal
@@ -426,8 +459,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
let message = new Message(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(message)
return message
@@ -446,21 +480,26 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
loadSprites(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
this.loadTextures(
resources,
textures => {
let sprites = new Map()
this.loadTextures(resources, textures => {
for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
let sprites = new Map()
for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
if (loaded) {
loaded.call(this, sprites)
}
},
{ resolutionDependent, progress }
)
return this
}
@@ -478,8 +517,11 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
loadTextures(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
if (!Array.isArray(resources)) {
resources = [resources]
}
@@ -487,17 +529,21 @@ export default class PIXIApp extends PIXI.Application {
const loader = this.loader
for (let resource of resources) {
if (!loader.resources[resource]) {
if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution)
switch (resolution) {
case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break
case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break
default:
loader.add(resource)
@@ -540,7 +586,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
query(query, opts = {}) {
if (typeof query === 'string') {
opts = Object.assign({}, opts, { query })
} else {
@@ -572,7 +617,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
mutate(mutation, opts = {}) {
if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation })
} else {
@@ -604,7 +648,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription })
} else {
@@ -635,13 +678,13 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {PIXI.Point} Returns a PIXI.Point.
*/
convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution
console.log("resolution", resolution)
console.log('resolution', resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution
pixiGlobal.y /= resolution
@@ -655,7 +698,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {Point} Returns a DOM Point.
*/
@@ -665,7 +708,11 @@ export default class PIXIApp extends PIXI.Application {
pixiGlobal.x *= resolution
pixiGlobal.y *= resolution
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
return window.convertPointFromNodeToPage(
app.view,
pixiGlobal.x,
pixiGlobal.y
)
}
}
@@ -679,7 +726,6 @@ export default class PIXIApp extends PIXI.Application {
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
class FpsDisplay extends PIXI.Graphics {
/**
* Creates an instance of a FpsDisplay.
*
@@ -687,25 +733,27 @@ class FpsDisplay extends PIXI.Graphics {
* @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
*/
constructor(app) {
super()
this.app = app
this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6)
.beginFill(0x434f4f, 0.6)
.drawRoundedRect(0, 0, 68, 32, 5)
.endFill()
.position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
}))
this.text = new PIXI.Text(
this.fps,
new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
})
)
this.text.position.set(6, 6)
this.addChild(this.text)
@@ -721,7 +769,7 @@ class FpsDisplay extends PIXI.Graphics {
* @return {PIXIApp} Returns the PIXIApp object for chaining.
*/
refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
return this
}
lib/pixi/blurfilter.js
+44 -20
View File
@@ -13,17 +13,17 @@
* height: 270,
* transparent: false
* }).setup().run()
*
*
* // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* sprite.width = app.size.width
* sprite.height = app.size.height
* app.scene.addChild(sprite)
*
*
* // Create the filter and assign it to the scene
* const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
* app.scene.filters = [blurFilter]
*
*
* @class
* @extends PIXI.Filter
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the
@@ -31,7 +31,6 @@
* @param {number} [blur=50] The strength of the blur.
*/
export default class BlurFilter extends PIXI.Filter {
constructor(shape, blur = 50) {
super()
@@ -59,7 +58,7 @@ export default class BlurFilter extends PIXI.Filter {
set blur(value) {
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value
}
/**
* The blur shape.
*
@@ -69,26 +68,39 @@ export default class BlurFilter extends PIXI.Filter {
return this.tiltShiftXFilter.shape
}
set shape(value) {
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
value
)
}
/**
*
*
* @private
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
* @returns {Object}
*/
normalize(value) {
let shape = null
if (value instanceof PIXI.Circle) {
shape = {type: 'circle', x: value.x, y: value.y, r: value.radius}
shape = { type: 'circle', x: value.x, y: value.y, r: value.radius }
} else if (value instanceof PIXI.Rectangle) {
shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height}
shape = {
type: 'rectangle',
x: value.x,
y: value.y,
width: value.width,
height: value.height
}
} else {
const bounds = value.getBounds()
shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height}
shape = {
type: 'rectangle',
x: bounds.x,
y: bounds.y,
width: bounds.width,
height: bounds.height
}
}
return shape
@@ -104,9 +116,7 @@ export default class BlurFilter extends PIXI.Filter {
* @private
*/
class TiltShiftAxisFilter extends PIXI.Filter {
constructor(shape, blur){
constructor(shape, blur) {
const vertex = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
@@ -173,13 +183,18 @@ class TiltShiftAxisFilter extends PIXI.Filter {
`
super(vertex, fragment)
if (shape.type === 'circle') {
this.uniforms.shape = 1
this.uniforms.circle = [shape.x, shape.y, shape.r]
} else {
this.uniforms.shape = 2
this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]
this.uniforms.rectangle = [
shape.x,
shape.y,
shape.x + shape.width,
shape.y + shape.height
]
}
this.uniforms.blur = blur
this.uniforms.delta = new PIXI.Point(0, 0)
@@ -200,7 +215,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
set blur(value) {
this.uniforms.blur = value
}
/**
* The blur shape.
*
@@ -213,7 +228,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
return new PIXI.Circle(circle[0], circle[1], circle[2])
} else {
const rectangle = this.uniforms.rectangle
return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
return new PIXI.Rectangle(
rectangle[0],
rectangle[1],
rectangle[2],
rectangle[3]
)
}
}
set shape(value) {
@@ -222,7 +242,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [value.x, value.y, value.r]
} else {
this.uniforms.shape = 2
this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
this.uniforms.rectangle = [
value.x,
value.y,
value.x + value.width,
value.y + value.height
]
}
}
}
@@ -260,4 +285,3 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
this.uniforms.delta.y = 0.1
}
}
lib/pixi/bundle.js
+5 -5
View File
@@ -2,10 +2,10 @@ import PIXIApp from './app.js'
import BlurFilter from './blurfilter.js'
import FlipEffect from './flipeffect.js'
import Flippable from './flippable.js'
import {DeepZoomInfo, DeepZoomImage} from './deepzoom/image.js'
import { DeepZoomInfo, DeepZoomImage } from './deepzoom/image.js'
import Popover from './popover.js'
import {ScatterContainer, DisplayObjectScatter} from './scatter.js'
import {AppTest, Command, RecorderTools} from './test.js'
import { ScatterContainer, DisplayObjectScatter } from './scatter.js'
import { AppTest, Command, RecorderTools } from './test.js'
import Timeline from './timeline.js'
import Theme from './theme.js'
import Button from './button.js'
@@ -23,7 +23,7 @@ import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Progress from './progress.js'
import List from './list.js'
import {LabeledGraphics, FontInfo} from './labeledgraphics.js'
import { LabeledGraphics, FontInfo } from './labeledgraphics.js'
/* Needed to ensure that rollup.js includes class definitions and the classes
are visible inside doctests.
*/
@@ -57,4 +57,4 @@ window.Badge = Badge
window.Progress = Progress
window.List = List
window.LabeledGraphics = LabeledGraphics
window.FontInfo = FontInfo
window.FontInfo = FontInfo
lib/pixi/button.js
+183 -121
View File
@@ -47,7 +47,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/
export default class Button extends PIXI.Container {
/**
* Creates an instance of a Button.
*
@@ -106,62 +105,76 @@ export default class Button extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
},
opts
)
this.id = this.opts.id
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
if (
typeof this.opts.icon === 'undefined' &&
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.icon = this.opts.iconActive
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
} else if (
typeof this.opts.icon !== 'undefined' &&
typeof this.opts.iconActive === 'undefined'
) {
this.opts.iconActive = this.opts.icon
}
if (this.opts.style === 'link') {
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 })
Object.assign(this.opts, {
strokeAlpha: 0,
strokeActiveAlpha: 0,
fillAlpha: 0,
fillActiveAlpha: 0
})
}
this._active = null
@@ -200,7 +213,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
setup() {
// Button
//-----------------
let button = new PIXI.Graphics()
@@ -222,18 +234,27 @@ export default class Button extends PIXI.Container {
// Icon
//-----------------
if (this.opts.icon) {
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
this.iconInactive = this.loadIcon(
this.opts.icon,
this.opts.iconColor
)
}
if (this.opts.iconActive) {
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
}
// interaction
//-----------------
this.button.on('pointerover', e => {
this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
})
this.button.on('pointermove', e => {
@@ -242,13 +263,19 @@ export default class Button extends PIXI.Container {
this.button.on('pointerout', e => {
this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 1, overwrite: 'none' })
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' })
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
})
})
this.button.on('pointerup', e => {
@@ -261,7 +288,10 @@ export default class Button extends PIXI.Container {
this.opts.action.call(this, e, this)
}
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
@@ -278,15 +308,22 @@ export default class Button extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active // calls .layout()
this.active = this.opts.active // calls .layout()
// tooltip
//-----------------
if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ object: this, content: this.opts.tooltip })
this.tooltip = new Tooltip({
object: this,
content: this.opts.tooltip
})
} else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
this.opts.tooltip = Object.assign(
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip)
}
}
@@ -294,12 +331,15 @@ export default class Button extends PIXI.Container {
// badge
//-----------------
if (this.opts.badge) {
let opts = Object.assign({}, {
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
})
let opts = Object.assign(
{},
{
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
}
)
if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, { content: this.opts.badge })
} else {
@@ -309,25 +349,35 @@ export default class Button extends PIXI.Container {
const badge = new Badge(opts)
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
break
case 'right':
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
break
case 'bottom':
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@@ -348,7 +398,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layout() {
// Clear content
//-----------------
this.removeChild(this.content)
@@ -434,18 +483,17 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layoutInnerContent() {
for (let child of this.content.children) {
switch (this.opts.verticalAlign) {
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
}
}
@@ -460,29 +508,30 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layoutContent() {
switch (this.opts.align) {
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = ((this._width - this.content.width) / 2)
break
case 'right':
this.content.x = this._width - this.opts.padding - this.content.width
break
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
this.content.x =
this._width - this.opts.padding - this.content.width
break
}
switch (this.opts.verticalAlign) {
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y = this._height - this.opts.padding - this.content.height
break
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y =
this._height - this.opts.padding - this.content.height
break
}
return this
@@ -495,16 +544,32 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
draw() {
this.button.clear()
if (this.active) {
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.button.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else {
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.button.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
}
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
this.button.drawRoundedRect(
0,
0,
this._width,
this._height,
this.opts.radius
)
this.button.endFill()
return this
@@ -519,7 +584,6 @@ export default class Button extends PIXI.Container {
return this._active
}
set active(value) {
this._active = value
if (this._active) {
@@ -544,18 +608,17 @@ export default class Button extends PIXI.Container {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.button.interactive = false
this.button.buttonMode = false
this.button.alpha = .5
this.button.alpha = 0.5
if (this.icon) {
this.icon.alpha = .5
this.icon.alpha = 0.5
}
if (this.text) {
this.text.alpha = .5
this.text.alpha = 0.5
}
} else {
this.button.interactive = true
@@ -576,7 +639,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
@@ -593,7 +655,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0
@@ -613,7 +674,6 @@ export default class Button extends PIXI.Container {
* @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
*/
loadIcon(icon, color) {
let displayObject = null
if (icon instanceof PIXI.DisplayObject) {
@@ -623,10 +683,12 @@ export default class Button extends PIXI.Container {
if (this.text) {
size = this.text.height
} else if (this.opts.minHeight) {
size = this.opts.minHeight - (2 * this.opts.padding)
size = this.opts.minHeight - 2 * this.opts.padding
}
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
const url = Button.iconIsUrl(icon)
? icon
: `../../assets/icons/${icon}.png`
const iconTexture = PIXI.Texture.fromImage(url, true)
const sprite = new PIXI.Sprite(iconTexture)
lib/pixi/buttongroup.js
+99 -75
View File
@@ -3,7 +3,7 @@ import Button from './button.js'
/**
* Class that represents a PixiJS ButtonGroup.
*
*
* @example
* // Create the button group
* const buttonGroup = new ButtonGroup({
@@ -24,10 +24,9 @@ import Button from './button.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/
export default class ButtonGroup extends PIXI.Graphics {
/**
* Creates an instance of a ButtonGroup.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the button group.
* @param {number} [opts.id=auto generated] - The id of the button group.
@@ -74,50 +73,53 @@ export default class ButtonGroup extends PIXI.Graphics {
* @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
},
opts
)
this.buttons = []
this._disabled = null
this.visible = this.opts.visible
// setup
@@ -128,21 +130,19 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// Buttons
//-----------------
let position = 0
for (let it of this.opts.buttons) {
delete it.x
delete it.y
@@ -164,11 +164,19 @@ export default class ButtonGroup extends PIXI.Graphics {
it.fillActive = it.fillActive || this.opts.fillActive
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
it.stroke = it.stroke || this.opts.stroke
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeWidth =
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha =
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeActive = it.strokeActive || this.opts.strokeActive
it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
it.strokeActiveWidth =
it.strokeActiveWidth != null
? it.strokeActiveWidth
: this.opts.strokeActiveWidth
it.strokeActiveAlpha =
it.strokeActiveAlpha != null
? it.strokeActiveAlpha
: this.opts.strokeActiveAlpha
it.textStyle = it.textStyle || this.opts.textStyle
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
it.style = it.style || this.opts.style
@@ -187,7 +195,10 @@ export default class ButtonGroup extends PIXI.Graphics {
it.align = it.align || this.opts.align
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => {
if (this.opts.type === 'radio' && button.opts.type === 'default') {
if (
this.opts.type === 'radio' &&
button.opts.type === 'default'
) {
this.buttons.forEach(it => {
if (it.opts.type === 'default') {
it.active = false
@@ -202,18 +213,25 @@ export default class ButtonGroup extends PIXI.Graphics {
if (it.tooltip) {
if (typeof it.tooltip === 'string') {
it.tooltip = {content: it.tooltip, container: this}
it.tooltip = { content: it.tooltip, container: this }
} else {
it.tooltip = Object.assign({}, {container: this}, it.tooltip)
it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
}
}
let button = new Button(it)
this.addChild(button)
this.buttons.push(button)
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
position +=
(this.opts.orientation === 'horizontal'
? button.width
: button.height) + this.opts.margin
}
if (this.opts.orientation === 'vertical') {
@@ -233,14 +251,13 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Should be called to refresh the layout of the button group. Can be used after resizing.
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@@ -251,26 +268,38 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
draw() {
if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide())
this.clear()
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// Draw borders
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha / 2
)
this.buttons.forEach((it, i) => {
if (i > 0) {
@@ -281,7 +310,6 @@ export default class ButtonGroup extends PIXI.Graphics {
} else {
this.lineTo(it.width, it.y)
}
}
})
@@ -290,10 +318,10 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
*
*
* @member {boolean}
*/
get disabled() {
@@ -301,32 +329,29 @@ export default class ButtonGroup extends PIXI.Graphics {
}
set disabled(value) {
this._disabled = value
this.buttons.forEach(it => it.disabled = value)
this.buttons.forEach(it => (it.disabled = value))
}
/**
* Searches all buttons of the button group and returns the maximum width of one button.
*
*
* @private
* @return {number} The maximum with of a button of the button group.
*/
getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width)
return Math.max(...widths)
}
/**
* Shows the button group (sets his alpha value to 1).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
show() {
this.alpha = 1
return this
@@ -334,11 +359,10 @@ export default class ButtonGroup extends PIXI.Graphics {
/**
* Hides the button group (sets his alpha value to 0).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
hide() {
this.alpha = 0
return this
lib/pixi/flipeffect.js
+60 -58
View File
@@ -1,13 +1,12 @@
import {getId, Angle} from '../utils.js'
import {DOMScatter} from '../scatter.js'
import {CardLoader, DOMFlip, DOMFlippable} from '../flippable.js'
import {Capabilities} from '../capabilities.js'
import {DeepZoomImage} from './deepzoom/image.js'
import { getId, Angle } from '../utils.js'
import { DOMScatter } from '../scatter.js'
import { CardLoader, DOMFlip, DOMFlippable } from '../flippable.js'
import { Capabilities } from '../capabilities.js'
import { DeepZoomImage } from './deepzoom/image.js'
let globalScatterLoaderCanvas = null
export class ScatterLoader extends CardLoader {
get scatter() {
return this.src
}
@@ -35,8 +34,7 @@ export class ScatterLoader extends CardLoader {
if (isSprite) {
w = this.scatter.displayObject.texture.width
h = this.scatter.displayObject.texture.height
}
else if (isDeepZoom) {
} else if (isDeepZoom) {
let [ww, hh] = this.scatter.displayObject.baseSize
w = ww
h = hh
@@ -48,8 +46,9 @@ export class ScatterLoader extends CardLoader {
canvas.width = w
canvas.height = h
let renderer = new PIXI.WebGLRenderer(w, h, {
view: canvas,
resolution: resolution})
view: canvas,
resolution: resolution
})
let displayObject = this.scatter.displayObject
let x = displayObject.x
@@ -64,8 +63,7 @@ export class ScatterLoader extends CardLoader {
if (Capabilities.isSafari) {
displayObject.y = h
displayObject.scale.set(1, -1) // sx, -sy)
}
else {
} else {
displayObject.y = 0
displayObject.scale.set(1, 1)
}
@@ -87,12 +85,11 @@ export class ScatterLoader extends CardLoader {
return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let image = (isImage) ? domNode : document.createElement("img")
let image = isImage ? domNode : document.createElement('img')
let [x, y, w, h, cloneURL] = this.cloneScatterImage()
let [ww, hh] = this.unscaledSize()
image.onload = (e) => {
if (!isImage)
domNode.appendChild(image)
image.onload = e => {
if (!isImage) domNode.appendChild(image)
this.x = x
this.y = y
this.wantedWidth = ww
@@ -101,40 +98,42 @@ export class ScatterLoader extends CardLoader {
this.rotation = this.scatter.rotation
resolve(this)
}
image.onerror = (e) => {
image.onerror = e => {
reject(this)
}
image.src = cloneURL
})
})
}
}
export default class FlipEffect {
constructor(scatter, domScatterContainer, flipTemplate, backLoader) {
this.flipped = false
this.scatter = scatter
this.backLoader = backLoader
this.scatterLoader = new ScatterLoader(scatter)
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate,
this.scatterLoader,
backLoader, {
onBack: this.backCardClosed.bind(this)
})
this.domFlip = new DOMFlip(
domScatterContainer,
flipTemplate,
this.scatterLoader,
backLoader,
{
onBack: this.backCardClosed.bind(this)
}
)
this.setupInfoButton()
}
startFlip() {
let center = this.flipCenter()
let loader = this.backLoader
this.domFlip.load().then((domFlip) => {
this.domFlip.load().then(domFlip => {
this.scatter.displayObject.visible = false
domFlip.centerAt(center)
domFlip.zoom(this.scatter.scale)
let target = this.constraintFlipCenter(center, loader)
console.log("FlipEffect.startFlip", target, loader)
domFlip.start({targetCenter: target})
console.log('FlipEffect.startFlip', target, loader)
domFlip.start({ targetCenter: target })
})
}
@@ -144,13 +143,15 @@ export default class FlipEffect {
flipCenter() {
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let resolution = (isSprite) ? app.renderer.resolution : 1
let resolution = isSprite ? app.renderer.resolution : 1
let center = this.scatter.center
let canvas = app.renderer.view
let domNode = this.domFlip.domScatterContainer.element
let page = window.convertPointFromNodeToPage(canvas,
center.x*resolution,
center.y*resolution)
let page = window.convertPointFromNodeToPage(
canvas,
center.x * resolution,
center.y * resolution
)
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
return local
}
@@ -158,18 +159,14 @@ export default class FlipEffect {
constraintFlipCenter(center, loader) {
let w = loader.wantedWidth
let h = loader.wantedHeight
console.log("constraintFlipCenter", w, h)
console.log('constraintFlipCenter', w, h)
let canvas = app.renderer.view
let x = center.x
let y = center.y
if (x < w/2)
x = w/2
if (y < h/2)
y = h/2
if (x > canvas.width)
x = canvas.width - w/2
if (y > canvas.height)
y = canvas.height - h/2
if (x < w / 2) x = w / 2
if (y < h / 2) y = h / 2
if (x > canvas.width) x = canvas.width - w / 2
if (y > canvas.height) y = canvas.height - h / 2
return { x, y }
}
@@ -177,22 +174,26 @@ export default class FlipEffect {
let iscale = 1.0 / this.scatter.scale
this.infoBtn = new PIXI.Graphics()
this.infoBtn.beginFill(0x333333)
this.infoBtn.lineStyle(4, 0xFFFFFF)
this.infoBtn.lineStyle(4, 0xffffff)
this.infoBtn.drawCircle(0, 0, 22)
this.infoBtn.endFill()
this.infoBtn.beginFill(0xFFFFFF)
this.infoBtn.beginFill(0xffffff)
this.infoBtn.lineStyle(0)
this.infoBtn.drawCircle(0, -8, 4)
this.infoBtn.endFill()
this.infoBtn.lineStyle(6, 0xFFFFFF)
this.infoBtn.lineStyle(6, 0xffffff)
this.infoBtn.moveTo(0, -2)
this.infoBtn.lineTo(0, 14)
this.infoBtn.endFill()
this.infoBtn.on('click', (e) => { this.infoSelected() })
this.infoBtn.on('tap', (e) => { this.infoSelected() })
this.infoBtn.on('click', e => {
this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
this.infoBtn.interactive = true
this.infoBtn.width = 44
@@ -207,8 +208,7 @@ export default class FlipEffect {
this.infoBtn.scale.x = iscale
this.infoBtn.scale.y = iscale
displayObject.foreground.addChild(this.infoBtn)
}
else {
} else {
displayObject.addChild(this.infoBtn)
}
@@ -231,15 +231,15 @@ export default class FlipEffect {
canvas.height = 44 * 4
svgImage.onload = e => {
let displayObject = this.scatter.displayObject
canvas.getContext ('2d').drawImage(svgImage, 0, 0,
canvas.width, canvas.height)
canvas
.getContext('2d')
.drawImage(svgImage, 0, 0, canvas.width, canvas.height)
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
this.infoBtn = new PIXI.Sprite(texure)
this.infoBtn.anchor.set(0.5, 0.5)
if (displayObject.foreground) {
displayObject.foreground.addChild(this.infoBtn)
}
else {
} else {
displayObject.addChild(this.infoBtn)
}
this.infoBtn.scale.set(0.5, 0.5)
@@ -248,8 +248,12 @@ export default class FlipEffect {
this.infoBtn.position = new PIXI.Point(w, h)
this.infoBtn.interactive = true
this.infoBtn.updateTransform()
this.infoBtn.on('click', (e) => { this.infoSelected() })
this.infoBtn.on('tap', (e) => { this.infoSelected() })
this.infoBtn.on('click', e => {
this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
}
svgImage.src = url
}
@@ -275,13 +279,11 @@ export default class FlipEffect {
let ortho = 90
let rest = alpha % ortho
let delta = 0.0
if (rest > (ortho / 2.0)) {
if (rest > ortho / 2.0) {
delta = ortho - rest
}
else {
} else {
delta = -rest
}
return delta
}
}
lib/pixi/flippable.js
+84 -51
View File
@@ -29,10 +29,10 @@
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* app.scene.addChild(front)
*
*
* // Create the flippable
* const flippable = new Flippable(front, back, app.renderer)
*
*
* front.interactive = true
* front.on('click', event => flippable.toggle())
*
@@ -42,7 +42,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
*/
export default class Flippable extends PIXI.projection.Camera3d {
/**
* Creates an instance of a Flippable.
*
@@ -68,30 +67,38 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished.
*/
constructor(front, back, renderer, opts = {}) {
super()
this.opts = Object.assign({}, {
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
}, opts)
this.opts = Object.assign(
{},
{
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
},
opts
)
// planes
//--------------------
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic)
this.setPlanes(
this.opts.focus,
this.opts.near,
this.opts.far,
this.opts.orthographic
)
// flipped
//--------------------
@@ -113,8 +120,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining.
*/
setup() {
const scale = .5
const scale = 0.5
// filters
//--------------------
@@ -131,16 +137,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow
//--------------------
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
const shadow = new PIXI.projection.Sprite3d(
PIXI.Texture.fromImage('../../assets/images/shadow.png')
)
shadow.renderable = false
shadow.anchor.set(0.5)
shadow.scale3d.set(.98)
shadow.scale3d.set(0.98)
shadow.alpha = 0.7
shadow.filters = [blurFilter]
shadow.visible = this.opts.shadow
outer.addChild(shadow)
this.objects.shadow = shadow
// inner
//--------------------
const inner = new PIXI.projection.Container3d()
@@ -153,7 +161,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
front.scale.set(-1 / scale, 1 / scale)
front.renderable = true
front.anchor.set(.5)
front.anchor.set(0.5)
inner.addChild(front)
this.objects.front = front
@@ -162,7 +170,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
back.scale.set(1 / scale, 1 / scale)
back.renderable = false
back.anchor.set(.5)
back.anchor.set(0.5)
inner.addChild(back)
this.objects.back = back
@@ -178,7 +186,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
return this._flipped
}
set flipped(toBack) {
this._flipped = toBack
// references
@@ -199,7 +206,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
//--------------------
front.texture = this.generateTexture(this.opts.front)
back.texture = this.generateTexture(this.opts.back)
// switch objects and set params for virtual objects
//--------------------
const fromCenter = this.anchorToCenter(fromObject)
@@ -224,11 +231,21 @@ export default class Flippable extends PIXI.projection.Camera3d {
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
width: this.opts.useBackTransforms
? toObject.width * 2
: fromObject.width * 2,
height: this.opts.useBackTransforms
? toObject.height * 2
: fromObject.height * 2,
rotation: this.opts.useBackTransforms
? toObject.rotation
: fromObject.rotation,
skewX: this.opts.useBackTransforms
? toObject.skew.x
: fromObject.skew.x,
skewY: this.opts.useBackTransforms
? toObject.skew.y
: fromObject.skew.y
}
// set toObject end values
@@ -305,20 +322,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
// camera
//--------------------
new TimelineMax()
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
.to(this.euler, half, {x: 0, y: 0, ease})
.to(this.euler, half, {
x: this.opts.eulerX,
y: this.opts.eulerY,
ease
})
.to(this.euler, half, { x: 0, y: 0, ease })
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, {alpha: .3, ease})
.to(shadow, half, {alpha: .7, ease})
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
// blurfilter
//--------------------
new TimelineMax()
.to(blurFilter, half, {blur: 6, ease})
.to(blurFilter, half, {blur: .2, ease})
.to(blurFilter, half, { blur: 6, ease })
.to(blurFilter, half, { blur: 0.2, ease })
}
/**
@@ -327,18 +348,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining.
*/
layout() {
const front = this.objects.front
const back = this.objects.back
const shadow = this.objects.shadow
const inner = this.objects.inner
inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
inner.position3d.z =
-Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
//this.objects.shadow.euler = this.objects.inner.euler
shadow.euler.x = -inner.euler.x
shadow.euler.y = -inner.euler.y
if (this.frontSideInFront) {
front.renderable = true
back.renderable = false
@@ -398,13 +419,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {PIXI.Texture} The generated PIXI.Texture.
*/
generateTexture(displayObject) {
// renderTexture
//--------------------
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
const renderTexture = PIXI.RenderTexture.create(
displayObject.width,
displayObject.height
)
// save position
const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y]
const transform = [
displayObject.x,
displayObject.y,
displayObject.scale.x,
displayObject.scale.y,
displayObject.rotation,
displayObject.skew.x,
displayObject.skew.y,
displayObject.pivot.x,
displayObject.pivot.y
]
displayObject.position.set(0, 0)
displayObject.skew.set(0, 0)
@@ -413,7 +446,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// render
//--------------------
this.opts.renderer.render(displayObject, renderTexture)
// restore position
displayObject.setTransform(...transform)
lib/pixi/labeledgraphics.js
+60 -55
View File
@@ -1,10 +1,7 @@
/**
* Defines usefull default text styles.
*/
export class FontInfo {
static get small() {
return app.theme.textStyleSmall
}
@@ -20,15 +17,13 @@ export class FontInfo {
/**
* Static methods to support hyphenation of lines.
*
*
* @class Hypenate
*/
export class Hypenate {
static splitPart(part) {
let parts = part.split('-')
if (parts.length == 1)
return [part]
if (parts.length == 1) return [part]
let result = []
let last = parts.pop()
for (let p of parts) {
@@ -39,7 +34,7 @@ export class Hypenate {
}
static splitWord(word) {
if (typeof (language) == 'undefined') {
if (typeof language == 'undefined') {
if (word.indexOf('-') > -1) {
return word.split('-')
}
@@ -56,13 +51,13 @@ export class Hypenate {
}
static abbreviateLine(label, style, width) {
const pixiStyle = new PIXI.TextStyle(style)
const pixiStyle = new PIXI.TextStyle(style)
let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
while(metrics.width > width && label.length > 3) {
label = label.slice(0, label.length-1)
while (metrics.width > width && label.length > 3) {
label = label.slice(0, label.length - 1)
metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
}
label = label.slice(0, label.length-1)
label = label.slice(0, label.length - 1)
return label + '…'
}
@@ -78,17 +73,21 @@ export class Hypenate {
if (parts.length == 1) {
newWord += '\n' + word + ' '
x = wordMetrics.width + space.width
}
else {
} else {
let first = true
let lastPart = ''
for (let part of parts) {
let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
let partMetrics = PIXI.TextMetrics.measureText(
part,
pixiStyle
)
if (x + partMetrics.width + space.width > width) {
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part
newWord +=
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width
}
else {
} else {
newWord += part
x += partMetrics.width
}
@@ -98,8 +97,7 @@ export class Hypenate {
x += space.width
}
result += newWord + ' '
}
else {
} else {
result += word + ' '
x += wordMetrics.width + space.width
}
@@ -108,7 +106,7 @@ export class Hypenate {
}
/**
* Main method and entry point for text hyphenation
* Main method and entry point for text hyphenation
*
* @static
* @param {*} text
@@ -131,17 +129,21 @@ export class Hypenate {
}
class TextLabel extends PIXI.Text {
/**
*Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @memberof TextLabel
*/
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
super(text, style, canvas )
this.normFontSize = this.style.fontSize
constructor(
text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom
this.maxZoom = maxZoom
}
@@ -180,10 +182,9 @@ class TextLabel extends PIXI.Text {
* @extends {PIXI.Graphics}
*/
export class LabeledGraphics extends PIXI.Graphics {
/**
* Creates an instance of LabeledGraphics and defines a local label cache.
*
*
* @memberof LabeledGraphics
*/
constructor() {
@@ -195,14 +196,13 @@ export class LabeledGraphics extends PIXI.Graphics {
return new TextLabel(label, fontInfo)
}
/**
* Main additional method. Ensures that a text object is created that is cached
* under the given key.
*
* @param {*} key - The cache key
* @param {*} label - The label to show
* @param {*} [attrs={}] - Defines attributes of the text object.
* @param {*} [attrs={}] - Defines attributes of the text object.
* align: 'right', 'left', or 'center'
* justify: 'top', 'bottom', or 'center'
* maxLines: {integer} truncates the text and adds ellipsis
@@ -213,11 +213,9 @@ export class LabeledGraphics extends PIXI.Graphics {
* @memberof LabeledGraphics
*/
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
if (attrs.maxWidth && attrs.maxLines == 1) {
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
}
else {
} else {
if (attrs.maxWidth) {
label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
}
@@ -231,7 +229,7 @@ export class LabeledGraphics extends PIXI.Graphics {
label = this.truncateLabel(label, fontInfo, maxLines)
}
}
if (!this.labels.has(key)) {
let text = this._createText(label, fontInfo)
this.labels.set(key, text)
@@ -241,8 +239,7 @@ export class LabeledGraphics extends PIXI.Graphics {
for (let k in attrs) {
text[k] = attrs[k]
}
if (label != text.text)
text.text = label
if (label != text.text) text.text = label
// We do not follow the flexbox jargon and use align for x and justify for y axis
// This deviation is needed to ensure backward compatability
switch (attrs.justify || null) {
@@ -293,17 +290,30 @@ export class LabeledGraphics extends PIXI.Graphics {
const truncatedLines = lines.slice(0, maxLines)
const lastLine = truncatedLines[truncatedLines.length - 1]
const words = lastLine.split(' ')
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => {
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
return { ...data, length: wordWrapWidth }
}
return {
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
length: data.length + wordLength + spaceLength,
};
}, { text: '', length: dotsLength })
const wordMetrics = PIXI.TextMetrics.measureText(
`\u00A0\n...\n${words.join('\n')}`,
pixiStyle
)
const [
spaceLength,
dotsLength,
...wordLengths
] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce(
(data, wordLength, i) => {
if (
data.length + wordLength + spaceLength >=
wordWrapWidth
) {
return { ...data, length: wordWrapWidth }
}
return {
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
length: data.length + wordLength + spaceLength
}
},
{ text: '', length: dotsLength }
)
truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
newText = truncatedLines.join('\n')
}
@@ -321,7 +331,7 @@ export class LabeledGraphics extends PIXI.Graphics {
return this.labels.get(key)
}
/**
/**
* Hides the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@@ -333,7 +343,7 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
/**
/**
* Removes the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@@ -344,7 +354,6 @@ export class LabeledGraphics extends PIXI.Graphics {
label.destroy()
}
/**
* Ensures that labels are hidden on clear.
*
@@ -367,7 +376,6 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
const labelCache = new Map()
function getTexture(label, fontInfo = FontInfo.normal) {
@@ -385,7 +393,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
}
class SpriteLabel extends PIXI.Sprite {
constructor(label, fontInfo) {
let texture = getTexture(label, fontInfo)
super(texture)
@@ -405,10 +412,8 @@ class SpriteLabel extends PIXI.Sprite {
}
export class BitmapLabeledGraphics extends LabeledGraphics {
_createText(label, fontInfo) {
let texture = getTexture(label, fontInfo)
return new SpriteLabel(texture)
}
}
lib/pixi/list.js
+75 -59
View File
@@ -9,10 +9,10 @@ import Events from '../events.js'
* @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
*
*
* // Create the list
* const list = new List([elephant1, elephant2])
*
*
* app.scene.addChild(list)
*
* @class
@@ -21,7 +21,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/
export default class List extends PIXI.Container {
/**
* Creates an instance of a Flippable.
*
@@ -43,19 +42,22 @@ export default class List extends PIXI.Container {
* scroll your list.
*/
constructor(items = [], opts = {}) {
super()
this.opts = Object.assign({}, {
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
}, opts)
this.opts = Object.assign(
{},
{
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
},
opts
)
this.__items = items
this.__dragging = false
@@ -72,7 +74,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Container()
@@ -87,7 +88,7 @@ export default class List extends PIXI.Container {
// add items
//--------------------
for(let item of this.__items) {
for (let item of this.__items) {
container.addChild(item)
}
@@ -107,7 +108,9 @@ export default class List extends PIXI.Container {
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
const bounds = this.mask
? this.mask.getBounds()
: this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
@@ -131,7 +134,7 @@ export default class List extends PIXI.Container {
setItems(items) {
this.container.removeChildren()
this.__items = items
for(let item of this.__items) {
for (let item of this.__items) {
this.container.addChild(item)
}
this.layout()
@@ -143,14 +146,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
layout() {
const margin = this.opts.margin
let x = margin
let y = margin
for (let item of this.__items) {
item.x = x
item.y = y
@@ -166,13 +167,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
case 'center':
this.__items.forEach(it => it.x = margin + this.width / 2 - it.width / 2)
this.__items.forEach(
it => (it.x = margin + this.width / 2 - it.width / 2)
)
break
case 'right':
this.__items.forEach(it => it.x = margin + this.width - it.width)
this.__items.forEach(
it => (it.x = margin + this.width - it.width)
)
break
default:
this.__items.forEach(it => it.x = margin)
this.__items.forEach(it => (it.x = margin))
break
}
@@ -192,13 +197,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) {
case 'top':
this.__items.forEach(it => it.y = margin)
this.__items.forEach(it => (it.y = margin))
break
case 'bottom':
this.__items.forEach(it => it.y = margin + this.height - it.height)
this.__items.forEach(
it => (it.y = margin + this.height - it.height)
)
break
default:
this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2)
this.__items.forEach(
it => (it.y = margin + this.height / 2 - it.height / 2)
)
break
}
@@ -217,13 +226,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerWidth() {
let size = 0
this.__items.forEach(it => size += it.width)
this.__items.forEach(it => (size += it.width))
size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin
@@ -231,13 +239,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerHeight() {
let size = 0
this.__items.forEach(it => size += it.height)
this.__items.forEach(it => (size += it.height))
size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin
@@ -246,11 +253,10 @@ export default class List extends PIXI.Container {
/**
* Resizes the list.
*
*
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/
resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight
} else {
@@ -261,12 +267,11 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
@@ -276,21 +281,19 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, {x: true, y: true})
if (typeof ThrowPropsPlugin != "undefined") {
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
@@ -302,19 +305,18 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = {}
if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min
@@ -333,37 +335,48 @@ export default class List extends PIXI.Container {
}
}
if (typeof ThrowPropsPlugin != "undefined") {
ThrowPropsPlugin.to(this.container.position, {
throwProps,
ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
}, .8, .4)
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
} else if (
this.container.position.x + this.innerWidth <
this.opts.width
) {
this.container.position.x = this.opts.width - this.innerWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
} else if (
this.container.position.y + this.innerHeight <
this.opts.height
) {
this.container.position.y = this.opts.height - this.innerHeight
}
}
@@ -375,7 +388,10 @@ export default class List extends PIXI.Container {
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
const originalEvent =
event.data && event.data.originalEvent
? event.data.originalEvent
: event
Events.capturedBy(originalEvent, this)
}
}
lib/pixi/message.js
+29 -27
View File
@@ -1,9 +1,9 @@
import Theme from './theme.js'
import {InteractivePopup} from './popup.js'
import { InteractivePopup } from './popup.js'
/**
* Class that represents a Message. A message pops up and disappears after a specific amount of time.
*
*
* @example
* // Create the PixiJS App
* const app = new PIXIApp({
@@ -11,7 +11,7 @@ import {InteractivePopup} from './popup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create a button
* let button = new Button({
* label: 'Click me',
@@ -24,7 +24,7 @@ import {InteractivePopup} from './popup.js'
* app.scene.addChild(message)
* }
* })
*
*
* // Add the button to the scene
* app.scene.addChild(button)
*
@@ -33,10 +33,9 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
*/
export default class Message extends InteractivePopup {
/**
* Creates an instance of a Message.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the message.
* @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
@@ -53,32 +52,34 @@ export default class Message extends InteractivePopup {
* @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
}, opts)
opts = Object.assign(
{},
{
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
},
opts
)
super(opts)
}
/**
* Relayouts the position of the message box.
*
*
* @return {Message} Returns the message box for chaining.
*/
layout() {
super.layout()
// horizontal
@@ -87,10 +88,11 @@ export default class Message extends InteractivePopup {
this.x = this.opts.margin
break
case 'center':
this.x = (this.opts.app.size.width / 2) - (this.width / 2)
this.x = this.opts.app.size.width / 2 - this.width / 2
break
case 'right':
this.x = this.opts.app.size.width - this.opts.margin - this.width
this.x =
this.opts.app.size.width - this.opts.margin - this.width
break
}
@@ -100,21 +102,21 @@ export default class Message extends InteractivePopup {
this.y = this.opts.margin
break
case 'middle':
this.y = (this.opts.app.size.height / 2) - (this.height / 2)
this.y = this.opts.app.size.height / 2 - this.height / 2
break
case 'bottom':
this.y = this.opts.app.size.height - this.opts.margin - this.height
this.y =
this.opts.app.size.height - this.opts.margin - this.height
break
}
}
/**
* Shows the message box.
*
*
* @private
*/
show() {
super.show()
if (this.opts.autoClose) {
lib/pixi/modal.js
+40 -31
View File
@@ -1,9 +1,9 @@
import Theme from './theme.js'
import {InteractivePopup} from './popup.js'
import { InteractivePopup } from './popup.js'
/**
* Class that represents a PixiJS Modal.
*
*
* @example
* // Create the button and the modal when clicked
* const button = new Button({
@@ -28,10 +28,9 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
*/
export default class Modal extends PIXI.Container {
/**
* Creates an instance of a Modal.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the modal.
@@ -43,20 +42,23 @@ export default class Modal extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: .6,
closeOnBackground: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: 0.6,
closeOnBackground: true,
visible: true
},
opts
)
this.id = this.opts.id
@@ -74,15 +76,14 @@ export default class Modal extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Modal} A reference to the modal for chaining.
*/
setup() {
// interaction
//-----------------
this.interactive = true
@@ -120,21 +121,23 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the modal. Can be used after resizing.
*
*
* @return {Modal} A reference to the modal for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
// background
//-----------------
this.background.clear()
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
this.background.beginFill(
this.opts.backgroundFill,
this.opts.backgroundFillAlpha
)
this.background.drawRect(0, 0, width, height)
this.background.endFill()
@@ -144,33 +147,39 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Shows the modal (sets his alpha values to 1).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
show() {
TweenLite.to(this, this.theme.fast, {alpha: 1, onStart: () => this.visible = true})
TweenLite.to(this, this.theme.fast, {
alpha: 1,
onStart: () => (this.visible = true)
})
return this
}
/**
* Hides the modal (sets his alpha values to 0).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false})
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this
}
/**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string or a PIXI.Text object.
*
*
* @member {string|PIXI.Text}
*/
get header() {
@@ -182,11 +191,11 @@ export default class Modal extends PIXI.Container {
this.popup.destroy()
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string or a PIXI.DisplayObject.
*
*
* @member {string|PIXI.DisplayObject}
*/
get content() {
lib/pixi/popover.js
+45 -23
View File
@@ -1,13 +1,30 @@
/**
*
*
*/
export default class Popover extends PIXI.Graphics {
constructor({title = null, text = null, x = 0, y = 0, placement = 'top', width = 250, titleStyle = {}, textStyle = {fontSize: '1.6em'}} = {}) {
constructor({
title = null,
text = null,
x = 0,
y = 0,
placement = 'top',
width = 250,
titleStyle = {},
textStyle = { fontSize: '1.6em' }
} = {}) {
super()
this.opts = {title, text, x, y, placement, width, titleStyle, textStyle}
this.opts = {
title,
text,
x,
y,
placement,
width,
titleStyle,
textStyle
}
this.padding = 12
let style = {
@@ -16,12 +33,16 @@ export default class Popover extends PIXI.Graphics {
stroke: '#f6f6f6',
strokeThickness: 3,
wordWrap: true,
wordWrapWidth: width - (this.padding * 2)
wordWrapWidth: width - this.padding * 2
}
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle))
this.titleTextStyle = new PIXI.TextStyle(
Object.assign({}, style, titleStyle)
)
this.textTextStyle = new PIXI.TextStyle(
Object.assign({}, style, textStyle)
)
if (title || text) {
this.setup()
this.draw()
@@ -43,7 +64,10 @@ export default class Popover extends PIXI.Graphics {
if (this.opts.text) {
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle)
this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding)
this.textText.position.set(
this.padding,
this.titleY + this.titleHeight + this.padding
)
this.addChild(this.textText)
}
@@ -58,7 +82,7 @@ export default class Popover extends PIXI.Graphics {
draw() {
this.clear()
this.beginFill(0xffffff, 1)
this.lineStyle(1, 0x282828, .5)
this.lineStyle(1, 0x282828, 0.5)
// Draw rounded rectangle
const height = this.height + this.padding
@@ -72,7 +96,7 @@ export default class Popover extends PIXI.Graphics {
this.lineStyle(0)
this.beginFill(0xf7f7f7, 1)
let x = 1
let y = this.titleText.x + this.titleText.height + (this.padding / 2)
let y = this.titleText.x + this.titleText.height + this.padding / 2
this.moveTo(x, y)
y = 9
this.lineTo(x, y)
@@ -82,7 +106,7 @@ export default class Popover extends PIXI.Graphics {
this.lineTo(x, y)
this.quadraticCurveTo(x + 5, y, x + 5, y + 8)
x += 5
y += this.titleText.x + this.titleText.height + (this.padding / 2)
y += this.titleText.x + this.titleText.height + this.padding / 2
this.lineTo(x, y)
if (this.opts.text) {
x = 1
@@ -100,7 +124,6 @@ export default class Popover extends PIXI.Graphics {
}
drawAnchor(placement) {
let x = 0
let y = 0
@@ -109,7 +132,7 @@ export default class Popover extends PIXI.Graphics {
if (this.opts.title) {
this.beginFill(0xf7f7f7, 1)
}
x = (this.width / 2) - 10
x = this.width / 2 - 10
y = 1
this.moveTo(x, y)
x += 10
@@ -121,7 +144,7 @@ export default class Popover extends PIXI.Graphics {
break
case 'right':
x = 1
y = (this.height / 2) - 10
y = this.height / 2 - 10
if (this.titleY + this.titleHeight > y) {
this.beginFill(0xf7f7f7, 1)
}
@@ -135,7 +158,7 @@ export default class Popover extends PIXI.Graphics {
break
case 'left':
x = this.width - 2
y = (this.height / 2) - 10
y = this.height / 2 - 10
if (this.titleY + this.titleHeight > y) {
this.beginFill(0xf7f7f7, 1)
}
@@ -148,7 +171,7 @@ export default class Popover extends PIXI.Graphics {
this.lineTo(x, y)
break
default:
x = (this.width / 2) - 10
x = this.width / 2 - 10
y = this.height - 2
this.moveTo(x, y)
x += 10
@@ -162,22 +185,21 @@ export default class Popover extends PIXI.Graphics {
}
positioning() {
const x = this.opts.x
const y = this.opts.y
switch (this.opts.placement) {
case 'bottom':
this.position.set(x - (this.width / 2), y + 10)
this.position.set(x - this.width / 2, y + 10)
break
case 'right':
this.position.set(x, y - (this.height / 2))
this.position.set(x, y - this.height / 2)
break
case 'left':
this.position.set(x - this.width, y - (this.height / 2))
this.position.set(x - this.width, y - this.height / 2)
break
default:
this.position.set(x - (this.width / 2), y - this.height)
this.position.set(x - this.width / 2, y - this.height)
break
}
}
lib/pixi/popup.js
+52 -28
View File
@@ -12,7 +12,6 @@ import ButtonGroup from './buttongroup.js'
* @extends AbstractPopup
*/
export class InteractivePopup extends AbstractPopup {
/**
* Creates an instance of an InteractivePopup (only for internal use).
*
@@ -24,13 +23,16 @@ export class InteractivePopup extends AbstractPopup {
* @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
}, opts)
opts = Object.assign(
{},
{
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
},
opts
)
super(opts)
@@ -56,7 +58,6 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
super.setup()
// interaction
@@ -72,7 +73,10 @@ export class InteractivePopup extends AbstractPopup {
// closeButton
//-----------------
if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
let closeButton = PIXI.Sprite.fromImage(
'../../assets/icons/close.png',
true
)
closeButton.width = this.headerStyle.fontSize
closeButton.height = closeButton.width
closeButton.tint = this.theme.color2
@@ -95,7 +99,11 @@ export class InteractivePopup extends AbstractPopup {
// maxWidth is set and a closeButton should be displayed
//-----------------
if (this.opts.maxWidth) {
const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width
const wordWrapWidth =
this.opts.maxWidth -
2 * this.opts.padding -
this.smallPadding -
this._closeButton.width
if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) {
@@ -108,9 +116,19 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.button || this.opts.buttonGroup) {
if (this.opts.button) {
this._buttons = new Button(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button))
this._buttons = new Button(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.button
)
)
} else {
this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup))
this._buttons = new ButtonGroup(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.buttonGroup
)
)
}
this.addChild(this._buttons)
@@ -126,21 +144,23 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
super.layout()
// closeButton
//-----------------
if (this.opts.closeButton) {
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width
this._closeButton.x =
this.wantedWidth - this.smallPadding - this._closeButton.width
this._closeButton.y = this.smallPadding
}
// buttons
//-----------------
if (this._buttons) {
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
this._buttons.x =
this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
}
return this
@@ -150,13 +170,12 @@ export class InteractivePopup extends AbstractPopup {
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @override
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let size = super.getInnerSize()
if (this._closeButton) {
@@ -164,7 +183,10 @@ export class InteractivePopup extends AbstractPopup {
}
if (this._buttons) {
size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
size.width = Math.max(
size.width,
this._buttons.x + this._buttons.width
)
size.height += this.innerPadding + this._buttons.height
}
@@ -190,7 +212,6 @@ export class InteractivePopup extends AbstractPopup {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
*/
export default class Popup extends InteractivePopup {
/**
* Creates an instance of a Popup.
*
@@ -201,12 +222,15 @@ export default class Popup extends InteractivePopup {
* @param {number} [opts.minHeight=0] - The minimum height of the popup.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeButton: false,
minWidth: 0,
minHeight: 0
}, opts)
opts = Object.assign(
{},
{
closeButton: false,
minWidth: 0,
minHeight: 0
},
opts
)
super(opts)
}
lib/pixi/popupmenu.js
+29 -20
View File
@@ -3,7 +3,7 @@ import Popup from './popup.js'
/**
* Class that represents a PixiJS PopupMenu.
*
*
* @example
* // Create the button and the modal when clicked
* const button = new Button({
@@ -28,10 +28,9 @@ import Popup from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
*/
export default class PopupMenu extends Popup {
/**
* Creates an instance of a PopupMenu.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object.
@@ -43,38 +42,42 @@ export default class PopupMenu extends Popup {
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
}, opts)
opts = Object.assign(
{},
{
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
},
opts
)
super(opts)
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {PopupMenu} A reference to the popupmenu for chaining.
*/
setup() {
// content
//-----------------
const content = new PIXI.Container()
let y = 0
for (let item of this.opts.items) {
let object = null
if (item.label) {
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
object = new PIXI.Text(
item.label,
item.textStyle || this.opts.textStyle
)
} else {
object = item.content
}
@@ -83,16 +86,22 @@ export default class PopupMenu extends Popup {
if (item.action) {
if (item.disabled) {
object.alpha = .5
object.alpha = 0.5
} else {
object.interactive = true
object.buttonMode = true
}
object.on('pointerover', e => {
TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'})
TweenLite.to(object, this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
})
object.on('pointerout', e => {
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'})
TweenLite.to(object, this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
object.on('pointerup', e => {
item.action.call(object, e, object)
lib/pixi/progress.js
+92 -67
View File
@@ -2,7 +2,7 @@ import Theme from './theme.js'
/**
* Class that represents a PixiJS Progress.
*
*
* @example
* // Create the progress
* const progress = new Progress({
@@ -18,10 +18,9 @@ import Theme from './theme.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
*/
export default class Progress extends PIXI.Container {
/**
* Creates an instance of a Progress.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the progress.
* @param {number} [opts.id=auto generated] - The id of the progress.
@@ -53,36 +52,39 @@ export default class Progress extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
},
opts
)
this.id = this.opts.id
@@ -91,7 +93,7 @@ export default class Progress extends PIXI.Container {
this.barActive = null
this.alpha = 0
this.visible = this.opts.visible
this._progress = 0
@@ -104,15 +106,14 @@ export default class Progress extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
setup() {
// interaction
//-----------------
this.on('added', e => {
@@ -139,14 +140,13 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the progress. Can be used after resizing.
*
*
* @return {Progress} A reference to the progress for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
@@ -154,7 +154,10 @@ export default class Progress extends PIXI.Container {
//-----------------
if (this.opts.background) {
this.background.clear()
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
this.background.beginFill(
this.opts.backgroundFill,
this.opts.backgroundFillAlpha
)
this.background.drawRect(0, 0, width, height)
this.background.endFill()
}
@@ -163,15 +166,14 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
draw() {
this.bar.clear()
this.barActive.clear()
@@ -180,59 +182,80 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
drawBar() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
this.radius = this.opts.radius
if ((this.radius * 2) > this.opts.height) {
if (this.radius * 2 > this.opts.height) {
this.radius = this.opts.height / 2
}
const wantedWidth = this.opts.width || (width - (2 * this.opts.margin))
const wantedWidth = this.opts.width || width - 2 * this.opts.margin
const wantedHeight = this.opts.height
this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.bar.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
if (this.radius > 1) {
this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
this.bar.drawRoundedRect(
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
}
this.bar.endFill()
this.bar.x = width / 2 - this.bar.width / 2
this.bar.y = height / 2 - this.bar.height / 2
return this
}
/**
* Draws the active bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
drawBarActive() {
const wantedWidth = this.bar.width - 2 * this.opts.padding
const wantedHeight = this.bar.height - 2 * this.opts.padding
const wantedWidth = this.bar.width - (2 * this.opts.padding)
const wantedHeight = this.bar.height - (2 * this.opts.padding)
const barActiveWidth = wantedWidth * this._progress / 100
const barActiveWidth = (wantedWidth * this._progress) / 100
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.barActive.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) {
if (this.radius > 1) {
this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
this.barActive.drawRoundedRect(
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
}
@@ -244,39 +267,41 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Shows the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
show() {
TweenLite.to(this, this.theme.fast, {alpha: 1})
TweenLite.to(this, this.theme.fast, { alpha: 1 })
return this
}
/**
* Hides the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false})
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this
}
/**
* Gets or sets the progress. Has to be a number between 0 and 100.
*
*
* @member {number}
*/
get progress() {
return this._progress
}
set progress(value) {
value = Math.round(value)
if (value < 0) {
@@ -294,7 +319,7 @@ export default class Progress extends PIXI.Container {
if (value === 100 && this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => this.destroy({children: true})
onComplete: () => this.destroy({ children: true })
})
}
}
lib/pixi/scatter.js
+86 -58
View File
@@ -9,30 +9,32 @@ import { InteractionMapper } from '../interaction.js'
* on the same level.
*/
export class ScatterContainer extends PIXI.Graphics {
/**
* @constructor
* @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing
* @param {Bool} stopEvents - Whether events should be stopped or propagated
* @param {Bool} claimEvents - Whether events should be marked as claimed
* if findTarget return as non-null value.
* @param {PIXI.Container} container - A container for the scatter
* @param {Bool} showBounds - Show bounds for debugging purposes.
* @param {Bool} showTouches - Show touches and pointer for debugging purposes.
* @param {Color} backgroundColor - Set background color if specified.
* @param {PIXIApp} app - Needed if showBounds is true to register
* update handler.
*/
constructor(renderer, {
stopEvents = true,
claimEvents = true,
container = null,
showBounds = false,
showPolygon = false,
showTouches = false,
backgroundColor = null,
app = window.app
} = {}) {
* @constructor
* @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing
* @param {Bool} stopEvents - Whether events should be stopped or propagated
* @param {Bool} claimEvents - Whether events should be marked as claimed
* if findTarget return as non-null value.
* @param {PIXI.Container} container - A container for the scatter
* @param {Bool} showBounds - Show bounds for debugging purposes.
* @param {Bool} showTouches - Show touches and pointer for debugging purposes.
* @param {Color} backgroundColor - Set background color if specified.
* @param {PIXIApp} app - Needed if showBounds is true to register
* update handler.
*/
constructor(
renderer,
{
stopEvents = true,
claimEvents = true,
container = null,
showBounds = false,
showPolygon = false,
showTouches = false,
backgroundColor = null,
app = window.app
} = {}
) {
super()
this.container = container
if (this.container)
@@ -53,7 +55,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.backgroundColor = backgroundColor
if (showBounds || showTouches || showPolygon) {
//console.log("Show TOUCHES!!!")
this.app.ticker.add((delta) => this.update(delta), this)
this.app.ticker.add(delta => this.update(delta), this)
}
if (backgroundColor) {
this.updateBackground()
@@ -77,8 +79,12 @@ export class ScatterContainer extends PIXI.Graphics {
let y = 0
// @container: We need to call the constant values, as the container
// gets resized, when a child moves outside the original boundaries.
let w = (this.container) ? this.containerDimensions.x : (this.backgroundWidth || this.app.width)
let h = (this.container) ? this.containerDimensions.y : (this.backgroundHeight || this.app.height)
let w = this.container
? this.containerDimensions.x
: this.backgroundWidth || this.app.width
let h = this.container
? this.containerDimensions.y
: this.backgroundHeight || this.app.height
if (this.app.fullscreen && this.app.monkeyPatchMapping) {
let fixed = this.mapPositionToPoint({ x: w, y: 0 })
@@ -113,7 +119,7 @@ export class ScatterContainer extends PIXI.Graphics {
update(dt) {
this.clear()
this.lineStyle(1, 0x0000FF)
this.lineStyle(1, 0x0000ff)
if (this.showBounds) {
for (let child of this.children) {
if (child.scatter) {
@@ -125,11 +131,11 @@ export class ScatterContainer extends PIXI.Graphics {
this.drawCircle(child.scatter.x, child.scatter.y, 4)
}
}
this.lineStyle(2, 0x0000FF)
this.lineStyle(2, 0x0000ff)
this.drawShape(this.bounds)
}
if (this.showPolygon) {
this.lineStyle(2, 0xFF0000)
this.lineStyle(2, 0xff0000)
for (let child of this.children) {
if (child.scatter) {
let polygon = child.scatter.polygon
@@ -149,8 +155,7 @@ export class ScatterContainer extends PIXI.Graphics {
}
capture(event) {
if (this.stopEvents)
Events.stop(event)
if (this.stopEvents) Events.stop(event)
return true
}
@@ -162,8 +167,14 @@ export class ScatterContainer extends PIXI.Graphics {
// if (hit) {
// console.log("findHitScatter", displayObject)
// }
if (hit && this.hitScatter === null && typeof (displayObject) != undefined) {
this.hitScatter = (displayObject.scatter) ? displayObject.scatter : null
if (
hit &&
this.hitScatter === null &&
typeof displayObject != undefined
) {
this.hitScatter = displayObject.scatter
? displayObject.scatter
: null
}
}
@@ -173,7 +184,10 @@ export class ScatterContainer extends PIXI.Graphics {
let local = new PIXI.Point()
let interactionManager = this.renderer.plugins.interaction
interactionManager.mapPositionToPoint(local, point.x, point.y)
if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
if (
element instanceof DisplayObjectScatter &&
element.displayObject.parent != null
) {
return element.displayObject.parent.toLocal(local)
}
return local
@@ -190,11 +204,13 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction
let fakeEvent = this.fakeInteractionEvent(local)
interactionManager.processInteractive(fakeEvent,
interactionManager.processInteractive(
fakeEvent,
this,
this.findHitScatter.bind(this), true)
if (this.claimEvents)
event.claimedByScatter = this.hitScatter
this.findHitScatter.bind(this),
true
)
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
@@ -209,19 +225,13 @@ export class ScatterContainer extends PIXI.Graphics {
let displayObject = interactionManager.hitTest(local, this)
if (displayObject != null && displayObject.scatter != null)
this.hitScatter = displayObject.scatter
if (this.claimEvents)
event.claimedByScatter = this.hitScatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
onStart(event, interaction) {}
onStart(event, interaction) {
}
onMove(event, interaction) {
}
onMove(event, interaction) {}
onEnd(event, interaction) {
for (let key of interaction.ended.keys()) {
@@ -253,7 +263,6 @@ export class ScatterContainer extends PIXI.Graphics {
if (this.backgroundColor) {
this.updateBackground()
}
}
}
@@ -262,14 +271,20 @@ export class ScatterContainer extends PIXI.Graphics {
* PIXI.DisplayObject can be wrapped.
*/
export class DisplayObjectScatter extends AbstractScatter {
constructor(displayObject, renderer,
{ x = null, y = null,
constructor(
displayObject,
renderer,
{
x = null,
y = null,
minScale = 0.1,
maxScale = 1.0,
startScale = 1.0,
autoBringToFront = true,
translatable = true, scalable = true, rotatable = true, resizable = false,
translatable = true,
scalable = true,
rotatable = true,
resizable = false,
movableX = true,
movableY = true,
throwVisibility = 44,
@@ -279,19 +294,29 @@ export class DisplayObjectScatter extends AbstractScatter {
rotation = null,
overdoScaling = 1.5,
onTransform = null,
onThrowFinished = null } = {}) {
onThrowFinished = null
} = {}
) {
// For the simulation of named parameters,
// see: http://exploringjs.com/es6/ch_parameter-handling.html
super({
overdoScaling,
minScale, maxScale,
minScale,
maxScale,
startScale,
autoBringToFront,
translatable, scalable, rotatable, resizable,
movableX, movableY, throwVisibility, throwDamping,
translatable,
scalable,
rotatable,
resizable,
movableX,
movableY,
throwVisibility,
throwDamping,
autoThrow,
onThrowFinished,
rotationDegrees, rotation,
rotationDegrees,
rotation,
onTransform
})
this.displayObject = displayObject
@@ -458,7 +483,10 @@ export class DisplayObjectScatter extends AbstractScatter {
if (this.displayObject.parent instanceof ScatterContainer) {
let scatterContainer = this.displayObject.parent
scatterContainer.bringToFront(this.displayObject)
} else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
} else if (
this.displayObject.parent != null &&
this.displayObject.parent.scatter
) {
this.displayObject.parent.scatter.toFront(this.displayObject)
}
}
lib/pixi/scrollbox.js
+223 -201
View File
@@ -1,5 +1,3 @@
/**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/
@@ -26,26 +24,29 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
constructor(options) {
super()
this.options = Object.assign({}, {
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
}, options)
this.options = Object.assign(
{},
{
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
},
options
)
this.ease = new PIXI.extras.Ease.list()
this.on('added', event => {
@@ -57,10 +58,15 @@ export default class Scrollbox extends PIXI.Container {
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport}
*/
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
this.content
.decelerate()
.on('moved', () => this._drawScrollbars())
this.content = this.addChild(
new PIXI.extras.Viewport({
passiveWheel: this.options.stopPropagation,
stopPropagation: this.options.stopPropagation,
screenWidth: this.options.boxWidth,
screenHeight: this.options.boxHeight
})
)
this.content.decelerate().on('moved', () => this._drawScrollbars())
/**
* graphics element for drawing the scrollbars
@@ -82,12 +88,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
get scrollbarOffsetHorizontal() {
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
set scrollbarOffsetHorizontal(value) {
this.options.scrollbarOffsetHorizontal = value
}
@@ -95,12 +99,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
get scrollbarOffsetVertical() {
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
set scrollbarOffsetVertical(value) {
this.options.scrollbarOffsetVertical = value
}
@@ -108,14 +110,11 @@ export default class Scrollbox extends PIXI.Container {
* disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean}
*/
get disable()
{
get disable() {
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
set disable(value) {
if (this._disabled !== value) {
this._disabled = value
this.update()
}
@@ -125,12 +124,10 @@ export default class Scrollbox extends PIXI.Container {
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
get stopPropagation() {
return this.options.stopPropagation
}
set stopPropagation(value)
{
set stopPropagation(value) {
this.options.stopPropagation = value
}
@@ -138,19 +135,14 @@ export default class Scrollbox extends PIXI.Container {
* user may drag the content area to scroll content
* @type {boolean}
*/
get dragScroll()
{
get dragScroll() {
return this.options.dragScroll
}
set dragScroll(value)
{
set dragScroll(value) {
this.options.dragScroll = value
if (value)
{
if (value) {
this.content.drag()
}
else
{
} else {
this.content.removePlugin('drag')
}
this.update()
@@ -160,12 +152,10 @@ export default class Scrollbox extends PIXI.Container {
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number}
*/
get boxWidth()
{
get boxWidth() {
return this.options.boxWidth
}
set boxWidth(value)
{
set boxWidth(value) {
this.options.boxWidth = value
this.content.screenWidth = value
this.update()
@@ -178,12 +168,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
get overflow() {
return this.options.overflow
}
set overflow(value)
{
set overflow(value) {
this.options.overflow = value
this.options.overflowX = value
this.options.overflowY = value
@@ -197,12 +185,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowX()
{
get overflowX() {
return this.options.overflowX
}
set overflowX(value)
{
set overflowX(value) {
this.options.overflowX = value
this.update()
}
@@ -214,12 +200,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
get overflowY() {
return this.options.overflowY
}
set overflowY(value)
{
set overflowY(value) {
this.options.overflowY = value
this.update()
}
@@ -228,12 +212,10 @@ export default class Scrollbox extends PIXI.Container {
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number}
*/
get boxHeight()
{
get boxHeight() {
return this.options.boxHeight
}
set boxHeight(value)
{
set boxHeight(value) {
this.options.boxHeight = value
this.content.screenHeight = value
this.update()
@@ -243,12 +225,10 @@ export default class Scrollbox extends PIXI.Container {
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
get scrollbarSize() {
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
set scrollbarSize(value) {
this.options.scrollbarSize = value
}
@@ -257,9 +237,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
get contentWidth() {
return (
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
}
/**
@@ -267,9 +249,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
get contentHeight() {
return (
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
}
/**
@@ -277,8 +261,7 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
get isScrollbarVertical() {
return this._isScrollbarVertical
}
@@ -287,24 +270,21 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
get isScrollbarHorizontal() {
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
get scrollTop() {
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
get scrollLeft() {
return this.content.left
}
@@ -312,12 +292,10 @@ export default class Scrollbox extends PIXI.Container {
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
get scrollWidth() {
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
set scrollWidth(value) {
this._scrollWidth = value
}
@@ -325,12 +303,10 @@ export default class Scrollbox extends PIXI.Container {
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
get scrollHeight() {
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
set scrollHeight(value) {
this._scrollHeight = value
}
@@ -338,52 +314,111 @@ export default class Scrollbox extends PIXI.Container {
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
_drawScrollbars() {
this._isScrollbarHorizontal =
this.overflowX === 'scroll'
? true
: ['hidden', 'none'].indexOf(this.overflowX) !== -1
? false
: this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical =
this.overflowY === 'scroll'
? true
: ['hidden', 'none'].indexOf(this.overflowY) !== -1
? false
: this.scrollHeight > this.options.boxHeight
this.scrollbar.clear()
let options = {}
options.left = 0
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.right =
this.scrollWidth +
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
options.bottom =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width =
this.scrollWidth +
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight
this.scrollbarHeight =
this.scrollbarTop + this.scrollbarHeight > this.boxHeight
? this.boxHeight - this.scrollbarTop
: this.scrollbarHeight
this.scrollbarLeft = (this.content.left / width) * this.boxWidth
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
if (this.isScrollbarVertical)
{
this.scrollbarWidth =
this.scrollbarWidth + this.scrollbarLeft > this.boxWidth
? this.boxWidth - this.scrollbarLeft
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
.endFill()
}
if (this.isScrollbarVertical)
{
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
.endFill()
}
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
@@ -394,8 +429,7 @@ export default class Scrollbox extends PIXI.Container {
* draws mask layer
* @private
*/
_drawMask()
{
_drawMask() {
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
@@ -406,19 +440,20 @@ export default class Scrollbox extends PIXI.Container {
/**
* call when scrollbox content changes
*/
update()
{
update() {
this.content.mask = null
this._maskContent.clear()
if (!this._disabled)
{
if (!this._disabled) {
this._drawScrollbars()
this._drawMask()
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
if (direction !== null)
{
if (this.options.dragScroll) {
const direction =
this.isScrollbarHorizontal && this.isScrollbarVertical
? 'all'
: this.isScrollbarHorizontal
? 'x'
: 'y'
if (direction !== null) {
this.content
.drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow })
@@ -430,18 +465,18 @@ export default class Scrollbox extends PIXI.Container {
/**
* show the scrollbar and restart the timer for fade if options.fade is set
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
activateFade() {
if (this.options.fade) {
if (this.fade) {
this.ease.remove(this.fade)
}
this.scrollbar.alpha = 1
const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
this.fade.on('each', () => this.content.dirty = true)
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
wait: this.options.fadeWait,
ease: this.options.fadeEase
})
this.fade.on('each', () => (this.content.dirty = true))
}
}
@@ -450,60 +485,47 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarDown(e)
{
scrollbarDown(e) {
const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
if (this.isScrollbarHorizontal) {
if (local.y > this.boxHeight - this.scrollbarSize) {
if (
local.x >= this.scrollbarLeft &&
local.x <= this.scrollbarLeft + this.scrollbarWidth
) {
this.pointerDown = { type: 'horizontal', last: local }
}
else
{
if (local.x > this.scrollbarLeft)
{
} else {
if (local.x > this.scrollbarLeft) {
this.content.left += this.content.worldScreenWidth
this.update()
}
else
{
} else {
this.content.left -= this.content.worldScreenWidth
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
if (
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
this.pointerDown = { type: 'vertical', last: local }
}
else
{
if (local.y > this.scrollbarTop)
{
} else {
if (local.y > this.scrollbarTop) {
this.content.top += this.content.worldScreenHeight
this.update()
}
else
{
} else {
this.content.top -= this.content.worldScreenHeight
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
@@ -516,26 +538,20 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
scrollbarMove(e) {
if (this.pointerDown) {
if (this.pointerDown.type === 'horizontal') {
const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local
this.update()
}
else if (this.pointerDown.type === 'vertical')
{
} else if (this.pointerDown.type === 'vertical') {
const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local
this.update()
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
}
@@ -545,8 +561,7 @@ export default class Scrollbox extends PIXI.Container {
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
scrollbarUp() {
this.pointerDown = null
}
@@ -558,19 +573,27 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
if (options.scrollWidth)
{
resize(options) {
this.options.boxWidth =
typeof options.boxWidth !== 'undefined'
? options.boxWidth
: this.options.boxWidth
this.options.boxHeight =
typeof options.boxHeight !== 'undefined'
? options.boxHeight
: this.options.boxHeight
if (options.scrollWidth) {
this.scrollWidth = options.scrollWidth
}
if (options.scrollHeight)
{
if (options.scrollHeight) {
this.scrollHeight = options.scrollHeight
}
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
this.content.resize(
this.options.boxWidth,
this.options.boxHeight,
this.scrollWidth,
this.scrollHeight
)
this.update()
}
@@ -581,8 +604,7 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
ensureVisible(x, y, width, height) {
this.content.ensureVisible(x, y, width, height)
this._drawScrollbars()
}
lib/pixi/scrollview.js
+7 -11
View File
@@ -2,7 +2,7 @@ import Scrollbox from './scrollbox.js'
/**
* Class that represents a PixiJS Scrollview.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@@ -10,7 +10,7 @@ import Scrollbox from './scrollbox.js'
* width: 600,
* height: 400
* }).setup().run()
*
*
* // Create the Scrollview
* app.loader
* .add('elephant', './assets/elephant-1.jpg')
@@ -26,38 +26,34 @@ import Scrollbox from './scrollbox.js'
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/
export default class Scrollview extends Scrollbox {
/**
* Creates an instance of a Scrollview.
*
*
* @constructor
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
*/
constructor(opts = {}) {
super(opts)
this.opts = opts
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
*
*
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
layout() {
this.update()
return this
lib/pixi/slider.js
+114 -85
View File
@@ -27,7 +27,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Slider.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the slider
* const slider = new Slider({
* x: 10,
@@ -51,10 +51,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
*/
export default class Slider extends PIXI.Container {
/**
* Creates an instance of a Slider.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the slider.
* @param {number} [opts.id=auto generated] - The id of the slider.
@@ -82,46 +81,49 @@ export default class Slider extends PIXI.Container {
* @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
* @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: .5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: 0.5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
},
opts
)
this.opts.container = this.opts.container || this
// Validation
@@ -149,7 +151,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// setup
@@ -160,23 +162,26 @@ export default class Slider extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
setup() {
// Container events
//-----------------
const container = this.opts.container
this.on('pointermove', e => {
if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
const moveX = this.control.event.data.getLocalPosition(
this.control.parent
).x
this._value = this.pixelToValue(
moveX - this.control.delta - this.opts.controlRadius
)
let x = this.valueToPixel(this._value) + this.opts.controlRadius
this.control.x = x
@@ -188,8 +193,16 @@ export default class Slider extends PIXI.Container {
if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false)
container.addEventListener('pointercancel', e => this.onEnd(e), false)
container.addEventListener('pointerleave', e => this.onEnd(e), false)
container.addEventListener(
'pointercancel',
e => this.onEnd(e),
false
)
container.addEventListener(
'pointerleave',
e => this.onEnd(e),
false
)
container.addEventListener('pointerout', e => this.onEnd(e), false)
container.addEventListener('mouseup', e => this.onEnd(e), false)
container.addEventListener('mousecancel', e => this.onEnd(e), false)
@@ -220,7 +233,7 @@ export default class Slider extends PIXI.Container {
control.event = e
control.delta = e.data.getLocalPosition(this.control).x
control.dragging = true
if (this.opts.onStart) {
this.opts.onStart.call(this, e, this)
}
@@ -229,20 +242,20 @@ export default class Slider extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
this.sliderObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
})
this.sliderObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
})
this.sliderObj.on('pointerdown', e => {
this.sliderObj.pointerdowned = true
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
})
// Click on the slider bar
@@ -250,15 +263,17 @@ export default class Slider extends PIXI.Container {
if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false
const position = e.data.getLocalPosition(this.control.parent)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
this.value = this.pixelToValue(
position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
// disabled
//-----------------
this.disabled = this.opts.disabled
// tooltip
//-----------------
if (this.opts.tooltip) {
@@ -275,14 +290,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the slider. Can be used after resizing.
*
*
* @return {Slider} A reference to the slider for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@@ -293,15 +307,14 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Draws the slider to the canvas.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
draw() {
const r = this.radius
const cr = this.opts.controlRadius
const w = this.opts.width
@@ -312,12 +325,16 @@ export default class Slider extends PIXI.Container {
this.sliderObj.clear()
this.sliderObj.beginFill(0xffffff, 0)
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.sliderObj.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
this.sliderObj.moveTo(x, y)
this.sliderObj.lineTo(x + w, y)
this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r)
this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r)
this.sliderObj.lineTo(x, y + h)
this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r)
@@ -326,10 +343,20 @@ export default class Slider extends PIXI.Container {
// Draw control
this.control.clear()
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
this.opts.controlStrokeWidth,
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.beginFill(
this.opts.controlFill,
this.opts.controlFillAlpha
)
this.control.drawCircle(0, 0, cr - 1)
this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.drawCircle(0, 0, cr / 6)
this.control.endFill()
@@ -338,12 +365,11 @@ export default class Slider extends PIXI.Container {
/**
* Executed, when the slider control movement ended.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
onEnd(e) {
if (this.control.dragging) {
this.control.event = null
this.control.dragging = false
@@ -357,9 +383,9 @@ export default class Slider extends PIXI.Container {
/**
* Calculates the value for a given pixel.
*
*
* @private
* @param {number} value
* @param {number} value
* @returns {number} The calucalted pixel.
*/
valueToPixel(value) {
@@ -368,14 +394,17 @@ export default class Slider extends PIXI.Container {
} else if (value > this.opts.max) {
value = this.opts.max
}
return this.opts.width * (value - this.opts.min) / (this.opts.max - this.opts.min)
return (
(this.opts.width * (value - this.opts.min)) /
(this.opts.max - this.opts.min)
)
}
/**
* Calculates the pixel for a given value.
*
*
* @private
* @param {number} pixel
* @param {number} pixel
* @returns {number} The calucalted value.
*/
pixelToValue(pixel) {
@@ -384,12 +413,15 @@ export default class Slider extends PIXI.Container {
} else if (pixel > this.opts.width) {
pixel = this.opts.width
}
return this.opts.min + ((this.opts.max - this.opts.min) * pixel / this.opts.width)
return (
this.opts.min +
((this.opts.max - this.opts.min) * pixel) / this.opts.width
)
}
/**
* Gets or sets the value.
*
*
* @member {number}
*/
get value() {
@@ -405,27 +437,26 @@ export default class Slider extends PIXI.Container {
const x = this.valueToPixel(value) + this.opts.controlRadius
TweenLite.to(this.control, this.theme.fast, {x})
TweenLite.to(this.control, this.theme.fast, { x })
}
/**
* Gets or sets the disabled state. When disabled, the slider cannot be clicked.
*
*
* @member {boolean}
*/
get disabled() {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.interactive = false
this.sliderObj.interactive = false
this.control.interactive = false
this.control.buttonMode = false
this.alpha = .5
this.alpha = 0.5
} else {
this.interactive = true
this.sliderObj.interactive = true
@@ -437,11 +468,10 @@ export default class Slider extends PIXI.Container {
/**
* Shows the slider (sets his alpha values to 1).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.fillAlpha = 1
this.opts.controlStrokeAlpha = 1
@@ -451,14 +481,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Hides the slider (sets his alpha values to 1).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.fillAlpha = 0
this.opts.controlStrokeAlpha = 0
lib/pixi/stylus.js
+57 -47
View File
@@ -4,7 +4,6 @@ import Events from '../events.js'
import { Angle } from '../utils.js'
class StylusCommand extends Object {
constructor() {
super()
}
@@ -23,7 +22,6 @@ class StylusCommand extends Object {
}
class StrokeCommand extends StylusCommand {
constructor(stroke) {
super()
this.stroke = stroke
@@ -50,7 +48,6 @@ class StrokeCommand extends StylusCommand {
}
class ClearCommand extends StylusCommand {
do(stylus) {
// Clears the command stack
stylus.commandStack = []
@@ -71,20 +68,20 @@ class ClearCommand extends StylusCommand {
}
}
export default class Stylus extends PIXI.Graphics {
constructor({ width = window.innerWidth,
constructor({
width = window.innerWidth,
height = window.innerHeight,
interactive = true,
color = 0x000000,
tiltX = 0,
tiltY = 0,
backgroundAlpha = 1,
backgroundFill = 0xFFFFFF,
backgroundFill = 0xffffff,
colorAlpha = 1,
captureEvents = true,
acceptMouseEvents = true } = {}) {
acceptMouseEvents = true
} = {}) {
super()
this.activePointers = 0
this.wantedWidth = width
@@ -95,16 +92,15 @@ export default class Stylus extends PIXI.Graphics {
this.color = color
this.interactive = interactive
this.debug = false
this.tiltX = tiltX // degrees -90 ... 90
this.tiltY = tiltY // degrees -90 ... 90
this.tiltX = tiltX // degrees -90 ... 90
this.tiltY = tiltY // degrees -90 ... 90
this.captureEvents = captureEvents
this.commandStack = []
this.undoCommandStack = []
this.strokes = []
this.stroke = []
this.minStrokeLength = 4
if (captureEvents)
this.registerEventHandler(acceptMouseEvents)
if (captureEvents) this.registerEventHandler(acceptMouseEvents)
this.drawBackground()
}
@@ -121,9 +117,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusPointer(event) {
let identifier = event.data.identifier
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
if (touch.identifier === identifier && touch.touchType === 'stylus') {
if (
touch.identifier === identifier &&
touch.touchType === 'stylus'
) {
this.tiltX = Angle.radian2degree(touch.azimuthAngle)
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
return true
@@ -141,9 +140,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusTouch(event) {
let identifier = event.data.identifier
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
if (touch.identifier === identifier && touch.pointerType === 'touch') {
if (
touch.identifier === identifier &&
touch.pointerType === 'touch'
) {
return true
}
}
@@ -165,25 +167,26 @@ export default class Stylus extends PIXI.Graphics {
}
registerEventHandler() {
window.addEventListener('keydown', (e) => {
window.addEventListener('keydown', e => {
switch (e.keyCode) {
case 38: // up arrow
this.tiltX += 5
break
case 40: // down arrow
this.tiltX -= 5
break
case 37: // left arrow
this.tiltY -= 5
break
case 39: // right arrow
this.tiltY += 5
break
case 38: // up arrow
this.tiltX += 5
break
case 40: // down arrow
this.tiltX -= 5
break
case 37: // left arrow
this.tiltY -= 5
break
case 39: // right arrow
this.tiltY += 5
break
}
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
if (this.debug)
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
})
this.on('pointerdown', (e) => {
this.on('pointerdown', e => {
if (this.debug) console.log('pointerdown', e)
if (this.eventInside(e)) {
this.activePointers += 1
@@ -193,14 +196,19 @@ export default class Stylus extends PIXI.Graphics {
}
})
this.on('pointermove', (e) => {
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
if (this.debug) console.log('pointermove', e, this.eventInside(e))
this.on('pointermove', e => {
if (
Events.isPointerDown(e.data.originalEvent) ||
this.isStylusPointer(e) ||
this.isStylusTouch(e)
) {
if (this.debug)
console.log('pointermove', e, this.eventInside(e))
if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(e))
}
})
this.on('pointerup', (e) => {
this.on('pointerup', e => {
if (this.eventInside(e)) {
if (this.activePointers > 0) {
this.activePointers -= 1
@@ -209,13 +217,13 @@ export default class Stylus extends PIXI.Graphics {
}
if (this.debug) console.log('pointerup', this.activePointers)
})
this.on('pointerleave', (e) => {
this.on('pointerleave', e => {
if (this.activePointers > 0) {
this.activePointers -= 1
}
this.endStroke(this.toStroke(e))
})
this.on('pointercancel', (e) => {
this.on('pointercancel', e => {
if (this.activePointers > 0) {
this.activePointers -= 1
}
@@ -246,7 +254,6 @@ export default class Stylus extends PIXI.Graphics {
}
eventInside(event) {
let local = this.toLocal(event.data.global)
for (let child of this.children) {
let r = child.getBounds()
@@ -255,10 +262,8 @@ export default class Stylus extends PIXI.Graphics {
return false
}
}
if (local.x < 0 || local.x > this.wantedWidth)
return false
if (local.y < 0 || local.y > this.wantedHeight)
return false
if (local.x < 0 || local.x > this.wantedWidth) return false
if (local.y < 0 || local.y > this.wantedHeight) return false
event.stopPropagation()
// if (this.debug) console.log('stopPropagation', event)
if (event.data.originalEvent.claimedByScatter) {
@@ -276,9 +281,11 @@ export default class Stylus extends PIXI.Graphics {
let x = Math.max(0, Math.min(local.x, this.wantedWidth))
let y = Math.max(0, Math.min(local.y, this.wantedHeight))
let desc = {
x, y,
x,
y,
pressure: event.pressure || null,
tiltX: this.tiltX, tiltY: this.tiltY,
tiltX: this.tiltX,
tiltY: this.tiltY,
color: this.color
}
return desc
@@ -313,8 +320,11 @@ export default class Stylus extends PIXI.Graphics {
this.moveTo(start.x, start.y)
for (let i = 1; i < stroke.length; i++) {
let info = stroke[i]
this.lineStyle(this.tiltToLineWidth(info.tiltY),
info.color, this.colorAlpha)
this.lineStyle(
this.tiltToLineWidth(info.tiltY),
info.color,
this.colorAlpha
)
this.lineTo(info.x, info.y)
}
this.endFill()
@@ -329,7 +339,7 @@ export default class Stylus extends PIXI.Graphics {
drawStrokes() {
this.drawBackground()
this.lineStyle(1.0, 0xFF0000, 1)
this.lineStyle(1.0, 0xff0000, 1)
for (let stroke of this.iterStrokes()) {
this.drawStroke(stroke)
}
lib/pixi/switch.js
+160 -103
View File
@@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Switch.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@@ -43,7 +43,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the switch
* const switch1 = new Switch({
* x: 10,
@@ -59,10 +59,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/
export default class Switch extends PIXI.Container {
/**
* Creates an instance of a Switch.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the switch.
* @param {number} [opts.id=auto generated] - The id of the switch.
@@ -102,56 +101,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
* @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
this.opts.controlRadius =
this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
@@ -170,7 +174,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
@@ -197,15 +201,14 @@ export default class Switch extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
setup() {
// Switch
//-----------------
let switchObj = new PIXI.Graphics()
@@ -216,7 +219,7 @@ export default class Switch extends PIXI.Container {
//-----------------
this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2
@@ -224,23 +227,22 @@ export default class Switch extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
this.switchObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
})
this.switchObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
})
this.switchObj.on('pointerdown', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
})
this.switchObj.on('pointerup', e => {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
@@ -257,7 +259,7 @@ export default class Switch extends PIXI.Container {
}
}
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
@@ -271,7 +273,7 @@ export default class Switch extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active
// tooltip
//-----------------
if (this.opts.tooltip) {
@@ -288,14 +290,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the switch. Can be used after resizing.
*
*
* @return {Switch} A reference to the switch for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@@ -306,28 +307,50 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Draws the switch to the canvas.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
draw() {
this.switchObj.clear()
if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.switchObj.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else {
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.switchObj.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
}
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
@@ -336,52 +359,91 @@ export default class Switch extends PIXI.Container {
// Draw control
this.control.clear()
if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.control.lineStyle(
this.opts.controlStrokeActiveWidth,
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
} else {
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
this.opts.controlStrokeWidth,
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.beginFill(
this.opts.controlFill,
this.opts.controlFillAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
}
this.control.endFill()
return this
}
/**
* Draws the animation.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
drawAnimated() {
this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.switchObj.lineStyle(
this.tempAnimated.strokeWidth,
this.tempAnimated.stroke,
this.tempAnimated.strokeAlpha
)
this.switchObj.beginFill(
this.tempAnimated.fill,
this.tempAnimated.fillAlpha
)
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.lineStyle(
this.tempAnimated.controlStrokeWidth,
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()
return this
}
/**
* Gets or sets the active state.
*
*
* @member {boolean}
*/
get active() {
@@ -389,12 +451,10 @@ export default class Switch extends PIXI.Container {
}
set active(value) {
this._active = value
if (this._active) {
TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
TweenLite.to(this.control, this.opts.duration, { x: this.xActive })
TweenLite.to(this.tempAnimated, this.opts.duration, {
colorProps: {
fill: this.opts.fillActive,
@@ -413,10 +473,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
} else {
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive})
TweenLite.to(this.control, this.opts.durationActive, {
x: this.xInactive
})
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: {
fill: this.opts.fill,
@@ -437,10 +497,10 @@ export default class Switch extends PIXI.Container {
})
}
}
/**
* Gets or sets the disabled state. When disabled, the switch cannot be clicked.
*
*
* @member {boolean}
*/
get disabled() {
@@ -448,14 +508,13 @@ export default class Switch extends PIXI.Container {
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.switchObj.interactive = false
this.switchObj.buttonMode = false
this.switchObj.alpha = .5
this.control.alpha = .5
this.switchObj.alpha = 0.5
this.control.alpha = 0.5
} else {
this.switchObj.interactive = true
this.switchObj.buttonMode = true
@@ -466,11 +525,10 @@ export default class Switch extends PIXI.Container {
/**
* Shows the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
@@ -484,14 +542,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Hides the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0
lib/pixi/test.js
+30 -25
View File
@@ -15,12 +15,11 @@ export class Command extends PIXI.Graphics {
this.setup()
}
setup() {
}
setup() {}
draw() {
this.clear()
var color = (this.selected) ? this.selectedColor : 0xFFFFFF
var color = this.selected ? this.selectedColor : 0xffffff
this.lineStyle(0)
this.beginFill(color, 1)
this.drawShape(this.shape)
@@ -108,7 +107,6 @@ export class StopCommand extends Command {
}
export class RecorderTools extends PIXI.Container {
constructor(renderer) {
super(renderer)
this.renderer = renderer
@@ -122,7 +120,9 @@ export class RecorderTools extends PIXI.Container {
setup(container) {
// Since this delegate might shadow another delegate, we mus avoid
// capturing PointerEvents.
this.delegate = new InteractionMapper(container, this, { capturePointerEvents: false })
this.delegate = new InteractionMapper(container, this, {
capturePointerEvents: false
})
}
findTarget(event, local, global) {
@@ -131,13 +131,21 @@ export class RecorderTools extends PIXI.Container {
setupToolbar() {
this.toolbar = new PIXI.Graphics()
this.record = new RecordCommand(this, 0xCC0000, new PIXI.Circle(0, 0, 16))
this.play = new PlayCommand(this, 0x0000CC, new PIXI.Polygon(0, 16,
32, 16 + 16,
0, 16 + 32,
0, 16))
this.stop = new StopCommand(this, 0x0000CC,
new PIXI.Rectangle(0, 0, 32, 32))
this.record = new RecordCommand(
this,
0xcc0000,
new PIXI.Circle(0, 0, 16)
)
this.play = new PlayCommand(
this,
0x0000cc,
new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)
)
this.stop = new StopCommand(
this,
0x0000cc,
new PIXI.Rectangle(0, 0, 32, 32)
)
this.toolbar.addChild(this.record).position.set(44, 48)
this.toolbar.addChild(this.play).position.set(44 + 44, 16)
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
@@ -149,7 +157,7 @@ export class RecorderTools extends PIXI.Container {
var graphics = this.toolbar
graphics.clear()
graphics.beginFill(0x000000, 0.5)
graphics.lineStyle(2, 0xFFFFFF, 1)
graphics.lineStyle(2, 0xffffff, 1)
graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8)
graphics.endFill()
}
@@ -175,7 +183,11 @@ export class RecorderTools extends PIXI.Container {
mapPositionToPoint(point) {
let local = new PIXI.Point()
this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y)
this.renderer.plugins.interaction.mapPositionToPoint(
local,
point.x,
point.y
)
return local
}
@@ -184,8 +196,7 @@ export class RecorderTools extends PIXI.Container {
}
capture(event) {
if (typeof event.mouseDownSubstitute != 'undefined')
return false
if (typeof event.mouseDownSubstitute != 'undefined') return false
return true
}
@@ -226,8 +237,7 @@ export class RecorderTools extends PIXI.Container {
let local = this.extractLocal(event)
if (this.toolbar.containsPoint(local)) {
this.onPress(local)
}
else {
} else {
this.recordEvent(event)
this.updateTouchGraphics(interaction)
}
@@ -244,9 +254,9 @@ export class RecorderTools extends PIXI.Container {
}
let p = current.get(key)
if (key == 'mouse') {
graphics.beginFill(0xCC0000, 0.5)
graphics.beginFill(0xcc0000, 0.5)
} else {
graphics.beginFill(0xCCCCCC, 0.5)
graphics.beginFill(0xcccccc, 0.5)
}
graphics.drawCircle(p.x, p.y, 20)
}
@@ -256,7 +266,6 @@ export class RecorderTools extends PIXI.Container {
}
export class AppTest extends PIXIApp {
constructor(canvas, container) {
super({ view: canvas, backgroundColor: 0x000000 })
this.container = container
@@ -277,7 +286,3 @@ export class AppTest extends PIXIApp {
return this
}
}
lib/pixi/theme.js
+80 -54
View File
@@ -31,7 +31,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export default class Theme {
/**
* Creates an instance of a Theme.
*
@@ -81,52 +80,86 @@ export default class Theme {
* is used for large actived text.
*/
constructor(opts = {}) {
const colorPrimary =
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
this.opts = Object.assign({}, {
margin: 12,
padding: 12,
radius: 4,
fast: .25,
normal: .5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: .6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: .6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
}, opts)
this.opts = Object.assign(
{},
{
margin: 12,
padding: 12,
radius: 4,
fast: 0.25,
normal: 0.5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: 0.6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
},
opts
)
// Set textStyle and variants
this.opts.textStyle = Object.assign({}, {
fontFamily: '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
fontWeight: '500',
fontSize: 18,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
}, this.opts.textStyle)
this.opts.textStyleSmall = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize - 3}, this.opts.textStyleSmall)
this.opts.textStyleLarge = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize + 3}, this.opts.textStyleLarge)
this.opts.textStyleActive = Object.assign({}, this.opts.textStyle, {fill: this.opts.primaryColor}, this.opts.textStyleActive)
this.opts.textStyleSmallActive = Object.assign({}, this.opts.textStyleSmall, {fill: this.opts.primaryColor}, this.opts.textStyleSmallActive)
this.opts.textStyleLargeActive = Object.assign({}, this.opts.textStyleLarge, {fill: this.opts.primaryColor}, this.opts.textStyleLargeActive)
this.opts.textStyle = Object.assign(
{},
{
fontFamily:
'"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
fontWeight: '500',
fontSize: 18,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
},
this.opts.textStyle
)
this.opts.textStyleSmall = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize - 3 },
this.opts.textStyleSmall
)
this.opts.textStyleLarge = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize + 3 },
this.opts.textStyleLarge
)
this.opts.textStyleActive = Object.assign(
{},
this.opts.textStyle,
{ fill: this.opts.primaryColor },
this.opts.textStyleActive
)
this.opts.textStyleSmallActive = Object.assign(
{},
this.opts.textStyleSmall,
{ fill: this.opts.primaryColor },
this.opts.textStyleSmallActive
)
this.opts.textStyleLargeActive = Object.assign(
{},
this.opts.textStyleLarge,
{ fill: this.opts.primaryColor },
this.opts.textStyleLargeActive
)
Object.assign(this, this.opts)
}
@@ -139,7 +172,6 @@ export default class Theme {
* @return {Theme} Returns a newly created Theme object.
*/
static fromString(theme) {
if (theme && typeof theme === 'object') {
return theme
}
@@ -171,9 +203,7 @@ export default class Theme {
* @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeDark extends Theme {
}
export class ThemeDark extends Theme {}
/**
* Class that represents a PixiJS ThemeLight.
@@ -193,15 +223,13 @@ export class ThemeDark extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeLight extends Theme {
/**
* Creates an instance of a ThemeLight.
*
* @constructor
*/
constructor() {
super({color1: 0xf6f6f6, color2: 0x282828})
super({ color1: 0xf6f6f6, color2: 0x282828 })
}
}
@@ -223,14 +251,12 @@ export class ThemeLight extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeRed extends Theme {
/**
* Creates an instance of a ThemeRed.
*
* @constructor
*/
constructor() {
super({primaryColor: 0xd92f31})
super({ primaryColor: 0xd92f31 })
}
}
lib/pixi/timeline.js
+167 -123
View File
@@ -2,9 +2,7 @@ import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
import { Capabilities } from '../capabilities.js'
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
export class Ticks {
get reservedPrefixes() {
return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
}
@@ -70,15 +68,19 @@ export class Ticks {
visibleLast = end
}
}
if (first == null)
return info
return { start: first, end: last, visibleStart: visibleFirst, visibleEnd: visibleLast, units: units }
if (first == null) return info
return {
start: first,
end: last,
visibleStart: visibleFirst,
visibleEnd: visibleLast,
units: units
}
}
drawTick(timeline, x, y, date) {
let visible = date > timeline.start && date < timeline.end
if (!visible)
return false
if (!visible) return false
timeline.drawTick(x)
return true
}
@@ -87,13 +89,24 @@ export class Ticks {
return date.toLocaleDateString('de', format)
}
draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks=false) {
draw(
timeline,
range,
width,
height,
available,
format,
nextFormat,
level,
extraTicks = false
) {
let first = null
let last = null
let keyedFormat = (format) ? format[this.formatKey] : null
let keyedNextFormat = (nextFormat) ? nextFormat[this.formatKey] : null
let redundant = (nextFormat) ? this.formatKey in nextFormat : false
let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
let keyedFormat = format ? format[this.formatKey] : null
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
let redundant = nextFormat ? this.formatKey in nextFormat : false
let fullyRedundant =
keyedFormat != null && keyedFormat == keyedNextFormat
let y = timeline.getY()
for (let { start, end } of this.iterRanges(range)) {
let x = timeline.toX(start)
@@ -110,31 +123,29 @@ export class Ticks {
let nextX = timeline.toX(end) - 100
if (x < 0 && nextX > -100 && !redundant) {
xx = Math.min(4, nextX)
}
else {
} else {
xx -= 2
}
}
else if (level > 0) {
} else if (level > 0) {
xx = x + available / 2
}
if (!fullyRedundant) {
timeline.ensureLabel(key, text,
timeline.ensureLabel(
key,
text,
{ x: xx, y: yy, align },
FontInfo.small)
FontInfo.small
)
}
if (extraTicks)
timeline.drawTick(x, -level)
if (extraTicks) timeline.drawTick(x, -level)
}
if (timeline.visibleRange(start, end)) {
if (first == null)
first = start
if (first == null) first = start
last = end
}
}
if (first == null)
return null
if (first == null) return null
return { start: first, end: last }
}
@@ -149,7 +160,6 @@ export class Ticks {
}
export class DecadeTicks extends Ticks {
get milliseconds() {
return 10 * 365 * 24 * 60 * 60 * 1000
}
@@ -182,14 +192,12 @@ export class DecadeTicks extends Ticks {
}
export class YearTicks extends Ticks {
get milliseconds() {
return 365 * 24 * 60 * 60 * 1000
}
format(available) {
if (available < 44)
return { year: '2-digit', timeZone: 'UTC' }
if (available < 44) return { year: '2-digit', timeZone: 'UTC' }
return { year: 'numeric', timeZone: 'UTC' }
}
@@ -211,17 +219,14 @@ export class YearTicks extends Ticks {
}
export class MonthTicks extends Ticks {
get milliseconds() {
return (365 / 12) * 24 * 60 * 60 * 1000
}
format(available) {
let format = { month: 'narrow', timeZone: 'UTC' }
if (available > 44)
format.month = 'short'
if (available > 66)
format.year = '2-digit'
if (available > 44) format.month = 'short'
if (available > 66) format.year = '2-digit'
if (available > 100) {
format.month = 'long'
format.year = 'numeric'
@@ -251,15 +256,13 @@ export class MonthTicks extends Ticks {
}
export class DayTicks extends Ticks {
get milliseconds() {
return 24 * 60 * 60 * 1000
}
format(available) {
let format = { day: 'numeric', timeZone: 'UTC' }
if (available > 44)
format.month = 'short'
if (available > 44) format.month = 'short'
if (available > 100) {
format.month = 'long'
format.year = '2-digit'
@@ -283,7 +286,11 @@ export class DayTicks extends Ticks {
}
iterStart(start) {
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate()
)
}
next(date) {
@@ -292,7 +299,6 @@ export class DayTicks extends Ticks {
}
export class HourTicks extends Ticks {
get milliseconds() {
return 60 * 60 * 1000
}
@@ -325,17 +331,22 @@ export class HourTicks extends Ticks {
}
dateKey(date) {
return this.key + date.getFullYear()
+ date.getMonth()
+ date.getDate()
+ date.getHours()
return (
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours()
)
}
iterStart(start) {
return Dates.create(start.getFullYear(),
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours())
start.getHours()
)
}
next(date) {
@@ -348,7 +359,6 @@ export class HourTicks extends Ticks {
}
export class MinuteTicks extends Ticks {
get milliseconds() {
return 60 * 1000
}
@@ -378,19 +388,24 @@ export class MinuteTicks extends Ticks {
}
dateKey(date) {
return this.key + date.getFullYear()
+ date.getMonth()
+ date.getDate()
+ date.getHours()
+ date.getMinutes()
return (
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours() +
date.getMinutes()
)
}
iterStart(start) {
return Dates.create(start.getFullYear(),
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours(),
start.getMinutes())
start.getMinutes()
)
}
next(date) {
@@ -403,7 +418,6 @@ export class MinuteTicks extends Ticks {
}
export class TimeTicks {
constructor(...ticks) {
this.ticks = ticks
}
@@ -435,9 +449,11 @@ export class TimeTicks {
let amount = ticks.milliseconds / duration
let available = amount * size
availables.set(ticks, available)
if (available < ticks.minWidth)
break
formats.set(ticks, (available < ticks.minLabelWidth) ? null : ticks.format(available))
if (available < ticks.minWidth) break
formats.set(
ticks,
available < ticks.minLabelWidth ? null : ticks.format(available)
)
nextFormats.set(previous, formats.get(ticks))
previous = ticks
visible.push(ticks)
@@ -445,21 +461,26 @@ export class TimeTicks {
let level = 0
let ranges = []
for (let ticks of visible) {
if (range == null)
continue
range = ticks.draw(timeline, range, width, height,
if (range == null) continue
range = ticks.draw(
timeline,
range,
width,
height,
availables.get(ticks),
formats.get(ticks),
nextFormats.get(ticks), level)
nextFormats.get(ticks),
level
)
if (range) {
ranges.push({ticks, range})
ranges.push({ ticks, range })
}
level += 1
}
let extraLevel = ranges.length - 1
let extraStart = extraLevel
for(let {ticks, range} of ranges) {
for (let { ticks, range } of ranges) {
ticks.drawExtra(timeline, range, extraLevel)
extraLevel -= 1
if (extraLevel <= 0) {
@@ -475,7 +496,6 @@ export class TimeTicks {
}
export class ColorRanges {
constructor(label, color, ranges) {
this.label = label
this.color = color
@@ -502,9 +522,16 @@ export class ColorRanges {
}
export default class Timeline extends BitmapLabeledGraphics {
constructor(width, height, { ticks = null,
baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
constructor(
width,
height,
{
ticks = null,
baseLine = 0.5,
showRange = true,
throwDamping = 0.95
} = {}
) {
super()
this.wantedWidth = width
this.wantedHeight = height
@@ -521,10 +548,12 @@ export default class Timeline extends BitmapLabeledGraphics {
this.deltas = []
this.labelDates = []
this.colorRanges = []
this.rangeColors = new Cycle(Colors.eminence,
this.rangeColors = new Cycle(
Colors.eminence,
Colors.steelblue,
Colors.ochre,
Colors.turquoise)
Colors.turquoise
)
this.callbacks = []
this.onTapCallbacks = []
this.onDoubleTapCallbacks = []
@@ -536,18 +565,21 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false
this.direction = -1
this.throwDamping = throwDamping
this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks())
this.timeticks =
ticks ||
new TimeTicks(
new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks()
)
this.labelPrefix = '__'
}
updateSelection() {
if (this.visibleDate(this.start) && this.visibleDate(this.end)) {
this.selection = [this.start, this.end]
}
else {
} else {
this.timeticks.selectedRange(this)
}
@@ -593,8 +625,12 @@ export default class Timeline extends BitmapLabeledGraphics {
let cr = this.colorRanges[i]
let label = cr.label
cr.draw(this, w, h)
let current = this.ensureLabel('colorRange:' + label, label,
{ x: xx, y: yy, align: 'right' }, FontInfo.small)
let current = this.ensureLabel(
'colorRange:' + label,
label,
{ x: xx, y: yy, align: 'right' },
FontInfo.small
)
let r = current.getBounds()
xx -= r.width + 16
@@ -623,7 +659,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.prepareLabels()
this.updateColorRanges(w, h)
this.lineStyle(2, 0xFFFFFF)
this.lineStyle(2, 0xffffff)
if (this.start != null && this.end != null) {
this.moveTo(this.toX(this.start), y)
this.lineTo(this.toX(this.end), y)
@@ -631,32 +667,30 @@ export default class Timeline extends BitmapLabeledGraphics {
this.updateSelection()
let selected = this.selection
if (selected[0] != this.start && selected[1] != this.end) {
if (this.showRange)
this.drawSelectedRamge(selected)
if (this.showRange) this.drawSelectedRamge(selected)
}
for (let callback of this.callbacks) {
callback(this.scroll, this.zoom, this.selection)
}
}
else {
} else {
this.moveTo(this.inset, y)
this.lineTo(w - this.inset, y)
}
if (this.progress != null && this.progress < 1) {
this.lineStyle(2, 0xCCCCFF)
this.lineStyle(2, 0xccccff)
this.moveTo(this.inset, y)
this.lineTo((w - this.inset) * this.progress, y)
}
}
totalWidth(bounded = false) {
let w = this.wantedWidth - (2 * this.inset)
let w = this.wantedWidth - 2 * this.inset
return w * this.validZoom(this.zoom, bounded)
}
validZoom(zoom, bounded = true) {
let overshoot = (bounded) ? 1.0 : 2.0
let overshoot = bounded ? 1.0 : 2.0
zoom = Math.max(zoom, this.minZoom / overshoot)
zoom = Math.min(zoom, this.maxZoom * overshoot)
return zoom
@@ -690,7 +724,7 @@ export default class Timeline extends BitmapLabeledGraphics {
y = this.getY()
}
this.moveTo(x, y)
this.lineTo(x, y - (this.tickHeight * direction * this.direction))
this.lineTo(x, y - this.tickHeight * direction * this.direction)
}
prepareLabels() {
@@ -710,24 +744,22 @@ export default class Timeline extends BitmapLabeledGraphics {
visibleDate(date, offset = 0) {
if (date >= this.start && date <= this.end) {
let x = this.toX(date) + offset
return (x > 0 && x < this.wantedWidth)
return x > 0 && x < this.wantedWidth
}
return false
}
visibleRange(start, end) {
let x = this.toX(start)
if (x > this.wantedWidth)
return false
if (x > this.wantedWidth) return false
x = this.toX(end)
if (x < 0)
return false
if (x < 0) return false
return true
}
tickLabelOffset(direction = 1, level = 0) {
let fs = FontInfo.small.fontSize
let dh = fs + (level * (fs + 2))
let dh = fs + level * (fs + 2)
return this.direction * direction * dh
}
@@ -740,12 +772,16 @@ export default class Timeline extends BitmapLabeledGraphics {
let [label, date] = this.labelDates[i]
let align = 'center' // (last == null) ? 'right' : 'left'
let x = this.toX(date)
let current = this.ensureLabel(this.labelPrefix + label, label,
let current = this.ensureLabel(
this.labelPrefix + label,
label,
{
x: x, y: y,
x: x,
y: y,
align
},
FontInfo.small)
FontInfo.small
)
let r = current.getBounds()
current.visible = !(last != null && r.x + r.width > last.x)
if (current.visible) {
@@ -753,12 +789,26 @@ export default class Timeline extends BitmapLabeledGraphics {
last = r
}
}
}
else {
let start = this.start.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
let end = this.end.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
this.ensureLabel(this.labelPrefix + 'start', start, { x: this.toX(this.start), y: h2 })
this.ensureLabel(this.labelPrefix + 'end', end, { x: this.toX(this.end), y: h2, align: 'right' })
} else {
let start = this.start.toLocaleDateString('de', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
let end = this.end.toLocaleDateString('de', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
this.ensureLabel(this.labelPrefix + 'start', start, {
x: this.toX(this.start),
y: h2
})
this.ensureLabel(this.labelPrefix + 'end', end, {
x: this.toX(this.end),
y: h2,
align: 'right'
})
}
}
@@ -774,7 +824,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.killTweens()
this.deltas = []
this.validScroll()
if (typeof ThrowPropsPlugin != "undefined") {
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this, 'delta')
}
}
@@ -796,8 +846,7 @@ export default class Timeline extends BitmapLabeledGraphics {
}
onEnd(event, interaction) {
if (typeof ThrowPropsPlugin != "undefined") {
if (typeof ThrowPropsPlugin != 'undefined') {
let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
ThrowPropsPlugin.untrack(this)
}
@@ -815,33 +864,31 @@ export default class Timeline extends BitmapLabeledGraphics {
let anchor = interaction.current.mean()
this.keepInBounds(delta, anchor)
for(let key of interaction.ended.keys()) {
for (let key of interaction.ended.keys()) {
if (interaction.isDoubleTap(key)) {
this.onDoubleTap(event, interaction, key)
}
else if (interaction.isTap(key)) {
} else if (interaction.isTap(key)) {
this.onTap(event, interaction, key)
}
else if (interaction.isLongPress(key)) {
} else if (interaction.isLongPress(key)) {
this.onLongPress(event, interaction, key)
}
}
}
onLongPress(event, interaction, key) {
for(let callback of this.onLongPressCallbacks) {
for (let callback of this.onLongPressCallbacks) {
callback(event, interaction, key)
}
}
onTap(event, interaction, key) {
for(let callback of this.onTapCallbacks) {
for (let callback of this.onTapCallbacks) {
callback(event, interaction, key)
}
}
onDoubleTap(event, interaction, key) {
for(let callback of this.onDoubleTapCallbacks) {
for (let callback of this.onDoubleTapCallbacks) {
callback(event, interaction, key)
}
}
@@ -854,8 +901,7 @@ export default class Timeline extends BitmapLabeledGraphics {
_scrollMaximum(bounded) {
let total = this.totalWidth(bounded)
let limit = this.wantedWidth
if (total > limit)
return 0
if (total > limit) return 0
let w = limit - 2 * this.inset
return (w - total) / 2
}
@@ -873,7 +919,6 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false
}
validScroll(bounded = true) {
let minimum = this.scrollMinimum(bounded)
let maximum = this.scrollMaximum(bounded)
@@ -898,8 +943,7 @@ export default class Timeline extends BitmapLabeledGraphics {
let newX = this.toX(date)
tweens.scroll = this.scroll + anchor.x - newX
this.zoom = oldZoom
}
else {
} else {
if (this.zoom < this.minZoom) {
tweens.zoom = this.minZoom
}
@@ -911,7 +955,9 @@ export default class Timeline extends BitmapLabeledGraphics {
}
}
if (!isEmpty(tweens)) {
tweens.onUpdate = () => { this.redraw() }
tweens.onUpdate = () => {
this.redraw()
}
TweenLite.to(this, 0.5, tweens).delay(0.1)
return
}
@@ -928,15 +974,14 @@ export default class Timeline extends BitmapLabeledGraphics {
let direction = event.detail < 0 || event.wheelDelta > 0
let anchor = { x: event.clientX, y: event.clientY }
const zoomFactor = 1.5
this.onZoom((direction) ? zoomFactor : 1 / zoomFactor, anchor)
this.onZoom(direction ? zoomFactor : 1 / zoomFactor, anchor)
this.redraw()
this.keepInBounds(0, anchor)
}
showRanges(ranges, label = "Untitled", color = null) {
showRanges(ranges, label = 'Untitled', color = null) {
for (let cr of this.colorRanges) {
if (cr.label == label)
return
if (cr.label == label) return
}
while (this.colorRanges.length >= this.rangeColors.length) {
this.colorRanges.shift()
@@ -945,4 +990,3 @@ export default class Timeline extends BitmapLabeledGraphics {
this.redraw()
}
}
lib/pixi/tooltip.js
+25 -26
View File
@@ -3,7 +3,7 @@ import AbstractPopup from './abstractpopup.js'
/**
* Class that represents a PixiJS Tooltip.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@@ -11,13 +11,13 @@ import AbstractPopup from './abstractpopup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Add an DisplayObject to the app
* const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle)
*
*
* const tooltip = new Tooltip({
* object: circle,
* container: app.scene,
@@ -29,10 +29,9 @@ import AbstractPopup from './abstractpopup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest}
*/
export default class Tooltip extends AbstractPopup {
/**
* Creates an instance of a Tooltip.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the tooltip.
* @param {number} [opts.minWidth=0] - The minimum width of the tooltip.
@@ -45,19 +44,22 @@ export default class Tooltip extends AbstractPopup {
* @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
}, opts)
opts = Object.assign(
{},
{
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
},
opts
)
opts.container = opts.container || opts.object
@@ -71,15 +73,14 @@ export default class Tooltip extends AbstractPopup {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setup() {
super.setup()
// bind events this
@@ -87,7 +88,7 @@ export default class Tooltip extends AbstractPopup {
this.interactive = true
let mouseoverTooltip = false
this.on('mouseover', e => {
mouseoverTooltip = true
})
@@ -100,7 +101,7 @@ export default class Tooltip extends AbstractPopup {
})
}
})
// bind events object
//-----------------
const object = this.opts.object
@@ -109,7 +110,6 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false
object.on('mouseover', e => {
this.timeout = window.setTimeout(() => {
mouseoverObject = true
this.visible = true
@@ -136,15 +136,14 @@ export default class Tooltip extends AbstractPopup {
return this
}
/**
* Calculates and sets the position of the tooltip.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setPosition(e) {
const position = e.data.getLocalPosition(this.opts.container)
this.x = position.x + this.opts.offsetLeft
lib/pixi/volatile.js
+26 -29
View File
@@ -4,14 +4,14 @@ import Theme from './theme.js'
/**
* Class that represents a PixiJS Volatile.
*
*
* @example
* const app = new PIXIApp({
* view: canvas,
* width: 900,
* height: 250
* }).setup().run()
*
*
* const button = new Button({
* label: 'Volatile!',
* action: () => {
@@ -22,17 +22,16 @@ import Theme from './theme.js'
* })
* }
* })
*
*
* app.scene.addChild(button)
*
* @class
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
*/
export default class Volatile {
/**
* Creates an instance of a Volatile.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the tooltip.
@@ -46,21 +45,24 @@ export default class Volatile {
* @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
},
opts
)
this.id = this.opts.id
@@ -82,38 +84,34 @@ export default class Volatile {
//-----------------
this.run()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the volatile. Can be used after resizing.
*
*
* @return {Volatile} A reference to the volatile for chaining.
*/
layout() {
return this
}
/**
* Starts the volatile animation.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
run() {
for (let object of this.objects) {
let x = object.x
let y = object.y
@@ -144,13 +142,12 @@ export default class Volatile {
}
},
onComplete: () => {
if (this.opts.onComplete) {
this.opts.onComplete.call(object, object)
}
if (this.opts.destroyOnComplete) {
object.destroy({children: true})
object.destroy({ children: true })
}
}
})