Commit: 27 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 27 (tree)
• Time: 2016-11-24 11:14:18
• Author: takoyaki_umaaaa

Log Message

(empty log message)

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/index.html
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.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/index.html
• modified: HtmlDrawApp/HTMLDrawApp/js/DisplayField.js
• modified: HtmlDrawApp/HTMLDrawApp/js/main.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palgroup.js

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 27)
@@ -58,12 +58,14 @@
 		left:0px; top:310px;
 		margin: 0px;
 		padding: 5px;
-		background-color: #ffffff;
-		box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.4);
+		background-color: rgba(205,133,63,0.6);
+		border: 1px solid black;
+		border-radius: 4px;
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.palgrouphorizon {
-		width: 185px;	/* (5+25+5) * 5 + (5+5) */
-		height: 45px;
+		width: 195px;	/* (5+25+5) * 5 + (5+5) */
+		height: 55px;
 	}
 	.pallegend {
 		background-color: transparent;
@@ -79,6 +81,7 @@
 		position: absolute;
 		width: 25px;	height: 25px;
 		border: 2px solid blue;
+		border-radius: 4px;
 		margin: 2px;
 	}
 	.palbg {

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 27)
@@ -159,7 +159,7 @@
 		</style>
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
-			<legend class="pallegend"> Background <button>横</button> </legend>
+			<legend class="pallegend"> Background Palette </legend>
 			<div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
 			<div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
 			<div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -169,7 +169,7 @@
 		<br />
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
-			<legend class="pallegend"> Text Color <button>横</button> </legend>
+			<legend class="pallegend"> Text Color Palette </legend>
 			<div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
 			<div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
 			<div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -180,7 +180,7 @@
 		<br />
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
-			<legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
+			<legend class="pallegend"> Action Palette </legend>
 			<div class="palact palact0" data-objid="palact0" data-palid="0"></div>
 			<div class="palact palact1" data-objid="palact1" data-palid="1"></div>
 			<div class="palact palact2" data-objid="palact2" data-palid="2"></div>

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js	(revision 27)
@@ -1,7 +1,6 @@
 // DisplayField.js
 // Canvas部分
 // 主な機能
-// ・マウスイベント処理 (mousemove, mouseup)
 // ・外部からのtext, image drop処理 (DispObj要素作成要求)
 
 
@@ -24,9 +23,6 @@
 			return false;
 		}
 		this.debuglog("initialize");
-//		this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
-//		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
-//		this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
 		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);
@@ -34,17 +30,8 @@
 
 
 	// 操作関数 -----------------------------------
-/*
-	// Mouse eventを処理するObj
-	setMouseEventObj(mouseMove, mouseUp) {
-		this.debuglog('setMouseEventObj');
 
-		this.mouseMoveFunc = mouseMove;
-		this.mouseUpFunc = mouseUp;
-	}
-*/
 
-
 	// ブラウザ上への描画 -------------------------
 	render() {
 		while (0 < this.renderFunc.size()) {
@@ -57,31 +44,6 @@
 
 
 	// Event handler -------------------
-	/*
-	// ■マウス左ボタン押下 (Drag処理)
-	onMouseDown(evt) {
-	}
-	// ■ マウス移動 (ドラッグ中)
-	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を探す必要がある
-
-		if (null != this.mouseUpFunc) {
-			this.mouseUpFunc(evt);
-			return;
-		}
-	}
-	*/
 	// 表示要素の drag & drop禁止
 	onDragStart(evt) {
 		evt.preventDefault();

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

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 27)
@@ -27,8 +27,8 @@
 		// 背景設定パレット
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
-			this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpalbg[cnt].style.top = 10 + 'px';
+			this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpalbg[cnt].style.top = 18 + 'px';
 			this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -38,8 +38,8 @@
 		// テキストカラーパレット
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
-			this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
+			this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
 			this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -49,8 +49,8 @@
 		// アクションパレット
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
-			this.DOMpalact[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpalact[cnt].style.top = 10 + 'px';
+			this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpalact[cnt].style.top = 18 + 'px';
 			this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 27)
@@ -2,13 +2,19 @@
 // Paletteの各要素をまとめるもの
 // 主な機能
 // ・グループバーのDrag&Dropによる移動
-// ・グループバーの表示方向 vertical/horizon 切り替え
-// ・Palette設定状態の Save/Load
+// ・Palette設定状態の Save/Load (LocalStorage)
+// ・Palette設定状態の Export (download folder)
+// ・Palette設定状態の Import
+// ・(将来)グループバーの表示方向 vertical/horizon 切り替え
 // ・(将来)5 Palette単位で次のPalette, 前のPalette表示
-// ・(将来)バー表示を半透明,短く表示
+// ・(将来)バー表示を短く表示
 
 class PalGroup {
 	constructor() {
+		this.typeBackground = 0;
+		this.typeTextcolor = 1;
+		this.typeAction = 2;
+
 		this.DOMobject = [];	// bg,text,action
 		this.renderFunc = new Queue();
 	}
@@ -27,7 +33,12 @@
 	}
 
 	// 操作関数 ----------------------------
+	getPalGroupInfo(groupType) {
+		if (groupType < this.typeBackground || this.typeAction < groupType)
+			return null;
 
+		let data = this.DOMobject[groupType].innerHTML;
+	}
 
 	// 描画関数 ---------------------
 

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 27)
@@ -58,12 +58,14 @@
 		left:0px; top:310px;
 		margin: 0px;
 		padding: 5px;
-		background-color: #ffffff;
-		box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.4);
+		background-color: rgba(205,133,63,0.6);
+		border: 1px solid black;
+		border-radius: 4px;
+		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.palgrouphorizon {
-		width: 185px;	/* (5+25+5) * 5 + (5+5) */
-		height: 45px;
+		width: 195px;	/* (5+25+5) * 5 + (5+5) */
+		height: 55px;
 	}
 	.pallegend {
 		background-color: transparent;
@@ -79,6 +81,7 @@
 		position: absolute;
 		width: 25px;	height: 25px;
 		border: 2px solid blue;
+		border-radius: 4px;
 		margin: 2px;
 	}
 	.palbg {

--- HtmlDrawApp/HTMLDrawApp/index.html	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/index.html	(revision 27)
@@ -159,7 +159,7 @@
 		</style>
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
-			<legend class="pallegend"> Background <button>横</button> </legend>
+			<legend class="pallegend"> Background Palette </legend>
 			<div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
 			<div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
 			<div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -169,7 +169,7 @@
 		<br />
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
-			<legend class="pallegend"> Text Color <button>横</button> </legend>
+			<legend class="pallegend"> Text Color Palette </legend>
 			<div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
 			<div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
 			<div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -180,7 +180,7 @@
 		<br />
 
 		<fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
-			<legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
+			<legend class="pallegend"> Action Palette </legend>
 			<div class="palact palact0" data-objid="palact0" data-palid="0"></div>
 			<div class="palact palact1" data-objid="palact1" data-palid="1"></div>
 			<div class="palact palact2" data-objid="palact2" data-palid="2"></div>

--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js	(revision 27)
@@ -1,7 +1,6 @@
 // DisplayField.js
 // Canvas部分
 // 主な機能
-// ・マウスイベント処理 (mousemove, mouseup)
 // ・外部からのtext, image drop処理 (DispObj要素作成要求)
 
 
@@ -24,9 +23,6 @@
 			return false;
 		}
 		this.debuglog("initialize");
-//		this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
-//		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
-//		this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
 		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);
@@ -34,17 +30,8 @@
 
 
 	// 操作関数 -----------------------------------
-/*
-	// Mouse eventを処理するObj
-	setMouseEventObj(mouseMove, mouseUp) {
-		this.debuglog('setMouseEventObj');
 
-		this.mouseMoveFunc = mouseMove;
-		this.mouseUpFunc = mouseUp;
-	}
-*/
 
-
 	// ブラウザ上への描画 -------------------------
 	render() {
 		while (0 < this.renderFunc.size()) {
@@ -57,31 +44,6 @@
 
 
 	// Event handler -------------------
-	/*
-	// ■マウス左ボタン押下 (Drag処理)
-	onMouseDown(evt) {
-	}
-	// ■ マウス移動 (ドラッグ中)
-	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を探す必要がある
-
-		if (null != this.mouseUpFunc) {
-			this.mouseUpFunc(evt);
-			return;
-		}
-	}
-	*/
 	// 表示要素の drag & drop禁止
 	onDragStart(evt) {
 		evt.preventDefault();

--- HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js	(revision 27)
@@ -206,6 +206,8 @@
 				removeFocusedObject();
 				break;
 			case 1:
+				let data = window.CSSPalGroup.getPalGroupInfo(window.CSSPalGroup.typeBackground);
+				break;
 			case 2:
 			case 3:
 			case 4:

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 27)
@@ -27,8 +27,8 @@
 		// 背景設定パレット
 		this.DOMpalbg = document.getElementsByClassName('palbg');
 		for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
-			this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpalbg[cnt].style.top = 10 + 'px';
+			this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpalbg[cnt].style.top = 18 + 'px';
 			this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -38,8 +38,8 @@
 		// テキストカラーパレット
 		this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
 		for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
-			this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
+			this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
 			this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -49,8 +49,8 @@
 		// アクションパレット
 		this.DOMpalact = document.getElementsByClassName('palact');
 		for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
-			this.DOMpalact[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
-			this.DOMpalact[cnt].style.top = 10 + 'px';
+			this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
+			this.DOMpalact[cnt].style.top = 18 + 'px';
 			this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
 			this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);

--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 26)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 27)
@@ -2,13 +2,19 @@
 // Paletteの各要素をまとめるもの
 // 主な機能
 // ・グループバーのDrag&Dropによる移動
-// ・グループバーの表示方向 vertical/horizon 切り替え
-// ・Palette設定状態の Save/Load
+// ・Palette設定状態の Save/Load (LocalStorage)
+// ・Palette設定状態の Export (download folder)
+// ・Palette設定状態の Import
+// ・(将来)グループバーの表示方向 vertical/horizon 切り替え
 // ・(将来)5 Palette単位で次のPalette, 前のPalette表示
-// ・(将来)バー表示を半透明,短く表示
+// ・(将来)バー表示を短く表示
 
 class PalGroup {
 	constructor() {
+		this.typeBackground = 0;
+		this.typeTextcolor = 1;
+		this.typeAction = 2;
+
 		this.DOMobject = [];	// bg,text,action
 		this.renderFunc = new Queue();
 	}
@@ -27,7 +33,12 @@
 	}
 
 	// 操作関数 ----------------------------
+	getPalGroupInfo(groupType) {
+		if (groupType < this.typeBackground || this.typeAction < groupType)
+			return null;
 
+		let data = this.DOMobject[groupType].innerHTML;
+	}
 
 	// 描画関数 ---------------------