• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { CanvasInput } from '../ir/CanvasInput.js';
17import { X2DFast } from './graphics/X2DFast.js';
18import { Scr } from './XDefine.js';
19import { XTools } from './XTools.js';
20
21export var gl;
22var Mouse = {
23  MOUSE_LEFT: 0,
24  MOUSE_RILLER: 1,
25  MOUSE_RIGHT: 2,
26};
27
28var MouseEvent = {
29  LEFT_CLICK: 1,
30  LEFT_MOVE: 2,
31  LEFT_RELEASE: 3,
32  RIGHT_CLICK: 4,
33  RIGHT_MOVE: 5,
34  RIGHT_RELEASE: 6,
35};
36
37function touchStart(e) {
38  document.addEventListener('contextmenu', function (e) {
39    e.preventDefault();
40  });
41  e.preventDefault();
42  GLFrame.pinstance_.callbackProctouch(
43    MouseEvent.LEFT_CLICK,
44    e.touches[0].clientX,
45    e.touches[0].clientY
46  );
47}
48function touchMove(e) {
49  e.preventDefault();
50  GLFrame.pinstance_.callbackProctouch(
51    MouseEvent.LEFT_MOVE,
52    e.touches[0].clientX,
53    e.touches[0].clientY
54  );
55}
56function touchEnd(e) {
57  e.preventDefault();
58  GLFrame.pinstance_.callbackProctouch(
59    MouseEvent.LEFT_RELEASE,
60    e.changedTouches[0].clientX,
61    e.changedTouches[0].clientY
62  );
63}
64
65function mouseDown(e) {
66  e.preventDefault();
67  switch (e.button) {
68    case Mouse.MOUSE_LEFT:
69      GLFrame.pinstance_.callbackProctouch(
70        MouseEvent.LEFT_CLICK,
71        e.offsetX,
72        e.offsetY
73      );
74      break;
75    case Mouse.MOUSE_RIGHT:
76      GLFrame.pinstance_.callbackProctouch(
77        MouseEvent.RIGHT_CLICK,
78        e.offsetX,
79        e.offsetY
80      );
81      break;
82  }
83}
84function mouseMove(e) {
85  e.preventDefault();
86  GLFrame.pinstance_.callbackProctouch(
87    MouseEvent.LEFT_MOVE,
88    e.offsetX,
89    e.offsetY
90  );
91}
92function mouseUp(e) {
93  e.preventDefault();
94  switch (e.button) {
95    case Mouse.MOUSE_LEFT:
96      GLFrame.pinstance_.callbackProctouch(
97        MouseEvent.LEFT_RELEASE,
98        e.offsetX,
99        e.offsetY
100      );
101      break;
102    case Mouse.MOUSE_RIGHT:
103      GLFrame.pinstance_.callbackProctouch(
104        MouseEvent.RIGHT_RELEASE,
105        e.offsetX,
106        e.offsetY
107      );
108      break;
109  }
110}
111function mouseWheel(e) {
112  e.preventDefault();
113  if (e.wheelDeltaY > 0) {
114    GLFrame.pinstance_.callbackProctouch(10, e.clientX, e.clientY);
115  }
116  else {
117    GLFrame.pinstance_.callbackProctouch(11, e.clientX, e.clientY);
118  }
119}
120
121function keyUp(e) {
122  if (!e.ctrlKey) {
123    XTools.KEY_CTRL = false;
124  }
125  if (!e.shiftKey) {
126    XTools.KEY_SHIFT = false;
127  }
128  if (!e.altKey) {
129    XTools.KEY_ALT = false;
130  }
131  e.preventDefault();
132}
133
134function keyDown(e) {
135  let ret = '';
136  if (e.ctrlKey) {
137    if (ret.length > 0) ret += '+';
138    ret += 'ctrl';
139    XTools.KEY_CTRL = true;
140  }
141  if (e.shiftKey) {
142    if (ret.length > 0) ret += '+';
143    ret += 'shift';
144    XTools.KEY_SHIFT = true;
145  }
146  if (e.altKey) {
147    if (ret.length > 0) ret += '+';
148    ret += 'alt';
149    XTools.KEY_ALT = true;
150  }
151  if (ret.length > 0) ret += '+';
152  ret += e.key;
153  GLFrame.pinstance_.callbackKey(1, ret);
154  if (!CanvasInput.FOCUS) {
155  }
156  if (ret == 'ctrl+z' || ret == 'ctrl+f' || ret == 'Enter') {
157    e.preventDefault();
158  }
159}
160
161function mainLoop() {
162  GLFrame.pinstance_.callbackDraw();
163  window.requestAnimationFrame(mainLoop);
164}
165
166export class GLFrame {
167  static gi() {
168    return GLFrame.pinstance_;
169  }
170  constructor() { }
171
172  go(cvs, _draw = null, _touch = null, _key = null, _logic = null) {
173    gl = cvs.getContext('webgl', { premultipliedAlpha: false });
174
175    this.pCallbackDraw = _draw;
176    this.pCallbackTouch = _touch;
177    this.pCallbackKey = _key;
178    this.pCallbackLogic = _logic;
179    this.pCallbackDropfile = null;
180
181    cvs.addEventListener('touchstart', touchStart);
182    cvs.addEventListener('touchmove', touchMove);
183    cvs.addEventListener('touchend', touchEnd);
184
185    cvs.addEventListener('mousedown', mouseDown);
186    cvs.addEventListener('mousemove', mouseMove);
187    cvs.addEventListener('mouseup', mouseUp);
188    cvs.addEventListener("mousewheel", mouseWheel);
189
190    cvs.addEventListener("drop", (e) => {
191      e.preventDefault();
192      GLFrame.gi().callbackDropfile(e.dataTransfer.files, e.offsetX, e.offsetY);
193    });
194    cvs.addEventListener("dragover", (e) => {
195      e.preventDefault();
196    });
197    cvs.addEventListener("dragenter", (e) => {
198      e.preventDefault();
199    });
200    cvs.focus();
201
202    document.addEventListener('contextmenu', function (e) {
203      e.preventDefault();
204    });
205
206
207    window.addEventListener('keydown', keyDown);
208    window.addEventListener('keyup', keyUp);
209    window.requestAnimationFrame(mainLoop);
210  }
211  callbackKey(type, code) {
212    if (this.pCallbackKey != null) {
213      this.pCallbackKey(type, code);
214    }
215  }
216  callbackDraw() {
217    gl.clearColor(1.0, 1.0, 1.0, 1.0);
218    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
219
220    if (this.pCallbackDraw != null) {
221      this.pCallbackDraw();
222    }
223  }
224
225  callbackProctouch(msg, x, y) {
226    XTools.MOUSE_POS.x = x;
227    XTools.MOUSE_POS.y = y;
228    if (this.pCallbackTouch != null) {
229      x = (x * Scr.logicw) / Scr.width;
230      y = (y * Scr.logich) / Scr.height;
231      this.pCallbackTouch(msg, x, y);
232    }
233  }
234  callbackDropfile(files, x, y) {
235    if (this.pCallbackDropfile != null) {
236      this.pCallbackDropfile(files, x, y);
237    }
238  }
239  resize() {
240    gl.viewport(0, 0, Scr.logicw, Scr.logich);
241    X2DFast.gi().resetMat();
242  }
243}
244
245GLFrame.pinstance_ = new GLFrame();
246