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

Working on stacked buttons.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-30 16:56:29 +02:00
parent 0bcf931465
commit 5f46b4feae
115 changed files with 3277 additions and 5134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/abstractpopup.js
+8 -31
View File
@@ -83,12 +83,10 @@ 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
@@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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)
}
@@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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
}
@@ -235,31 +227,16 @@ export default class AbstractPopup extends PIXI.Graphics {
* @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()
lib/pixi/app.js
+18 -62
View File
@@ -28,10 +28,7 @@ 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
@@ -143,10 +140,7 @@ 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')
@@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application {
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,
wsClient
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
@@ -324,10 +312,7 @@ 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()
@@ -348,8 +333,7 @@ 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)
}
@@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application {
if (
context !== null &&
(context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)
(context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
@@ -388,12 +371,7 @@ 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)
}
/**
@@ -444,9 +422,7 @@ 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
@@ -459,9 +435,7 @@ 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
@@ -480,11 +454,7 @@ 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 => {
@@ -517,11 +487,7 @@ 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]
}
@@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application {
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)
@@ -708,11 +668,7 @@ 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)
}
}
lib/pixi/badge.js
+3 -11
View File
@@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup {
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)
}
}
@@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup {
layout() {
super.layout()
this.content.x =
this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
this.content.y =
this.height / 2 -
this.content.height / 2 -
this.opts.strokeWidth / 2
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
return this
}
lib/pixi/blurfilter.js
+4 -21
View File
@@ -68,9 +68,7 @@ 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)
}
/**
@@ -189,12 +187,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
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)
@@ -228,12 +221,7 @@ 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) {
@@ -242,12 +230,7 @@ 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]
}
}
}
lib/pixi/button.js
+42 -79
View File
@@ -1,8 +1,9 @@
/* global PIXI TweenLite */
/* global */
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Events from '../events.js'
import { Points } from '../utils.js'
/**
* Callback for the button action.
@@ -156,15 +157,9 @@ export default class Button extends PIXI.Container {
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
}
@@ -180,6 +175,8 @@ export default class Button extends PIXI.Container {
this._active = null
this._disabled = null
this.__start = { x: null, y: null }
this.iconInactive = null
this.iconActive = null
this.text = null
@@ -234,17 +231,11 @@ 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
@@ -272,6 +263,8 @@ export default class Button extends PIXI.Container {
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
this.__start.x = e.data.global.x
this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
@@ -280,25 +273,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => {
this.capture(e)
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
const distance = Points.distance(e.data.global, this.__start)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (distance < 5) {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
}
})
@@ -319,11 +317,7 @@ export default class Button extends PIXI.Container {
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)
}
}
@@ -353,15 +347,10 @@ export default class Button extends PIXI.Container {
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
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
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
@@ -369,15 +358,10 @@ export default class Button extends PIXI.Container {
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
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
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@@ -516,8 +500,7 @@ export default class Button extends PIXI.Container {
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
this.content.x =
this._width - this.opts.padding - this.content.width
this.content.x = this._width - this.opts.padding - this.content.width
break
}
@@ -529,8 +512,7 @@ export default class Button extends PIXI.Container {
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y =
this._height - this.opts.padding - this.content.height
this.content.y = this._height - this.opts.padding - this.content.height
break
}
@@ -546,30 +528,13 @@ export default class Button extends PIXI.Container {
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
@@ -686,9 +651,7 @@ export default class Button extends PIXI.Container {
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.html
+54 -14
View File
@@ -10,6 +10,7 @@
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
@@ -29,10 +30,10 @@
const app = new PIXIApp({
view: canvas,
width: 1000,
height: 1000
height: 1400
}).setup().run()
let buttonGroup1 = new ButtonGroup({
const buttonGroup1 = new ButtonGroup({
x: 10,
y: 10,
buttons: [
@@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
]
})
let buttonGroup2 = new ButtonGroup({
const buttonGroup2 = new ButtonGroup({
x: 260,
y: 10,
buttons: [
@@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
strokeWidth: 3
})
let buttonGroup3 = new ButtonGroup({
const buttonGroup3 = new ButtonGroup({
x: 610,
y: 10,
buttons: [
@@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
strokeWidth: 1
})
let buttonGroup4 = new ButtonGroup({
const buttonGroup4 = new ButtonGroup({
x: 10,
y: 90,
buttons: [
@@ -93,7 +94,7 @@ let buttonGroup4 = new ButtonGroup({
strokeWidth: 1
})
let buttonGroup5 = new ButtonGroup({
const buttonGroup5 = new ButtonGroup({
x: 10,
y: 180,
buttons: [
@@ -106,7 +107,7 @@ let buttonGroup5 = new ButtonGroup({
type: 'checkbox'
})
let buttonGroup6 = new ButtonGroup({
const buttonGroup6 = new ButtonGroup({
x: 450,
y: 180,
buttons: [
@@ -119,7 +120,7 @@ let buttonGroup6 = new ButtonGroup({
type: 'radio'
})
let buttonGroup7 = new ButtonGroup({
const buttonGroup7 = new ButtonGroup({
x: 10,
y: 250,
theme: 'light',
@@ -134,7 +135,7 @@ let buttonGroup7 = new ButtonGroup({
style: 'link'
})
let buttonGroup8 = new ButtonGroup({
const buttonGroup8 = new ButtonGroup({
x: 610,
y: 250,
buttons: [
@@ -147,7 +148,7 @@ let buttonGroup8 = new ButtonGroup({
margin: 0
})
let buttonGroup9 = new ButtonGroup({
const buttonGroup9 = new ButtonGroup({
x: 10,
y: 320,
buttons: [
@@ -160,7 +161,7 @@ let buttonGroup9 = new ButtonGroup({
minWidth: 70
})
let buttonGroup10 = new ButtonGroup({
const buttonGroup10 = new ButtonGroup({
x: 100,
y: 320,
buttons: [
@@ -176,7 +177,7 @@ let buttonGroup10 = new ButtonGroup({
margin: 0
})
let buttonGroup11 = new ButtonGroup({
const buttonGroup11 = new ButtonGroup({
x: 250,
y: 320,
buttons: [
@@ -197,7 +198,7 @@ let buttonGroup11 = new ButtonGroup({
type: 'checkbox'
})
let buttonGroup12 = new ButtonGroup({
const buttonGroup12 = new ButtonGroup({
x: 400,
y: 320,
buttons: [
@@ -212,7 +213,7 @@ let buttonGroup12 = new ButtonGroup({
type: 'radio'
})
let buttonGroup13 = new ButtonGroup({
const buttonGroup13 = new ButtonGroup({
x: 520,
y: 320,
buttons: [
@@ -231,10 +232,49 @@ let buttonGroup13 = new ButtonGroup({
minHeight: 100
})
const buttonGroup14 = new ButtonGroup({
x: 10,
y: 960,
buttons: [
{label: 'Stacked button 1', action: event => console.log('clicked 1')},
{label: 'Stacked button 2', action: event => console.log('clicked 2')},
{label: 'Stacked button 3', action: event => console.log('clicked 3')},
{label: 'Stacked button 4', action: event => console.log('clicked 4')},
{label: 'Stacked button 5', action: event => console.log('clicked 5')},
{label: 'Stacked button 6', action: event => console.log('clicked 6')},
{label: 'Stacked button 7', action: event => console.log('clicked 7')},
{label: 'Stacked button 8', action: event => console.log('clicked 8')}
],
stacked: true,
maxWidth: 620,
app
})
const buttonGroup15 = new ButtonGroup({
x: 10,
y: 1040,
buttons: [
{icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
{icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
{icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
{icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
{icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
{icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
{icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
],
orientation: 'vertical',
margin: 0,
stacked: true,
maxHeight: 200,
app
})
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15)
</script>
</body>
</html>
lib/pixi/buttongroup.js
+248 -50
View File
@@ -1,5 +1,8 @@
/* globals ThrowPropsPlugin, Strong */
import Theme from './theme.js'
import Button from './button.js'
import Events from '../events.js'
/**
* Class that represents a PixiJS ButtonGroup.
@@ -23,7 +26,7 @@ import Button from './button.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/
export default class ButtonGroup extends PIXI.Graphics {
export default class ButtonGroup extends PIXI.Container {
/**
* Creates an instance of a ButtonGroup.
*
@@ -39,6 +42,10 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the button group. Only used if stacked is true and the orientation is horizontal.
* @param {number} [opts.maxHeight] - The maximum height of the button group. Only used if stacked is true and the orientation is vertical.
* @param {boolean} [opts.stacked=false] - If set to true, the buttons of the button group gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
* @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group.
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@@ -87,6 +94,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [],
minWidth: 44,
minHeight: 44,
maxWidth: null,
maxHeight: null,
stacked: false,
app: null,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
@@ -119,6 +130,7 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons = []
this._disabled = null
this.__dragging = false
this.visible = this.opts.visible
@@ -138,6 +150,12 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Graphics()
this.addChild(container)
this.container = container
// Buttons
//-----------------
let position = 0
@@ -164,19 +182,11 @@ 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
@@ -195,10 +205,7 @@ 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
@@ -215,23 +222,21 @@ export default class ButtonGroup extends PIXI.Graphics {
if (typeof it.tooltip === 'string') {
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.container.addChild(button)
this.buttons.push(button)
position +=
(this.opts.orientation === 'horizontal'
? button.width
: button.height) + this.opts.margin
button.__originalPosition = {
x: button.x,
y: button.y
}
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
}
if (this.opts.orientation === 'vertical') {
@@ -249,6 +254,43 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled
}
// interaction
//--------------------
if (this.opts.stacked) {
this.interactive = true
this.on('pointerdown', this.onStart.bind(this))
this.on('pointermove', this.onMove.bind(this))
this.on('pointerup', this.onEnd.bind(this))
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
this.on('scroll', this.onScroll.bind(this))
// mousewheel
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
event.preventDefault()
this.emit('scroll', event)
}
})
}
const background = new PIXI.Graphics()
background.beginFill(0x000000, 0)
background.drawRect(0, 0, this.width, this.height)
background.endFill()
this.addChildAt(background, 0)
this.__initWidth = this.container.width
this.__deltaWidth = this.container.width - this.opts.maxWidth
}
return this
}
@@ -266,6 +308,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.draw()
// stacked
//-----------------
if (this.opts.stacked) {
this.stack()
}
return this
}
@@ -279,41 +327,27 @@ export default class ButtonGroup extends PIXI.Graphics {
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.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
this.container.clear()
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
this.container.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.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.buttons.forEach((it, i) => {
if (i > 0) {
this.moveTo(it.x, it.y)
this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') {
this.lineTo(it.x, it.height)
this.container.lineTo(it.x, it.height)
} else {
this.lineTo(it.width, it.y)
this.container.lineTo(it.width, it.y)
}
}
})
this.endFill()
this.container.endFill()
}
return this
@@ -367,4 +401,168 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
*
* @private
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
this.__delta = {
x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
* @private
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x
} else {
this.container.position.y = event.data.global.y + this.__delta.y
}
if (this.opts.stacked) {
this.stack()
}
}
}
/**
*
* @private
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
if (typeof ThrowPropsPlugin != 'undefined') {
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') {
const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0 && distanceToLeft > distanceToRight) {
throwProps.x.end = 0
} else if (distanceToRight > 0 && distanceToRight > distanceToLeft) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth
}
} else {
const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height
if (distanceToTop > 0 && distanceToTop > distanceToBottom) {
throwProps.y.end = 0
} else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) {
throwProps.y.end = this.opts.maxHeight - this.container.height
}
}
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
* @private
* @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.__initWidth < this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} 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.container.height < this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
if (this.opts.stacked) {
this.stack()
}
}
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
/**
*
*/
stack() {
this.buttons.forEach((it, index) => {
if (it.__originalPosition.x + this.container.x < 0) {
// left border
it.x = -this.container.x
} else if (it.__originalPosition.x + it.width > Math.abs(this.container.x) + this.opts.maxWidth) {
// right border
it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width
} else {
it.x = it.__originalPosition.x
}
})
this.buttons.sort((a, b) => {
const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2
const distanceA = Math.abs(a.x - delta)
const distanceB = Math.abs(b.x - delta)
if (distanceA > distanceB) {
return -1
} else if (distanceB > distanceA) {
return 1
} else {
return 0
}
})
this.buttons.forEach(it => {
const parent = it.parent
parent.removeChild(it)
parent.addChild(it)
})
}
}
lib/pixi/flipeffect.js
+5 -17
View File
@@ -112,15 +112,9 @@ export default class FlipEffect {
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()
}
@@ -147,11 +141,7 @@ export default class FlipEffect {
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
}
@@ -231,9 +221,7 @@ 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)
lib/pixi/flippable.js
+11 -36
View File
@@ -93,12 +93,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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
//--------------------
@@ -137,9 +132,7 @@ 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(0.98)
@@ -231,21 +224,11 @@ 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
@@ -331,15 +314,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
new TimelineMax().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: 0.2, ease })
new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
}
/**
@@ -353,8 +332,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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
@@ -421,10 +399,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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 = [
lib/pixi/labeledgraphics.js
+6 -27
View File
@@ -77,15 +77,9 @@ export class Hypenate {
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 {
newWord += part
@@ -136,12 +130,7 @@ class TextLabel extends PIXI.Text {
* @param {canvas}
* @memberof TextLabel
*/
constructor(
text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom
@@ -290,21 +279,11 @@ 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 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
) {
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
return { ...data, length: wordWrapWidth }
}
return {
lib/pixi/list.js
+10 -30
View File
@@ -1,4 +1,4 @@
/* globals */
/* globals ThrowPropsPlugin, Strong */
/* Imports */
import Events from '../events.js'
@@ -108,9 +108,7 @@ 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)) {
@@ -167,14 +165,10 @@ 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))
@@ -200,14 +194,10 @@ export default class List extends PIXI.Container {
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
}
@@ -341,8 +331,7 @@ export default class List extends PIXI.Container {
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@@ -363,20 +352,14 @@ export default class List extends PIXI.Container {
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
}
}
@@ -388,10 +371,7 @@ 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
+2 -4
View File
@@ -91,8 +91,7 @@ export default class Message extends InteractivePopup {
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
}
@@ -105,8 +104,7 @@ export default class Message extends InteractivePopup {
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
}
}
lib/pixi/modal.js
+1 -4
View File
@@ -134,10 +134,7 @@ export default class Modal extends PIXI.Container {
// 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()
lib/pixi/popover.js
+3 -10
View File
@@ -36,12 +36,8 @@ export default class Popover extends PIXI.Graphics {
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()
@@ -64,10 +60,7 @@ 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)
}
lib/pixi/popup.js
+8 -28
View File
@@ -73,10 +73,7 @@ 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
@@ -100,10 +97,7 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.maxWidth) {
const wordWrapWidth =
this.opts.maxWidth -
2 * this.opts.padding -
this.smallPadding -
this._closeButton.width
this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) {
@@ -116,18 +110,10 @@ 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
)
Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
)
}
this.addChild(this._buttons)
@@ -149,18 +135,15 @@ export class InteractivePopup extends AbstractPopup {
// 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
@@ -183,10 +166,7 @@ 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
}
lib/pixi/popupmenu.js
+1 -4
View File
@@ -74,10 +74,7 @@ export default class PopupMenu extends Popup {
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
}
lib/pixi/progress.js
+6 -32
View File
@@ -154,10 +154,7 @@ 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()
}
@@ -201,20 +198,10 @@ export default class Progress extends PIXI.Container {
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)
}
@@ -238,24 +225,11 @@ export default class Progress extends PIXI.Container {
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)
}
lib/pixi/scatter.js
+10 -34
View File
@@ -79,12 +79,8 @@ 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 })
@@ -167,14 +163,8 @@ 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
}
}
@@ -184,10 +174,7 @@ 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
@@ -204,12 +191,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction
let fakeEvent = this.fakeInteractionEvent(local)
interactionManager.processInteractive(
fakeEvent,
this,
this.findHitScatter.bind(this),
true
)
interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true)
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
@@ -223,8 +205,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction
let displayObject = interactionManager.hitTest(local, this)
if (displayObject != null && displayObject.scatter != null)
this.hitScatter = displayObject.scatter
if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
@@ -359,8 +340,7 @@ export class DisplayObjectScatter extends AbstractScatter {
get container() {
// return this.displayObject.parent
let obj = this.displayObject
while (obj.parent != null && !(obj.parent instanceof ScatterContainer))
obj = obj.parent
while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent
return obj.parent
}
@@ -469,8 +449,7 @@ export class DisplayObjectScatter extends AbstractScatter {
mapPositionToContainerPoint(point) {
// UO: We need the coordinates related to this scatter in case
// of nested scatters
if (this.container != null)
return this.container.mapPositionToPoint(point, this)
if (this.container != null) return this.container.mapPositionToPoint(point, this)
return point
}
@@ -483,10 +462,7 @@ 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
+19 -70
View File
@@ -238,10 +238,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly
*/
get contentWidth() {
return (
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
@@ -250,10 +247,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly
*/
get contentHeight() {
return (
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
@@ -330,19 +324,11 @@ export default class Scrollbox extends PIXI.Container {
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
@@ -359,14 +345,9 @@ export default class Scrollbox extends PIXI.Container {
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
@@ -375,15 +356,10 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
@@ -391,14 +367,9 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
@@ -407,15 +378,10 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
@@ -489,10 +455,7 @@ export default class Scrollbox extends PIXI.Container {
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 (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) {
this.pointerDown = { type: 'horizontal', last: local }
} else {
if (local.x > this.scrollbarLeft) {
@@ -511,10 +474,7 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
if (
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) {
this.pointerDown = { type: 'vertical', last: local }
} else {
if (local.y > this.scrollbarTop) {
@@ -574,26 +534,15 @@ export default class Scrollbox extends PIXI.Container {
* @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
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) {
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()
}
lib/pixi/slider.js
+11 -45
View File
@@ -176,12 +176,8 @@ export default class Slider extends PIXI.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
@@ -193,16 +189,8 @@ 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)
@@ -263,9 +251,7 @@ 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
)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
@@ -325,11 +311,7 @@ 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)
@@ -343,20 +325,10 @@ 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()
@@ -394,10 +366,7 @@ 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)
}
/**
@@ -413,10 +382,7 @@ 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
}
/**
lib/pixi/stylus.js
+7 -24
View File
@@ -119,10 +119,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier
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
@@ -142,10 +139,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier
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
}
}
@@ -182,8 +176,7 @@ export default class Stylus extends PIXI.Graphics {
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 => {
@@ -197,15 +190,9 @@ 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))
if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(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 => {
@@ -320,11 +307,7 @@ 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()
lib/pixi/switch.js
+13 -58
View File
@@ -152,10 +152,8 @@ export default class Switch extends PIXI.Container {
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
//-----------------
@@ -317,32 +315,15 @@ export default class Switch extends PIXI.Container {
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.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,
@@ -364,21 +345,11 @@ export default class Switch extends PIXI.Container {
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
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()
@@ -394,24 +365,11 @@ export default class Switch extends PIXI.Container {
*/
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.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,
@@ -431,10 +389,7 @@ export default class Switch extends PIXI.Container {
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()
lib/pixi/test.js
+4 -20
View File
@@ -131,21 +131,9 @@ 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)
@@ -183,11 +171,7 @@ 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
}
lib/pixi/theme.js
+1 -2
View File
@@ -80,8 +80,7 @@ export default class Theme {
* is used for large actived text.
*/
constructor(opts = {}) {
const colorPrimary =
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
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
lib/pixi/timeline.js
+12 -75
View File
@@ -89,24 +89,13 @@ 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 fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
let y = timeline.getY()
for (let { start, end } of this.iterRanges(range)) {
let x = timeline.toX(start)
@@ -131,12 +120,7 @@ export class Ticks {
}
if (!fullyRedundant) {
timeline.ensureLabel(
key,
text,
{ x: xx, y: yy, align },
FontInfo.small
)
timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small)
}
if (extraTicks) timeline.drawTick(x, -level)
}
@@ -286,11 +270,7 @@ 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) {
@@ -331,22 +311,11 @@ 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(),
start.getMonth(),
start.getDate(),
start.getHours()
)
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours())
}
next(date) {
@@ -388,14 +357,7 @@ 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) {
@@ -450,10 +412,7 @@ export class TimeTicks {
let available = amount * size
availables.set(ticks, available)
if (available < ticks.minWidth) break
formats.set(
ticks,
available < ticks.minLabelWidth ? null : ticks.format(available)
)
formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available))
nextFormats.set(previous, formats.get(ticks))
previous = ticks
visible.push(ticks)
@@ -522,16 +481,7 @@ 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
@@ -548,12 +498,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.deltas = []
this.labelDates = []
this.colorRanges = []
this.rangeColors = new Cycle(
Colors.eminence,
Colors.steelblue,
Colors.ochre,
Colors.turquoise
)
this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise)
this.callbacks = []
this.onTapCallbacks = []
this.onDoubleTapCallbacks = []
@@ -565,14 +510,7 @@ 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 = '__'
}
@@ -729,8 +667,7 @@ export default class Timeline extends BitmapLabeledGraphics {
prepareLabels() {
for (let key of this.labels.keys()) {
if (!key.startsWith(this.labelPrefix))
this.labels.get(key).visible = false
if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false
}
}