Commit: 36 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 36 (tree)
• Time: 2016-12-01 20:42:53
• Author: takoyaki_umaaaa

Log Message

dropで背景領域にも画像をセットできるように対応

Change Summary

• 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/DisplayField.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.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/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/js/Common.js
• modified: HtmlDrawApp/HTMLDrawApp/js/DisplayField.js
• modified: HtmlDrawApp/HTMLDrawApp/js/apparea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/framearea.js
• modified: HtmlDrawApp/HTMLDrawApp/js/main.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 36)
@@ -57,8 +57,11 @@
 		margin: 0;		padding: 0;
 		background-color: white;
 	}
+	.FrameArea {
 
+	}
 
+
 	.DispBase,
 	.DispObj {
 		display: inline-block;

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js	(revision 36)
@@ -196,10 +196,28 @@
 	}
 	return null;
 };
+function getCssRule(ruleName) {
+	var ss = document.styleSheets,
+        rule, i, x;
 
+	for (i = 0; i < ss.length; ++i) {
+		if (ss[i].cssRules) {
+			// loop through all the rules
 
+			for (x =0; x < ss[i].cssRules.length; x++) {
+				rule = ss[i].cssRules[x];
+				if (rule.type === window.CSSRule.STYLE_RULE && rule.selectorText === ruleName) {
+					return rule;
+				}
+			}
+		}
+	}
+	return null;
+};
 
 
+
+
 // elementを起点に classNameを持った要素を遡って検索
 // 見つからなければ nullを返す
 function findClassNameParent(

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 36)
@@ -26,6 +26,22 @@
 		this.DOMobject.addEventListener('dragstart', this.onDragStart.bind(this), false);
 		this.DOMobject.addEventListener('dragover', this.onDragover.bind(this), false);
 		this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
+
+		let css = getCssRule('#DispField');
+		if (null == css) {
+			console.error('キャンバス情報取得失敗　CSS定義が見つからない');
+			return false;
+		}
+		let width = css.cssText.match(/[\s\S]*width ?: *([0-9]+)(px|%);/)[1];
+		let height = css.cssText.match(/[\s\S]*height ?: *([0-9]+)(px|%);/)[1];
+		this.x = 0;	// position: relativeなのでx,yは0固定
+		this.y = 0;
+		if (null == width || null == height) {
+			console.error('キャンバス情報取得失敗　CSSから幅高さが取れない\ncss=' + css.cssText);
+			return false;
+		}
+		this.width = parseInt(width);
+		this.height = parseInt(height);
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js	(revision 36)
@@ -30,6 +30,7 @@
 
 
 	// 操作関数 -----------------------------------
+/*
 	getFieldData() {
 		// 表示情報取得
 		let data = this.DOMobject.innerHTML;
@@ -76,9 +77,9 @@
 		this.DOMobject.innerHTML = result;
 		return true;
 	}
+	*/
 
 
-
 	// Mouse eventを拾ったときに通知してほしいときにセット
 	// 上書きすると前に設定されていた callbackが消えます
 	// callback: function mouseMove( evt )					move eventの evt.targetは目的のelementでない場合が多いため検索しない

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js	(revision 36)
@@ -35,6 +35,7 @@
 			return false;
 		}
 		this.DOMobject = dom;
+		this.DOMobject.classList.add('FrameArea');
 	}
 
 
@@ -50,6 +51,24 @@
 		}
 	}
 
+	hitCheck(x, y) {
+		let ret = false;
+		let chkx = parseFloat(x);
+		let chky = parseFloat(y);
+		// frameareaはサイズを持っていないため親elementから取得
+		let thisx = window.displayField.x;
+		let thisy = window.displayField.y;
+		let thiswidth = window.displayField.width;
+		let thisheight = window.displayField.height;
 
+		if (thisx <= chkx && chkx <= thisx + thiswidth) {
+			if (thisy <= chky && chky <= thisy + thisheight) {
+				ret = true;
+			}
+		}
 
+		return ret;
+	}
+
+
 }

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

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 36)
@@ -256,6 +256,10 @@
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)
 		let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
+		if (null == target) {
+			if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
+				target = window.frameArea;
+		}
 
 		// Drag中 palette elementから target element へ CSS classを追加する
 		// 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 36)
@@ -57,8 +57,11 @@
 		margin: 0;		padding: 0;
 		background-color: white;
 	}
+	.FrameArea {
 
+	}
 
+
 	.DispBase,
 	.DispObj {
 		display: inline-block;

--- HtmlDrawApp/HTMLDrawApp/js/Common.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js	(revision 36)
@@ -196,10 +196,28 @@
 	}
 	return null;
 };
+function getCssRule(ruleName) {
+	var ss = document.styleSheets,
+        rule, i, x;
 
+	for (i = 0; i < ss.length; ++i) {
+		if (ss[i].cssRules) {
+			// loop through all the rules
 
+			for (x =0; x < ss[i].cssRules.length; x++) {
+				rule = ss[i].cssRules[x];
+				if (rule.type === window.CSSRule.STYLE_RULE && rule.selectorText === ruleName) {
+					return rule;
+				}
+			}
+		}
+	}
+	return null;
+};
 
 
+
+
 // elementを起点に classNameを持った要素を遡って検索
 // 見つからなければ nullを返す
 function findClassNameParent(

--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 36)
@@ -26,6 +26,22 @@
 		this.DOMobject.addEventListener('dragstart', this.onDragStart.bind(this), false);
 		this.DOMobject.addEventListener('dragover', this.onDragover.bind(this), false);
 		this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
+
+		let css = getCssRule('#DispField');
+		if (null == css) {
+			console.error('キャンバス情報取得失敗　CSS定義が見つからない');
+			return false;
+		}
+		let width = css.cssText.match(/[\s\S]*width ?: *([0-9]+)(px|%);/)[1];
+		let height = css.cssText.match(/[\s\S]*height ?: *([0-9]+)(px|%);/)[1];
+		this.x = 0;	// position: relativeなのでx,yは0固定
+		this.y = 0;
+		if (null == width || null == height) {
+			console.error('キャンバス情報取得失敗　CSSから幅高さが取れない\ncss=' + css.cssText);
+			return false;
+		}
+		this.width = parseInt(width);
+		this.height = parseInt(height);
 	}
 
 

--- HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js	(revision 36)
@@ -30,6 +30,7 @@
 
 
 	// 操作関数 -----------------------------------
+/*
 	getFieldData() {
 		// 表示情報取得
 		let data = this.DOMobject.innerHTML;
@@ -76,9 +77,9 @@
 		this.DOMobject.innerHTML = result;
 		return true;
 	}
+	*/
 
 
-
 	// Mouse eventを拾ったときに通知してほしいときにセット
 	// 上書きすると前に設定されていた callbackが消えます
 	// callback: function mouseMove( evt )					move eventの evt.targetは目的のelementでない場合が多いため検索しない

--- HtmlDrawApp/HTMLDrawApp/js/framearea.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/framearea.js	(revision 36)
@@ -35,6 +35,7 @@
 			return false;
 		}
 		this.DOMobject = dom;
+		this.DOMobject.classList.add('FrameArea');
 	}
 
 
@@ -50,6 +51,24 @@
 		}
 	}
 
+	hitCheck(x, y) {
+		let ret = false;
+		let chkx = parseFloat(x);
+		let chky = parseFloat(y);
+		// frameareaはサイズを持っていないため親elementから取得
+		let thisx = window.displayField.x;
+		let thisy = window.displayField.y;
+		let thiswidth = window.displayField.width;
+		let thisheight = window.displayField.height;
 
+		if (thisx <= chkx && chkx <= thisx + thiswidth) {
+			if (thisy <= chky && chky <= thisy + thisheight) {
+				ret = true;
+			}
+		}
 
+		return ret;
+	}
+
+
 }

--- HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 36)
@@ -239,7 +239,7 @@
 		window.ObjIDMgr.clear();	// 表示中の要素を削除 (ObjIDMgr.deletebox()は隠すだけなので注意)
 		window.frameArea.clear();
 		// canvas上の要素
-		let data = str.match(/<div id=\"FrameArea\"[\s\S]*/);
+		let data = str.match(/<div [\s\S]*/);
 		if (null == data) {
 			console.error('ファイル読みこみ　失敗　キャンバス情報が取得できません  data=' + data);
 			return;

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 35)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 36)
@@ -256,6 +256,10 @@
 		// マウス座標直下にある要素を検索
 		// (evt.targetは自分を指してしまうため)
 		let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
+		if (null == target) {
+			if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
+				target = window.frameArea;
+		}
 
 		// Drag中 palette elementから target element へ CSS classを追加する
 		// 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き