import { Points, Polygon, Angle, Elements } from './utils.js' import Events from './events.js' import { InteractionMapper } from './interaction.js' import { Capabilities } from './capabilities.js' /** * A base class for scatter specific events. * * @constructor * @param {name} String - The name of the event * @param {target} Object - The target of the event */ export class BaseEvent { constructor(name, target) { this.name = name this.target = target } } // Event types const START = 'onStart' const UPDATE = 'onUpdate' const END = 'onEnd' const ZOOM = 'onZoom' const MOVE = 'onMove' /** * A scatter event that describes how the scatter has changed. * * @constructor * @param {target} Object - The target scatter of the event * @param {optional} Object - Optional parameter */ export class ScatterEvent extends BaseEvent { constructor( target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {} ) { super('scatterTransformed', { target: target }) this.translate = translate this.scale = scale this.rotate = rotate this.about = about this.fast = fast this.type = type } toString() { return ( "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')' ) } } /** * A scatter resize event that describes how the scatter has changed. * * @constructor * @param {target} Object - The target scatter of the event * @param {optional} Object - Optional parameter */ export class ResizeEvent extends BaseEvent { constructor(target, { width = 0, height = 0 } = {}) { super('scatterResized', { width: width, height: height }) this.width = width this.height = height } toString() { return ( 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')' ) } } /** * A abstract base class that implements the throwable behavior of a scatter * object. * * @constructor */ class Throwable { constructor({ movableX = true, movableY = true, throwVisibility = 44, throwDamping = 0.95, autoThrow = true, onThrowFinished = null } = {}) { this.movableX = movableX this.movableY = movableY this.throwVisibility = throwVisibility this.throwDamping = throwDamping this.autoThrow = autoThrow this.velocities = [] this.velocity = null this.timestamp = null this.onThrowFinished = onThrowFinished //console.log("onThrowFinished", onThrowFinished) } observeVelocity() { this.lastframe = performance.now() } addVelocity(delta, buffer = 5) { let t = performance.now() let dt = t - this.lastframe this.lastframe = t if (dt > 0) { // Avoid division by zero errors later on let velocity = { t: t, dt: dt, dx: delta.x, dy: delta.y } this.velocities.push(velocity) while (this.velocities.length > buffer) { this.velocities.shift() } } } meanVelocity(milliseconds = 30) { this.addVelocity({ x: 0, y: 0 }) let sum = { x: 0, y: 0 } let count = 0 let t = 0 for (let i = this.velocities.length - 1; i > 0; i--) { let v = this.velocities[i] t += v.dt let nv = { x: v.dx / v.dt, y: v.dy / v.dt } sum = Points.add(sum, nv) count += 1 if (t > milliseconds) { break } } if (count === 0) return sum // empty vector return Points.multiplyScalar(sum, 1 / count) } killAnimation() { this.velocity = null this.velocities = [] } startThrow() { this.velocity = this.meanVelocity() if (this.velocity != null) { // Call next velocity to ansure that specializations // that use keepOnStage are called this.velocity = this.nextVelocity(this.velocity) if (this.autoThrow) this.animateThrow(performance.now()) } else { this.onDragComplete() } } animateThrow(time) { if (this.velocity != null) { let t = performance.now() let dt = t - this.lastframe this.lastframe = t // console.log("animateThrow", dt) let next = this.nextVelocity(this.velocity) let prevLength = Points.length(this.velocity) let nextLength = Points.length(next) if (nextLength > prevLength) { let factor = nextLength / prevLength next = Points.multiplyScalar(next, 1 / factor) console.log('Prevent acceleration', factor, this.velocity, next) } this.velocity = next let d = Points.multiplyScalar(this.velocity, dt) this._move(d) this.onDragUpdate(d) if (dt == 0 || this.needsAnimation()) { requestAnimationFrame(this.animateThrow.bind(this)) return } else { if (this.isOutside()) { requestAnimationFrame(this.animateThrow.bind(this)) return } } } this.onDragComplete() if (this.onThrowFinished != null) { this.onThrowFinished() } } needsAnimation() { if (this.velocity == null) { return false } return Points.length(this.velocity) > 0.01 } nextVelocity(velocity) { // Must be overwritten: computes the changed velocity. Implement // damping, collison detection, etc. here let next = Points.multiplyScalar(velocity, this.throwDamping) return { x: (this.movableX) ? next.x : 0, y: (this.movableY) ? next.y : 0 } } _move(delta) { // Overwrite if necessary } onDragComplete() { // Overwrite if necessary } onDragUpdate(delta) { // Overwrite if necessary } } export class AbstractScatter extends Throwable { constructor({ minScale = 0.1, maxScale = 1.0, startScale = 1.0, autoBringToFront = true, autoThrow = true, translatable = true, scalable = true, rotatable = true, resizable = false, movableX = true, movableY = true, throwVisibility = 44, throwDamping = 0.95, overdoScaling = 1, mouseZoomFactor = 1.1, rotationDegrees = null, rotation = null, onTransform = null, interactive = true, onClose = null, onThrowFinished = null, scaleAutoClose = false, scaleCloseThreshold = 0.10, scaleCloseBuffer = 0.05 } = {}) { if (rotationDegrees != null && rotation != null) { throw new Error('Use rotationDegrees or rotation but not both') } else if (rotation != null) { rotationDegrees = Angle.radian2degree(rotation) } else if (rotationDegrees == null) { rotationDegrees = 0 } super({ movableX, movableY, throwVisibility, throwDamping, autoThrow, onThrowFinished }) /** * Closes the card when the minScale is reached and the * card is released. Card can be saved by scaling it up again. */ this.scaleAutoClose = scaleAutoClose this.scaleCloseThreshold = scaleCloseThreshold this.scaleCloseBuffer = scaleCloseBuffer this.scaleAutoCloseTimeout = null this.interactive = interactive this.startRotationDegrees = rotationDegrees this.startScale = startScale // Needed to reset object this.minScale = minScale this.maxScale = maxScale this.overdoScaling = overdoScaling this.translatable = translatable if (!translatable) { this.movableX = false this.movableY = false } this.scalable = scalable this.rotatable = rotatable this.resizable = resizable this.mouseZoomFactor = mouseZoomFactor this.autoBringToFront = autoBringToFront this.dragging = false this.onTransform = onTransform != null ? [onTransform] : null this.onClose = onClose != null ? [onClose] : null } addCloseEventCallback(callback) { if (this.onClose == null) { this.onClose = [] } this.onClose.push(callback) } addTransformEventCallback(callback) { if (this.onTransform == null) { this.onTransform = [] } this.onTransform.push(callback) } startGesture(interaction) { this.bringToFront() this.killAnimation() this.observeVelocity() return true } close() { if (this.onClose) { this.onClose.forEach(callback => callback(this)) } } gesture(interaction) { let delta = interaction.delta() //console.log("gesture", delta) if (delta != null) { this.addVelocity(delta) this.transform(delta, delta.zoom, delta.rotate, delta.about) if (delta.zoom != 1) this.interactionAnchor = delta.about } } get polygon() { let w2 = this.width * this.scale / 2 let h2 = this.height * this.scale / 2 let center = this.center let polygon = new Polygon(center) polygon.addPoint({ x: -w2, y: -h2 }) polygon.addPoint({ x: w2, y: -h2 }) polygon.addPoint({ x: w2, y: h2 }) polygon.addPoint({ x: -w2, y: h2 }) polygon.rotate(this.rotation) return polygon } isOutside() { let stagePolygon = this.containerPolygon if (stagePolygon == null) return false let polygon = this.polygon if (polygon == null) return false let result = stagePolygon.intersectsWith(polygon) return result === false || result.overlap < this.throwVisibility } recenter() { // Return a small vector that guarantees that the scatter is moving // towards the center of the stage let center = this.center let target = this.container.center let delta = Points.subtract(target, center) return Points.normalize(delta) } nextVelocity(velocity) { return this.keepOnStage(velocity) } bouncing() { // Implements the bouncing behavior of the scatter. Moves the scatter // to the center of the stage if the scatter is outside the stage or // not within the limits of the throwVisibility. let stagePolygon = this.containerPolygon let polygon = this.polygon let result = stagePolygon.intersectsWith(polygon) if (result === false || result.overlap < this.throwVisibility) { let cv = this.recenter() let recentered = false while (result === false || result.overlap < this.throwVisibility) { polygon.center.x += cv.x polygon.center.y += cv.y this._move(cv) result = stagePolygon.intersectsWith(polygon) recentered = true } return recentered } return false } keepOnStage(velocity, collision = 0.5) { let stagePolygon = this.containerPolygon if (!stagePolygon) return let polygon = this.polygon let bounced = this.bouncing() if (bounced) { let stage = this.containerBounds let x = this.center.x let y = this.center.y let dx = this.movableX ? velocity.x : 0 let dy = this.movableY ? velocity.y : 0 let factor = this.throwDamping // if (recentered) { if (x < 0) { dx = -dx factor = collision } if (x > stage.width) { dx = -dx factor = collision } if (y < 0) { dy = -dy factor = collision } if (y > stage.height) { dy = -dy factor = collision } // } return Points.multiplyScalar({ x: dx, y: dy }, factor) } return super.nextVelocity(velocity) } endGesture(interaction) { this.startThrow() this._checkAutoClose() } _checkAutoClose() { if (this.scaleAutoClose) if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) { this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) }) } else if (this.scale < this.minScale + this.scaleCloseThreshold) { this.zoom(this.minScale + this.scaleCloseThreshold, { animate: 0.4 }) } } rotateDegrees(degrees, anchor) { let rad = Angle.degree2radian(degrees) this.rotate(rad, anchor) } rotate(rad, anchor) { this.transform({ x: 0, y: 0 }, 1.0, rad, anchor) } move(d, { animate = 0 } = {}) { if (this.translatable) { if (animate > 0) { let startPos = this.position TweenLite.to(this, animate, { x: '+=' + d.x, y: '+=' + d.y, /* scale: scale, uo: not defined, why was this here? */ onUpdate: e => { let p = this.position let dx = p.x - startPos.x let dy = p.x - startPos.y this.onMoved(dx, dy) } }) } else { this._move(d) this.onMoved(d.x, d.y) } } } moveTo(p, { animate = 0 } = {}) { let c = this.origin let delta = Points.subtract(p, c) this.move(delta, { animate: animate }) } centerAt(p, { animate = 0 } = {}) { let c = this.center let delta = Points.subtract(p, c) this.move(delta, { animate: animate }) } zoom( scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {} ) { let anchor = about || this.center if (scale != this.scale) { if (animate > 0) { TweenLite.to(this, animate, { scale: scale, delay: delay, onComplete: onComplete, onUpdate: this.onZoomed.bind(this) }) } else { this.scale = scale this.onZoomed(anchor) } } } _move(delta) { this.x += this.movableX ? delta.x : 0 this.y += this.movableX ? delta.y : 0 } transform(translate, zoom, rotate, anchor) { let delta = { x: this.movableX ? translate.x : 0, y: this.movableY ? translate.y : 0 } if (this.resizable) var vzoom = zoom if (!this.translatable) delta = { x: 0, y: 0 } if (!this.rotatable) rotate = 0 if (!this.scalable) zoom = 1.0 if (zoom == 1.0 && rotate == 0) { this._move(delta) if (this.onTransform != null) { let event = new ScatterEvent(this, { translate: delta, scale: this.scale, rotate: 0, about: anchor, fast: false, type: UPDATE }) this.onTransform.forEach(function (f) { f(event) }) } return } let origin = this.rotationOrigin let beta = Points.angle(origin, anchor) let distance = Points.distance(origin, anchor) let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom) let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom) let extra = Points.subtract(newOrigin, origin) let offset = Points.subtract(anchor, origin) this._move(offset) this.scale = newScale this.rotation += rotate offset = Points.negate(offset) offset = Points.add(offset, extra) offset = Points.add(offset, translate) this._move(offset) delta.x += extra.x delta.y += extra.y if (this.onTransform != null) { let event = new ScatterEvent(this, { translate: delta, scale: newScale, rotate: rotate, about: anchor }) this.onTransform.forEach(function (f) { f(event) }) } if (this.resizable) { this.resizeAfterTransform(vzoom) } } /** * For a given zoom, a new scale is calculated, taking * min and max scale into account. * * @param {number} zoom - The zoom factor, to scale the object with. * @returns {object} - Returns an object containing the a value for a valid scale and the corrected zoom factor. */ calculateScale(zoom) { let scale = this.scale * zoom let minScale = this.minScale / this.overdoScaling let maxScale = this.maxScale * this.overdoScaling if (scale < minScale) { scale = minScale zoom = scale / this.scale } if (scale > maxScale) { scale = maxScale zoom = scale / this.scale } if (this.scaleAutoClose) this._updateTransparency() return { zoom, scale } } _updateTransparency() { if (this.scale < this.minScale + this.scaleCloseThreshold) { let transparency = this.calculateScaleTransparency() this.element.style.opacity = transparency } else this.element.style.opacity = 1 } calculateScaleTransparency() { let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency return transparency } resizeAfterTransform(zoom) { // Overwrite this in subclasses. } validScale(scale) { scale = Math.max(scale, this.minScale) scale = Math.min(scale, this.maxScale) return scale } animateZoomBounce(dt = 1) { if (this.zoomAnchor != null) { let zoom = 1 let amount = Math.min(0.01, 0.3 * dt / 100000.0) if (this.scale < this.minScale) zoom = 1 + amount if (this.scale > this.maxScale) zoom = 1 - amount if (zoom != 1) { this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor) requestAnimationFrame(dt => { this.animateZoomBounce(dt) }) return } this.zoomAnchor = null } } checkScaling(about, delay = 0) { this.zoomAnchor = about clearTimeout(this.animateZoomBounce.bind(this)) setTimeout(this.animateZoomBounce.bind(this), delay) } onMouseWheel(event) { if (event.claimedByScatter) { if (event.claimedByScatter != this) return } this.killAnimation() this.targetScale = null let direction = event.detail < 0 || event.wheelDelta > 0 let globalPoint = { x: event.clientX, y: event.clientY } let centerPoint = this.mapPositionToContainerPoint(globalPoint) if (event.shiftKey) { let degrees = direction ? 5 : -5 let rad = Angle.degree2radian(degrees) return this.transform({ x: 0, y: 0 }, 1.0, rad, centerPoint) } const zoomFactor = this.mouseZoomFactor let zoom = direction ? zoomFactor : 1 / zoomFactor this.transform({ x: 0, y: 0 }, zoom, 0, centerPoint) this.checkScaling(centerPoint, 200) if (this.scaleAutoClose) { if (this.scale <= this.minScale + this.scaleCloseThreshold) { if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout) this.scaleAutoCloseTimeout = setTimeout(() => { this._checkAutoClose() }, 600) } this._updateTransparency() } // // if (this.onTransform != null) { // let event = new ScatterEvent(this, { // translate: {x: 0, y: 0}, // scale: this.scale, // rotate: 0, // about: null, // fast: false, // type: ZOOM // }) // this.onTransform.forEach(function(f) { // f(event) // }) // } } onStart(event, interaction) { if (this.startGesture(interaction)) { this.dragging = true this.interactionAnchor = null } if (this.onTransform != null) { let event = new ScatterEvent(this, { translate: { x: 0, y: 0 }, scale: this.scale, rotate: 0, about: null, fast: false, type: START }) this.onTransform.forEach(function (f) { f(event) }) } } onMove(event, interaction) { /** As long as mouseout && mouseleave interrupt we cannot be sure that * dragging remains correct. */ if (this.dragging) { this.gesture(interaction) } } onEnd(event, interaction) { //console.log("Scatter.onEnd", this.dragging) if (interaction.isFinished()) { this.endGesture(interaction) this.dragging = false for (let key of interaction.ended.keys()) { if (interaction.isTap(key)) { let point = interaction.ended.get(key) this.onTap(event, interaction, point) } } if (this.onTransform != null) { let event = new ScatterEvent(this, { translate: { x: 0, y: 0 }, scale: this.scale, rotate: 0, about: null, fast: false, type: END }) this.onTransform.forEach(function (f) { f(event) }) } } let about = this.interactionAnchor if (about != null) { this.checkScaling(about, 100) } } onTap(event, interaction, point) { } onDragUpdate(delta) { if (this.onTransform != null) { let event = new ScatterEvent(this, { fast: true, translate: delta, scale: this.scale, about: this.currentAbout, type: null }) this.onTransform.forEach(function (f) { f(event) }) } } onDragComplete() { if (this.onTransform) { let event = new ScatterEvent(this, { scale: this.scale, about: this.currentAbout, fast: false, type: null }) this.onTransform.forEach(function (f) { f(event) }) } } onMoved(dx, dy, about) { if (this.onTransform != null) { let event = new ScatterEvent(this, { translate: { x: dx, y: dy }, about: about, fast: true, type: null }) this.onTransform.forEach(function (f) { f(event) }) } } onResizing() { if (this.onTransform != null) { let event = new ScatterEvent(this, { scale: this.scale, fast: false, type: null }); this.onTransform.forEach(function (f) { f(event); }); } } onZoomed(about) { if (this.scaleAutoClose) this._updateTransparency() if (this.onTransform != null) { let event = new ScatterEvent(this, { scale: this.scale, about: about, fast: false, type: null }) this.onTransform.forEach(function (f) { f(event) }) } } } /** A container for scatter objects, which uses a single InteractionMapper * for all children. This reduces the number of registered event handlers * and covers the common use case that multiple objects are scattered * on the same level. */ export class DOMScatterContainer { /** * @constructor * @param {DOM node} element - DOM element that receives events * @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 {String} [touchAction=none] - CSS to set touch action style, needed to prevent * pointer cancel events. Use null if the * the touch action should not be set. */ constructor( element, { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none' } = {} ) { this.onCapture = null this.element = element if (stopEvents === 'auto') { if (Capabilities.isSafari) { document.addEventListener( 'touchmove', event => this.preventPinch(event), false ) stopEvents = false } else { stopEvents = true } } this.stopEvents = stopEvents this.claimEvents = claimEvents if (touchAction !== null) { Elements.setStyle(element, { touchAction }) } this.scatter = new Map() this.delegate = new InteractionMapper(element, this, { useCapture, mouseWheelElement: window }) if (typeof debugCanvas !== 'undefined') { requestAnimationFrame(dt => { this.showTouches(dt) }) } } showTouches(dt) { let resolution = window.devicePixelRatio let canvas = debugCanvas let current = this.delegate.interaction.current let context = canvas.getContext('2d') let radius = 20 * resolution context.clearRect(0, 0, canvas.width, canvas.height) context.fillStyle = 'rgba(0, 0, 0, 0.3)' context.lineWidth = 2 context.strokeStyle = '#003300' for (let [key, point] of current.entries()) { let local = point context.beginPath() context.arc( local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false ) context.fill() context.stroke() } requestAnimationFrame(dt => { this.showTouches(dt) }) } preventPinch(event) { event = event.originalEvent || event if (event.scale !== 1) { event.preventDefault() } } add(scatter) { this.scatter.set(scatter.element, scatter) } capture(event) { if (this.onCapture) { return this.onCapture(event) } if (event.target == this.element && this.stopEvents) { Events.stop(event) } return true } mapPositionToPoint(point) { return Points.fromPageToNode(this.element, point) } isDescendant(parent, child, clickable = false) { if (parent == child) return true let node = child.parentNode while (node != null) { if (!clickable && node.onclick) { return false } if (node == parent) { return true } node = node.parentNode } return false } findTarget(event, local, global) { /*** Note that elementFromPoint works with clientX, clientY, not pageX, pageY The important point is that event should not be used, since the TouchEvent points are hidden in sub objects. ***/ let found = document.elementFromPoint(global.x, global.y) for (let target of this.scatter.values()) { if (target.interactive && this.isDescendant(target.element, found)) { if (this.stopEvents) Events.stop(event) if (this.claimEvents) event.claimedByScatter = target return target } } return null } get center() { let r = this.bounds let w2 = r.width / 2 let h2 = r.height / 2 return { x: w2, y: h2 } } get bounds() { return this.element.getBoundingClientRect() } get polygon() { let r = this.bounds let w2 = r.width / 2 let h2 = r.height / 2 let center = { x: w2, y: h2 } let polygon = new Polygon(center) polygon.addPoint({ x: -w2, y: -h2 }) polygon.addPoint({ x: w2, y: -h2 }) polygon.addPoint({ x: w2, y: h2 }) polygon.addPoint({ x: -w2, y: h2 }) return polygon } } export class DOMScatter extends AbstractScatter { constructor( element, container, { startScale = 1.0, minScale = 0.1, maxScale = 1.0, overdoScaling = 1.5, autoBringToFront = true, translatable = true, scalable = true, rotatable = true, movableX = true, movableY = true, rotationDegrees = null, rotation = null, onTransform = null, transformOrigin = 'center center', // extras which are in part needed x = 0, y = 0, width = null, // required height = null, // required resizable = false, simulateClick = false, verbose = true, onResize = null, touchAction = 'none', throwVisibility = 44, throwDamping = 0.95, autoThrow = true, scaleAutoClose = false, onClose = null, scaleCloseThreshold = 0.10, scaleCloseBuffer = 0.05 } = {} ) { super({ minScale, maxScale, startScale, overdoScaling, autoBringToFront, translatable, scalable, rotatable, movableX, movableY, resizable, rotationDegrees, rotation, onTransform, throwVisibility, throwDamping, autoThrow, scaleAutoClose, scaleCloseThreshold, scaleCloseBuffer, onClose }) if (container == null || width == null || height == null) { throw new Error('Invalid value: null') } element.scatter = this this.element = element this.x = x this.y = y this.oldX = 0 this.oldY = 0 this.meanX = x this.meanY = y this.width = width this.height = height this.throwVisibility = Math.min(width, height, throwVisibility) this.container = container this.simulateClick = simulateClick this.scale = startScale this.rotationDegrees = this.startRotationDegrees this.transformOrigin = transformOrigin this.initialValues = { x: x, y: y, width: width, height: height, scale: startScale, rotation: this.startRotationDegrees, transformOrigin: transformOrigin } // For tweenlite we need initial values in _gsTransform TweenLite.set(element, this.initialValues) this.onResize = onResize this.verbose = verbose if (touchAction !== null) { Elements.setStyle(element, { touchAction }) } this.resizeButton = null if (resizable) { let button = document.createElement("div") button.style.position = "absolute" button.style.right = "0px" button.style.bottom = "0px" button.style.width = "50px"; button.style.height = "50px"; // button.style.borderRadius = "100% 0px 0px 0px"; // button.style.background = this.element.style.backgroundColor button.className = "interactiveElement" this.element.appendChild(button) button.addEventListener('pointerdown', (e) => { this.startResize(e) }) button.addEventListener('pointermove', (e) => { this.resize(e) }) button.addEventListener('pointerup', (e) => { this.stopResize(e) }) this.resizeButton = button } container.add(this) } /** Returns geometry data as object. **/ getState() { return { scale: this.scale, x: this.x, y: this.y, rotation: this.rotation } } close() { super.close() let parent = this.element.parentNode if (parent) parent.removeChild(this.element) } get rotationOrigin() { return this.center } get x() { return this._x } get y() { return this._y } set x(value) { this._x = value TweenLite.set(this.element, { x: value }) } set y(value) { this._y = value TweenLite.set(this.element, { y: value }) } get position() { let transform = this.element._gsTransform let x = transform.x let y = transform.y return { x, y } } get origin() { let p = this.fromNodeToPage(0, 0) return Points.fromPageToNode(this.container.element, p) } get bounds() { let stage = this.container.element.getBoundingClientRect() let rect = this.element.getBoundingClientRect() return { top: rect.top - stage.top, left: rect.left - stage.left, width: rect.width, height: rect.height } } get center() { let r = this.bounds let w2 = r.width / 2 let h2 = r.height / 2 // if (this.resizable) { // w2 *= this.scale // h2 *= this.scale // } var x = r.left + w2 var y = r.top + h2 return { x, y } } set rotation(radians) { let rad = radians // Angle.normalize(radians) let degrees = Angle.radian2degree(rad) TweenLite.set(this.element, { rotation: degrees }) this._rotation = rad } set rotationDegrees(degrees) { let deg = degrees // Angle.normalizeDegree(degrees) TweenLite.set(this.element, { rotation: deg }) this._rotation = Angle.degree2radian(deg) } get rotation() { return this._rotation } get rotationDegrees() { return this._rotation } set scale(scale) { TweenLite.set(this.element, { scale: scale, transformOrigin: this.transformOrigin }) this._scale = scale } get scale() { return this._scale } get containerBounds() { return this.container.bounds } get containerPolygon() { return this.container.polygon } mapPositionToContainerPoint(point) { return this.container.mapPositionToPoint(point) } capture(event) { return true } reset() { TweenLite.set(this.element, this.initialValues) } hide() { TweenLite.to(this.element, 0.1, { display: 'none', onComplete: e => { this.element.parentNode.removeChild(this.element) } }) } show() { TweenLite.set(this.element, { display: 'block' }) } showAt(p, rotationDegrees) { TweenLite.set(this.element, { display: 'block', x: p.x, y: p.y, rotation: rotationDegrees, transformOrigin: this.transformOrigin }) } bringToFront() { // this.element.parentNode.appendChild(this.element) // uo: On Chome and Electon appendChild leads to flicker TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ }) } toggleVideo(element) { if (element.paused) { element.play() } else { element.pause() } } onTap(event, interaction, point) { if (this.simulateClick) { let p = Points.fromPageToNode(this.element, point) let iframe = this.element.querySelector('iframe') if (iframe) { let doc = iframe.contentWindow.document let element = doc.elementFromPoint(p.x, p.y) if (element == null) { return } switch (element.tagName) { case 'VIDEO': console.log(element.currentSrc) if (PopupMenu) { PopupMenu.open( { Fullscreen: () => window.open(element.currentSrc), Play: () => element.play() }, { x, y } ) } else { this.toggleVideo(element) } break default: element.click() } } } } isDescendant(parent, child) { let node = child.parentNode while (node != null) { if (node == parent) { return true } node = node.parentNode } return false } fromPageToNode(x, y) { return Points.fromPageToNode(this.element, { x, y }) } fromNodeToPage(x, y) { return Points.fromNodeToPage(this.element, { x, y }) } _move(delta) { // UO: We need to keep TweenLite's _gsTransform and the private // _x and _y attributes aligned let x = this.element._gsTransform.x let y = this.element._gsTransform.y if (this.movableX) { x += delta.x } if (this.movableY) { y += delta.y } this._x = x this._y = y TweenLite.set(this.element, { x: x, y: y }) } resizeAfterTransform(zoom) { // let w = this.width * this.scale // let h = this.height * this.scale // TweenLite.set(this.element, { width: w, height: h }) if (this.onResize) { let event = new ResizeEvent(this, { width: w, height: h }) this.onResize(event) } if (this.resizeButton != null) { // this.resizeButton.style.width = 50/this.scale+"px" // this.resizeButton.style.height = 50/this.scale+"px" } } startResize(e) { e.preventDefault() let event = new CustomEvent('resizeStarted') let oldPostition = { x: $(this.element).position().left, y: $(this.element).position().top } this.bringToFront() this.element.style.transformOrigin = "0% 0%" let newPostition = { x: $(this.element).position().left, y: $(this.element).position().top } let offset = Points.subtract(oldPostition, newPostition) this.oldX = e.clientX this.oldY = e.clientY e.target.setAttribute('resizing', "true") e.target.setPointerCapture(e.pointerId) TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } }) TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } }) this.element.dispatchEvent(event); } resize(e) { e.preventDefault() let rotation = Angle.radian2degree(this.rotation) rotation = (rotation + 360) % 360 let event = new CustomEvent('resized') if (e.target.getAttribute('resizing') == "true") { let deltaX = (e.clientX - this.oldX) let deltaY = (e.clientY - this.oldY) let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY)) phi = ((phi) + 630) % 360 let rot = ((rotation + 90) + 630) % 360 let diffAngle = ((0 + rot) + 360) % 360 let phiCorrected = (phi + diffAngle + 360) % 360 let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected)) let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected)) if (this.element.offsetWidth + resizeW / this.scale > this.width * 0.3 && this.element.offsetHeight + resizeH / this.scale > this.height * 0.3) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale }); this.oldX = e.clientX this.oldY = e.clientY this.onResizing() this.element.dispatchEvent(event); } } stopResize(e) { e.preventDefault() let event = new CustomEvent('resizeEnded') let oldPostition = { x: $(this.element).position().left, y: $(this.element).position().top } this.element.style.transformOrigin = "50% 50%" let newPostition = { x: $(this.element).position().left, y: $(this.element).position().top } let offset = Points.subtract(oldPostition, newPostition) TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } }) TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } }) e.target.setAttribute('resizing', "false") this.element.dispatchEvent(event); } } DOMScatter.zIndex = 1000