Advertisement
Guest User

texturemapper

a guest
May 30th, 2016
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.51 KB | None | 0 0
  1. module Techne
  2. {
  3. export class TextureMapper {
  4. private techne: Editor;
  5. private stage: PIXI.Stage;
  6. private renderer: PIXI.IPixiRenderer;
  7. private texture: PIXI.Texture;
  8. private textureSprite: PIXI.Sprite;
  9. private container: PIXI.DisplayObjectContainer;
  10. private overlay: TextureOverlay;
  11.  
  12. constructor(techne: Editor) {
  13. this.techne = techne;
  14. }
  15.  
  16. public init() {
  17. this.initRenderer();
  18. this.overlay = new TextureOverlay(this.techne);
  19. this.container.addChild(this.overlay);
  20. this.update();
  21.  
  22. amplify.subscribe("PropertyChanged", this.overlay, function (data) {
  23. if (data.propertyChain[0] == "textureOffset" || data.propertyChain[0] == "scale") {
  24. this.update();
  25. }
  26. });
  27. }
  28.  
  29. public initTexture() {
  30. if (this.textureSprite && this.container.children.indexOf(this.textureSprite) >= 0) {
  31. this.container.removeChild(this.textureSprite);
  32. }
  33. this.texture = PIXI.Texture.fromImage(this.techne.textureElement.src, false, PIXI.scaleModes.NEAREST);
  34. this.textureSprite = new PIXI.Sprite(this.texture);
  35. this.container.addChildAt(this.textureSprite, 0);
  36. }
  37.  
  38. private initRenderer() {
  39. // create an new instance of a pixi stage
  40. this.stage = new PIXI.Stage(0xFFFFFF);
  41.  
  42. var textureElementData = {
  43. Width: $("#texture").width(),
  44. Height: $("#texture").height()
  45. };
  46.  
  47. $("#texture").hide();
  48.  
  49. // create a renderer instance.
  50. this.renderer = PIXI.autoDetectRenderer(textureElementData.Width, textureElementData.Height);
  51. this.container = new PIXI.DisplayObjectContainer();
  52. this.stage.addChild(this.container);
  53.  
  54. // add the renderer view element to the DOM
  55. $(this.renderer.view).insertAfter("#texture");
  56. }
  57.  
  58. public animate() {
  59. requestAnimationFrame(this.animate);
  60. this.render();
  61. }
  62.  
  63. public render() {
  64. // render the stage
  65. this.renderer.render(this.stage);
  66. }
  67.  
  68. public update() {
  69. $("#texture").show();
  70. var textureElementData = {
  71. Width: $("#texture").width(),
  72. Height: $("#texture").height()
  73. };
  74. $("#texture").hide();
  75. var scale = textureElementData.Width / TechneBase.textureSize.x;
  76.  
  77. this.container.scale.x = scale;
  78. this.container.scale.y = scale;
  79.  
  80. }
  81.  
  82. public setSelected(element: Objects.IEditableObject) {
  83.  
  84. }
  85. }
  86.  
  87. enum CubeSide {
  88. Right,
  89. Left,
  90. Bottom,
  91. Top,
  92. Back,
  93. Front
  94. }
  95.  
  96. class TextureOverlay extends PIXI.DisplayObjectContainer {
  97. private faceVertexUvs: THREE.Vector2[][][];
  98. private offset: THREE.Vector2;
  99. private current: Objects.IVisibleEditableObject;
  100. private overlays: PIXI.Graphics[];
  101. private dragHandler: Handler.TextureDragHandler;
  102.  
  103. constructor(private techne: Editor) {
  104. super();
  105. this.overlays = [];
  106. for (var b = 0; b < techne.observedChildren.length; b++) {
  107. techne.current.subscribe((current) => this.changeElement(techne.observedChildren, <Objects.IVisibleEditableObject>current,b));
  108.  
  109.  
  110. for (var i = 0; i < 6; i++) {
  111. this.overlays.push(new PIXI.Graphics);
  112. this.addChild(this.overlays[i]);
  113. }
  114.  
  115. this.dragHandler = new Handler.TextureDragHandler(this);
  116. this.offset = new THREE.Vector2(0, 0);
  117. }
  118. }
  119.  
  120. public update(observedChildren: KnockoutObservableArray<Objects.IEditableObject>) {
  121. if (!this.current) {
  122. this.overlays.map((x) => x.clear());
  123. return;
  124. }
  125.  
  126. var faceVertexUvs = this.faceVertexUvs[0];
  127. var width = TechneBase.textureSize.x;
  128. var height = TechneBase.textureSize.y;
  129. var hitarea = new PIXI.Rectangle(0, 0, 0, 0);
  130.  
  131. for (var b = 0; b < observedChildren().length; b++) {
  132. //do stuff!
  133. this.position.set(observedChildren()[b].textureOffset.x, observedChildren()[b].textureOffset.y);
  134.  
  135. for (var i = 0; i < 6; i++) {
  136.  
  137.  
  138. if(i==0){
  139. this.overlays[i].clear();
  140.  
  141. this.overlays[i].beginFill(0xFF0000, 0.5);
  142. this.overlays[i].lineStyle(0, 0xFF0000, 1);
  143.  
  144. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  145. rect[0] -= this.position.x;
  146. rect[1] -= this.position.y;
  147.  
  148. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  149.  
  150. if (rect[2] > hitarea.width) {
  151. hitarea.width = rect[2];
  152. }
  153. if (rect[3] > hitarea.height) {
  154. hitarea.height = rect[3];
  155. }
  156.  
  157. this.overlays[i].endFill();
  158. }
  159.  
  160. if(i==1){
  161. this.overlays[i].clear();
  162.  
  163. this.overlays[i].beginFill(0xFF0000, 0.5);
  164. this.overlays[i].lineStyle(0, 0xFF0000, 1);
  165.  
  166. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  167. rect[0] -= this.position.x;
  168. rect[1] -= this.position.y;
  169.  
  170. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  171.  
  172. if (rect[2] > hitarea.width) {
  173. hitarea.width = rect[2];
  174. }
  175. if (rect[3] > hitarea.height) {
  176. hitarea.height = rect[3];
  177. }
  178.  
  179. this.overlays[i].endFill();
  180. }
  181.  
  182.  
  183. if(i==2){
  184. this.overlays[i].clear();
  185.  
  186. this.overlays[i].beginFill(0xFF0000, 0.5);
  187. this.overlays[i].lineStyle(0, 0xFF0000, 1);
  188.  
  189. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  190. rect[0] -= this.position.x;
  191. rect[1] -= this.position.y;
  192.  
  193. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  194.  
  195. if (rect[2] > hitarea.width) {
  196. hitarea.width = rect[2];
  197. }
  198. if (rect[3] > hitarea.height) {
  199. hitarea.height = rect[3];
  200. }
  201.  
  202. this.overlays[i].endFill();
  203. }
  204.  
  205. if(i==3){
  206. this.overlays[i].clear();
  207.  
  208. this.overlays[i].beginFill(0xFF0000, 0.5);
  209. this.overlays[i].lineStyle(0, 0xFF0000, 1);
  210.  
  211. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  212. rect[0] -= this.position.x;
  213. rect[1] -= this.position.y;
  214.  
  215. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  216.  
  217. if (rect[2] > hitarea.width) {
  218. hitarea.width = rect[2];
  219. }
  220. if (rect[3] > hitarea.height) {
  221. hitarea.height = rect[3];
  222. }
  223.  
  224. this.overlays[i].endFill();
  225. }
  226.  
  227. if(i==4){
  228. this.overlays[i].clear();
  229.  
  230. this.overlays[i].beginFill(0xF0000F, 0.5);
  231. this.overlays[i].lineStyle(0, 0xF0000F, 1);
  232.  
  233. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  234. rect[0] -= this.position.x;
  235. rect[1] -= this.position.y;
  236.  
  237. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  238.  
  239. if (rect[2] > hitarea.width) {
  240. hitarea.width = rect[2];
  241. }
  242. if (rect[3] > hitarea.height) {
  243. hitarea.height = rect[3];
  244. }
  245.  
  246. this.overlays[i].endFill();
  247. }
  248.  
  249. if(i==5){
  250. this.overlays[i].clear();
  251.  
  252. this.overlays[i].beginFill(0x00F00F, 0.5);
  253. this.overlays[i].lineStyle(0, 0x00F00F, 1);
  254.  
  255. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  256. rect[0] -= this.position.x;
  257. rect[1] -= this.position.y;
  258.  
  259. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  260.  
  261. if (rect[2] > hitarea.width) {
  262. hitarea.width = rect[2];
  263. }
  264. if (rect[3] > hitarea.height) {
  265. hitarea.height = rect[3];
  266. }
  267.  
  268. this.overlays[i].endFill();
  269. }
  270.  
  271. if(i==6){
  272. this.overlays[i].clear();
  273.  
  274. this.overlays[i].beginFill(0x000FF0, 0.5);
  275. this.overlays[i].lineStyle(0, 0x000FF0, 1);
  276.  
  277. var rect = this.getAbsoluteCoordinates(i, 0).concat(this.getAbsoluteSize(i, 0, 2));
  278. rect[0] -= this.position.x;
  279. rect[1] -= this.position.y;
  280.  
  281. this.overlays[i].drawRect.apply(this.overlays[i], rect);
  282.  
  283. if (rect[2] > hitarea.width) {
  284. hitarea.width = rect[2];
  285. }
  286. if (rect[3] > hitarea.height) {
  287. hitarea.height = rect[3];
  288. }
  289.  
  290. this.overlays[i].endFill();
  291. }
  292.  
  293. }
  294. }
  295.  
  296.  
  297. hitarea.width = hitarea.width * 4;
  298. hitarea.height = hitarea.height * 2;
  299.  
  300. this.hitArea = hitarea;
  301. }
  302.  
  303. public changeOffset(delta: PIXI.Point) {
  304. //TODO: round position and offset!
  305. this.position.x += delta.x;
  306. this.position.y += delta.y;
  307. this.current.textureOffset.set(this.position.x, this.position.y);
  308. this.current.updateSize();
  309. }
  310.  
  311. private getAbsoluteSize(i: number, start: number, end: number): number[] {
  312. var from = this.getAbsoluteCoordinates(i, start);
  313. var to = this.getAbsoluteCoordinates(i, end);
  314.  
  315. return [
  316. to[0] - from[0],
  317. to[1] - from[1]
  318. ];
  319.  
  320. }
  321. private getAbsoluteCoordinates(i: number, i2: number): number[]{
  322. var tmp = i2 >= 2 ? 1 : 0;
  323. i2 = i2 >= 2 ? i2 - 1 : i2;
  324.  
  325. var vertex = this.faceVertexUvs[0][i * 2 + tmp][i2];
  326. return [
  327. vertex.x * TechneBase.textureSize.x,
  328. (1 - vertex.y) * TechneBase.textureSize.y
  329. ];
  330. }
  331.  
  332. public changeElement(observedChildren: KnockoutObservableArray<Objects.IEditableObject>, current: Objects.IVisibleEditableObject,b) {
  333. if (!(current instanceof Objects.EditableCollectionBase)) {
  334. this.current = current;
  335.  
  336. this.faceVertexUvs = observedChildren()[b].geometry.faceVertexUvs;
  337.  
  338. } else {
  339. this.current = undefined;
  340. }
  341. this.update(observedChildren);
  342. }
  343. }
  344. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement