A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

708 行
19KB

  1. import {EventCaller} from "/app/js/common/EventCaller.js";
  2. import Utils from "/app/js/common/Utils.js";
  3. // Keycode list based on...
  4. // https://keycode.info/
  5. var KEYBYCODE = {
  6. 3:"break",
  7. 8:"backspace",
  8. 9:"tab",
  9. 13:"enter",
  10. 16:"shift",
  11. 17:"ctrl",
  12. 18:"alt",
  13. 19:"pause",
  14. 20:"capslock",
  15. 27:"esc",
  16. 32:"space",
  17. 33:"pageup",
  18. 34:"pagedown",
  19. 35:"end",
  20. 36:"home",
  21. 37:"left",
  22. 38:"up",
  23. 39:"right",
  24. 40:"down",
  25. 41:"select",
  26. 42:"print",
  27. 43:"execute",
  28. 44:"printscreen",
  29. 45:"insert",
  30. 46:"delete",
  31. 47:"help",
  32. 48:"0",
  33. 49:"1",
  34. 50:"2",
  35. 51:"3",
  36. 52:"4",
  37. 53:"5",
  38. 54:"6",
  39. 55:"7",
  40. 56:"8",
  41. 57:"9",
  42. 65:"a",
  43. 66:"b",
  44. 67:"c",
  45. 68:"d",
  46. 69:"e",
  47. 70:"f",
  48. 71:"g",
  49. 72:"h",
  50. 73:"i",
  51. 74:"j",
  52. 75:"k",
  53. 76:"l",
  54. 77:"m",
  55. 78:"n",
  56. 79:"o",
  57. 80:"p",
  58. 81:"q",
  59. 82:"r",
  60. 83:"s",
  61. 84:"t",
  62. 85:"u",
  63. 86:"v",
  64. 87:"w",
  65. 88:"x",
  66. 89:"y",
  67. 90:"z",
  68. 91:"leftmod", // Window key (left)
  69. 92:"rightwin",// Window key (right)
  70. 93:"rightmod",// Window key (right)
  71. 96:"num0",
  72. 97:"num1",
  73. 98:"num2",
  74. 99:"num3",
  75. 100:"num4",
  76. 101:"num5",
  77. 102:"num6",
  78. 103:"num7",
  79. 104:"num8",
  80. 105:"num9",
  81. 112:"f1",
  82. 113:"f2",
  83. 114:"f3",
  84. 115:"f4",
  85. 116:"f5",
  86. 117:"f6",
  87. 118:"f7",
  88. 119:"f8",
  89. 120:"f9",
  90. 121:"f10",
  91. 122:"f11",
  92. 123:"f12",
  93. 144:"numlock",
  94. 145:"scrolllock",
  95. };
  96. var KEYBYNAME = (function(){
  97. var keys = Object.keys(KEYBYCODE);
  98. var o = {};
  99. for (var i=0; i < keys.length; i++){
  100. if (KEYBYCODE.hasOwnProperty(keys[i])){
  101. o[KEYBYCODE[keys[i]]] = keys[i];
  102. }
  103. }
  104. return o;
  105. })();
  106. var KEYTYPE = {
  107. "number":[48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105],
  108. "letter":[65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90],
  109. "mod":[16,17,18],
  110. "arrow":[37,38,39,40],
  111. "wasd":[87,65,83,68],
  112. "fn":[112,113,114,115,116,117,118,119,120,121,122,123],
  113. "n1":[48,96],
  114. "n2":[49,97],
  115. "n3":[50,98],
  116. "n4":[51,99],
  117. "n5":[52,100],
  118. "n6":[53,101],
  119. "n7":[54,102],
  120. "n8":[55,103],
  121. "n9":[56,104],
  122. "n0":[57,105]
  123. };
  124. var KEYMAP = {
  125. "lastcode":null,
  126. "lastaction":"",
  127. "currentcodes":[]
  128. };
  129. var MOUSEBYCODE = {
  130. 0: "mbl", // (M)ouse (B)utton (L)eft
  131. 1: "mbm", // (M)ouse (B)utton (M)iddle
  132. 2: "mbr" // (M)ouse (B)utton (R)ight
  133. };
  134. var MOUSEBYNAME = {
  135. "mbl": 0,
  136. "mbm": 1,
  137. "mbr": 2
  138. };
  139. // TODO: Reeval this idea.
  140. const KEYPRESS_DELAY = 350; // Time in milliseconds. NOTE: May make this a variable in future.
  141. const MOUSECLICK_DELAY = 350; // Time in milliseconds.
  142. function AssignCodeName(code, name){
  143. name = name.toLowerCase();
  144. var remove = (code in Object.keys(KEYBYCODE));
  145. if (name in Object.keys(KEYBYNAME)){
  146. if (remove && KEYBYCODE[code] === name){
  147. return; // We're being asked to replace the exact same thing. SKIP!
  148. }
  149. throw new ValueError("Key name '" + name + "' already assigned. Cannot use duplicate key names.");
  150. }
  151. if (remove){
  152. delete KEYBYNAME[KEYBYCODE[code]];
  153. }
  154. KEYBYCODE[code] = name;
  155. KEYBYNAME[name] = code;
  156. }
  157. function KeymapContains(code){
  158. return KEYMAP["currentcodes"].findIndex(c=>c[0] == code) >= 0;
  159. }
  160. function AddToKeymap(code, action){
  161. KEYMAP["lastcode"] = code;
  162. KEYMAP["lastaction"] = action;
  163. if (KeymapContains(code) == false){
  164. KEYMAP["currentcodes"].push([code, Math.floor(Date.now())]);
  165. if (KEYMAP["currentcodes"].length > 1){
  166. KEYMAP["currentcodes"].sort(function(a, b){return a[0] - b[0];});
  167. }
  168. return true;
  169. }
  170. return false;
  171. }
  172. function RemoveFromKeymap(code, action){
  173. KEYMAP["lastcode"] = code;
  174. KEYMAP["lastaction"] = action;
  175. var ctime = Math.floor(Date.now());
  176. for (var i=0; i < KEYMAP["currentcodes"].length; i++){
  177. if (KEYMAP["currentcodes"][i][0] === code){
  178. var timediff = ctime - KEYMAP["currentcodes"][i][1];
  179. KEYMAP["currentcodes"].splice(i, 1);
  180. return timediff;
  181. }
  182. }
  183. return -1;
  184. }
  185. function KeyNameToCode(key){
  186. return (key in Object.keys(KEYBYNAME)) ? KEYBYNAME[key] : -1;
  187. }
  188. function CodeToKeyName(code){
  189. return (code in Object.keys(KEYBYCODE)) ? KEYBYCODE[code] : "" + code;
  190. }
  191. function CodesToEventName(codes, mouse){
  192. var ename = "";
  193. mouse = (mouse === true);
  194. for (var i=0; i < codes.length; i++){
  195. if (mouse){
  196. switch(codes[i]){
  197. case 0:
  198. ename += ((ename !== "") ? "+" : "") + "mouseleft";
  199. break;
  200. case 1:
  201. ename += ((ename !== "") ? "+" : "") + "mouseright";
  202. break;
  203. case 2:
  204. ename += ((ename !== "") ? "+" : "") + "mousemiddle";
  205. break;
  206. case 8000:
  207. ename += ((ename !== "") ? "+" : "") + "mousemove";
  208. break;
  209. default:
  210. ename += ((ename !== "") ? "+" : "") + "mousebtn" + codes[i].toString();
  211. }
  212. } else {
  213. ename += ((ename !== "") ? "+" : "") + CodeToKeyName(codes[i]);
  214. }
  215. }
  216. return ename;
  217. }
  218. function KeymapEventName(){
  219. return CodesToEventName(KEYMAP["currentcodes"].map(e=>e[0]));
  220. }
  221. function ReorderEventName(ename){
  222. // This function takes a keyboard and mouse event name and reorders it into key-code order.
  223. // This way users can write the event any way they want, but should still result in proper
  224. // event being called.
  225. var elist = ename.split("+");
  226. // TODO: Need to test for duplicate event names for both keyboard and mouse event names.
  227. var ecodes = [];
  228. var mcodes = [];
  229. for (var i=0; i < elist.length; i++){
  230. var key = elist[i].trim().toLowerCase();
  231. // Check for mouse events first. These are hardcoded for now.
  232. if (key === "mouseleft"){
  233. mcodes.push(0);
  234. } else if (key === "mouseright"){
  235. mcodes.push(1);
  236. } else if (key === "mousemiddle"){
  237. mcodes.push(2);
  238. } else if (key.startsWith("mousebtn")){
  239. var sub = key.substring(8);
  240. if (!isNaN(sub)){
  241. mcodes.push(parseInt(sub));
  242. } else {
  243. return ""; // This event name does not include valid mouse button code.
  244. }
  245. } else if (key === "mousemove"){
  246. mcodes.push(8000);
  247. }
  248. // Now handle keyboard event names.
  249. else if (!(key in Object.keys(KEYBYNAME))){
  250. if (!isNaN(key))
  251. ecodes.push(parseInt(key));
  252. else
  253. return ""; // This event name does not include valid key name!
  254. } else {
  255. ecodes.push(KEYBYNAME[key]);
  256. }
  257. }
  258. if (ecodes.length > 0 || mcodes.length > 0){
  259. var rename = "";
  260. if (ecodes.length > 0){
  261. ecodes.sort(function(a, b){return a-b;});
  262. rename = CodesToEventName(ecodes);
  263. }
  264. if (mcodes.length > 0){
  265. mcodes.sort(function(a, b){return a-b;});
  266. rename += ((rename !== "") ? "+" : "") + CodesToEventName(mcodes, true);
  267. }
  268. return rename;
  269. }
  270. return "";
  271. }
  272. export default class Input{
  273. constructor(){
  274. this.__emitter = new EventCaller();
  275. this.__preventDefaults = false;
  276. // Internet Explorer... that fudged up p.o.s. has to make mouse button detection difficult
  277. // with different button values from ALL other browsers. So... if Input has this value set to
  278. // true, then mouseup and mousedown events will base it's detection of IE button values, instead
  279. // of the real values.
  280. this.__ieMouseMode = false;
  281. // If set, this is the element that the mouse will focus on and adjust it's position against.
  282. this.__mouseTarget = null;
  283. this.__mousePosition = null;
  284. this.__mouseLastButton = -1;
  285. this.__mouseLastAction = "";
  286. this.__mouseButtons = [];
  287. this.__keyboardEnabled = false;
  288. this.__mouseEnabled = false;
  289. var buttonID = (function(e){
  290. var btn = e.button;
  291. if ((this.__ieMouseMode && btn === 1) || (!this.__ieMouseMode && btn === 0)){
  292. btn = 0;
  293. } else if ((this.__ieMouseMode && e.button === 4) || (!this.__ieMouseMode && e.button === 1)){
  294. btn = 1;
  295. }
  296. return btn;
  297. }).bind(this);
  298. var addMouseButton = (function(btn){
  299. if (this.__mouseButtons.findIndex(b=>b[0]===btn) < 0){
  300. this.__mouseButtons.push([btn, Math.floor(Date.now())]);
  301. return true;
  302. }
  303. return false;
  304. }).bind(this);
  305. var removeMouseButton = (function(btn){
  306. var idx = this.__mouseButtons.findIndex(b=>b[0]===btn);
  307. var diff = -1;
  308. if (idx >= 0){
  309. diff = Math.floor(Date.now()) - this.__mouseButtons[idx][1];
  310. this.__mouseButtons.splice(idx, 1);
  311. }
  312. return diff;
  313. }).bind(this);
  314. // ---------------------------------------------------------------------
  315. // Handling keyboard events.
  316. this.enableKeyboardInput = (function(){
  317. var handle_keydown = (function(e){
  318. if (AddToKeymap(e.keyCode, "keydown")){
  319. var ename = KeymapEventName();
  320. var edata = {
  321. source: this,
  322. iscombo: (ename.indexOf("+") >= 0),
  323. keys: ename,
  324. keycode:e.keyCode,
  325. keyname:CodeToKeyName(e.keyCode),
  326. action:"keydown"
  327. }
  328. this.__emitter.emit(ename, edata);
  329. this.__emitter.emit("keydown", edata);
  330. }
  331. }).bind(this);
  332. var handle_keyup = (function(e){
  333. var timediff = RemoveFromKeymap(e.keyCode, "keyup");
  334. if (timediff < 0){
  335. console.log("WARNING: Failed to find keycode '" + e.keyCode + "' in the Key Map.");
  336. } else {
  337. var ename = KeymapEventName();
  338. var edata = {
  339. source: this,
  340. iscombo: (ename.indexOf("+") >= 0),
  341. keys: ename,
  342. keycode: e.keyCode,
  343. keyname: CodeToKeyName(e.keyCode),
  344. action:"keyup"
  345. }
  346. if (timediff <= KEYPRESS_DELAY && KEYMAP["currentcodes"].length <= 0){
  347. this.__emitter.emit("keypress", edata);
  348. }
  349. this.__emitter.emit("keyup", edata);
  350. }
  351. }).bind(this);
  352. return (function(enable){
  353. enable = (enable !== false);
  354. // NOTE: There shouldn't be any harm if the user repeatedly enables or disables keyboard.
  355. if (enable){
  356. this.__keyboardEnabled = true;
  357. window.addEventListener("keydown", handle_keydown, false);
  358. window.addEventListener("keyup", handle_keyup, false);
  359. } else {
  360. this.__keyboardEnabled = false;
  361. window.removeEventListener("keydown", handle_keydown);
  362. window.removeEventListener("keyup", handle_keyup);
  363. }
  364. }).bind(this);
  365. }).apply(this);
  366. // ---------------------------------------------------------------------------------------
  367. // Handling mouse events.
  368. var MouseButtonsEventName = (function(){
  369. var e = "";
  370. for (var i=0; i < this.__mouseButtons.length; i++){
  371. e += (e !== "") ? "+" : "";
  372. switch (this.__mouseButtons[i][0]){
  373. case 0:
  374. e += "mouseleft";
  375. break;
  376. case 1:
  377. e += "mouseright";
  378. break;
  379. case 2:
  380. e += "mousemiddle";
  381. break;
  382. default:
  383. e += "mousebtn" + this.__mouseButtons[i][0].toString();
  384. }
  385. }
  386. return e;
  387. }).bind(this);
  388. // This function will only return an event name if keyboard
  389. var MouseEventName = (function(addon){
  390. var ename = KeymapEventName();
  391. var mname = MouseButtonsEventName();
  392. if (mname !== "")
  393. ename += ((ename !== "") ? "+" : "") + mname;
  394. if (typeof(addon) === "string")
  395. ename += ((ename !== "") ? "+" : "") + addon;
  396. return ename;
  397. }).bind(this);
  398. this.enableMouseInput = (function(){
  399. var mousePosition = (function(e){
  400. var pos = {
  401. lastX: (this.__mousePosition !== null) ? this.__mousePosition.x : null,
  402. lastY: (this.__mousePosition !== null) ? this.__mousePosition.y : null,
  403. x: e.clientX,
  404. y: e.clientY,
  405. inbounds: true
  406. }
  407. if (this.__mouseTarget !== null){
  408. var rect = this.__mouseTarget.getBoundingClientRect();
  409. pos.x -= rect.left;
  410. pos.y -= rect.top;
  411. pos.inbounds = (pos.x >= 0 && pos.x < rect.width && pos.y >= 0 && pos.y < rect.height);
  412. }
  413. pos.x = Math.floor(pos.x);
  414. pos.y = Math.floor(pos.y);
  415. return pos;
  416. }).bind(this);
  417. var handle_mousemove = (function(e){
  418. var pos = mousePosition(e);
  419. if (pos.inbounds){
  420. if (this.__preventDefaults){
  421. e.preventDefault();
  422. if (e.stopPropagation)
  423. e.stopPropagation();
  424. e.cancelBubble = true;
  425. }
  426. this.__mousePosition = pos;
  427. this.__mouseLastAction = "mousemove";
  428. var ename = MouseEventName("mousemove");
  429. var data = {
  430. source: this,
  431. lastX: pos.lastX,
  432. lastY: pos.lastY,
  433. x: pos.x,
  434. y: pos.y,
  435. button: this.__mouseLastButton,
  436. action: "mousemove"
  437. };
  438. if (ename !== "" && ename !== "mousemove")
  439. this.__emitter.emit(ename, data);
  440. this.__emitter.emit("mousemove", data);
  441. }
  442. return false;
  443. }).bind(this);
  444. var handle_mousedown = (function(e){
  445. var button = buttonID(e);
  446. var pos = mousePosition(e);
  447. if (pos.inbounds){
  448. if (this.__preventDefaults){
  449. e.preventDefault();
  450. if (e.stopPropagation)
  451. e.stopPropagation();
  452. e.cancelBubble = true;
  453. }
  454. if (addMouseButton(button)){
  455. var ename = MouseEventName();
  456. var data = {
  457. source: this,
  458. lastX: pos.lastX,
  459. lastY: pos.lastY,
  460. x: pos.x,
  461. y: pos.y,
  462. button: button,
  463. action: "mousedown"
  464. };
  465. this.__mousePosition = pos;
  466. this.__mouseLastButton = button;
  467. this.__mouseLastAction = "mousedown";
  468. if (ename !== "")
  469. this.__emitter.emit(ename, data);
  470. this.__emitter.emit("mousedown", data);
  471. }
  472. }
  473. return false;
  474. }).bind(this);
  475. var handle_mouseup = (function(e){
  476. var button = buttonID(e);
  477. var pos = mousePosition(e);
  478. // NOTE: I still want to check for button removal, even before testing if an event should
  479. // fire, so that I don't have any phantom buttons listed as "pressed" in the mouseButtons list.
  480. var diff = removeMouseButton(button);
  481. if (pos.inbounds){
  482. if (this.__preventDefaults){
  483. e.preventDefault();
  484. if (e.stopPropagation)
  485. e.stopPropagation();
  486. e.cancelBubble = true;
  487. }
  488. if (diff >= 0){
  489. this.__mousePosition = pos;
  490. this.__mouseLastButton = button;
  491. this.__mouseLastAction = "mouseup";
  492. var data = {
  493. source: this,
  494. lastX: pos.lastX,
  495. lastY: pos.lastY,
  496. x: pos.x,
  497. y: pos.y,
  498. button: button,
  499. action: "mouseup"
  500. }
  501. this.__emitter.emit("mouseup", data);
  502. if (diff <= MOUSECLICK_DELAY && this.__mouseButtons.length <= 0){
  503. this.__emitter.emit("mouseclick", data);
  504. }
  505. }
  506. }
  507. return false;
  508. }).bind(this);
  509. var handle_mousewheel = (function(e){
  510. if (this.__preventDefaults)
  511. e.preventDefault();
  512. // TODO: Finish me!
  513. }).bind(this);
  514. // This event is purely for preventing Default behaviors on mouse events we're not using.
  515. var handle_mouseprevdef = (function(e){
  516. var pos = mousePosition(e);;
  517. if (this.__preventDefaults && (pos === null || pos.inbounds)){
  518. e.preventDefault();
  519. if (e.stopPropagation)
  520. e.stopPropagation();
  521. e.cancelBubble = true;
  522. }
  523. return false;
  524. }).bind(this);
  525. return (function(enable){
  526. enable = (enable !== false);
  527. // NOTE: There shouldn't be any harm if the user repeatedly enables or disables mouse.
  528. if (enable){
  529. this.__mouseEnabled = true;
  530. window.addEventListener("mousemove", handle_mousemove);
  531. window.addEventListener("mousedown", handle_mousedown);
  532. window.addEventListener("mouseup", handle_mouseup);
  533. window.addEventListener("mousewheel", handle_mousewheel);
  534. window.addEventListener("click", handle_mouseprevdef);
  535. window.addEventListener("dblclick", handle_mouseprevdef);
  536. window.addEventListener("contextmenu", handle_mouseprevdef);
  537. } else {
  538. this.__mouseEnabled = false;
  539. window.removeEventListener("mousemove", handle_mousemove);
  540. window.removeEventListener("mousedown", handle_mousedown);
  541. window.removeEventListener("mouseup", handle_mouseup);
  542. window.removeEventListener("mousewheel", handle_mousewheel);
  543. window.removeEventListener("click", handle_mouseprevdef);
  544. window.removeEventListener("dblclick", handle_mouseprevdef);
  545. window.removeEventListener("contextmenu", handle_mouseprevdef);
  546. }
  547. }).bind(this);
  548. }).apply(this);
  549. this.enableKeyboardInput();
  550. this.enableMouseInput();
  551. }
  552. get mouseInputEnabled(){return this.__mouseEnabled;}
  553. get keyboardInputEnabled(){return this.__keyboardEnabled;}
  554. get lastkey(){
  555. if (KEYMAP["lastcode"] !== null){
  556. if (KEYMAP["lastcode"] in Object.keys(KEYBYCODE)){
  557. return KEYBYCODE[KEYMAP["lastcode"]];
  558. }
  559. return "" + KEYMAP["lastcode"];
  560. }
  561. return "0";
  562. }
  563. get lastkeyaction(){
  564. return KEYMAP["lastaction"];
  565. }
  566. get currentKeys(){
  567. return KeymapEventName();
  568. }
  569. get currentKeyCodes(){
  570. return KEYMAP["currentcodes"].map(e=>e[0]);
  571. }
  572. get lastMouseAction(){
  573. return this.__mouseLastAction;
  574. }
  575. get lastMouseButton(){
  576. return this.__mouseLastButton;
  577. }
  578. get lastMousePosition(){
  579. if (this.__mousePosition === null || this.__mousePosition.lastX === null)
  580. return null;
  581. return {
  582. x: this.__mousePosition.lastX,
  583. y: this.__mousePosition.lastY
  584. };
  585. }
  586. get currentMousePosition(){
  587. if (this.__mousePosition === null)
  588. return null;
  589. return {
  590. x: this.__mousePosition.x,
  591. y: this.__mousePosition.y
  592. };
  593. }
  594. get preventDefaults(){return this.__preventDefaults;}
  595. set preventDefaults(p){
  596. this.__preventDefaults = (p === true);
  597. }
  598. get ieMouseMode(){return this.__ieMouseMode;}
  599. set ieMouseMode(m){this.__ieMouseMode = (m === true);}
  600. get mouseTargetElement(){return this.__mouseTarget;}
  601. set mouseTargetElement(el){
  602. if (el === null || Utils.isElement(el)){
  603. this.__mouseTarget = el;
  604. } else {
  605. throw new TypeError("Expected Mouse Target Element to be null or an HTMLElement object.");
  606. }
  607. }
  608. isKeyDown(key){
  609. if (typeof(key) === 'string'){
  610. key = KeyNameToCode(key);
  611. }
  612. for (var i=0; i < KEYMAP["currentcodes"].length; i++){
  613. if (KEYMAP["currentcodes"][i][0] === key){
  614. return true;
  615. }
  616. }
  617. return false;
  618. }
  619. listen(ename, func, owner=null, once=false){
  620. if ((["keyup", "keydown", "keypress", "mousemove", "mousedown", "mouseup", "mouseclick"]).indexOf(ename) >= 0){
  621. this.__emitter.listen(ename, func, owner, once);
  622. } else {
  623. ename = ReorderEventName(ename);
  624. if (ename === ""){
  625. throw new ValueError("Failed to parse key or key combination.");
  626. }
  627. this.__emitter.listen(ename, func, owner, once);
  628. }
  629. return this;
  630. }
  631. unlisten(ename, func, owner=null){
  632. if ((["keyup", "keydown", "keypress", "mousemove", "mousedown", "mouseup", "mouseclick"]).indexOf(ename) >= 0){
  633. this.__emitter.unlisten(ename, func, owner);
  634. } else {
  635. ename = ReorderEventName(ename);
  636. if (ename !== "")
  637. this.__emitter.unlisten(ename, func, owner);
  638. }
  639. return this;
  640. }
  641. }