Home Reference Source

cables_dev/cables_ui/src/ui/elements/splitpane.js

  1. CABLES = CABLES || {};
  2. CABLES.SPLITPANE = {};
  3.  
  4. CABLES.SPLITPANE.listeners = [];
  5.  
  6. export default initSplitPanes;
  7.  
  8. function initSplitPanes()
  9. {
  10. document.getElementById("splitterPatch").addEventListener("mousedown", function (ev)
  11. {
  12. gui.pauseProfiling();
  13. ev.preventDefault();
  14. CABLES.SPLITPANE.bound = true;
  15. function mm(e)
  16. {
  17. gui.pauseInteractionSplitpanes();
  18.  
  19. gui.pauseProfiling();
  20. e.preventDefault();
  21.  
  22. const pos = (window.innerWidth - e.clientX) * (1 / gui.corePatch().cgl.canvasScale);
  23.  
  24. if (gui.rendererWidth != -1) gui.rendererWidth = pos;
  25. gui.splitpanePatchPos = pos;
  26.  
  27. gui.setLayout();
  28. gui.emitEvent("resizecanvas");
  29. gui.canvasManager.getCanvasUiBar().updateCanvasIconBar();
  30. }
  31.  
  32. document.addEventListener("mousemove", mm);
  33. CABLES.SPLITPANE.listeners.push(mm);
  34. });
  35.  
  36. document.getElementById("splitterPatch").addEventListener("mouseup", function (e)
  37. {
  38. gui.resumeInteractionSplitpanes();
  39. });
  40.  
  41. // ----------------
  42.  
  43.  
  44. document.getElementById("splitterMaintabs").addEventListener("mouseup", function (e)
  45. {
  46. gui.resumeInteractionSplitpanes();
  47. });
  48.  
  49. function resizeTabs(ev)
  50. {
  51. gui.pauseProfiling();
  52. CABLES.SPLITPANE.bound = true;
  53. function mm(e)
  54. {
  55. gui.pauseInteractionSplitpanes();
  56.  
  57. gui.editorWidth = e.clientX;
  58. if (gui.editorWidth < 30)gui.editorWidth = 30;
  59. CABLES.UI.userSettings.set("editorWidth", gui.editorWidth);
  60. gui.setLayout();
  61. gui.mainTabs.emitEvent("resize");
  62. }
  63.  
  64. document.addEventListener("mousemove", mm, { "passive": false });
  65. document.addEventListener("touchmove", mm, { "passive": false });
  66. CABLES.SPLITPANE.listeners.push(mm);
  67. }
  68.  
  69. document.getElementById("splitterMaintabs").addEventListener("mousedown", resizeTabs, { "passive": false });
  70. document.getElementById("splitterMaintabs").addEventListener("touchstart", resizeTabs, { "passive": false });
  71.  
  72. document.getElementById("splitterRenderer").addEventListener("mousedown", function (ev)
  73. {
  74. ev.preventDefault();
  75. CABLES.SPLITPANE.bound = true;
  76. function mm(e)
  77. {
  78. e.preventDefault();
  79. gui.rendererHeight = e.clientY * (1 / gui.corePatch().cgl.canvasScale);
  80. gui.setLayout();
  81. gui.canvasManager.getCanvasUiBar().updateCanvasIconBar();
  82. }
  83.  
  84. document.addEventListener("mousemove", mm);
  85. CABLES.SPLITPANE.listeners.push(mm);
  86. });
  87.  
  88. document.getElementById("splitterTimeline").addEventListener("mousedown", function (ev)
  89. {
  90. ev.preventDefault();
  91. CABLES.SPLITPANE.bound = true;
  92. function mm(e)
  93. {
  94. gui.pauseInteractionSplitpanes();
  95. e.preventDefault();
  96. gui.setBottomPanelHeight(window.innerHeight - e.clientY);
  97. gui.setLayout();
  98. }
  99.  
  100. document.addEventListener("mousemove", mm);
  101. CABLES.SPLITPANE.listeners.push(mm);
  102. });
  103.  
  104.  
  105. function resizeRenderer(ev)
  106. {
  107. if (gui.canvasManager.mode == gui.canvasManager.CANVASMODE_PATCHBG) return;
  108.  
  109. if (ev.shiftKey)
  110. {
  111. if (!CABLES.SPLITPANE.rendererAspect) CABLES.SPLITPANE.rendererAspect = gui.rendererWidth / gui.rendererHeight;
  112. }
  113. else CABLES.SPLITPANE.rendererAspect = 0.0;
  114.  
  115. ev.preventDefault();
  116. CABLES.SPLITPANE.bound = true;
  117. function mm(e)
  118. {
  119. gui.pauseInteractionSplitpanes();
  120. let x = e.clientX;
  121. let y = e.clientY;
  122.  
  123. if (x === undefined && e.touches && e.touches.length > 0)
  124. {
  125. x = e.touches[0].clientX;
  126. y = e.touches[0].clientY;
  127. }
  128.  
  129. gui.rendererWidth = (window.innerWidth - x) * (1 / gui.corePatch().cgl.canvasScale) + 3;
  130.  
  131. if (CABLES.SPLITPANE.rendererAspect) gui.rendererHeight = 1 / CABLES.SPLITPANE.rendererAspect * gui.rendererWidth;
  132. else gui.rendererHeight = y * (1 / gui.corePatch().cgl.canvasScale) - 38;
  133.  
  134.  
  135. gui.setLayout();
  136. gui.canvasManager.getCanvasUiBar().updateCanvasIconBar();
  137. gui.canvasManager.focus();
  138. gui.emitEvent("resizecanvas");
  139. e.preventDefault();
  140.  
  141. // gui.canvasManager.getCanvasUiBar().updateSizeDisplay();
  142. }
  143.  
  144. document.addEventListener("mousemove", mm);
  145. document.addEventListener("touchmove", mm);
  146. CABLES.SPLITPANE.listeners.push(mm);
  147. }
  148.  
  149. document.getElementById("splitterRendererWH").addEventListener("mousedown", resizeRenderer, { "passive": false });
  150. document.getElementById("splitterRendererWH").addEventListener("touchstart", resizeRenderer, { "passive": false });
  151.  
  152.  
  153. function stopSplit(e)
  154. {
  155. if (CABLES.SPLITPANE.listeners.length > 0)
  156. {
  157. for (let i = 0; i < CABLES.SPLITPANE.listeners.length; i++)
  158. {
  159. document.removeEventListener("mousemove", CABLES.SPLITPANE.listeners[i]);
  160. document.removeEventListener("touchmove", CABLES.SPLITPANE.listeners[i]);
  161. }
  162. gui.resumeInteractionSplitpanes();
  163.  
  164.  
  165. CABLES.SPLITPANE.listeners.length = 0;
  166. CABLES.SPLITPANE.bound = false;
  167. gui.setLayout();
  168. }
  169. }
  170.  
  171. document.addEventListener("mouseup", stopSplit);
  172. document.addEventListener("touchend", stopSplit);
  173. }