Commit: 32 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 32 (tree)
• Time: 2016-11-29 18:45:50
• Author: takoyaki_umaaaa

Log Message

・フォーカス表示方法の見直し
・画面表示ループを1ヵ所にまとめた
・アクション適用すると回転状態がキャンセルされる問題の修正
・表示要素をDIV2段構成またはDIV-IMGの2段構成に変更
・マウス入力取得要素から期待する要素まで DOM treeを辿って探すように修正

未対応
・コメントコードの削除
・ファイル保存，読み込み

Change Summary

• modified: HtmlDrawApp/.vs/HTMLDrawApp/v14/.suo
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.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/main.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/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/js/Common.js
• modified: HtmlDrawApp/HTMLDrawApp/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/js/DisplayField.js
• modified: HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js
• modified: HtmlDrawApp/HTMLDrawApp/js/UI_parts.js
• modified: HtmlDrawApp/HTMLDrawApp/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/main.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palgroup.js
• added: HtmlDrawApp/HTMLDrawApp.marker.tss
• added: HtmlDrawApp/doc/JavaScript app イメージ.numbers

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 32)
@@ -51,12 +51,18 @@
 	}
 
 
+	.DispBase,
 	.DispObj {
 		display: inline-block;
-		position:absolute;
+		position: absolute;
 		marginj:0;	padding:0;
 	}
+	.DispObj {
+		left:0; top:0;
+		width: 100%; height: 100%;
+	}
 
+
 	/* パレットグループ要素の定義 */
 	.palgroup {
 		display: inline-block;
@@ -106,14 +112,22 @@
 
 
 	/* フォーカス枠と拡大縮小・回転用マーカー定義 */
-	.scaler {
+	.scaler,
+	.roller {
+		position: absolute;
+		width: 15px;	height: 15px;
+		padding: 0;		margin: 0;
 		border: 2px solid black;
 		border-radius: 50%;
+	}
+	.scaler {
+		left: 100%;		top: 100%;
+		transform: translateX(-50%) translateY(-50%);
 		background-color: orange;
 	}
 	.roller {
-		border: 2px solid black;
-		border-radius: 50%;
+		left: 50%;		top: 0%;
+		transform: translateX(-50%) translateY(-50%);
 		background-color: green;
 	}
 	
@@ -131,10 +145,37 @@
 		);
 		background-size: 8px 8px;
 	}
-	.focusleft   {	animation: animForcus1 3s linear infinite;	}
-	.focusright  {	animation: animForcus2 3s linear infinite;	}
-	.focustop    {	animation: animForcus2 3s linear infinite;	}
-	.focusbottom {	animation: animForcus1 3s linear infinite;	}
+	.focusleft,
+	.focustop,
+	.focusright,
+	.focusbottom{
+		position: absolute;
+		padding: 0;		margin: 0;
+	}
+	.focusleft   {
+		left: 0%;		top: 0%;
+		width: 2px;		height: 100%;
+		transform: translateX(-50%) translateY(0%);
+		animation: animForcus1 3s linear infinite;
+	}
+	.focustop    {
+		left: 0%;		top: 0%;
+		width: 100%;	height: 2px;
+		transform: translateX(0%) translateY(-50%);
+		animation: animForcus2 3s linear infinite;
+	}
+	.focusright  {
+		left: 100%;		top: 0%;
+		width: 2px;		height: 100%;
+		transform: translateX(-50%) translateY(0%);
+		animation: animForcus2 3s linear infinite;
+	}
+	.focusbottom {
+		left: 0%;		top: 100%;
+		width: 100%;	height: 2px;
+		transform: translateX(0%) translateY(-50%);
+		animation: animForcus1 3s linear infinite;
+	}
 	@keyframes animForcus1 { 
 		0%   { background-position:0% 0%}
 		100% {background-position:100% 100%}
@@ -151,11 +192,6 @@
 		animation: none;
 	}
 
-	#apparea:target img,
-	#apparea:target div {
-		animation: none;
-		background-color:red;
-	}
 
 
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js	(revision 32)
@@ -4,7 +4,7 @@
 var DEBUGLOG = true;
 debuglog = (true==DEBUGLOG)? debugLog : logQuiet;
 
-function debugLog(str) {
+function debugLog(str,callerargs) {
 	console.log(str);
 };
 function logQuiet(str) {
@@ -195,14 +195,45 @@
 		}
 	}
 	return null;
-}
+};
 
 
 
 
+// elementを起点に classNameを持った要素を遡って検索
+// 見つからなければ nullを返す
+function findClassNameParent(
+	className,		// 検索対象 CSS class name
+	element			// 検索起点 element
+) {
+	let e = element;
+	if (null != className && null != element) {
+		let result = false;
+		do {
+			result = e.classList.contains(className);
+			if (true == result) break;
 
+			e = e.parent;
+		} while (null != e);
+	}
+	return e;
+};
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // Drop fileから file objectを取得 (同期処理)
 // 複数file 非対応。text or image がヒットした時点でcallbackを呼び出す
 // callback書式(text,image): function(blob)
@@ -314,3 +345,34 @@
 		if (null != this.callbackError) this.callbackError(err.message);
 	};
 }	// class SaveFile
+
+
+
+class RenderLoop {
+	constructor() {
+		this.renderQue = new Queue();
+		this.rendering = null;	// loop処理呼び出し済み判定用
+	}
+
+
+	// 描画用callback関数登録要求
+	// 引数のcallbackを1回呼び出します
+	// callback: function callback(time)
+	requestRenderFunc(callback) {
+		console.log('Request render function = ' + (callback ? callback.name : 'null'));
+		if (null != callback){
+			this.renderQue.enqueue(callback);
+
+			// 描画loop
+			(function renderloop(time) {
+				if (0 < this.renderQue.size()) {
+					this.renderQue.dequeue()(time);
+					console.log('render func size=' + this.renderQue.size());
+					requestAnimationFrame(renderloop.bind(this));
+				}
+			}.call(this,window.performance.now()));
+		}
+	}
+}
+
+

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js	(revision 32)
@@ -13,23 +13,24 @@
 	init() {
 		this.debuglog('init()');
 		this.ObjID = 0;
-		this.GroupID = 0;
 		this.type = 0;
 		this.x = 0.0;
 		this.y = 0.0;
 		this.width = 0.0;
 		this.height = 0.0;
+		this.originalWidth = 0.0;
+		this.originalHeight = 0.0;
 		this.opacity = 1.0;
 		this.degree = 0;
 		this.text = null;
 		this.transformStr = null;
-		this.initDOMobj();	// DOMをクリア
-		this.renderFunc = new Queue();
 
-		this.originalWidth = 0;
-		this.originalHeight = 0;
+		// DOMをクリア
+		this.initDOMobj();
+//		this.renderFunc = new Queue();
 
-		this.dropinitsize = 100.0;
+
+		this.dropinitsize = 100.0;	// File dropで作成する Elementの長辺の長さ
 	}
 	initDOMobj() {
 		if (null != this.DOMobject) {
@@ -47,6 +48,7 @@
 	}
 
 
+
 	// 操作関数 ------------------------------------
 
 	// 破棄
@@ -73,7 +75,7 @@
 
 
 
-
+	/*
 	// ブラウザ上への描画 -------------------------
 
 	// コマンド要求実行後の描画共通処理
@@ -84,6 +86,7 @@
 			renderFunction();
 		}
 	}
+	*/
 
 	// コマンド実行処理 -----------------------------
 
@@ -113,14 +116,20 @@
 		this.originalHeight = this.height;
 
 		// 画面に影響しない範囲で作成できるところまで Dom objectを作成する
+		// DispBase作成
+		this.DOMbase = document.createElement('div');
+		this.DOMbase.classList.add('DispBase');
+		this.DOMbase.dataset.objid = this.ObjID;
+		this.DOMbase.dataset.degree = 0;
+		this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		// DispObj作成
 		let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
 		this.DOMobject = document.createElement(elType);
+		this.DOMbase.appendChild(this.DOMobject);				// ひとまず連結
 		this.DOMobject.classList.add('DispObj');
 		this.DOMobject.dataset.objid = this.ObjID;
 		this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
-		this.DOMobject.dataset.orgheight = this.originalHeight;
-		this.DOMobject.dataset.degree = 0;
-		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		this.DOMobject.dataset.orgheight = this.originalHeight;	// 画像original sizeなのでこちらで管理
 		if (null != type.match(/imagebox/)) {
 			// imageの場合、画像読み込み完了後に描画する必要がある
 			this.loadImage(opt1);
@@ -131,7 +140,8 @@
 			}
 			else {
 				// 描画呼び出し時に呼び出す関数を登録
-				this.renderFunc.enqueue(this.renderCreate.bind(this));
+//				this.renderFunc.enqueue(this.renderCreate.bind(this));
+				window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 			}
 		}
 		return true;
@@ -143,7 +153,8 @@
 		reader.onload = function (evt) {
 			this.text = evt.target.result;
 			// 描画呼び出し時に呼び出す関数を登録
-			this.renderFunc.enqueue(this.renderCreate.bind(this));
+//			this.renderFunc.enqueue(this.renderCreate.bind(this));
+			window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 		}.bind(this);
 	}
 	loadImage(file) {
@@ -162,9 +173,10 @@
 				this.originalWidth = this.width;
 				this.originalHeight = this.height;
 				this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
-				this.DOMobject.dataset.orgheight = this.originalHeight;
+				this.DOMobject.dataset.orgheight = this.originalHeight;	// 画像original sizeなのでこちらで管理
 				// 表示サイズ取得完了したので画面に表示
-				this.renderFunc.enqueue(this.renderCreate.bind(this));
+//				this.renderFunc.enqueue(this.renderCreate.bind(this));
+				window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 			}.bind(this);
 		}.bind(this);
 	}
@@ -185,27 +197,27 @@
 		return new rectData(0, 0, destW, destH);
 	}
 	renderCreate() {
-//		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
-		this.DOMobject.style.width = this.width.toString() + "px";
-		this.DOMobject.style.height = this.height.toString() + "px";
 		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
 		if (null != this.text) this.DOMobject.innerHTML = this.text;
+//		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
 
-		document.getElementById('DispField').appendChild(this.DOMobject);
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
+		this.DOMbase.style.width = this.width.toString() + "px";
+		this.DOMbase.style.height = this.height.toString() + "px";
+		document.getElementById('DispField').appendChild(this.DOMbase);
 
-		this.debuglog("renderCreate() left=" + this.DOMobject.style.left
-								  + ", top=" + this.DOMobject.style.top
-								  + ", width=" + this.DOMobject.style.width
-								  + ", height=" + this.DOMobject.style.height
-								  + ", border=" + this.DOMobject.style.border);
+		this.debuglog("renderCreate() left=" + this.DOMbase.style.left
+								  + ", top=" + this.DOMbase.style.top
+								  + ", width=" + this.DOMbase.style.width
+								  + ", height=" + this.DOMbase.style.height
+								  + ", innerHTML=" + this.DOMobject.innerHTML);
 	}
 
 	createFromElement(ele) {
 		this.debuglog('createFromElement() ele=' + ele);
 
-		this.DOMobject = ele;
+		this.DOMbase = ele;
 		this.type = (null != ele.nodeName.match(/IMG/)) ? 'imagebox' : 'textbox';
 		this.x = parseInt(ele.style.left);
 		this.y = parseInt(ele.style.top);
@@ -215,7 +227,7 @@
 		this.originalHeight = ele.dataset.orgheight;
 		this.ObjID = ele.dataset.objid;
 		this.degree = ele.dataset.degree;
-		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
 
 		// 画像・テキストは既にelementに読み込み済み
 		// treeにも入っており、更新する必要もないのでこれで完了
@@ -229,20 +241,21 @@
 	movebox(x, y) {
 		this.x = x;
 		this.y = y;
-		this.renderFunc.enqueue(this.rendermove.bind(this));
+//		this.renderFunc.enqueue(this.rendermove.bind(this));
+		window.renderLoop.requestRenderFunc(this.rendermove.bind(this));
 
-		this.debuglog("movebox() x=" + this.x + ", y=" + this.y + ", renderFunc size=" + this.renderFunc.size());
+		this.debuglog("movebox() x=" + this.x + ", y=" + this.y);
 	}
 	rendermove() {
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
 		this.DOMobject.style.opacity = this.opacity.toString();
 
-		this.debuglog("rendermove() left=" + this.DOMobject.style.left
-												 + ", top=" + this.DOMobject.style.top
-												 + ", width=" + this.DOMobject.style.width
-												 + ", height=" + this.DOMobject.style.height
-												 + ", border=" + this.DOMobject.style.border);
+		this.debuglog("rendermove()    left=" + this.DOMbase.style.left
+								  + ", top=" + this.DOMbase.style.top
+								  + ", width=" + this.DOMbase.style.width
+								  + ", height=" + this.DOMbase.style.height
+								  + ", opacity=" + this.DOMobject.opacity);
 	}
 
 	scalebox(rect, fontscale) {
@@ -250,14 +263,15 @@
 		this.y = rect.top;
 		this.width = rect.right - rect.left;
 		this.height = rect.bottom - rect.top;
-		this.renderFunc.enqueue(this.renderscalebox.bind(this));
+//		this.renderFunc.enqueue(this.renderscalebox.bind(this));
+		window.renderLoop.requestRenderFunc(this.renderscalebox.bind(this));
 		this.fontsize = fontscale;
 	}
 	renderscalebox() {
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
-		this.DOMobject.style.width = this.width.toString() + "px";
-		this.DOMobject.style.height = this.height.toString() + "px";
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
+		this.DOMbase.style.width = this.width.toString() + "px";
+		this.DOMbase.style.height = this.height.toString() + "px";
 		this.DOMobject.style.opacity = this.opacity.toString();
 		this.DOMobject.style.fontSize = this.fontsize + '%';
 	}
@@ -264,11 +278,12 @@
 
 	rollbox(degree) {
 		this.degree = degree;
-		this.DOMobject.dataset.degree = degree;
-		this.renderFunc.enqueue(this.renderrollbox.bind(this));
+		this.DOMbase.dataset.degree = degree;
+//		this.renderFunc.enqueue(this.renderrollbox.bind(this));
+		window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this));
 	}
 	renderrollbox() {
-		this.DOMobject.style.transform = 'rotateZ(' + this.degree + 'deg);';
+		this.DOMbase.style.transform = 'rotateZ(' + this.degree + 'deg);';
 	}
 
 
@@ -288,22 +303,19 @@
 			return;
 		}
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
+		window.appArea.setMouseEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-
-		// Focus設定
-		evt.target.dataset.focus = "true";
 		// 移動元として座標を保持
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 
 		// Focus表示
-		window.partsFocus.setClingingPartner(this.DOMobject);
+		window.partsFocus.setClingingPartner(this.DOMbase);
 
 	}
-	mouseMove(evt) {
+	mouseMove(evt, target) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -317,17 +329,18 @@
 		moveX = this.x + moveX;
 		moveY = this.y + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 	}
 	renderMoveDragging(x, y) {
-		this.DOMobject.style.left = x + "px";
-		this.DOMobject.style.top = y + "px";
+		this.DOMbase.style.left = x + "px";
+		this.DOMbase.style.top = y + "px";
 		this.DOMobject.style.opacity = 0.4;
 	}
-	mouseUp(evt) {
+	mouseUp(evt, target) {
 		this.debuglog("mouseUp");
 		// Mouse event処理対象をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 32)
@@ -7,7 +7,7 @@
 class CDisplayField {
 	constructor(dom) {
 		this.DOMobject = dom;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 		this.mouseMoveFunc = null;
 		this.mouseUpFunc = null;
 	}
@@ -39,7 +39,7 @@
 		let styleaction = document.getElementById('stylepalact');
 		let cssbg = stylebg.sheet.cssText;
 		let csstextcol = styletextcol.sheet.cssText;
-		let cssaction = getAnimationCssFromElement(styleaction);
+		let cssaction = getAnimationCssFromElement(styleaction);	// keyframe情報を取得するため、専用関数になっている
 
 		// 最終出力
 		let savestr = '<style id="stylepalbg">' + cssbg + '</style><style id="stylepaltxtcol">' + csstextcol + '</style><style id="stylepalact">' + cssaction + '</style>' + displayInfo;
@@ -51,7 +51,7 @@
 	}
 
 
-
+	/*
 	// ブラウザ上への描画 -------------------------
 	render() {
 		while (0 < this.renderFunc.size()) {
@@ -59,9 +59,9 @@
 			renderFunction();
 		}
 	}
+	*/
 
 
-
 	// Event handler -------------------
 	// 表示要素の drag & drop禁止
 	onDragStart(evt) {

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js	(revision 32)
@@ -5,7 +5,7 @@
 // ・DispObjへのobjid割り当て
 // ・objidから実体への変換
 // ・DispObjへのcommand処理要求 (振り分け)
-// ・DispObjの描画関数呼び出し
+// ×【やめ】DispObjの描画関数呼び出し
 
 class CObjIDMgr {
 	constructor() {
@@ -46,6 +46,7 @@
 		}
 	}
 
+	/*	★ObjIDMgrは描画には関与しないように変更★
 	// 管理Elementの描画関数呼び出し
 	// requestAnimationFrame loop内から呼び出される
 	renderAll() {
@@ -53,6 +54,7 @@
 			this.ObjIDarray[i].render();
 		}
 	}
+	*/
 
 	// 指定されたIDの実体(への参照)を返す
 	getIDtoDispObj(id) {

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 32)
@@ -11,14 +11,12 @@
 // そのため Focus図形を描く専用の DOMを用意する
 class CPartsFocus {
 	constructor() {
-		this.lineWidth = 2;
-		this.markWidth = 20;
 		this.num2str = ['focusleft', 'focustop', 'focusright', 'focusbottom'];
 		this.clingingPartner = null;
 		this.DOM = [null, null, null, null];		// focus表示用
 		this.domScaler = null;
 		this.domRoller = null;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 
 	debuglog(str) {
@@ -26,7 +24,7 @@
 		debuglog("【PartsFocus】 focused objid=" + focused + ", " + str);
 	}
 
-
+/*
 	// ブラウザ上への描画 -------------------------
 
 	// domの淵を囲むように Focus lineを表示する
@@ -36,102 +34,20 @@
 			let renderFunction = this.renderFunc.dequeue();
 			renderFunction();
 		}
-
-		// Drag & Dropを追いかけるための処理
-		this.renderClinging();
 	}
-	renderClinging() {
-		if (null == this.clingingPartner) return;
+*/
 
-		let originX = parseInt(this.clingingPartner.style.width) / 2;
-		let originY = parseInt(this.clingingPartner.style.height) / 2;
-		//								DOM			描画先rect			回転の中心位置
-		this.renderClingingSetPosition(this.DOM[0], this.getRectLeft(), (originX + this.lineWidth / 2) + 'px', '50%');
-		this.renderClingingSetPosition(this.DOM[1], this.getRectTop(), '50%', (originY + this.lineWidth / 2) + 'px');
-		this.renderClingingSetPosition(this.DOM[2], this.getRectRight(), (originX - this.lineWidth / 2) * -1 + 'px', '50%');
-		this.renderClingingSetPosition(this.DOM[3], this.getRectBottom(), '50%', (originY - this.lineWidth / 2) * -1 + 'px');
-		this.renderClingingSetPosition(this.domScaler, this.getRectScaler(), (originX - this.markWidth / 2) * -1 + 'px', (originY - this.markWidth / 2) * -1 + 'px');
-		//		this.renderClingingSetPosition( this.domRoller, this.getRectRoller(),	(originX - this.markWidth / 2) * -1 + 'px', (originY + this.markWidth / 2) + 'px');
-		this.renderClingingSetPosition(this.domRoller, this.getRectRoller(), '50%', (originY + this.markWidth / 2) + 'px');
-	}
-	renderClingingSetPosition(dom, rect, ox, oy) {
-		dom.style.left = rect.left.toString() + "px";
-		dom.style.top = rect.top.toString() + "px";
-		dom.style.width = (rect.right - rect.left).toString() + "px";
-		dom.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		dom.style.border		= "1px solid blue";
-		dom.style.transform = this.clingingPartner.style.transform;
-		dom.style.transformOrigin = ox + ' ' + oy + ';';	// 回転の中心を focus対象の中心点に合わせる
-	}
 
-
-
-	// Elementの描画 size取得関数 -------------------------
-
-	// Focusとして描画する４つのbar それぞれの サイズ取得
-	getRectLeft() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.left -= this.lineWidth / 2;         rect.top -= this.lineWidth / 2;
-		rect.right = rect.left + this.lineWidth; rect.bottom += this.lineWidth / 2;
-		return rect;
-	}
-	getRectTop() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.left  += this.lineWidth / 2; rect.top -= this.lineWidth / 2;
-		rect.right -= this.lineWidth / 2; rect.bottom = rect.top + this.lineWidth;
-		return rect;
-	}
-	getRectRight() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.right += this.lineWidth / 2;        rect.bottom += this.lineWidth / 2;
-		rect.left = rect.right - this.lineWidth; rect.top -= this.lineWidth / 2;
-		return rect;
-	}
-	getRectBottom() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.right -= this.lineWidth / 2; rect.bottom += this.lineWidth / 2;
-		rect.left  += this.lineWidth / 2; rect.top = rect.bottom - this.lineWidth;
-		return rect;
-	}
-	// 拡大縮小用 右下マーカーの rect取得
-	getRectScaler() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let centerX = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width);
-		let centerY = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height);
-		let rect = new rectData();
-		rect.left  = centerX - this.markWidth / 2; rect.top    = centerY - this.markWidth / 2;
-		rect.right = centerX + this.markWidth / 2; rect.bottom = centerY + this.markWidth / 2;
-		return rect;
-	}
-	// 回転用 上辺中心部 マーカーの rect取得
-	getRectRoller() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let centerX = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let centerY = parseInt(this.clingingPartner.style.top);
-		let rect = new rectData();
-		rect.left  = centerX - this.markWidth / 2; rect.top    = centerY - this.markWidth / 2;
-		rect.right = centerX + this.markWidth / 2; rect.bottom = centerY + this.markWidth / 2;
-		return rect;
-	}
-
 	// 表示関数-----------------------------------
 	// Focus作成
 	create() {
-		let getRectProperty = [this.getRectLeft.bind(this), this.getRectTop.bind(this), this.getRectRight.bind(this), this.getRectBottom.bind(this)];
 		for (let cnt = 0; cnt < this.num2str.length; cnt++) {
 			this.DOM[cnt] = document.createElement('div');
 			this.DOM[cnt].dataset.objid = this.num2str[cnt];
 			this.DOM[cnt].classList.add('focusimage');
 			this.DOM[cnt].classList.add(this.num2str[cnt]);
-			this.renderFunc.enqueue(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], getRectProperty[cnt]()));
+//			this.renderFunc.enqueue(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], null));
+			window.renderLoop.requestRenderFunc(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], null));
 		}
 		//		this.debuglog("create() renderFunc size=" + this.renderFunc.size());
 
@@ -140,13 +56,7 @@
 	}
 	renderCreateOneFocusbar(dom, rect) {
 		dom.style.display = (null == this.clingingPartner) ? "none" : "block";
-		dom.style.position = "absolute";
-		dom.style.left   = rect.left.toString() + "px";
-		dom.style.top    = rect.top.toString() + "px";
-		dom.style.width  = (rect.right - rect.left).toString() + "px";
-		dom.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		dom.style.border		= "1px solid blue";
-		document.getElementById('DispField').appendChild(dom);
+		this.clingingPartner.appendChild(dom);
 	}
 
 
@@ -156,17 +66,12 @@
 		this.domScaler.dataset.objid = 'scaler';
 		this.domScaler.classList.add('scaler');
 		this.domScaler.addEventListener('mousedown', this.onMouseDownScale.bind(this), false);
-		this.renderFunc.enqueue(this.renderScaler.bind(this, this.getRectScaler()));
+//		this.renderFunc.enqueue(this.renderScaler.bind(this, null));
+		window.renderLoop.requestRenderFunc(this.renderScaler.bind(this, null));
 	}
 	renderScaler(rect) {
 		this.domScaler.style.display = (null == this.clingingPartner) ? "none" : "block";
-		this.domScaler.style.position = 'absolute';
-		this.domScaler.style.left   = rect.left.toString() + "px";
-		this.domScaler.style.top    = rect.top.toString() + "px";
-		this.domScaler.style.width  = (rect.right - rect.left).toString() + "px";
-		this.domScaler.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		this.domScaler.style.border			= "1px solid blue";
-		document.getElementById('DispField').appendChild(this.domScaler);
+		this.clingingPartner.appendChild(this.domScaler);
 	}
 
 	// 回転操作マーカー作成
@@ -175,17 +80,12 @@
 		this.domRoller.dataset.objid = 'roller';
 		this.domRoller.classList.add('roller');
 		this.domRoller.addEventListener('mousedown', this.onMouseDownRoll.bind(this), false);
-		this.renderFunc.enqueue(this.renderRoller.bind(this, this.getRectRoller()));
+//		this.renderFunc.enqueue(this.renderRoller.bind(this, null));
+		window.renderLoop.requestRenderFunc(this.renderRoller.bind(this, null));
 	}
 	renderRoller(rect) {
 		this.domRoller.style.display = (null == this.clingingPartner) ? "none" : "block";
-		this.domRoller.style.position = 'absolute';
-		this.domRoller.style.left   = rect.left.toString() + "px";
-		this.domRoller.style.top    = rect.top.toString() + "px";
-		this.domRoller.style.width  = (rect.right - rect.left).toString() + "px";
-		this.domRoller.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		this.domRoller.style.border			= "1px solid blue";
-		document.getElementById('DispField').appendChild(this.domRoller);
+		this.clingingPartner.appendChild(this.domRoller);
 	}
 
 	// 操作関数-----------------------------------
@@ -193,11 +93,10 @@
 	// 非選択: nullを返す
 	getFocusedObjid() {
 		this.debuglog("getFocusedObjid().");
-		let ret = null;
-		if (null != this.clingingPartner) {
-			ret = this.clingingPartner.dataset.objid;
-		}
-		return ret;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return null;
+
+		return eleFocus[0].dataset.objid;
 	}
 
 	// Forcus先 クリア (focus 非表示)
@@ -207,7 +106,7 @@
 		// requestAnimationFrameでの描画タイミング中は DOM.outerHTMLを変更できないため
 		// 処理ロジック上のまま削除処理を実行する
 		//		this.renderFunc.enqueue( this.renderClearClingingPartner.bind(this) );
-		this.debuglog("clearClingingPartner() renderFunc size=" + this.renderFunc.size());
+		this.debuglog("clearClingingPartner()");
 
 		this.renderClearClingingPartner();
 	}
@@ -242,8 +141,23 @@
 			this.clearClingingPartner();
 			return;
 		}
-			// Focus先 変更
-		else if (this.clingingPartner != dom) {
+
+		// Focus対象チェック
+		let result = dom.classList.contains('DispBase');
+		if (false == result) {
+			console.error('フォーカス先要素　誤り  objid=' + dom.dataset.objid + ', className=' + dom.className);
+			// 誤って子要素が指定されている可能性があるため、treeを遡って検索
+			dom = findClassNameParent('DispBase', dom);
+			if (null == dom) {
+				console.error('フォーカス先要素　誤り　(フォーカス先検索も失敗)');
+				this.clearClingingPartner();
+				return;
+			}
+		}
+
+
+		// Focus先 変更
+		if (this.clingingPartner != dom) {
 			// 現在の情報をクリア
 			this.clearClingingPartner();
 			// 新しいFocus先に変更
@@ -256,17 +170,26 @@
 	// Event handler -------------------------
 	onMouseDownScale(evt) {
 		this.debuglog('onMouseDownScale');
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
+		window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
 
 		// 移動元として座標を保持
-		this.scaleStartWidth  = parseInt(this.clingingPartner.style.width);
-		this.scaleStartHeight = parseInt(this.clingingPartner.style.height);
+		this.scaleStartWidth = parseInt(eleFocus[0].style.width);
+		this.scaleStartHeight = parseInt(eleFocus[0].style.height);
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 	}
 	mouseMoveScale(evt) {
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
 		// 画像の仮変形
 		this.endDragX = evt.pageX;
 		this.endDragY = evt.pageY;
@@ -276,30 +199,33 @@
 
 		switch(1){
 			case 0:	// 領域サイズ変更のみ
-				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+//				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+				window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
 				break;
 			case 1:	// 縦倍率に合わせfont sizeも変更
 				{
-					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
-					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
-					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+//					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
 				}
 				break;
 		}
 	}
 	renderMouseMoveScale(width, height, scalefont) {
-		this.clingingPartner.style.opacity = 0.4;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		eleFocus[1].style.opacity = 0.4;
 
 		switch(1){
 			case 0:
-				this.clingingPartner.style.width = width + "px";
-				this.clingingPartner.style.height = height + "px";
+				eleFocus[0].style.width = width + "px";
+				eleFocus[0].style.height = height + "px";
 				break;
 			case 1:
-				this.clingingPartner.style.width = width + "px";
-				this.clingingPartner.style.height = height + "px";
-				this.clingingPartner.style.fontSize = scalefont + '%';
+				eleFocus[0].style.width = width + "px";
+				eleFocus[0].style.height = height + "px";
+				eleFocus[1].style.fontSize = scalefont + '%';
 				break;
 		}
 	}
@@ -306,8 +232,13 @@
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
 		// 画像の仮変形
 		this.endDragX = evt.pageX;
 		this.endDragY = evt.pageY;
@@ -317,7 +248,7 @@
 
 		let rectFrom = new rectData();
 		let rectTo = new rectData();
-		rectFrom.setLTWH(parseInt(this.clingingPartner.style.left), parseInt(this.clingingPartner.style.top), this.scaleStartWidth, this.scaleStartHeight);
+		rectFrom.setLTWH(parseInt(eleFocus[0].style.left), parseInt(eleFocus[0].style.top), this.scaleStartWidth, this.scaleStartHeight);
 		rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
 
 		let scaleY = 1.0;
@@ -326,8 +257,8 @@
 				break;
 			case 1:	// 縦倍率に合わせfont sizeも変更
 				{
-					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
-					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let orgwidth = parseInt(eleFocus[1].dataset.orgwidth);
+					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
 				}
 				break;
@@ -335,7 +266,7 @@
 
 		// Scale Command発行
 		let cmd = new CCommandObj();
-		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, scaleY, 5);
+		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, eleFocus[0].dataset.objid, rectFrom, rectTo, scaleY, 5);
 		this.debuglog("postToWorker");
 		window.postToWorker.post(cmd);
 	}
@@ -342,40 +273,75 @@
 
 	onMouseDownRoll(evt) {
 		this.debuglog('onMouseDownRoll');
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
+		window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
 	}
 	mouseMoveRoll(evt) {
-		let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let y1 = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height) / 2;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		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;
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		let degree = angle(x2, y2, x1, y1);
 
-		this.renderFunc.enqueue(this.renderMouseMoveRoll.bind(this, degree));
+//		this.renderFunc.enqueue(this.renderMouseMoveRoll.bind(this, degree));
+		window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree));
 	}
 	renderMouseMoveRoll(degree) {
-		this.clingingPartner.style.transform = 'rotateZ(' + degree + 'deg);';
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+
+		eleFocus[0].style.transform = 'rotateZ(' + degree + 'deg);';
 	}
 	mouseUpRoll(evt) {
 		this.debuglog('mouseUpRoll');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let y1 = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height) / 2;
+		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;
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		let degree = angle(x2, y2, x1, y1);
 		//		this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
-		//		window.ObjIDMgr.rollbox( this.clingingPartner.dataset.objid, degree );	// debug用 設定情報で直接表示
+		//		window.ObjIDMgr.rollbox( eleFocus[0].dataset.objid, degree );	// debug用 設定情報で直接表示
 
 		// Rotate command発行
 		let cmd = new CCommandObj();
-		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, null, 6);
+		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, eleFocus[0].dataset.objid, degree, null, null, 6);
 		this.debuglog("postToWorker");
 		window.postToWorker.post(cmd);
 	}
 
+
+
+
+
+
+
+	getFocusdElements() {
+		let eleBase = this.clingingPartner;
+		if (null == eleBase) {
+			console.error('変形処理失敗　操作対象要素が見つからない PartsFocus');
+			return [];
+		}
+		if (eleBase.children.length < 1) {
+			console.error('変形処理失敗  表示要素が見つからない PartsFocus   base element  objid=' + eleBalse.dataset.objid + ', className=' + eleBase.className);
+			return [];
+		}
+		let eleDisp = eleBase.children[0];
+
+		return [eleBase, eleDisp];
+	}
 }	// class CPartsFocus

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 32)
@@ -26,10 +26,27 @@
 
 	// 操作関数 -----------------------------------
 
-	// Mouse eventを処理するObj
-	setMouseEventObj(mouseMove, mouseUp) {
-		this.debuglog('setMouseEventObj callbackMove=' + ((null != mouseMove)? mouseMove.name: 'null') + ',  callbackUp=' + ((null != mouseUp)? mouseUp.name: 'null'));
+	// Mouse eventを拾ったときに通知してほしいときにセット
+	// 上書きすると前に設定されていた callbackが消えます
+	// callback: function mouseMove( evt )					move eventの evt.targetは目的のelementでない場合が多いため検索しない
+	// callback: function mouseUp( evt, strclassElement )	elementが見つからなければ null
+	setMouseEventObj(
+				strclass,	// mouse up callback 第2引数 targetとして返してほしいelementが持つ css class名
+				mouseMove,	// mouse moveで呼んでほしい関数 or null
+				mouseUp		// mouse upで呼んでほしい関数 or null
+	) {
+		this.debuglog('setMouseEventObj strclass=' + strclass + ', callbackMove=' + ((null != mouseMove)? mouseMove.name: 'null') + ',  callbackUp=' + ((null != mouseUp)? mouseUp.name: 'null'));
 
+		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
+		if (null != mouseMove || null != mouseUp) {
+			if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
+				console.error('マウスイベント callback設定上書き   \n\
+Before  strclass=' + this.strclass + 'callbackMove=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  callbackUp=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null') + '\n\
+After   strclass=' + strclass + 'callbackMove=' + ((null != mouseMove) ? mouseMove.name : 'null') + ',  callbackUp=' + ((null != mouseUp) ? mouseUp.name : 'null'));
+			}
+		}
+
+		this.strclass = strclass;
 		this.mouseMoveFunc = mouseMove;
 		this.mouseUpFunc = mouseUp;
 	}
@@ -38,25 +55,27 @@
 
 	// ■マウス左ボタン押下 (Drag処理)
 	onMouseDown(evt) {
+		this.debuglog('マウスクリック onMouseDown()');
 	}
 	// ■ マウス移動 (ドラッグ中)
 	onMouseMove(evt) {
-		// ★ evt.targetが期待するelementかチェックする必要がある
-		// ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
 
 		if (null != this.mouseMoveFunc) {
 			this.mouseMoveFunc(evt);
-			return;
 		}
 	}
+
 	// ■ ドロップ処理
 	onMouseUp(evt) {
-		// ★ evt.targetが期待するelementかチェックする必要がある
-		// ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
+		this.debuglog('マウスアップ onMouseUp()  findClass=' + this.strclass + ',  callback  move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
+		let e = findClassNameParent(this.strclass, evt.target);
+		if (null == e) {
+			console.error('マウスアップ  指定要素が見つからない  findClass=' + this.strclass + ',  callback  move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
+			// ひとまず処理を継続する
+		}
 
 		if (null != this.mouseUpFunc) {
-			this.mouseUpFunc(evt);
-			return;
+			this.mouseUpFunc(evt, e);
 		}
 	}
 

Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 32)
@@ -10,7 +10,7 @@
 	constructor() {
 		this.DOMobject = [];
 		this.draggingDOM = null;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 
 	debuglog(str) {
@@ -146,7 +146,7 @@
 		}
 	}
 
-
+	/*
 	// 描画関数 ---------------------
 
 	render() {
@@ -155,6 +155,7 @@
 			renderFunction();
 		}
 	}
+	*/
 
 	// Event handler -----------------------
 
@@ -202,8 +203,8 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
+		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
+		window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
 
 		// Drag対象を保持
 		this.draggingDOM = evt.target;
@@ -229,7 +230,8 @@
 		moveX = this.startElementX + moveX;
 		moveY = this.startElementY + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 		//this.renderMoveDragging(moveX, moveY);
 	}
 	renderMoveDragging(x, y) {
@@ -256,7 +258,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 32)
@@ -16,7 +16,7 @@
 		this.typeAction = 2;
 
 		this.DOMobject = [];	// bg,text,action
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 	debuglog(str) {
 		debuglog('【PalGroup】 ' + str);
@@ -44,7 +44,7 @@
 	}
 
 
-
+	/*
 	// 描画関数 ---------------------
 
 	render() {
@@ -53,14 +53,14 @@
 			renderFunction();
 		}
 	}
+	*/
 
 
-
 	// Event handler -----------------------
 
 	onMouseDown(evt) {
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
+		window.appArea.setMouseEventObj(null, this.mouseMove.bind(this), null);
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -88,7 +88,8 @@
 		moveX = this.startElementX + moveX;
 		moveY = this.startElementY + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 		//this.renderMoveDragging(moveX, moveY);
 	}
 	renderMoveDragging(x, y) {
@@ -106,7 +107,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 32)
@@ -51,12 +51,18 @@
 	}
 
 
+	.DispBase,
 	.DispObj {
 		display: inline-block;
-		position:absolute;
+		position: absolute;
 		marginj:0;	padding:0;
 	}
+	.DispObj {
+		left:0; top:0;
+		width: 100%; height: 100%;
+	}
 
+
 	/* パレットグループ要素の定義 */
 	.palgroup {
 		display: inline-block;
@@ -106,14 +112,22 @@
 
 
 	/* フォーカス枠と拡大縮小・回転用マーカー定義 */
-	.scaler {
+	.scaler,
+	.roller {
+		position: absolute;
+		width: 15px;	height: 15px;
+		padding: 0;		margin: 0;
 		border: 2px solid black;
 		border-radius: 50%;
+	}
+	.scaler {
+		left: 100%;		top: 100%;
+		transform: translateX(-50%) translateY(-50%);
 		background-color: orange;
 	}
 	.roller {
-		border: 2px solid black;
-		border-radius: 50%;
+		left: 50%;		top: 0%;
+		transform: translateX(-50%) translateY(-50%);
 		background-color: green;
 	}
 	
@@ -131,10 +145,37 @@
 		);
 		background-size: 8px 8px;
 	}
-	.focusleft   {	animation: animForcus1 3s linear infinite;	}
-	.focusright  {	animation: animForcus2 3s linear infinite;	}
-	.focustop    {	animation: animForcus2 3s linear infinite;	}
-	.focusbottom {	animation: animForcus1 3s linear infinite;	}
+	.focusleft,
+	.focustop,
+	.focusright,
+	.focusbottom{
+		position: absolute;
+		padding: 0;		margin: 0;
+	}
+	.focusleft   {
+		left: 0%;		top: 0%;
+		width: 2px;		height: 100%;
+		transform: translateX(-50%) translateY(0%);
+		animation: animForcus1 3s linear infinite;
+	}
+	.focustop    {
+		left: 0%;		top: 0%;
+		width: 100%;	height: 2px;
+		transform: translateX(0%) translateY(-50%);
+		animation: animForcus2 3s linear infinite;
+	}
+	.focusright  {
+		left: 100%;		top: 0%;
+		width: 2px;		height: 100%;
+		transform: translateX(-50%) translateY(0%);
+		animation: animForcus2 3s linear infinite;
+	}
+	.focusbottom {
+		left: 0%;		top: 100%;
+		width: 100%;	height: 2px;
+		transform: translateX(0%) translateY(-50%);
+		animation: animForcus1 3s linear infinite;
+	}
 	@keyframes animForcus1 { 
 		0%   { background-position:0% 0%}
 		100% {background-position:100% 100%}
@@ -151,11 +192,6 @@
 		animation: none;
 	}
 
-	#apparea:target img,
-	#apparea:target div {
-		animation: none;
-		background-color:red;
-	}
 
 
 

--- HtmlDrawApp/HTMLDrawApp/js/Common.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js	(revision 32)
@@ -4,7 +4,7 @@
 var DEBUGLOG = true;
 debuglog = (true==DEBUGLOG)? debugLog : logQuiet;
 
-function debugLog(str) {
+function debugLog(str,callerargs) {
 	console.log(str);
 };
 function logQuiet(str) {
@@ -195,14 +195,45 @@
 		}
 	}
 	return null;
-}
+};
 
 
 
 
+// elementを起点に classNameを持った要素を遡って検索
+// 見つからなければ nullを返す
+function findClassNameParent(
+	className,		// 検索対象 CSS class name
+	element			// 検索起点 element
+) {
+	let e = element;
+	if (null != className && null != element) {
+		let result = false;
+		do {
+			result = e.classList.contains(className);
+			if (true == result) break;
 
+			e = e.parent;
+		} while (null != e);
+	}
+	return e;
+};
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // Drop fileから file objectを取得 (同期処理)
 // 複数file 非対応。text or image がヒットした時点でcallbackを呼び出す
 // callback書式(text,image): function(blob)
@@ -314,3 +345,34 @@
 		if (null != this.callbackError) this.callbackError(err.message);
 	};
 }	// class SaveFile
+
+
+
+class RenderLoop {
+	constructor() {
+		this.renderQue = new Queue();
+		this.rendering = null;	// loop処理呼び出し済み判定用
+	}
+
+
+	// 描画用callback関数登録要求
+	// 引数のcallbackを1回呼び出します
+	// callback: function callback(time)
+	requestRenderFunc(callback) {
+		console.log('Request render function = ' + (callback ? callback.name : 'null'));
+		if (null != callback){
+			this.renderQue.enqueue(callback);
+
+			// 描画loop
+			(function renderloop(time) {
+				if (0 < this.renderQue.size()) {
+					this.renderQue.dequeue()(time);
+					console.log('render func size=' + this.renderQue.size());
+					requestAnimationFrame(renderloop.bind(this));
+				}
+			}.call(this,window.performance.now()));
+		}
+	}
+}
+
+

--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 32)
@@ -13,23 +13,24 @@
 	init() {
 		this.debuglog('init()');
 		this.ObjID = 0;
-		this.GroupID = 0;
 		this.type = 0;
 		this.x = 0.0;
 		this.y = 0.0;
 		this.width = 0.0;
 		this.height = 0.0;
+		this.originalWidth = 0.0;
+		this.originalHeight = 0.0;
 		this.opacity = 1.0;
 		this.degree = 0;
 		this.text = null;
 		this.transformStr = null;
-		this.initDOMobj();	// DOMをクリア
-		this.renderFunc = new Queue();
 
-		this.originalWidth = 0;
-		this.originalHeight = 0;
+		// DOMをクリア
+		this.initDOMobj();
+//		this.renderFunc = new Queue();
 
-		this.dropinitsize = 100.0;
+
+		this.dropinitsize = 100.0;	// File dropで作成する Elementの長辺の長さ
 	}
 	initDOMobj() {
 		if (null != this.DOMobject) {
@@ -47,6 +48,7 @@
 	}
 
 
+
 	// 操作関数 ------------------------------------
 
 	// 破棄
@@ -73,7 +75,7 @@
 
 
 
-
+	/*
 	// ブラウザ上への描画 -------------------------
 
 	// コマンド要求実行後の描画共通処理
@@ -84,6 +86,7 @@
 			renderFunction();
 		}
 	}
+	*/
 
 	// コマンド実行処理 -----------------------------
 
@@ -113,14 +116,20 @@
 		this.originalHeight = this.height;
 
 		// 画面に影響しない範囲で作成できるところまで Dom objectを作成する
+		// DispBase作成
+		this.DOMbase = document.createElement('div');
+		this.DOMbase.classList.add('DispBase');
+		this.DOMbase.dataset.objid = this.ObjID;
+		this.DOMbase.dataset.degree = 0;
+		this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		// DispObj作成
 		let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
 		this.DOMobject = document.createElement(elType);
+		this.DOMbase.appendChild(this.DOMobject);				// ひとまず連結
 		this.DOMobject.classList.add('DispObj');
 		this.DOMobject.dataset.objid = this.ObjID;
 		this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
-		this.DOMobject.dataset.orgheight = this.originalHeight;
-		this.DOMobject.dataset.degree = 0;
-		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		this.DOMobject.dataset.orgheight = this.originalHeight;	// 画像original sizeなのでこちらで管理
 		if (null != type.match(/imagebox/)) {
 			// imageの場合、画像読み込み完了後に描画する必要がある
 			this.loadImage(opt1);
@@ -131,7 +140,8 @@
 			}
 			else {
 				// 描画呼び出し時に呼び出す関数を登録
-				this.renderFunc.enqueue(this.renderCreate.bind(this));
+//				this.renderFunc.enqueue(this.renderCreate.bind(this));
+				window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 			}
 		}
 		return true;
@@ -143,7 +153,8 @@
 		reader.onload = function (evt) {
 			this.text = evt.target.result;
 			// 描画呼び出し時に呼び出す関数を登録
-			this.renderFunc.enqueue(this.renderCreate.bind(this));
+//			this.renderFunc.enqueue(this.renderCreate.bind(this));
+			window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 		}.bind(this);
 	}
 	loadImage(file) {
@@ -162,9 +173,10 @@
 				this.originalWidth = this.width;
 				this.originalHeight = this.height;
 				this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
-				this.DOMobject.dataset.orgheight = this.originalHeight;
+				this.DOMobject.dataset.orgheight = this.originalHeight;	// 画像original sizeなのでこちらで管理
 				// 表示サイズ取得完了したので画面に表示
-				this.renderFunc.enqueue(this.renderCreate.bind(this));
+//				this.renderFunc.enqueue(this.renderCreate.bind(this));
+				window.renderLoop.requestRenderFunc(this.renderCreate.bind(this));
 			}.bind(this);
 		}.bind(this);
 	}
@@ -185,27 +197,27 @@
 		return new rectData(0, 0, destW, destH);
 	}
 	renderCreate() {
-//		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
-		this.DOMobject.style.width = this.width.toString() + "px";
-		this.DOMobject.style.height = this.height.toString() + "px";
 		this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
 		if (null != this.text) this.DOMobject.innerHTML = this.text;
+//		this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
 
-		document.getElementById('DispField').appendChild(this.DOMobject);
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
+		this.DOMbase.style.width = this.width.toString() + "px";
+		this.DOMbase.style.height = this.height.toString() + "px";
+		document.getElementById('DispField').appendChild(this.DOMbase);
 
-		this.debuglog("renderCreate() left=" + this.DOMobject.style.left
-								  + ", top=" + this.DOMobject.style.top
-								  + ", width=" + this.DOMobject.style.width
-								  + ", height=" + this.DOMobject.style.height
-								  + ", border=" + this.DOMobject.style.border);
+		this.debuglog("renderCreate() left=" + this.DOMbase.style.left
+								  + ", top=" + this.DOMbase.style.top
+								  + ", width=" + this.DOMbase.style.width
+								  + ", height=" + this.DOMbase.style.height
+								  + ", innerHTML=" + this.DOMobject.innerHTML);
 	}
 
 	createFromElement(ele) {
 		this.debuglog('createFromElement() ele=' + ele);
 
-		this.DOMobject = ele;
+		this.DOMbase = ele;
 		this.type = (null != ele.nodeName.match(/IMG/)) ? 'imagebox' : 'textbox';
 		this.x = parseInt(ele.style.left);
 		this.y = parseInt(ele.style.top);
@@ -215,7 +227,7 @@
 		this.originalHeight = ele.dataset.orgheight;
 		this.ObjID = ele.dataset.objid;
 		this.degree = ele.dataset.degree;
-		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
+		this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false);
 
 		// 画像・テキストは既にelementに読み込み済み
 		// treeにも入っており、更新する必要もないのでこれで完了
@@ -229,20 +241,21 @@
 	movebox(x, y) {
 		this.x = x;
 		this.y = y;
-		this.renderFunc.enqueue(this.rendermove.bind(this));
+//		this.renderFunc.enqueue(this.rendermove.bind(this));
+		window.renderLoop.requestRenderFunc(this.rendermove.bind(this));
 
-		this.debuglog("movebox() x=" + this.x + ", y=" + this.y + ", renderFunc size=" + this.renderFunc.size());
+		this.debuglog("movebox() x=" + this.x + ", y=" + this.y);
 	}
 	rendermove() {
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
 		this.DOMobject.style.opacity = this.opacity.toString();
 
-		this.debuglog("rendermove() left=" + this.DOMobject.style.left
-												 + ", top=" + this.DOMobject.style.top
-												 + ", width=" + this.DOMobject.style.width
-												 + ", height=" + this.DOMobject.style.height
-												 + ", border=" + this.DOMobject.style.border);
+		this.debuglog("rendermove()    left=" + this.DOMbase.style.left
+								  + ", top=" + this.DOMbase.style.top
+								  + ", width=" + this.DOMbase.style.width
+								  + ", height=" + this.DOMbase.style.height
+								  + ", opacity=" + this.DOMobject.opacity);
 	}
 
 	scalebox(rect, fontscale) {
@@ -250,14 +263,15 @@
 		this.y = rect.top;
 		this.width = rect.right - rect.left;
 		this.height = rect.bottom - rect.top;
-		this.renderFunc.enqueue(this.renderscalebox.bind(this));
+//		this.renderFunc.enqueue(this.renderscalebox.bind(this));
+		window.renderLoop.requestRenderFunc(this.renderscalebox.bind(this));
 		this.fontsize = fontscale;
 	}
 	renderscalebox() {
-		this.DOMobject.style.left = this.x.toString() + "px";
-		this.DOMobject.style.top = this.y.toString() + "px";
-		this.DOMobject.style.width = this.width.toString() + "px";
-		this.DOMobject.style.height = this.height.toString() + "px";
+		this.DOMbase.style.left = this.x.toString() + "px";
+		this.DOMbase.style.top = this.y.toString() + "px";
+		this.DOMbase.style.width = this.width.toString() + "px";
+		this.DOMbase.style.height = this.height.toString() + "px";
 		this.DOMobject.style.opacity = this.opacity.toString();
 		this.DOMobject.style.fontSize = this.fontsize + '%';
 	}
@@ -264,11 +278,12 @@
 
 	rollbox(degree) {
 		this.degree = degree;
-		this.DOMobject.dataset.degree = degree;
-		this.renderFunc.enqueue(this.renderrollbox.bind(this));
+		this.DOMbase.dataset.degree = degree;
+//		this.renderFunc.enqueue(this.renderrollbox.bind(this));
+		window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this));
 	}
 	renderrollbox() {
-		this.DOMobject.style.transform = 'rotateZ(' + this.degree + 'deg);';
+		this.DOMbase.style.transform = 'rotateZ(' + this.degree + 'deg);';
 	}
 
 
@@ -288,22 +303,19 @@
 			return;
 		}
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
+		window.appArea.setMouseEventObj('DispBase',this.mouseMove.bind(this), this.mouseUp.bind(this));
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-
-		// Focus設定
-		evt.target.dataset.focus = "true";
 		// 移動元として座標を保持
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 
 		// Focus表示
-		window.partsFocus.setClingingPartner(this.DOMobject);
+		window.partsFocus.setClingingPartner(this.DOMbase);
 
 	}
-	mouseMove(evt) {
+	mouseMove(evt, target) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -317,17 +329,18 @@
 		moveX = this.x + moveX;
 		moveY = this.y + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 	}
 	renderMoveDragging(x, y) {
-		this.DOMobject.style.left = x + "px";
-		this.DOMobject.style.top = y + "px";
+		this.DOMbase.style.left = x + "px";
+		this.DOMbase.style.top = y + "px";
 		this.DOMobject.style.opacity = 0.4;
 	}
-	mouseUp(evt) {
+	mouseUp(evt, target) {
 		this.debuglog("mouseUp");
 		// Mouse event処理対象をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 

--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 32)
@@ -7,7 +7,7 @@
 class CDisplayField {
 	constructor(dom) {
 		this.DOMobject = dom;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 		this.mouseMoveFunc = null;
 		this.mouseUpFunc = null;
 	}
@@ -51,7 +51,7 @@
 	}
 
 
-
+	/*
 	// ブラウザ上への描画 -------------------------
 	render() {
 		while (0 < this.renderFunc.size()) {
@@ -59,9 +59,9 @@
 			renderFunction();
 		}
 	}
+	*/
 
 
-
 	// Event handler -------------------
 	// 表示要素の drag & drop禁止
 	onDragStart(evt) {

--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js	(revision 32)
@@ -5,7 +5,7 @@
 // ・DispObjへのobjid割り当て
 // ・objidから実体への変換
 // ・DispObjへのcommand処理要求 (振り分け)
-// ・DispObjの描画関数呼び出し
+// ×【やめ】DispObjの描画関数呼び出し
 
 class CObjIDMgr {
 	constructor() {
@@ -46,6 +46,7 @@
 		}
 	}
 
+	/*	★ObjIDMgrは描画には関与しないように変更★
 	// 管理Elementの描画関数呼び出し
 	// requestAnimationFrame loop内から呼び出される
 	renderAll() {
@@ -53,6 +54,7 @@
 			this.ObjIDarray[i].render();
 		}
 	}
+	*/
 
 	// 指定されたIDの実体(への参照)を返す
 	getIDtoDispObj(id) {

--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 32)
@@ -11,14 +11,12 @@
 // そのため Focus図形を描く専用の DOMを用意する
 class CPartsFocus {
 	constructor() {
-		this.lineWidth = 2;
-		this.markWidth = 20;
 		this.num2str = ['focusleft', 'focustop', 'focusright', 'focusbottom'];
 		this.clingingPartner = null;
 		this.DOM = [null, null, null, null];		// focus表示用
 		this.domScaler = null;
 		this.domRoller = null;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 
 	debuglog(str) {
@@ -26,7 +24,7 @@
 		debuglog("【PartsFocus】 focused objid=" + focused + ", " + str);
 	}
 
-
+/*
 	// ブラウザ上への描画 -------------------------
 
 	// domの淵を囲むように Focus lineを表示する
@@ -36,102 +34,20 @@
 			let renderFunction = this.renderFunc.dequeue();
 			renderFunction();
 		}
-
-		// Drag & Dropを追いかけるための処理
-		this.renderClinging();
 	}
-	renderClinging() {
-		if (null == this.clingingPartner) return;
+*/
 
-		let originX = parseInt(this.clingingPartner.style.width) / 2;
-		let originY = parseInt(this.clingingPartner.style.height) / 2;
-		//								DOM			描画先rect			回転の中心位置
-		this.renderClingingSetPosition(this.DOM[0], this.getRectLeft(), (originX + this.lineWidth / 2) + 'px', '50%');
-		this.renderClingingSetPosition(this.DOM[1], this.getRectTop(), '50%', (originY + this.lineWidth / 2) + 'px');
-		this.renderClingingSetPosition(this.DOM[2], this.getRectRight(), (originX - this.lineWidth / 2) * -1 + 'px', '50%');
-		this.renderClingingSetPosition(this.DOM[3], this.getRectBottom(), '50%', (originY - this.lineWidth / 2) * -1 + 'px');
-		this.renderClingingSetPosition(this.domScaler, this.getRectScaler(), (originX - this.markWidth / 2) * -1 + 'px', (originY - this.markWidth / 2) * -1 + 'px');
-		//		this.renderClingingSetPosition( this.domRoller, this.getRectRoller(),	(originX - this.markWidth / 2) * -1 + 'px', (originY + this.markWidth / 2) + 'px');
-		this.renderClingingSetPosition(this.domRoller, this.getRectRoller(), '50%', (originY + this.markWidth / 2) + 'px');
-	}
-	renderClingingSetPosition(dom, rect, ox, oy) {
-		dom.style.left = rect.left.toString() + "px";
-		dom.style.top = rect.top.toString() + "px";
-		dom.style.width = (rect.right - rect.left).toString() + "px";
-		dom.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		dom.style.border		= "1px solid blue";
-		dom.style.transform = this.clingingPartner.style.transform;
-		dom.style.transformOrigin = ox + ' ' + oy + ';';	// 回転の中心を focus対象の中心点に合わせる
-	}
 
-
-
-	// Elementの描画 size取得関数 -------------------------
-
-	// Focusとして描画する４つのbar それぞれの サイズ取得
-	getRectLeft() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.left -= this.lineWidth / 2;         rect.top -= this.lineWidth / 2;
-		rect.right = rect.left + this.lineWidth; rect.bottom += this.lineWidth / 2;
-		return rect;
-	}
-	getRectTop() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.left  += this.lineWidth / 2; rect.top -= this.lineWidth / 2;
-		rect.right -= this.lineWidth / 2; rect.bottom = rect.top + this.lineWidth;
-		return rect;
-	}
-	getRectRight() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.right += this.lineWidth / 2;        rect.bottom += this.lineWidth / 2;
-		rect.left = rect.right - this.lineWidth; rect.top -= this.lineWidth / 2;
-		return rect;
-	}
-	getRectBottom() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let rect = new rectData();
-		rect.setLTWH(this.clingingPartner.style.left, this.clingingPartner.style.top, this.clingingPartner.style.width, this.clingingPartner.style.height);
-		rect.right -= this.lineWidth / 2; rect.bottom += this.lineWidth / 2;
-		rect.left  += this.lineWidth / 2; rect.top = rect.bottom - this.lineWidth;
-		return rect;
-	}
-	// 拡大縮小用 右下マーカーの rect取得
-	getRectScaler() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let centerX = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width);
-		let centerY = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height);
-		let rect = new rectData();
-		rect.left  = centerX - this.markWidth / 2; rect.top    = centerY - this.markWidth / 2;
-		rect.right = centerX + this.markWidth / 2; rect.bottom = centerY + this.markWidth / 2;
-		return rect;
-	}
-	// 回転用 上辺中心部 マーカーの rect取得
-	getRectRoller() {
-		if (null == this.clingingPartner) return new rectData(0, 0, 0, 0);
-		let centerX = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let centerY = parseInt(this.clingingPartner.style.top);
-		let rect = new rectData();
-		rect.left  = centerX - this.markWidth / 2; rect.top    = centerY - this.markWidth / 2;
-		rect.right = centerX + this.markWidth / 2; rect.bottom = centerY + this.markWidth / 2;
-		return rect;
-	}
-
 	// 表示関数-----------------------------------
 	// Focus作成
 	create() {
-		let getRectProperty = [this.getRectLeft.bind(this), this.getRectTop.bind(this), this.getRectRight.bind(this), this.getRectBottom.bind(this)];
 		for (let cnt = 0; cnt < this.num2str.length; cnt++) {
 			this.DOM[cnt] = document.createElement('div');
 			this.DOM[cnt].dataset.objid = this.num2str[cnt];
 			this.DOM[cnt].classList.add('focusimage');
 			this.DOM[cnt].classList.add(this.num2str[cnt]);
-			this.renderFunc.enqueue(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], getRectProperty[cnt]()));
+//			this.renderFunc.enqueue(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], null));
+			window.renderLoop.requestRenderFunc(this.renderCreateOneFocusbar.bind(this, this.DOM[cnt], null));
 		}
 		//		this.debuglog("create() renderFunc size=" + this.renderFunc.size());
 
@@ -140,13 +56,7 @@
 	}
 	renderCreateOneFocusbar(dom, rect) {
 		dom.style.display = (null == this.clingingPartner) ? "none" : "block";
-		dom.style.position = "absolute";
-		dom.style.left   = rect.left.toString() + "px";
-		dom.style.top    = rect.top.toString() + "px";
-		dom.style.width  = (rect.right - rect.left).toString() + "px";
-		dom.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		dom.style.border		= "1px solid blue";
-		document.getElementById('DispField').appendChild(dom);
+		this.clingingPartner.appendChild(dom);
 	}
 
 
@@ -156,17 +66,12 @@
 		this.domScaler.dataset.objid = 'scaler';
 		this.domScaler.classList.add('scaler');
 		this.domScaler.addEventListener('mousedown', this.onMouseDownScale.bind(this), false);
-		this.renderFunc.enqueue(this.renderScaler.bind(this, this.getRectScaler()));
+//		this.renderFunc.enqueue(this.renderScaler.bind(this, null));
+		window.renderLoop.requestRenderFunc(this.renderScaler.bind(this, null));
 	}
 	renderScaler(rect) {
 		this.domScaler.style.display = (null == this.clingingPartner) ? "none" : "block";
-		this.domScaler.style.position = 'absolute';
-		this.domScaler.style.left   = rect.left.toString() + "px";
-		this.domScaler.style.top    = rect.top.toString() + "px";
-		this.domScaler.style.width  = (rect.right - rect.left).toString() + "px";
-		this.domScaler.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		this.domScaler.style.border			= "1px solid blue";
-		document.getElementById('DispField').appendChild(this.domScaler);
+		this.clingingPartner.appendChild(this.domScaler);
 	}
 
 	// 回転操作マーカー作成
@@ -175,17 +80,12 @@
 		this.domRoller.dataset.objid = 'roller';
 		this.domRoller.classList.add('roller');
 		this.domRoller.addEventListener('mousedown', this.onMouseDownRoll.bind(this), false);
-		this.renderFunc.enqueue(this.renderRoller.bind(this, this.getRectRoller()));
+//		this.renderFunc.enqueue(this.renderRoller.bind(this, null));
+		window.renderLoop.requestRenderFunc(this.renderRoller.bind(this, null));
 	}
 	renderRoller(rect) {
 		this.domRoller.style.display = (null == this.clingingPartner) ? "none" : "block";
-		this.domRoller.style.position = 'absolute';
-		this.domRoller.style.left   = rect.left.toString() + "px";
-		this.domRoller.style.top    = rect.top.toString() + "px";
-		this.domRoller.style.width  = (rect.right - rect.left).toString() + "px";
-		this.domRoller.style.height = (rect.bottom - rect.top).toString() + "px";
-		//		this.domRoller.style.border			= "1px solid blue";
-		document.getElementById('DispField').appendChild(this.domRoller);
+		this.clingingPartner.appendChild(this.domRoller);
 	}
 
 	// 操作関数-----------------------------------
@@ -193,11 +93,10 @@
 	// 非選択: nullを返す
 	getFocusedObjid() {
 		this.debuglog("getFocusedObjid().");
-		let ret = null;
-		if (null != this.clingingPartner) {
-			ret = this.clingingPartner.dataset.objid;
-		}
-		return ret;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return null;
+
+		return eleFocus[0].dataset.objid;
 	}
 
 	// Forcus先 クリア (focus 非表示)
@@ -207,7 +106,7 @@
 		// requestAnimationFrameでの描画タイミング中は DOM.outerHTMLを変更できないため
 		// 処理ロジック上のまま削除処理を実行する
 		//		this.renderFunc.enqueue( this.renderClearClingingPartner.bind(this) );
-		this.debuglog("clearClingingPartner() renderFunc size=" + this.renderFunc.size());
+		this.debuglog("clearClingingPartner()");
 
 		this.renderClearClingingPartner();
 	}
@@ -242,8 +141,23 @@
 			this.clearClingingPartner();
 			return;
 		}
-			// Focus先 変更
-		else if (this.clingingPartner != dom) {
+
+		// Focus対象チェック
+		let result = dom.classList.contains('DispBase');
+		if (false == result) {
+			console.error('フォーカス先要素　誤り  objid=' + dom.dataset.objid + ', className=' + dom.className);
+			// 誤って子要素が指定されている可能性があるため、treeを遡って検索
+			dom = findClassNameParent('DispBase', dom);
+			if (null == dom) {
+				console.error('フォーカス先要素　誤り　(フォーカス先検索も失敗)');
+				this.clearClingingPartner();
+				return;
+			}
+		}
+
+
+		// Focus先 変更
+		if (this.clingingPartner != dom) {
 			// 現在の情報をクリア
 			this.clearClingingPartner();
 			// 新しいFocus先に変更
@@ -256,17 +170,26 @@
 	// Event handler -------------------------
 	onMouseDownScale(evt) {
 		this.debuglog('onMouseDownScale');
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
 		// Mouse eventをappAreaからScalerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
+		window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
 
 		// 移動元として座標を保持
-		this.scaleStartWidth  = parseInt(this.clingingPartner.style.width);
-		this.scaleStartHeight = parseInt(this.clingingPartner.style.height);
+		this.scaleStartWidth = parseInt(eleFocus[0].style.width);
+		this.scaleStartHeight = parseInt(eleFocus[0].style.height);
 		this.startDragX = evt.pageX;
 		this.startDragY = evt.pageY;
 	}
 	mouseMoveScale(evt) {
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
 		// 画像の仮変形
 		this.endDragX = evt.pageX;
 		this.endDragY = evt.pageY;
@@ -276,30 +199,33 @@
 
 		switch(1){
 			case 0:	// 領域サイズ変更のみ
-				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+//				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+				window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
 				break;
 			case 1:	// 縦倍率に合わせfont sizeも変更
 				{
-					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
-					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
-					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+//					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
 				}
 				break;
 		}
 	}
 	renderMouseMoveScale(width, height, scalefont) {
-		this.clingingPartner.style.opacity = 0.4;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		eleFocus[1].style.opacity = 0.4;
 
 		switch(1){
 			case 0:
-				this.clingingPartner.style.width = width + "px";
-				this.clingingPartner.style.height = height + "px";
+				eleFocus[0].style.width = width + "px";
+				eleFocus[0].style.height = height + "px";
 				break;
 			case 1:
-				this.clingingPartner.style.width = width + "px";
-				this.clingingPartner.style.height = height + "px";
-				this.clingingPartner.style.fontSize = scalefont + '%';
+				eleFocus[0].style.width = width + "px";
+				eleFocus[0].style.height = height + "px";
+				eleFocus[1].style.fontSize = scalefont + '%';
 				break;
 		}
 	}
@@ -306,8 +232,13 @@
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
 		// 画像の仮変形
 		this.endDragX = evt.pageX;
 		this.endDragY = evt.pageY;
@@ -317,7 +248,7 @@
 
 		let rectFrom = new rectData();
 		let rectTo = new rectData();
-		rectFrom.setLTWH(parseInt(this.clingingPartner.style.left), parseInt(this.clingingPartner.style.top), this.scaleStartWidth, this.scaleStartHeight);
+		rectFrom.setLTWH(parseInt(eleFocus[0].style.left), parseInt(eleFocus[0].style.top), this.scaleStartWidth, this.scaleStartHeight);
 		rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
 
 		let scaleY = 1.0;
@@ -326,8 +257,8 @@
 				break;
 			case 1:	// 縦倍率に合わせfont sizeも変更
 				{
-					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
-					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let orgwidth = parseInt(eleFocus[1].dataset.orgwidth);
+					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
 				}
 				break;
@@ -335,7 +266,7 @@
 
 		// Scale Command発行
 		let cmd = new CCommandObj();
-		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, scaleY, 5);
+		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, eleFocus[0].dataset.objid, rectFrom, rectTo, scaleY, 5);
 		this.debuglog("postToWorker");
 		window.postToWorker.post(cmd);
 	}
@@ -342,40 +273,75 @@
 
 	onMouseDownRoll(evt) {
 		this.debuglog('onMouseDownRoll');
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
 		// Mouse eventをappAreaからRollerに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
+		window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
 	}
 	mouseMoveRoll(evt) {
-		let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let y1 = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height) / 2;
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		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;
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		let degree = angle(x2, y2, x1, y1);
 
-		this.renderFunc.enqueue(this.renderMouseMoveRoll.bind(this, degree));
+//		this.renderFunc.enqueue(this.renderMouseMoveRoll.bind(this, degree));
+		window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree));
 	}
 	renderMouseMoveRoll(degree) {
-		this.clingingPartner.style.transform = 'rotateZ(' + degree + 'deg);';
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+
+		eleFocus[0].style.transform = 'rotateZ(' + degree + 'deg);';
 	}
 	mouseUpRoll(evt) {
 		this.debuglog('mouseUpRoll');
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus < 2) return;
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
-		let y1 = parseInt(this.clingingPartner.style.top)  + parseInt(this.clingingPartner.style.height) / 2;
+		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;
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		let degree = angle(x2, y2, x1, y1);
 		//		this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
-		//		window.ObjIDMgr.rollbox( this.clingingPartner.dataset.objid, degree );	// debug用 設定情報で直接表示
+		//		window.ObjIDMgr.rollbox( eleFocus[0].dataset.objid, degree );	// debug用 設定情報で直接表示
 
 		// Rotate command発行
 		let cmd = new CCommandObj();
-		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, null, 6);
+		cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, eleFocus[0].dataset.objid, degree, null, null, 6);
 		this.debuglog("postToWorker");
 		window.postToWorker.post(cmd);
 	}
 
+
+
+
+
+
+
+	getFocusdElements() {
+		let eleBase = this.clingingPartner;
+		if (null == eleBase) {
+			console.error('変形処理失敗　操作対象要素が見つからない PartsFocus');
+			return [];
+		}
+		if (eleBase.children.length < 1) {
+			console.error('変形処理失敗  表示要素が見つからない PartsFocus   base element  objid=' + eleBalse.dataset.objid + ', className=' + eleBase.className);
+			return [];
+		}
+		let eleDisp = eleBase.children[0];
+
+		return [eleBase, eleDisp];
+	}
 }	// class CPartsFocus

--- HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 32)
@@ -26,10 +26,27 @@
 
 	// 操作関数 -----------------------------------
 
-	// Mouse eventを処理するObj
-	setMouseEventObj(mouseMove, mouseUp) {
-		this.debuglog('setMouseEventObj callbackMove=' + ((null != mouseMove)? mouseMove.name: 'null') + ',  callbackUp=' + ((null != mouseUp)? mouseUp.name: 'null'));
+	// Mouse eventを拾ったときに通知してほしいときにセット
+	// 上書きすると前に設定されていた callbackが消えます
+	// callback: function mouseMove( evt )					move eventの evt.targetは目的のelementでない場合が多いため検索しない
+	// callback: function mouseUp( evt, strclassElement )	elementが見つからなければ null
+	setMouseEventObj(
+				strclass,	// mouse up callback 第2引数 targetとして返してほしいelementが持つ css class名
+				mouseMove,	// mouse moveで呼んでほしい関数 or null
+				mouseUp		// mouse upで呼んでほしい関数 or null
+	) {
+		this.debuglog('setMouseEventObj strclass=' + strclass + ', callbackMove=' + ((null != mouseMove)? mouseMove.name: 'null') + ',  callbackUp=' + ((null != mouseUp)? mouseUp.name: 'null'));
 
+		// Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
+		if (null != mouseMove || null != mouseUp) {
+			if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
+				console.error('マウスイベント callback設定上書き   \n\
+Before  strclass=' + this.strclass + 'callbackMove=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  callbackUp=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null') + '\n\
+After   strclass=' + strclass + 'callbackMove=' + ((null != mouseMove) ? mouseMove.name : 'null') + ',  callbackUp=' + ((null != mouseUp) ? mouseUp.name : 'null'));
+			}
+		}
+
+		this.strclass = strclass;
 		this.mouseMoveFunc = mouseMove;
 		this.mouseUpFunc = mouseUp;
 	}
@@ -38,25 +55,27 @@
 
 	// ■マウス左ボタン押下 (Drag処理)
 	onMouseDown(evt) {
+		this.debuglog('マウスクリック onMouseDown()');
 	}
 	// ■ マウス移動 (ドラッグ中)
 	onMouseMove(evt) {
-		// ★ evt.targetが期待するelementかチェックする必要がある
-		// ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
 
 		if (null != this.mouseMoveFunc) {
 			this.mouseMoveFunc(evt);
-			return;
 		}
 	}
+
 	// ■ ドロップ処理
 	onMouseUp(evt) {
-		// ★ evt.targetが期待するelementかチェックする必要がある
-		// ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
+		this.debuglog('マウスアップ onMouseUp()  findClass=' + this.strclass + ',  callback  move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
+		let e = findClassNameParent(this.strclass, evt.target);
+		if (null == e) {
+			console.error('マウスアップ  指定要素が見つからない  findClass=' + this.strclass + ',  callback  move=' + (this.mouseMoveFunc ? this.mouseMoveFunc.name : 'null') + ',  Up=' + (this.mouseUpFunc ? this.mouseUpFunc.name : 'null'));
+			// ひとまず処理を継続する
+		}
 
 		if (null != this.mouseUpFunc) {
-			this.mouseUpFunc(evt);
-			return;
+			this.mouseUpFunc(evt, e);
 		}
 	}
 

--- HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 32)
@@ -78,10 +78,10 @@
 
 
 
+	// 描画ループ
+	window.renderLoop = new RenderLoop();
 
-
-
-
+	/*
 	// 画像読み込み等は待たずに実行開始
 	window.startTime = window.performance.now();
 	window.frameLength = 6.0;
@@ -91,7 +91,7 @@
 //		let frame = Math.floor((nowTime - window.startTime) / (1000.0 / 60.0) % window.frameLength);
 
 		// Canvas area描画 (div tag)
-		window.displayField.render();
+//		window.displayField.render();
 		// 各表示要素の描画 (div, img tag)
 		window.ObjIDMgr.renderAll();
 
@@ -103,10 +103,10 @@
 
 		requestAnimationFrame( renderLoop );
 	})();
+	*/
 
 
 
-
 	// worker threadからの Message受信関数
 	// UI threadで処理が必要な commandが送られてくる
 	function receiveWorkerMessage(evt) {

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 32)
@@ -10,7 +10,7 @@
 	constructor() {
 		this.DOMobject = [];
 		this.draggingDOM = null;
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 
 	debuglog(str) {
@@ -146,7 +146,7 @@
 		}
 	}
 
-
+	/*
 	// 描画関数 ---------------------
 
 	render() {
@@ -155,6 +155,7 @@
 			renderFunction();
 		}
 	}
+	*/
 
 	// Event handler -----------------------
 
@@ -202,8 +203,8 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
+		// Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
+		window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
 
 		// Drag対象を保持
 		this.draggingDOM = evt.target;
@@ -229,7 +230,8 @@
 		moveX = this.startElementX + moveX;
 		moveY = this.startElementY + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 		//this.renderMoveDragging(moveX, moveY);
 	}
 	renderMoveDragging(x, y) {
@@ -256,7 +258,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)

--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 31)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 32)
@@ -16,7 +16,7 @@
 		this.typeAction = 2;
 
 		this.DOMobject = [];	// bg,text,action
-		this.renderFunc = new Queue();
+//		this.renderFunc = new Queue();
 	}
 	debuglog(str) {
 		debuglog('【PalGroup】 ' + str);
@@ -44,7 +44,7 @@
 	}
 
 
-
+	/*
 	// 描画関数 ---------------------
 
 	render() {
@@ -53,14 +53,14 @@
 			renderFunction();
 		}
 	}
+	*/
 
 
-
 	// Event handler -----------------------
 
 	onMouseDown(evt) {
 		// Mouse eventをappAreaからCSSPalに渡してもらうように設定
-		window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
+		window.appArea.setMouseEventObj(null, this.mouseMove.bind(this), null);
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -88,7 +88,8 @@
 		moveX = this.startElementX + moveX;
 		moveY = this.startElementY + moveY;
 
-		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+//		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
+		window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
 		//this.renderMoveDragging(moveX, moveY);
 	}
 	renderMoveDragging(x, y) {
@@ -106,7 +107,7 @@
 		// Drag中 element情報をクリア
 		this.draggingDOM = null;
 		// Mouse event callback設定をクリア
-		window.appArea.setMouseEventObj(null, null);
+		window.appArea.setMouseEventObj(null, null, null);
 	}