OSDN -- Develop and Download Open Source Software
  • R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している


Commit MetaInfo

Revision46 (tree)
Time2016-12-10 08:56:46
Authortakoyaki_umaaaa

Log Message

(empty log message)

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 46)
@@ -37,6 +37,7 @@
3737 if (null != this.DOMbase) {
3838 this.debuglog('initDOMobj() Clear the reference to DOM element');
3939 this.DOMobject.removeEventListener('mousedown', this.onMouseDown.bind(this), false);
40+ this.DOMobject.removeEventListener('touchstart', this.onTouchStart.bind(this), false);
4041
4142 this.DOMbase.removeChild(this.DOMobject);
4243 this.DOMobject.outerHTML = "";
@@ -116,6 +117,7 @@
116117 this.DOMbase.dataset.mirrorlr = this.mirrorLRdeg;
117118 this.DOMbase.dataset.mirrorud = this.mirrorUDdeg;
118119 this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
120+ this.DOMbase.addEventListener('touchstart', this.onTouchStart.bind(this), false);
119121 // DispObj作成
120122 let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
121123 this.DOMobject = document.createElement(elType);
@@ -220,6 +222,7 @@
220222 this.mirrorLRdeg = parseInt(ele.dataset.mirrorlr);
221223 this.mirrorUDdeg = parseInt(ele.dataset.mirrorud);
222224 this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
225+ this.DOMbase.addEventListener('touchstart', this.onTouchStart.bind(this), false);
223226
224227 if( ele.children.length < 1 ){
225228 console.error('保存ファイルから前回の状態を復元できません　要素の構成エラー　表示に必要な要素の情報が欠けている\nobjid=' + ele.dataset.objid + ', className=' + ele.className);
@@ -315,7 +318,17 @@
315318 window.appArea.setMouseEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
316319 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
317320 evt.preventDefault(); // 要素既定のdefault動作を止める
318-
321+ this.startMovingElement(evt);
322+ }
323+ onTouchStart(evt){
324+ this.debuglog("onTouchStart");
325+ // Mouse eventをappAreaからScalerに渡してもらうように設定
326+ window.appArea.setSingleTouchEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
327+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
328+ evt.preventDefault(); // 要素既定のdefault動作を止める
329+ this.startMovingElement(evt.touches[0]);
330+ }
331+ startMovingElement(evt){
319332 /* test
320333 let xy1 = rotateUD(0, -45, parseInt(evt.pageX), parseInt(evt.pageY));
321334 let xy2 = rotateZ(0, 0, 45, xy1[0], xy1[1]);
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 46)
@@ -57,6 +57,7 @@
5757 this.domScaler.classList.add('scaler');
5858 this.domScaler.title = "ドラッグでサイズを変更します";
5959 this.domScaler.addEventListener('mousedown', this.onMouseDownScale.bind(this), false);
60+ this.domScaler.addEventListener('touchstart', this.onTouchStartScale.bind(this), false);
6061 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domScaler));
6162 }
6263 // 回転操作マーカー作成
@@ -66,6 +67,7 @@
6667 this.domRoller.classList.add('roller');
6768 this.domRoller.title = "ドラッグで回転します";
6869 this.domRoller.addEventListener('mousedown', this.onMouseDownRoll.bind(this), false);
70+ this.domRoller.addEventListener('touchstart', this.onTouchStartRoll.bind(this), false);
6971 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domRoller));
7072 }
7173 createMirrorLR() {
@@ -74,6 +76,7 @@
7476 this.domMirrorLR.classList.add('mirrorLR');
7577 this.domMirrorLR.title = "左右反転します";
7678 this.domMirrorLR.addEventListener('mousedown', this.onMouseDownMirror.bind(this), false);
79+ this.domMirrorLR.addEventListener('touchstart', this.onTouchStartMirror.bind(this), false);
7780 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domMirrorLR));
7881 }
7982 createMirrorUD() {
@@ -82,6 +85,7 @@
8285 this.domMirrorUD.classList.add('mirrorUD');
8386 this.domMirrorUD.title = "上下反転します";
8487 this.domMirrorUD.addEventListener('mousedown', this.onMouseDownMirror.bind(this), false);
88+ this.domMirrorUD.addEventListener('touchstart', this.onTouchStartMirror.bind(this), false);
8589 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domMirrorUD));
8690 }
8791
@@ -181,12 +185,22 @@
181185 if (eleFocus.length < 2) return;
182186 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
183187 evt.preventDefault(); // 要素既定のdefault動作を止める
184-
185188 // Mouse eventをappAreaからScalerに渡してもらうように設定
186189 window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
187-
188-
189-
190+ this.startScaling(evt);
191+ }
192+ onTouchStartScale(evt){
193+ this.debuglog('onTouchStartScale');
194+ let eleFocus = this.getFocusdElements();
195+ if (eleFocus.length < 2) return;
196+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
197+ evt.preventDefault(); // 要素既定のdefault動作を止める
198+ // Mouse eventをappAreaからScalerに渡してもらうように設定
199+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
200+ this.startScaling(evt.touches[0]);
201+ }
202+ startScaling(evt){
203+ let eleFocus = this.getFocusdElements();
190204 // 画像を反転している場合、マウス入力座標も反転させる
191205 this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
192206 this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -385,11 +399,22 @@
385399 if (eleFocus.length < 2) return;
386400 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
387401 evt.preventDefault(); // 要素既定のdefault動作を止める
388-
389402 // Mouse eventをappAreaからRollerに渡してもらうように設定
390403 window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
391-
392-
404+ this.startRolling(evt);
405+ }
406+ onTouchStartRoll(evt){
407+ this.debuglog('onTouchStartRoll');
408+ let eleFocus = this.getFocusdElements();
409+ if (eleFocus.length < 2) return;
410+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
411+ evt.preventDefault(); // 要素既定のdefault動作を止める
412+ // Mouse eventをappAreaからRollerに渡してもらうように設定
413+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
414+ this.startRolling(evt.touches[0]);
415+ }
416+ startRolling(evt){
417+ let eleFocus = this.getFocusdElements();
393418 // 変化しない値を使いまわすために保持
394419 this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
395420 this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -455,10 +480,16 @@
455480 this.debuglog('onMouseDownMirror');
456481 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
457482 evt.preventDefault(); // 要素既定のdefault動作を止める
458-
459483 // Mouse eventをappAreaからRollerに渡してもらうように設定
460484 window.appArea.setMouseEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
461485 }
486+ onTouchStartMirror(evt) {
487+ this.debuglog('onTouchStartMirror');
488+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
489+ evt.preventDefault(); // 要素既定のdefault動作を止める
490+ // Mouse eventをappAreaからRollerに渡してもらうように設定
491+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
492+ }
462493 mouseMoveMirror(evt) {
463494 let eleFocus = this.getFocusdElements();
464495 if (eleFocus.length < 2) return;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (revision 46)
@@ -6,6 +6,8 @@
66 this.DOMobject = dom;
77 this.mouseMoveFunc = null;
88 this.mouseUpFunc = null;
9+ this.touchMoveFunc = null;
10+ this.touchEndFunc = null;
911 }
1012 // 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
1113 // 取得するための正規表現object取得
@@ -25,6 +27,9 @@
2527 this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
2628 this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
2729 this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
30+ this.DOMobject.addEventListener('touchmove', this.onTouchMove.bind(this), false);
31+ this.DOMobject.addEventListener('touchstart', this.onTouchStart.bind(this), false);
32+ this.DOMobject.addEventListener('touchend', this.onTouchEnd.bind(this), false);
2833 }
2934
3035
@@ -104,14 +109,39 @@
104109 this.mouseMoveFunc = mouseMove;
105110 this.mouseUpFunc = mouseUp;
106111 }
112+ // Touch I/F 用
113+ // 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
114+ setSingleTouchEventObj(
115+ strclass, // touch end callback 第2引数 targetとして返してほしいelementが持つ css class名
116+ touchMove, // touch moveで呼んでほしい関数 or null
117+ touchEnd // touch endで呼んでほしい関数 or null
118+ ) {
119+ this.debuglog('setSingleTouchEventObj strclass=' + strclass + ', callbackMove=' + ((null != touchMove)? touchMove.name: 'null') + ', callbackUp=' + ((null != touchEnd)? touchEnd.name: 'null'));
107120
121+ // Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
122+ if (null != touchMove || null != touchEnd) {
123+ if (null != this.touchMoveFunc || null != this.touchEndFunc) {
124+ console.error('マウスイベント callback設定上書き \n\
125+Before strclass=' + this.strclass + 'callbackMove=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', callbackUp=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null') + '\n\
126+After strclass=' + strclass + 'callbackMove=' + ((null != touchMove) ? touchMove.name : 'null') + ', callbackUp=' + ((null != touchEnd) ? touchEnd.name : 'null'));
127+ }
128+ }
129+
130+ this.strclass = strclass;
131+ this.touchMoveFunc = touchMove;
132+ this.touchEndFunc = touchEnd;
133+ }
134+
108135 // Event handler -------------------
109136
110- // ■マウス左ボタン押下 (Drag処理)
137+ // マウス左ボタン押下 (Drag処理)
111138 onMouseDown(evt) {
112139 this.debuglog('マウスクリック onMouseDown()');
113140 }
114- // ■ マウス移動 (ドラッグ中)
141+ onTouchStart(evt){
142+ this.debuglog('タッチ開始 onTouchStart()');
143+ }
144+ // マウス移動 (ドラッグ中)
115145 onMouseMove(evt) {
116146
117147 if (null != this.mouseMoveFunc) {
@@ -118,13 +148,18 @@
118148 this.mouseMoveFunc(evt);
119149 }
120150 }
151+ onTouchMove(evt){
152+ if (null != this.touchMoveFunc) {
153+ this.touchMoveFunc(evt.touches[0]);
154+ }
155+ }
121156
122- // ■ ドロップ処理
157+ // ドロップ処理
123158 onMouseUp(evt) {
124159 this.debuglog('マウスアップ onMouseUp() findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
125160 let e = findClassNameParent(this.strclass, evt.target);
126161 if (null == e) {
127- console.error('マウスアップ 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
162+ console.error('入力完了処理 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
128163 // ひとまず処理を継続する
129164 }
130165
@@ -132,7 +167,19 @@
132167 this.mouseUpFunc(evt, e);
133168 }
134169 }
170+ onTouchEnd(evt){
171+ this.debuglog('タッチエンド onTouchEnd() findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
172+ let e = findClassNameParent(this.strclass, evt.touches[0].target);
173+ if (null == e) {
174+ console.error('入力完了処理 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
175+ // ひとまず処理を継続する
176+ }
135177
178+ if (null != this.touchEndFunc) {
179+ this.touchEndFunc(evt.touches[0], e);
180+ }
181+ }
136182
137183
184+
138185 }
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 46)
@@ -30,6 +30,8 @@
3030 this.DOMpalbg[cnt].style.top = 40 + 'px';
3131 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3232 this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
33+ this.DOMpalbg[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
34+ this.DOMpalbg[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
3335 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3436 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
3537 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -41,6 +43,8 @@
4143 this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
4244 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
4345 this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
46+ this.DOMpaltxtcol[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
47+ this.DOMpaltxtcol[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
4448 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
4549 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
4650 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -52,6 +56,8 @@
5256 this.DOMpalact[cnt].style.top = 40 + 'px';
5357 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
5458 this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
59+ this.DOMpalact[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
60+ this.DOMpalact[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
5561 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
5662 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
5763 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -63,6 +69,8 @@
6369 this.DOMpalset[cnt].style.top = 40 + 'px';
6470 this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
6571 this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
72+ this.DOMpalset[cnt].addEventListener('touchstart', this.onTouchStartSetting.bind(this), false);
73+ this.DOMpalset[cnt].addEventListener('touchend', this.touchEndSetting.bind(this), false);
6674 this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
6775 this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
6876 this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -208,10 +216,18 @@
208216 onMouseDown(evt) {
209217 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
210218 evt.preventDefault(); // 要素既定のdefault動作を止める
211-
212219 // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
213220 window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
214-
221+ this.startMovingElement(evt);
222+ }
223+ onTouchStart(evt){
224+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
225+ evt.preventDefault(); // 要素既定のdefault動作を止める
226+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
227+ window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
228+ this.startMovingElement(evt.touches[0]);
229+ }
230+ startMovingElement(evt){
215231 // Drag対象を保持
216232 this.draggingDOM = evt.target;
217233 // ElementのDrag開始位置を保持
@@ -251,7 +267,15 @@
251267 if (null == this.draggingDOM) return;
252268 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
253269 evt.preventDefault(); // 要素既定のdefault動作を止める
254-
270+ this.endMovingElement(evt);
271+ }
272+ touchEnd(evt) {
273+ if (null == this.draggingDOM) return;
274+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
275+ evt.preventDefault(); // 要素既定のdefault動作を止める
276+ this.endMovingElement(evt.touches[0]);
277+ }
278+ endMovingElement(evt){
255279 let palobjid = this.draggingDOM.dataset.objid;
256280 let palid = this.draggingDOM.dataset.palid;
257281
@@ -311,11 +335,21 @@
311335 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
312336 evt.preventDefault(); // 要素既定のdefault動作を止める
313337 }
338+ onTouchStartSetting(evt) {
339+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
340+ evt.preventDefault(); // 要素既定のdefault動作を止める
341+ }
314342 mouseUpSetting(evt) {
315343 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
316344 evt.preventDefault(); // 要素既定のdefault動作を止める
317-
318-
345+ this.executeSettingButton(evt);
346+ }
347+ touchEndSetting(evt){
348+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
349+ evt.preventDefault(); // 要素既定のdefault動作を止める
350+ this.executeSettingButton(evt.touches[0]);
351+ }
352+ executeSettingButton(evt){
319353 switch (evt.target.dataset.objid) {
320354 case "palset0": // 設定パレット非表示
321355 this.DOMpalset[0].parentNode.style.display = "none";
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 46)
@@ -37,6 +37,7 @@
3737 if (null != this.DOMbase) {
3838 this.debuglog('initDOMobj() Clear the reference to DOM element');
3939 this.DOMobject.removeEventListener('mousedown', this.onMouseDown.bind(this), false);
40+ this.DOMobject.removeEventListener('touchstart', this.onTouchStart.bind(this), false);
4041
4142 this.DOMbase.removeChild(this.DOMobject);
4243 this.DOMobject.outerHTML = "";
@@ -116,6 +117,7 @@
116117 this.DOMbase.dataset.mirrorlr = this.mirrorLRdeg;
117118 this.DOMbase.dataset.mirrorud = this.mirrorUDdeg;
118119 this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
120+ this.DOMbase.addEventListener('touchstart', this.onTouchStart.bind(this), false);
119121 // DispObj作成
120122 let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
121123 this.DOMobject = document.createElement(elType);
@@ -220,6 +222,7 @@
220222 this.mirrorLRdeg = parseInt(ele.dataset.mirrorlr);
221223 this.mirrorUDdeg = parseInt(ele.dataset.mirrorud);
222224 this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
225+ this.DOMbase.addEventListener('touchstart', this.onTouchStart.bind(this), false);
223226
224227 if( ele.children.length < 1 ){
225228 console.error('保存ファイルから前回の状態を復元できません　要素の構成エラー　表示に必要な要素の情報が欠けている\nobjid=' + ele.dataset.objid + ', className=' + ele.className);
@@ -315,7 +318,17 @@
315318 window.appArea.setMouseEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
316319 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
317320 evt.preventDefault(); // 要素既定のdefault動作を止める
318-
321+ this.startMovingElement(evt);
322+ }
323+ onTouchStart(evt){
324+ this.debuglog("onTouchStart");
325+ // Mouse eventをappAreaからScalerに渡してもらうように設定
326+ window.appArea.setSingleTouchEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
327+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
328+ evt.preventDefault(); // 要素既定のdefault動作を止める
329+ this.startMovingElement(evt.touches[0]);
330+ }
331+ startMovingElement(evt){
319332 /* test
320333 let xy1 = rotateUD(0, -45, parseInt(evt.pageX), parseInt(evt.pageY));
321334 let xy2 = rotateZ(0, 0, 45, xy1[0], xy1[1]);
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 46)
@@ -57,6 +57,7 @@
5757 this.domScaler.classList.add('scaler');
5858 this.domScaler.title = "ドラッグでサイズを変更します";
5959 this.domScaler.addEventListener('mousedown', this.onMouseDownScale.bind(this), false);
60+ this.domScaler.addEventListener('touchstart', this.onTouchStartScale.bind(this), false);
6061 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domScaler));
6162 }
6263 // 回転操作マーカー作成
@@ -66,6 +67,7 @@
6667 this.domRoller.classList.add('roller');
6768 this.domRoller.title = "ドラッグで回転します";
6869 this.domRoller.addEventListener('mousedown', this.onMouseDownRoll.bind(this), false);
70+ this.domRoller.addEventListener('touchstart', this.onTouchStartRoll.bind(this), false);
6971 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domRoller));
7072 }
7173 createMirrorLR() {
@@ -74,6 +76,7 @@
7476 this.domMirrorLR.classList.add('mirrorLR');
7577 this.domMirrorLR.title = "左右反転します";
7678 this.domMirrorLR.addEventListener('mousedown', this.onMouseDownMirror.bind(this), false);
79+ this.domMirrorLR.addEventListener('touchstart', this.onTouchStartMirror.bind(this), false);
7780 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domMirrorLR));
7881 }
7982 createMirrorUD() {
@@ -82,6 +85,7 @@
8285 this.domMirrorUD.classList.add('mirrorUD');
8386 this.domMirrorUD.title = "上下反転します";
8487 this.domMirrorUD.addEventListener('mousedown', this.onMouseDownMirror.bind(this), false);
88+ this.domMirrorUD.addEventListener('touchstart', this.onTouchStartMirror.bind(this), false);
8589 window.renderLoop.requestRenderFunc(this.renderCreateForcus.bind(this, this.domMirrorUD));
8690 }
8791
@@ -181,12 +185,22 @@
181185 if (eleFocus.length < 2) return;
182186 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
183187 evt.preventDefault(); // 要素既定のdefault動作を止める
184-
185188 // Mouse eventをappAreaからScalerに渡してもらうように設定
186189 window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
187-
188-
189-
190+ this.startScaling(evt);
191+ }
192+ onTouchStartScale(evt){
193+ this.debuglog('onTouchStartScale');
194+ let eleFocus = this.getFocusdElements();
195+ if (eleFocus.length < 2) return;
196+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
197+ evt.preventDefault(); // 要素既定のdefault動作を止める
198+ // Mouse eventをappAreaからScalerに渡してもらうように設定
199+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
200+ this.startScaling(evt.touches[0]);
201+ }
202+ startScaling(evt){
203+ let eleFocus = this.getFocusdElements();
190204 // 画像を反転している場合、マウス入力座標も反転させる
191205 this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
192206 this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -385,11 +399,22 @@
385399 if (eleFocus.length < 2) return;
386400 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
387401 evt.preventDefault(); // 要素既定のdefault動作を止める
388-
389402 // Mouse eventをappAreaからRollerに渡してもらうように設定
390403 window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
391-
392-
404+ this.startRolling(evt);
405+ }
406+ onTouchStartRoll(evt){
407+ this.debuglog('onTouchStartRoll');
408+ let eleFocus = this.getFocusdElements();
409+ if (eleFocus.length < 2) return;
410+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
411+ evt.preventDefault(); // 要素既定のdefault動作を止める
412+ // Mouse eventをappAreaからRollerに渡してもらうように設定
413+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
414+ this.startRolling(evt.touches[0]);
415+ }
416+ startRolling(evt){
417+ let eleFocus = this.getFocusdElements();
393418 // 変化しない値を使いまわすために保持
394419 this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
395420 this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -455,10 +480,16 @@
455480 this.debuglog('onMouseDownMirror');
456481 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
457482 evt.preventDefault(); // 要素既定のdefault動作を止める
458-
459483 // Mouse eventをappAreaからRollerに渡してもらうように設定
460484 window.appArea.setMouseEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
461485 }
486+ onTouchStartMirror(evt) {
487+ this.debuglog('onTouchStartMirror');
488+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
489+ evt.preventDefault(); // 要素既定のdefault動作を止める
490+ // Mouse eventをappAreaからRollerに渡してもらうように設定
491+ window.appArea.setSingleTouchEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
492+ }
462493 mouseMoveMirror(evt) {
463494 let eleFocus = this.getFocusdElements();
464495 if (eleFocus.length < 2) return;
--- HtmlDrawApp/HTMLDrawApp/js/apparea.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js (revision 46)
@@ -6,6 +6,8 @@
66 this.DOMobject = dom;
77 this.mouseMoveFunc = null;
88 this.mouseUpFunc = null;
9+ this.touchMoveFunc = null;
10+ this.touchEndFunc = null;
911 }
1012 // 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
1113 // 取得するための正規表現object取得
@@ -25,6 +27,9 @@
2527 this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
2628 this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
2729 this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
30+ this.DOMobject.addEventListener('touchmove', this.onTouchMove.bind(this), false);
31+ this.DOMobject.addEventListener('touchstart', this.onTouchStart.bind(this), false);
32+ this.DOMobject.addEventListener('touchend', this.onTouchEnd.bind(this), false);
2833 }
2934
3035
@@ -104,14 +109,39 @@
104109 this.mouseMoveFunc = mouseMove;
105110 this.mouseUpFunc = mouseUp;
106111 }
112+ // Touch I/F 用
113+ // 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
114+ setSingleTouchEventObj(
115+ strclass, // touch end callback 第2引数 targetとして返してほしいelementが持つ css class名
116+ touchMove, // touch moveで呼んでほしい関数 or null
117+ touchEnd // touch endで呼んでほしい関数 or null
118+ ) {
119+ this.debuglog('setSingleTouchEventObj strclass=' + strclass + ', callbackMove=' + ((null != touchMove)? touchMove.name: 'null') + ', callbackUp=' + ((null != touchEnd)? touchEnd.name: 'null'));
107120
121+ // Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
122+ if (null != touchMove || null != touchEnd) {
123+ if (null != this.touchMoveFunc || null != this.touchEndFunc) {
124+ console.error('マウスイベント callback設定上書き \n\
125+Before strclass=' + this.strclass + 'callbackMove=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', callbackUp=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null') + '\n\
126+After strclass=' + strclass + 'callbackMove=' + ((null != touchMove) ? touchMove.name : 'null') + ', callbackUp=' + ((null != touchEnd) ? touchEnd.name : 'null'));
127+ }
128+ }
129+
130+ this.strclass = strclass;
131+ this.touchMoveFunc = touchMove;
132+ this.touchEndFunc = touchEnd;
133+ }
134+
108135 // Event handler -------------------
109136
110- // ■マウス左ボタン押下 (Drag処理)
137+ // マウス左ボタン押下 (Drag処理)
111138 onMouseDown(evt) {
112139 this.debuglog('マウスクリック onMouseDown()');
113140 }
114- // ■ マウス移動 (ドラッグ中)
141+ onTouchStart(evt){
142+ this.debuglog('タッチ開始 onTouchStart()');
143+ }
144+ // マウス移動 (ドラッグ中)
115145 onMouseMove(evt) {
116146
117147 if (null != this.mouseMoveFunc) {
@@ -118,13 +148,18 @@
118148 this.mouseMoveFunc(evt);
119149 }
120150 }
151+ onTouchMove(evt){
152+ if (null != this.touchMoveFunc) {
153+ this.touchMoveFunc(evt.touches[0]);
154+ }
155+ }
121156
122- // ■ ドロップ処理
157+ // ドロップ処理
123158 onMouseUp(evt) {
124159 this.debuglog('マウスアップ onMouseUp() findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
125160 let e = findClassNameParent(this.strclass, evt.target);
126161 if (null == e) {
127- console.error('マウスアップ 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
162+ console.error('入力完了処理 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ', Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
128163 // ひとまず処理を継続する
129164 }
130165
@@ -132,7 +167,19 @@
132167 this.mouseUpFunc(evt, e);
133168 }
134169 }
170+ onTouchEnd(evt){
171+ this.debuglog('タッチエンド onTouchEnd() findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
172+ let e = findClassNameParent(this.strclass, evt.touches[0].target);
173+ if (null == e) {
174+ console.error('入力完了処理 指定要素が見つからない findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
175+ // ひとまず処理を継続する
176+ }
135177
178+ if (null != this.touchEndFunc) {
179+ this.touchEndFunc(evt.touches[0], e);
180+ }
181+ }
136182
137183
184+
138185 }
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 45)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 46)
@@ -30,6 +30,8 @@
3030 this.DOMpalbg[cnt].style.top = 40 + 'px';
3131 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3232 this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
33+ this.DOMpalbg[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
34+ this.DOMpalbg[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
3335 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3436 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
3537 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -41,6 +43,8 @@
4143 this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
4244 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
4345 this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
46+ this.DOMpaltxtcol[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
47+ this.DOMpaltxtcol[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
4448 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
4549 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
4650 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -52,6 +56,8 @@
5256 this.DOMpalact[cnt].style.top = 40 + 'px';
5357 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
5458 this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
59+ this.DOMpalact[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
60+ this.DOMpalact[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
5561 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
5662 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
5763 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -63,6 +69,8 @@
6369 this.DOMpalset[cnt].style.top = 40 + 'px';
6470 this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
6571 this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
72+ this.DOMpalset[cnt].addEventListener('touchstart', this.onTouchStartSetting.bind(this), false);
73+ this.DOMpalset[cnt].addEventListener('touchend', this.touchEndSetting.bind(this), false);
6674 this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
6775 this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
6876 this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -208,10 +216,18 @@
208216 onMouseDown(evt) {
209217 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
210218 evt.preventDefault(); // 要素既定のdefault動作を止める
211-
212219 // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
213220 window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
214-
221+ this.startMovingElement(evt);
222+ }
223+ onTouchStart(evt){
224+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
225+ evt.preventDefault(); // 要素既定のdefault動作を止める
226+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
227+ window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
228+ this.startMovingElement(evt.touches[0]);
229+ }
230+ startMovingElement(evt){
215231 // Drag対象を保持
216232 this.draggingDOM = evt.target;
217233 // ElementのDrag開始位置を保持
@@ -251,7 +267,15 @@
251267 if (null == this.draggingDOM) return;
252268 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
253269 evt.preventDefault(); // 要素既定のdefault動作を止める
254-
270+ this.endMovingElement(evt);
271+ }
272+ touchEnd(evt) {
273+ if (null == this.draggingDOM) return;
274+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
275+ evt.preventDefault(); // 要素既定のdefault動作を止める
276+ this.endMovingElement(evt.touches[0]);
277+ }
278+ endMovingElement(evt){
255279 let palobjid = this.draggingDOM.dataset.objid;
256280 let palid = this.draggingDOM.dataset.palid;
257281
@@ -311,11 +335,21 @@
311335 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
312336 evt.preventDefault(); // 要素既定のdefault動作を止める
313337 }
338+ onTouchStartSetting(evt) {
339+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
340+ evt.preventDefault(); // 要素既定のdefault動作を止める
341+ }
314342 mouseUpSetting(evt) {
315343 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
316344 evt.preventDefault(); // 要素既定のdefault動作を止める
317-
318-
345+ this.executeSettingButton(evt);
346+ }
347+ touchEndSetting(evt){
348+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
349+ evt.preventDefault(); // 要素既定のdefault動作を止める
350+ this.executeSettingButton(evt.touches[0]);
351+ }
352+ executeSettingButton(evt){
319353 switch (evt.target.dataset.objid) {
320354 case "palset0": // 設定パレット非表示
321355 this.DOMpalset[0].parentNode.style.display = "none";