コミット: 47 - takoyaki_umaaaaHideout (svn)

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

コミットメタ情報

• リビジョン: 47 (tree)
• 日時: 2016-12-10 15:20:49
• 作者: takoyaki_umaaaa

ログメッセージ

・タッチイベント対応

変更サマリ

• modified: HtmlDrawApp/.vs/HTMLDrawApp/v14/.suo
• modified: HtmlDrawApp/HTMLDrawApp/HTMLDrawApp.jsproj.user
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/index.html
• modified: HtmlDrawApp/HTMLDrawApp/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/js/UI_parts.js
• modified: HtmlDrawApp/HTMLDrawApp/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palgroup.js

差分

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 47)
@@ -326,7 +326,7 @@
 		window.appArea.setSingleTouchEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.startMovingElement(evt.touches[0]);
+		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){
 /*	test
@@ -354,9 +354,11 @@
 		window.partsFocus.setClingingPartner(this.DOMbase);
 
 	}
-	mouseMove(evt, xy) {
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+	mouseMove(evt, touchevt) {
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 /*	test
 		let matp = matPerspective(1);
@@ -388,12 +390,14 @@
 		this.DOMbase.style.top = y + "px";
 		this.DOMobject.style.opacity = 0.4;
 	}
-	mouseUp(evt, target) {
+	mouseUp(evt, target, touchevt) {
 		this.debuglog("mouseUp");
 		// Mouse event処理対象をクリア
-		window.appArea.setMouseEventObj(null, null, null);
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		window.appArea.clearCallEventObj();
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 
 		// 移動元として座標を保持

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 47)
@@ -197,7 +197,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
-		this.startScaling(evt.touches[0]);
+		this.startScaling(evt.targetTouches[0]);
 	}
 	startScaling(evt){
 		let eleFocus = this.getFocusdElements();
@@ -219,11 +219,13 @@
 		this.startDragX = tmp2[0];
 		this.startDragY = tmp1[1];
 	}
-	mouseMoveScale(evt) {
+	mouseMoveScale(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像を反転している場合、マウス入力座標も反転させる
 	//	let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
@@ -338,15 +340,17 @@
 		eleFocus[1].style.fontSize = scalefont + '%';
 	}
 
-	mouseUpScale(evt) {
+	mouseUpScale(evt, target, touchevt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
 		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
@@ -411,7 +415,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
-		this.startRolling(evt.touches[0]);
+		this.startRolling(evt.targetTouches[0]);
 	}
 	startRolling(evt){
 		let eleFocus = this.getFocusdElements();
@@ -421,11 +425,13 @@
 		this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
 		this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
 	}
-	mouseMoveRoll(evt) {
+	mouseMoveRoll(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 //		let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
 //		let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -447,14 +453,16 @@
 
 		eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg)';
 	}
-	mouseUpRoll(evt) {
+	mouseUpRoll(evt, target, touchevt) {
 		this.debuglog('mouseUpRoll');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
 		let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -490,22 +498,26 @@
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
 	}
-	mouseMoveMirror(evt) {
+	mouseMoveMirror(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像反転させるだけなのでmouse moveは処理しない
 	}
-	mouseUpMirror(evt, target) {
+	mouseUpMirror(evt, target, touchevt) {
 		this.debuglog('mouseUpMirror');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let command = -1;
 		switch (evt.target.dataset.objid) {

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 47)
@@ -30,6 +30,9 @@
 		this.DOMobject.addEventListener('touchmove', this.onTouchMove.bind(this), false);
 		this.DOMobject.addEventListener('touchstart', this.onTouchStart.bind(this), false);
 		this.DOMobject.addEventListener('touchend', this.onTouchEnd.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 	}
 
 
@@ -121,7 +124,7 @@
 		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
 		if (null != touchMove || null != touchEnd) {
 			if (null != this.touchMoveFunc || null != this.touchEndFunc) {
-				console.error('マウスイベント callback設定上書き   \n\
+				console.error('タッチイベント callback設定上書き   \n\
 Before  strclass=' + this.strclass + 'callbackMove=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  callbackUp=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null') + '\n\
 After   strclass=' + strclass + 'callbackMove=' + ((null != touchMove) ? touchMove.name : 'null') + ',  callbackUp=' + ((null != touchEnd) ? touchEnd.name : 'null'));
 			}
@@ -132,6 +135,15 @@
 		this.touchEndFunc = touchEnd;
 	}
 
+	// 設定クリア
+	clearCallEventObj() {
+		this.debuglog('マウスとタッチ イベント転送設定クリア');
+		this.strclass = null;
+		this.mouseMoveFunc = null;
+		this.mouseUpFunc = null;
+		this.touchMoveFunc = null;
+		this.touchEndFunc = null;
+	}
 	// Event handler -------------------
 
 	// マウス左ボタン押下 (Drag処理)
@@ -150,7 +162,7 @@
 	}
 	onTouchMove(evt){
 		if (null != this.touchMoveFunc) {
-			this.touchMoveFunc(evt.touches[0]);
+			this.touchMoveFunc(evt.targetTouches[0], evt);
 		}
 	}
 
@@ -169,7 +181,7 @@
 	}
 	onTouchEnd(evt){
 		this.debuglog('タッチエンド onTouchEnd()  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
-		let e = findClassNameParent(this.strclass, evt.touches[0].target);
+		let e = findClassNameParent(this.strclass, evt.changedTouches[0].target);
 		if (null == e) {
 			console.error('入力完了処理  指定要素が見つからない  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
 			// ひとまず処理を継続する
@@ -176,7 +188,7 @@
 		}
 
 		if (null != this.touchEndFunc) {
-			this.touchEndFunc(evt.touches[0], e);
+			this.touchEndFunc(evt.changedTouches[0], e, evt);
 		}
 	}
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 47)
@@ -225,7 +225,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
 		window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
-		this.startMovingElement(evt.touches[0]);
+		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){
 		// Drag対象を保持
@@ -237,10 +237,12 @@
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 	}
-	mouseMove(evt) {
+	mouseMove(evt, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像の仮移動
 		this.endDragX = evt.pageX;
@@ -263,10 +265,12 @@
 		if (1.0 == this.draggingDOM.style.opacity)
 			this.draggingDOM.style.opacity = 0.4;
 	}
-	mouseUp(evt) {
+	mouseUp(evt, target, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 		this.endMovingElement(evt);
 	}
 	touchEnd(evt) {
@@ -273,7 +277,7 @@
 		if (null == this.draggingDOM) return;
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.endMovingElement(evt.touches[0]);
+		this.endMovingElement(evt.changedTouches[0]);
 	}
 	endMovingElement(evt){
 		let palobjid = this.draggingDOM.dataset.objid;
@@ -287,7 +291,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)
@@ -339,15 +343,17 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 	}
-	mouseUpSetting(evt) {
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+	mouseUpSetting(evt, touchevt) {
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 		this.executeSettingButton(evt);
 	}
 	touchEndSetting(evt){
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.executeSettingButton(evt.touches[0]);
+		this.executeSettingButton(evt.changedTouches[0]);
 	}
 	executeSettingButton(evt){
 		switch (evt.target.dataset.objid) {

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 47)
@@ -30,6 +30,9 @@
 			this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMobject[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
 			this.DOMobject[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
+			this.DOMobject[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+			this.DOMobject[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+			this.DOMobject[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 		}
 	}
 
@@ -55,8 +58,8 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj('palgroup', this.touchMove.bind(this), null);
-		this.startMovingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
+		window.appArea.setSingleTouchEventObj('palgroup', this.mouseMove.bind(this), null);
+		this.startMovingPalette(evt.targetTouches[0].target, evt.targetTouches[0].pageX, evt.targetTouches[0].pageY);
 	}
 	startMovingPalette(eletarget, x, y){
 
@@ -75,22 +78,16 @@
 		this.startDragX = x;
 		this.startDragY = y;
 	}
-	mouseMove(evt) {
+	mouseMove(evt, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.movingPalette(evt.target, evt.pageX, evt.pageY);
-	}
-	touchMove(evt) {
-		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.movingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
-	}
-	movingPalette(eletarget, x, y) {
+		if (evt.stopPropagation )	evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault)		evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
+
 		// 画像の仮移動
-		this.endDragX = x;
-		this.endDragY = y;
+		this.endDragX = evt.pageX;
+		this.endDragY = evt.pageY;
 		// 移動量取得
 		let moveX = this.endDragX - this.startDragX;
 		let moveY = this.endDragY - this.startDragY;
@@ -113,7 +110,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		this.endMovingPalette();
 	}
 	touchEnd(evt) {
@@ -121,7 +118,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		this.endMovingPalette();
 	}
 	endMovingPalette(){

--- HtmlDrawApp/HTMLDrawApp/index.html	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/index.html	(revision 47)
@@ -218,6 +218,7 @@
 	</div> <!-- apparea -->
 
 	<script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
+	<script type="text/javascript" src="js/settings.js"></script>
 	<script type="text/javascript" src="js/Common.js"></script>
 	<script type="text/javascript" src="js/Queue.js"></script>
 	<script type="text/javascript" src="js/CommandObj.js"></script>

--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 47)
@@ -326,7 +326,7 @@
 		window.appArea.setSingleTouchEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.startMovingElement(evt.touches[0]);
+		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){
 /*	test
@@ -354,9 +354,11 @@
 		window.partsFocus.setClingingPartner(this.DOMbase);
 
 	}
-	mouseMove(evt, xy) {
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+	mouseMove(evt, touchevt) {
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 /*	test
 		let matp = matPerspective(1);
@@ -388,12 +390,14 @@
 		this.DOMbase.style.top = y + "px";
 		this.DOMobject.style.opacity = 0.4;
 	}
-	mouseUp(evt, target) {
+	mouseUp(evt, target, touchevt) {
 		this.debuglog("mouseUp");
 		// Mouse event処理対象をクリア
-		window.appArea.setMouseEventObj(null, null, null);
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		window.appArea.clearCallEventObj();
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 
 		// 移動元として座標を保持

--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 47)
@@ -197,7 +197,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
-		this.startScaling(evt.touches[0]);
+		this.startScaling(evt.targetTouches[0]);
 	}
 	startScaling(evt){
 		let eleFocus = this.getFocusdElements();
@@ -219,11 +219,13 @@
 		this.startDragX = tmp2[0];
 		this.startDragY = tmp1[1];
 	}
-	mouseMoveScale(evt) {
+	mouseMoveScale(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像を反転している場合、マウス入力座標も反転させる
 	//	let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
@@ -338,15 +340,17 @@
 		eleFocus[1].style.fontSize = scalefont + '%';
 	}
 
-	mouseUpScale(evt) {
+	mouseUpScale(evt, target, touchevt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
 		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
@@ -411,7 +415,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
-		this.startRolling(evt.touches[0]);
+		this.startRolling(evt.targetTouches[0]);
 	}
 	startRolling(evt){
 		let eleFocus = this.getFocusdElements();
@@ -421,11 +425,13 @@
 		this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
 		this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
 	}
-	mouseMoveRoll(evt) {
+	mouseMoveRoll(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 //		let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
 //		let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -447,14 +453,16 @@
 
 		eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg)';
 	}
-	mouseUpRoll(evt) {
+	mouseUpRoll(evt, target, touchevt) {
 		this.debuglog('mouseUpRoll');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
 		let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
@@ -490,22 +498,26 @@
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
 		window.appArea.setSingleTouchEventObj(null, this.mouseMoveMirror.bind(this), this.mouseUpMirror.bind(this));
 	}
-	mouseMoveMirror(evt) {
+	mouseMoveMirror(evt, touchevt) {
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像反転させるだけなのでmouse moveは処理しない
 	}
-	mouseUpMirror(evt, target) {
+	mouseUpMirror(evt, target, touchevt) {
 		this.debuglog('mouseUpMirror');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		let eleFocus = this.getFocusdElements();
 		if (eleFocus.length < 2) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		let command = -1;
 		switch (evt.target.dataset.objid) {

--- HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 47)
@@ -30,6 +30,9 @@
 		this.DOMobject.addEventListener('touchmove', this.onTouchMove.bind(this), false);
 		this.DOMobject.addEventListener('touchstart', this.onTouchStart.bind(this), false);
 		this.DOMobject.addEventListener('touchend', this.onTouchEnd.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 	}
 
 
@@ -121,7 +124,7 @@
 		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
 		if (null != touchMove || null != touchEnd) {
 			if (null != this.touchMoveFunc || null != this.touchEndFunc) {
-				console.error('マウスイベント callback設定上書き   \n\
+				console.error('タッチイベント callback設定上書き   \n\
 Before  strclass=' + this.strclass + 'callbackMove=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  callbackUp=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null') + '\n\
 After   strclass=' + strclass + 'callbackMove=' + ((null != touchMove) ? touchMove.name : 'null') + ',  callbackUp=' + ((null != touchEnd) ? touchEnd.name : 'null'));
 			}
@@ -132,6 +135,15 @@
 		this.touchEndFunc = touchEnd;
 	}
 
+	// 設定クリア
+	clearCallEventObj() {
+		this.debuglog('マウスとタッチ イベント転送設定クリア');
+		this.strclass = null;
+		this.mouseMoveFunc = null;
+		this.mouseUpFunc = null;
+		this.touchMoveFunc = null;
+		this.touchEndFunc = null;
+	}
 	// Event handler -------------------
 
 	// マウス左ボタン押下 (Drag処理)
@@ -150,7 +162,7 @@
 	}
 	onTouchMove(evt){
 		if (null != this.touchMoveFunc) {
-			this.touchMoveFunc(evt.touches[0]);
+			this.touchMoveFunc(evt.targetTouches[0], evt);
 		}
 	}
 
@@ -169,7 +181,7 @@
 	}
 	onTouchEnd(evt){
 		this.debuglog('タッチエンド onTouchEnd()  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
-		let e = findClassNameParent(this.strclass, evt.touches[0].target);
+		let e = findClassNameParent(this.strclass, evt.changedTouches[0].target);
 		if (null == e) {
 			console.error('入力完了処理  指定要素が見つからない  findClass=' + this.strclass + ',  callback  move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ',  End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
 			// ひとまず処理を継続する
@@ -176,7 +188,7 @@
 		}
 
 		if (null != this.touchEndFunc) {
-			this.touchEndFunc(evt.touches[0], e);
+			this.touchEndFunc(evt.changedTouches[0], e, evt);
 		}
 	}
 

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 47)
@@ -225,7 +225,7 @@
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
 		window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
-		this.startMovingElement(evt.touches[0]);
+		this.startMovingElement(evt.targetTouches[0]);
 	}
 	startMovingElement(evt){
 		// Drag対象を保持
@@ -237,10 +237,12 @@
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 	}
-	mouseMove(evt) {
+	mouseMove(evt, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 
 		// 画像の仮移動
 		this.endDragX = evt.pageX;
@@ -263,10 +265,12 @@
 		if (1.0 == this.draggingDOM.style.opacity)
 			this.draggingDOM.style.opacity = 0.4;
 	}
-	mouseUp(evt) {
+	mouseUp(evt, target, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 		this.endMovingElement(evt);
 	}
 	touchEnd(evt) {
@@ -273,7 +277,7 @@
 		if (null == this.draggingDOM) return;
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.endMovingElement(evt.touches[0]);
+		this.endMovingElement(evt.changedTouches[0]);
 	}
 	endMovingElement(evt){
 		let palobjid = this.draggingDOM.dataset.objid;
@@ -287,7 +291,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)
@@ -339,15 +343,17 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 	}
-	mouseUpSetting(evt) {
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
+	mouseUpSetting(evt, touchevt) {
+		if (evt.stopPropagation) evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault) evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
 		this.executeSettingButton(evt);
 	}
 	touchEndSetting(evt){
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.executeSettingButton(evt.touches[0]);
+		this.executeSettingButton(evt.changedTouches[0]);
 	}
 	executeSettingButton(evt){
 		switch (evt.target.dataset.objid) {

--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 46)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 47)
@@ -30,6 +30,9 @@
 			this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMobject[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
 			this.DOMobject[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
+			this.DOMobject[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+			this.DOMobject[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+			this.DOMobject[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 		}
 	}
 
@@ -55,8 +58,8 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj('palgroup', this.touchMove.bind(this), null);
-		this.startMovingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
+		window.appArea.setSingleTouchEventObj('palgroup', this.mouseMove.bind(this), null);
+		this.startMovingPalette(evt.targetTouches[0].target, evt.targetTouches[0].pageX, evt.targetTouches[0].pageY);
 	}
 	startMovingPalette(eletarget, x, y){
 
@@ -75,22 +78,16 @@
 		this.startDragX = x;
 		this.startDragY = y;
 	}
-	mouseMove(evt) {
+	mouseMove(evt, touchevt) {
 		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.movingPalette(evt.target, evt.pageX, evt.pageY);
-	}
-	touchMove(evt) {
-		if (null == this.draggingDOM) return;
-		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
-		evt.preventDefault();				// 要素既定のdefault動作を止める
-		this.movingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
-	}
-	movingPalette(eletarget, x, y) {
+		if (evt.stopPropagation )	evt.stopPropagation();	// event伝播を自分のところで止める(上位に行かなくなる)
+		if (evt.preventDefault)		evt.preventDefault();	// 要素既定のdefault動作を止める
+		if (touchevt && touchevt.stopPropagation)	touchevt.stopPropagation();
+		if (touchevt && touchevt.preventDefault)	touchevt.preventDefault();
+
 		// 画像の仮移動
-		this.endDragX = x;
-		this.endDragY = y;
+		this.endDragX = evt.pageX;
+		this.endDragY = evt.pageY;
 		// 移動量取得
 		let moveX = this.endDragX - this.startDragX;
 		let moveY = this.endDragY - this.startDragY;
@@ -113,7 +110,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		this.endMovingPalette();
 	}
 	touchEnd(evt) {
@@ -121,7 +118,7 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null, null);
+		window.appArea.clearCallEventObj();
 		this.endMovingPalette();
 	}
 	endMovingPalette(){