namespace App {
console.clear();
const log = console.log.bind(log);
const baseURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/";
const loader = new PIXI.loaders.Loader(baseURL);
const spriteSheets = {
mario: {
prefix: "img",
type: ".png",
data: [
{ file: "mario2.json", size: 10 },
{ file: "mario3.json", size: 10 },
]
}
};
//
// TWEEN
// ===========================================================================
class Tween {
tween;
constructor(target, duration, from) {
_.assign(this, target);
TweenLite.from(target, duration, from);
}
}
//
// ANIMATOR
// ===========================================================================
class Animator {
animations = new LinkedList();
constructor(public target) {
}
kill() {
}
render() {
}
}
//
// IMAGE ROTATOR
// ===========================================================================
const ImageRotator = {
bindings: {
panX: "<",
panY: "<",
rotation: "<",
zoom: "<",
image: "@"
},
controller: class {
isDirty = true;
isReady = false;
isReset = false;
total = 0;
width = 0;
height = 0;
stage = new PIXI.Container();
sprite = null;
renderer = null;
constructor(
public $element,
public $scope,
public $attrs,
public $window,
public textures) {
$scope.$on("image:reset", () => {
// log("RESET")
// this.reset();
this.isReset = true;
});
// $window.addEventListener("resize", () => this.isDirty = true);
}
$onChanges(changes) {
// if (!this.isReady) return;
if (!this.isReady || this.isReset) return;
// if (!this.isReady || this.isReset) return;
if (changes.rotation) {
this.setRotation(changes.rotation.currentValue);
}
if (changes.zoom) {
this.setZoom(changes.zoom.currentValue);
}
if (changes.panX || changes.panY) {
let x = changes.panX ? changes.panX.currentValue : this.panX;
let y = changes.panY ? changes.panY.currentValue : this.panY;
this.setPosition(x, y);
}
}
$postLink() {
let textures = this.textures[this.image];
let texture = textures[0];
this.total = textures.length;
this.width = texture.width;
this.height = texture.height;
this.renderer = PIXI.autoDetectRenderer(this.width, this.height, {
backgroundColor: 0xFFFFFF,
});
this.sprite = new ProductSprite(textures);
this.stage.addChild(this.sprite);
this.$element.append(this.renderer.view);
// TweenLite.set(this.$element, { width: this.width, height: this.height });
TweenLite.set(this.$element, {
width: this.width,
height: this.height,
xPercent: -50,
yPercent: -50
});
TweenLite.ticker.addEventListener("tick", this.render, this);
this.isReady = true;
}
reset() {
this.setZoom(1);
this.setRotation(0, true);
this.setPosition(0, 0);
}
setPosition(x, y) {
TweenLite.to(this.$element, 0.1, {
// x: `+=${x}`,
// y: `+=${y}`,
x,
y,
});
}
setZoom(scale) {
TweenLite.to(this.$element, 0.1, { scale });
}
setRotation(rotation, animate) {
let total = this.total - 1;
let ratio = rotation / 360;
let index = Math.round(ratio * total);
index = index < 1 ? total + index : index - 1;
if (animate) {
TweenLite.to(this.sprite, 0.1, {
frame: total - index,
roundProps: "frame",
ease: Linear.easeNone
});
} else {
this.sprite.frame = total - index;
}
// this.sprite.frame = total - index;
// TweenLite.to(this.sprite, 0.1, {
// frame: total - index,
// roundProps: "frame",
// ease: Linear.easeNone
// });
}
resize() {
var vw = this.$window.innerWidth;
var vh = this.$window.innerHeight;
var scale = Math.min(Math.min(vw / this.width, vh / this.height), 1);
TweenLite.set(this.$element, { scale });
}
render() {
if (this.isDirty) {
this.resize();
this.isDirty = false;
}
if (this.isReset) {
this.setZoom(1);
this.setPosition(0, 0);
this.setRotation(0, true);
this.isReset = false;
}
this.renderer.render(this.stage);
}
}
}
//
// PRODUCT SPRITE
// ===========================================================================
class ProductSprite extends PIXI.Sprite {
_frame = 0;
total = this.frames.length;
constructor(public frames) {
super(frames[0]);
}
get frame() { return this._frame; }
set frame(n) {
this._frame = n % this.total;
this.texture = this.frames[this._frame];
}
}
//
// PAN DRAGGER
// ===========================================================================
const PanDragger = {
bindings: {
dragType: "<"
},
require: {
productViewer: "^productViewer"
},
controller: class {
moveX = 0;
moveY = 0;
lastX = 0;
lastY = 0;
isReady = false;
// rotation = 0;
transform = {};
draggable = null;
constructor(public $element, public $scope, public $attrs) {
$scope.$on("image:reset", () => {
this.lastX = 0;
this.lastY = 0;
this.moveX = 0;
this.moveY = 0;
// this.rotation = 0;
});
}
get x() { return this.transform.x; }
get y() { return this.transform.y; }
$onChanges(changes) {
if (!this.isReady) return;
if (changes.dragType) {
this.setActive(changes.dragType.currentValue);
}
}
$postLink() {
var parent = this.productViewer.$element;
this.draggable = new Draggable(this.$element, {
bounds: parent,
callbackScope: this,
// cursor: "ew-resize",
// maxDuration: 0.65,
// overshootTolerance: 0,
onPress: this.setPosition,
onDrag: this.updatePosition,
onThrowUpdate: this.updatePosition,
// onDragStart: this.updatePosition,
throwProps: true,
trigger: parent,
zIndexBoost: false
});
TweenLite.set(this.$element, { xPercent: -50, yPercent: -50 });
this.transform = this.$element[0]._gsTransform;
this.isReady = true;
this.setActive(this.dragType);
}
setActive(dragType) {
if (dragType === "pan") {
this.draggable.enable();
} else {
this.draggable.disable();
}
}
setPosition() {
TweenLite.killTweensOf(this.$element);
let x = this.lastX = this.draggable.pointerX;
let y = this.lastY = this.draggable.pointerY;
TweenLite.set(this.$element, { x, y });
this.draggable.update();
}
updatePosition() {
let x = this.x;
let y = this.y;
let dx = x - this.lastX;
let dy = y - this.lastY;
this.lastX = x;
this.lastY = y;
// this.rotation += dx;
this.moveX += dx;
this.moveY += dy;
// this.productViewer.updateRotation(this.rotation % 360);
this.productViewer.updatePosition(this.moveX, this.moveY);
}
}
};
//
// SPIN DRAGGER
// ===========================================================================
const SpinDragger = {
bindings: {
dragType: "<"
},
require: {
productViewer: "^productViewer"
},
controller: class {
// moveX = 0;
// moveY = 0;
lastX = 0;
lastY = 0;
isReady = false;
rotation = 0;
transform = {};
draggable = null;
constructor(public $element, public $scope, public $attrs) {
$scope.$on("image:reset", () => {
this.lastX = 0;
this.lastY = 0;
this.moveX = 0;
this.moveY = 0;
this.rotation = 0;
});
}
get x() { return this.transform.x; }
get y() { return this.transform.y; }
$onChanges(changes) {
if (!this.isReady) return;
if (changes.dragType) {
this.setActive(changes.dragType.currentValue);
}
}
$postLink() {
var parent = this.productViewer.$element;
this.draggable = new Draggable(this.$element, {
// bounds: parent,
callbackScope: this,
cursor: "ew-resize",
maxDuration: 0.65,
// overshootTolerance: 0,
onPress: this.setPosition,
onDrag: this.updateRotation,
onThrowUpdate: this.updateRotation,
// onDragStart: this.updatePosition,
throwProps: true,
trigger: parent,
zIndexBoost: false
});
TweenLite.set(this.$element, { xPercent: -50, yPercent: -50 });
this.transform = this.$element[0]._gsTransform;
this.isReady = true;
this.setActive(this.dragType);
}
setActive(dragType) {
if (dragType === "spin") {
this.draggable.enable();
} else {
this.draggable.disable();
}
}
setPosition() {
TweenLite.killTweensOf(this.$element);
let x = this.lastX = this.draggable.pointerX;
let y = this.lastY = this.draggable.pointerY;
TweenLite.set(this.$element, { x, y });
this.draggable.update();
}
updateRotation() {
let x = this.x;
let y = this.y;
let dx = x - this.lastX;
let dy = y - this.lastY;
this.lastX = x;
this.lastY = y;
this.rotation += dx;
// this.moveX += dx;
// this.moveY += dy;
this.productViewer.updateRotation(this.rotation % 360);
// this.productViewer.updatePosition(this.moveX, this.moveY);
}
}
};
//
// PRODUCT VIEWER
// ===========================================================================
const ProductViewer = {
templateUrl: "product-viewer.html",
bindings: {
// msdWheel: "&"
},
controller: class {
rotation = 0;
maxZoom = 3;
minZoom = 0.25;
zoom = 1;
zoomStep = 0.15;
zoomLevel = 1;
zoomDelta = 0;
zoomRatio = 0.15;
dragType = "spin";
offsetX = 0;
offsetY = 0;
panX = 0;
panY = 0;
constructor(public $element, public $scope, public $attrs) {
}
onMouseWheel($event, $delta, $deltaX, $deltaY) {
// log("DELTA", $delta)
// this.zoomDelta += $delta;
this.zoom = _.clamp(this.zoom + $delta * this.zoomStep, this.minZoom, this.maxZoom);
}
setDragType(type) {
this.dragType = type;
}
resetImage() {
this.$scope.$broadcast("image:reset");
this.rotation = 0;
this.zoom = 1;
}
updatePosition(x, y) {
if (this.dragType !== "pan") return;
this.$scope.$apply(() => {
this.offsetX = x;
this.offsetY = y;
this.panX = x;
this.panY = y;
});
}
updateRotation(rotation) {
if (this.dragType !== "spin") return;
this.$scope.$apply(() => this.rotation = rotation);
}
}
};
//
// LOAD ASSETS
// ===========================================================================
function loadAssets($rootScope, loader, spriteSheets, textures) {
angular.forEach(spriteSheets, spriteSheet => {
spriteSheet.data.forEach(data => loader.add(data.file));
});
loader.load(() => {
angular.forEach(spriteSheets, (spriteSheet, name) => {
let count = 1;
textures[name] = spriteSheet.data.reduce((frames, data) => {
for (let i = 0; i < data.size; i++) {
let index = i + count;
if (index < 10) index = "0" + index;
let frame = `${spriteSheet.prefix}${index}${spriteSheet.type}`;
frames.push(PIXI.Texture.fromFrame(frame));
}
count = data.size;
return frames;
}, []);
});
$rootScope.$apply(() => ($rootScope.imagesLoaded = true));
});
}
//
// SPRING EASE
// ===========================================================================
class SpringEase extends Ease {
constructor(public omega = 10, public zeta = 0.75) {
super();
}
getRatio(progress) {
var omega = this.omega;
var zeta = this.zeta;
var beta = Math.sqrt(1.0 - zeta * zeta);
progress = 1 - Math.cos(progress * Math.PI / 2);
progress = 1 / beta *
Math.exp(-zeta * omega * progress) *
Math.sin( beta * omega * progress + Math.atan(beta / zeta));
return 1 - progress;
}
}
//
// MODULE
// ===========================================================================
angular
// .module("app", [])
.module("app", ["monospaced.mousewheel"])
.run(loadAssets)
.constant("loader", loader)
.constant("spriteSheets", spriteSheets)
.value("textures", {})
.component("imageRotator", ImageRotator)
.component("productViewer", ProductViewer)
.component("spinDragger", SpinDragger)
.component("panDragger", PanDragger)
}
!
