コミット: 49 - takoyaki_umaaaaHideout (svn)

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

コミットメタ情報

• リビジョン: 49 (tree)
• 日時: 2016-12-12 19:11:12
• 作者: takoyaki_umaaaa

ログメッセージ

・設定パレットのみ作りを修正
・設定パレットにて表示方法検討中
・設定情報保持 Class 作成

変更サマリ

• modified: HtmlDrawApp/.vs/HTMLDrawApp/v14/.suo
• modified: HtmlDrawApp/HTMLDrawApp/HTMLDrawApp.jsproj
• added: HtmlDrawApp/HTMLDrawApp/bin/ARM/Debug
• added: HtmlDrawApp/HTMLDrawApp/bin/ARM
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html
• added: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Settings.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/resources.pri
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/HTMLDrawApp.build.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/ReverseMap/resources.pri
• added: HtmlDrawApp/HTMLDrawApp/bld/ARM/Debug
• added: HtmlDrawApp/HTMLDrawApp/bld/ARM
• modified: HtmlDrawApp/HTMLDrawApp/bld/x64/Debug/layout.resfiles
• modified: HtmlDrawApp/HTMLDrawApp/bld/x64/Debug/layout.resfiles.intermediate
• modified: HtmlDrawApp/HTMLDrawApp/css/default.css
• modified: HtmlDrawApp/HTMLDrawApp/index.html
• added: HtmlDrawApp/HTMLDrawApp/js/Settings.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palette.js
• modified: HtmlDrawApp/HTMLDrawApp/js/palgroup.js
• modified: HtmlDrawApp/HTMLDrawApp.marker.tss
• added: HtmlDrawApp/doc/TextColorSample/背景固定.txt

差分

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css	(revision 49)
@@ -1,13 +1,9 @@
-// Webviewの表示スタイル定義
-//
-// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
-// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+/* 
+	Webviewの表示スタイル定義
 
-body {
-  /*スクロールとズームを有効にするにはこのコメントを解除します
-  タッチ操作: 操作;
-  */
-}
+	CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
+	ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+*/
 	*, *:before, *:after {
 		-webkit-box-sizing: border-box;
 		   -moz-box-sizing: border-box;
@@ -20,7 +16,7 @@
 				user-select: none;
 		font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
 		-webkit-font-smoothing: antialiased;
-//		-webkit-overflow-scrolling: touch;
+/*		-webkit-overflow-scrolling: touch;	*/
 	}
 
 	.buttonstyle {
@@ -112,6 +108,7 @@
 		margin: 0px;		padding: 5px;
 		border: 1px solid transparent;
 		border-radius: 8px;
+		background-color: #fff;
 		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.pallegend {
@@ -160,6 +157,20 @@
 	}
 
 
+
+	.palflex {
+		display: flex;
+		position: absolute;
+		left: 0px;		top: 0px;
+		width: 200%;	height: 100%;
+		margin: 0px;
+		padding: 15px;
+		border-radius: 5px;
+		background-color: gray;
+		opacity: 0.5;
+		text-decoration: none;	
+		justify-content: flex-start;
+	}
 	/* パレット要素の定義 */
 	.palbg,
 	.paltxtcol,
@@ -192,9 +203,23 @@
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(27, 158, 131, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 0 10px;		padding: 0;
 	}
 
+	.palbutton {
+		position: absolute;
+		left: 0;		top: 0;
+		width: 100%;	height: 100%;
+		margin: 0;		padding: 0;
+		border: 1px solid black;
+		background-color: inherit;
+		box-shadow: inherit;
+	}
 
+
 	/* フォーカス枠と拡大縮小・回転用マーカー定義 */
 	.scaler,
 	.roller,

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html	(revision 49)
@@ -199,12 +199,16 @@
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">設定</span><span class="paldesc2">変更</span>
 			</div>
-			<div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
-			<div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
-			<div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
-			<div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
-			<div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
-		</fieldset>
+			<div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
+				<ul class="palflex">
+					<li class="palset palset0" data-objid="palset0" data-palid="0"></li>
+					<li class="palset palset1" data-objid="palset1" data-palid="1"></li>
+					<li class="palset palset2" data-objid="palset2" data-palid="2"></li>
+					<li class="palset palset3" data-objid="palset3" data-palid="3"></li>
+					<li class="palset palset4" data-objid="palset4" data-palid="4"></li>
+				</ul>
+			</div>
+</fieldset>
 	</div> <!-- apparea -->
 
 	<script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
@@ -214,7 +218,7 @@
 	<script type="text/javascript" src="js/CommandObj.js"></script>
 	<script type="text/javascript" src="js/UI_parts.js"></script>
 	<script type="text/javascript" src="js/palgroup.js"></script>
-	<script type="text/javascript" src="js/palette.js"></script>
+	<script type="text/javascript" src="js/Palette.js"></script>
 	<script type="text/javascript" src="js/DispObj.js"></script>
 	<script type="text/javascript" src="js/ObjIDMgr.js"></script>
 	<script type="text/javascript" src="js/ThreadMessage.js"></script>

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Settings.js	(nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Settings.js	(revision 49)
@@ -0,0 +1,185 @@
+//
+// Application 設定情報保持
+//
+window.MyAppSettings = (function () {
+
+
+	// Private Variables ----------
+
+	var showSettingPalette = true;		// 設定パレットを表示する/しない
+	var initialSizeOfElement = 200;		// text/image dropしたときの要素の初期サイズ
+
+	var elementBorderLine = true;		// 識別のために要素の周りに線を引く/引かない
+	var elementAnimation = true;		// アニメーション停止/再開
+	var elementAspect = true;			// アスペクト比を保ったまま拡大する/しない
+	var scaleFont = true;				// 要素を拡大したときにフォントも拡大する/しない
+	var alwaysOffPaletteAnimation = false;	// パレットは常にアニメーションしない/する
+
+	var canvasWidth = 1000;				// キャンバス幅
+	var canvasHeight = 600;				// キャンバス高さ
+	var canvasColor = "#fff";			// キャンバスのデフォルトカラー
+
+
+
+	// Private Functions ---------
+
+	var funcShowElementBorderline = function () { funcChangeElementBorderline("1px solid black"); };
+	var funcHideElementBorderline = function () { funcChangeElementBorderline(""); };
+	var funcChangeElementBorderline = function (strborder) {
+		// 背景 (frameArea) に枠を設定
+		window.frameArea.DOMobject.style.border = strborder;
+
+		// 表示要素に枠を設定 (CSS Ruleとして設定)
+		let dispobjRuleBefore = ".DispObj { border: "
+		let dispobjRuleAfter = ";}";
+		let elestyle = document.getElementById('styledispobj');
+		elestyle.sheet.removeRule(0);
+		elestyle.sheet.insertRule(dispobjRuleBefore + strborder + dispobjRuleAfter, 0);
+	};
+
+	var funcRemoveFocusedObject = function () {
+		let focused = window.partsFocus.getFocusedObjid();
+		if (null != focused) {
+			// Delete command発行
+			var obj1 = new CCommandObj();
+			obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
+			window.postToWorker.post(obj1);
+		}
+	};
+
+
+
+	// Public I/F -----------------
+	return {
+		// 設定情報を Local Storage に保存 / 読み込み
+		saveSettings: function () {
+		},
+		loadSettings: function () {
+		},
+
+
+		// 設定情報 ではないが……
+		removeFocusedObject: function () { funcRemoveFocusedObject(); },
+
+
+		// 設定パレット表示/非表示設定
+		getShowHideSettingPalette: function () { return showSettingPalette; },
+		setShowHideSettingPalette: function (palette) {
+			console.log('設定変更  設定パレット表示=' + palette);
+			if (true === palette)	showSettingPalette = true;
+			else					showSettingPalette = false;
+
+			// 設定を反映
+			window.CSSPalGroup.showSettingPalette(showSettingPalette);
+		},
+
+		// 画像,Text dropでの要素の初期サイズ (長辺の長さ)
+		getInitialSizeOfElement: function () { return initialSizeOfElement; },
+		setInitialSizeOfElement: function (num) {
+			console.log('設定変更  要素初期サイズ=' + num);
+			let size = parseInt(num);
+			// あまり小さいと操作できなくなるので
+			if (5 <= size) initialSizeOfElement = size;
+			else {
+				console.error('設定変更 要素初期サイズ指定エラー 指定=' + num + '\n前回の設定を保持 = ' + initialSizeOfElement);
+			}
+		},
+
+		// 識別のための境界線を表示する/しない設定
+		getElementBorderLine: function () { return elementBorderLine; },
+		setElementBorderLine: function (borderline) {
+			console.log('設定変更  要素に枠を表示=' + borderline);
+			if (true === borderline)		elementBorderLine = true;
+			else							elementBorderLine = false;
+
+			// 設定を反映
+			if (true === elementBorderLine) funcShowElementBorderline();
+			else							funcHideElementBorderline();
+		},
+
+		// アニメーションする/しない設定
+		getElementAnimation: function () { return elementAnimation; },
+		setElementAnimation: function (anime) {
+			console.log('設定変更  アニメーション再生=' + anime);
+			if (true === anime) elementAnimation = true;
+			else				elementAnimation = false;
+
+			// 設定を反映
+
+			// DispObjとPalette要素にPauseAnimation css classを付与する
+			if (true === elementAnimation) {
+				window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
+				if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
+					window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
+			}
+			else {
+				window.ObjIDMgr.addClassToAllObj('PauseAnimation');
+				window.CSSPalette.addClassToActionPalettes('PauseAnimation');
+			}
+		},
+
+		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
+		getElementAspect: function () { return elementAspect; },
+		setElementAspect: function (aspect) {
+			console.log('設定変更  アスペクト比を保つ=' + aspect);
+			if (true === aspect)	elementAspect = true;
+			else					elementAspect = false;
+		},
+
+		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
+		getScaleFont: function (scale) { return scaleFont; },
+		setScaleFont: function () {
+			console.log('設定変更  要素拡大でフォントも拡大=' + scale);
+			if (true === scale) scaleFont = true;
+			else				scaleFont = false;
+		},
+
+		// パレット上の要素は常にアニメーションをしない/する設定
+		getAlwaysOffPaletteAnimation: function () { return alwaysOffPaletteAnimation; },
+		setAlwaysOffPaletteAnimation: function (palani) {
+			console.log('設定変更  パレット要素は常にアニメーションしない=' + palani);
+			if (true === palani)	alwaysOffPaletteAnimation = true;
+			else					alwaysOffPaletteAnimation = false;
+
+			// 設定を反映
+			if (true === alwaysOffPaletteAnimation) {
+				window.CSSPalette.addClassToActionPalettes('PauseAnimation');
+			}
+			else {
+				window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
+			}
+		},
+
+		// キャンバス幅設定 (pixcel)
+		getCanvasWidth: function () { return canvasWidth; },
+		setCanvasWidth: function (width) {
+			console.log('設定変更  キャンバス幅=' + width);
+			let size = parseInt(width);
+			if (5 <= size) canvasWidth = size;
+			else {
+				console.error('設定変更 キャンバス幅指定エラー 指定=' + width + '\n前回の設定を保持 = ' + canvasWidth);
+			}
+		},
+
+		// キャンバス高さ設定 (pixcel)
+		getCanvasHeight: function () { return canvasHeight; },
+		setCanvasHeight: function (height) {
+			console.log('設定変更  キャンバス高さ=' + height);
+			let size = parseInt(height);
+			if (5 <= size) canvasHeight = size;
+			else {
+				console.error('設定変更 キャンバス高さ指定エラー 指定=' + height + '\n前回の設定を保持 = ' + canvasHeight);
+			}
+		},
+
+		// キャンバスのデフォルト背景色
+		getCanvasColor: function () { return canvasColor; },
+		setCanvasColor: function (color) {
+			console.log('設定変更  キャンバス背景色=' + color);
+			// 面倒なのでそのまま入れる
+			canvasColor = color;
+		}
+	};
+
+
+})();

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js	(revision 49)
@@ -6,11 +6,307 @@
 // ・Target要素に自objidと同名のCSS class追加
 // ・外部からのDropによる text, image, css 読み込み
 
+class PaletteFunction{
+	constructor() {
+		this.paletteFunction = null;
+		this.dataScheme = null;
+		this.description = null;
+		this.replaceObject = null;
+	}
+
+	removeAllInformation() {
+		this.removeFunction();
+		this.removeImage();
+		this.removeDescription();
+		this.replaceObject = null;
+	}
+
+
+	// 機能の登録・削除・実行 ------------------
+
+	registerFunction(func) {
+		if (null != this.paletteFunction) {
+			console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ',  今回の機能 = ' + func.name);
+			// ひとまず処理継続
+		}
+		this.paletteFunction = func;
+		return true;
+	}
+	removeFunction() {
+		this.paletteFunction = null;
+	}
+	getFunction() {
+		return this.paletteFunction;
+	}
+	executeFunction() {
+		if (null == this.paletteFunction) {
+			console.error('パレット機能登録前に呼び出そうとした');
+			return false;
+		}
+		return this.paletteFunction();
+	}
+
+	// executeFunction実行後に PaletteFunction の Instance を入れ替える設定
+	// (Toggle button に使用)
+	setObjectToReplaceAfterExecution(object) {
+		this.replaceObject = object;
+	}
+	getObjectToReplaceAfterExecution() {
+		return this.replaceObject;
+	}
+
+
+	// 機能に関連した画像・説明文 登録・取得 ------------
+	registerImage(dataScheme) {
+		if (null != this.dataScheme) {
+			console.error('パレット機能 Imageの上書き登録');
+			// ひとまず処理継続
+		}
+		this.dataScheme = dataScheme;
+	}
+	removeImage() {
+		this.dataScheme = null;
+	}
+	getImage() {
+		return this.dataScheme;
+	}
+
+	registerDescription(text) {
+		if (null != this.description) {
+			console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ',  今回の説明 = ' + this.description);
+			// ひとまず処理継続
+		}
+		this.description = text;
+	}
+	removeDescription() {
+		this.description = null;
+	}
+	getDescription() {
+		return this.description;
+	}
+}	// class PaletteFunction
+
+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
+// 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
+var paletteFunctionObjects = (function () {
+	let paletteFunction = [];
+
+	var defineFunctions = function () {
+		let cnt = 0;
+		// 設定パレット非表示設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
+		paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		// 選択要素削除
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
+		paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		// 枠の表示/非表示
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
+		paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
+		paletteFunction[cnt].registerDescription("識別用の枠を消します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// アニメーションする/しない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
+		paletteFunction[cnt].registerDescription("アニメーションを停止します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
+		paletteFunction[cnt].registerDescription("アニメーションを再開します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// パレット上の要素は常にアニメーションをしない/する設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
+		paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
+		paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
+		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
+		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
+		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
+		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
+		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
+		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+	};
+	defineFunctions();
+
+	return {
+		getItem: function (num) {
+			if (paletteFunction.length <= num) {
+				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + paletteFunction.length);
+				return null;
+			}
+			return paletteFunction[num];
+		}
+	};
+})();
+
+class PaletteShape {
+	constructor() {
+		this.DOMobject = null;
+		this.paletteFunction = null;
+	}
+
+	// DOM 要素を作成してこの Instance の表示要素として登録
+	createButtonElement(parent) {
+		if (null != this.DOMobject) {
+			console.error('パレットボタン  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+		}
+
+		this.DOMobject = document.createElement('div');
+		this.setDomHandler();
+
+		// 引数 Element の Child として登録
+		this.setPalentElement(parent);
+
+		return true;
+	}
+
+	// 既に存在する Element をこの Instance の表示要素として登録する
+	setButtonElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン  ボタン要素設定エラー  引数の要素が未設定');
+			return false;
+		}
+		if (null != this.DOMobject) {
+			console.error('パレットボタン  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
+		}
+		this.DOMobject = ele;
+		this.setDomHandler();
+		return true;
+	}
+
+	// スタイル定義は CSS file で指定する
+
+
+	// ボタンを引数 Element の Child として登録する
+	// Palent は position:static 以外の指定が必須
+	// Palent の left, top, width, height に合わせたサイズで表示する
+	setPalentElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン  親要素設定エラー  引数の親要素が未設定');
+			return false;
+		}
+		if (null == this.DOMobject) {
+			console.error('パレットボタン  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			return false;
+		}
+
+		if (null == this.DOMobject.parentNode)	console.log('パレットボタン  親要素設定未設定状態');
+		else									this.DOMobject.parentNode.removeChild(this.DOMobject);
+
+		// 最も手前に追加
+		// DOM tree に入ったタイミングで CSS 設定が適用される
+		// (親要素の位置とサイズにフィットする)
+		ele.appendChild(this.DOMobject);
+		return true;
+	}
+
+	// ボタン Click で実行する機能を登録
+	setPaletteFunction(palfunc) {
+		if (null != this.paletteFunction) {
+			console.error('パレットボタンへの機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+			// ひとまず処理継続
+		}
+		this.paletteFunction = palfunc;
+
+		// 表示要素の更新
+		this.DOMobject.title = this.paletteFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
+		this.DOMobject.style.backgroundSize = 'cover';
+	}
+	clearPaletteFunction() {
+		this.paletteFunction = null;
+		this.DOMobject.title = null;
+		this.DOMobject.style.backgroundImage = 'none';
+	}
+
+
+	// Private 関数 ------------------------
+
+	setDomHandler() {
+		this.DOMobject.classList.add('palbutton');
+		this.DOMobject.dataset.objid = 'palbutton';
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
+	}
+
+
+	// Event handler ------------------------
+
+	onMouseDownPaletteShape(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+	}
+	onMouseUpPaletteShape(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		// 登録処理実行
+		this.paletteFunction.executeFunction();
+
+		// Toggle button 処理
+		let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
+		if (null != replaceObject) {
+			this.clearPaletteFunction();
+			this.setPaletteFunction(replaceObject);
+		}
+	}
+
+}
+
 class CSSPalette {
 	constructor() {
-		this.DOMobject = [];
 		this.draggingDOM = null;
-	}
+		}
 
 	debuglog(str) {
 		debuglog('【CSSPalette】 ' + str);
@@ -63,6 +359,25 @@
 			this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
 		// 設定パレット
+		// (リファクタにより、設定パレットのみ処理を別物にしている)
+		let palfuncs = [
+			paletteFunctionObjects.getItem(0),	//	Show/Hide Setting palette
+			paletteFunctionObjects.getItem(1),	//	Remove focused element
+			paletteFunctionObjects.getItem(2),	//	Toggle element borderline
+			paletteFunctionObjects.getItem(4),	//	Toggle stop/play animations
+			paletteFunctionObjects.getItem(6),	//	Toggle always Off Palette animations
+			paletteFunctionObjects.getItem(8),	//	Toggle Aspect ratio
+			paletteFunctionObjects.getItem(10)	//	Toggle Scale font size
+		];
+		let elePalset = document.getElementsByClassName('palset');	// 土台 Element 取得
+		this.palSetting = [];
+		for (let cnt = 0; cnt < elePalset.length; cnt++) {
+			this.palSetting[cnt] = new PaletteShape();
+			this.palSetting[cnt].createButtonElement(elePalset[cnt]);
+			this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
+		}
+/*
+		// 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
 		this.DOMpalset = document.getElementsByClassName('palset');
 		for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
 			this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -75,6 +390,7 @@
 			this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
 			this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 		}
+*/
 	}
 
 	// 操作関数 ----------------------------
@@ -180,6 +496,24 @@
 	}
 
 
+
+	// Palette に機能が登録されているか
+	// (Palette button 押下で実行する機能の存在可否)
+	hasFunction() {
+		let ret = false;
+		if (null != this.paletteFunction)
+			ret = true;
+		return ret;
+	}
+
+	executeFunction() {
+		if (null == this.paletteFunction) {
+			console.error('パレット登録機能の実行に失敗  機能が登録されていません' + this.DOMobject);
+			return false;
+		}
+
+	}
+
 	// Event handler -----------------------
 
 	// Drag&Drop event : Application外からのfileのやり取り
@@ -347,7 +681,7 @@
 
 
 
-
+/*
 	onMouseDownSetting(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
@@ -396,7 +730,7 @@
 				break;
 		}
 	}
+*/
 
 
-
 } // class CSSPalette

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js	(revision 49)
@@ -16,7 +16,7 @@
 		this.typeAction = 2;
 		this.typeSettings = 3;
 
-		this.DOMobject = [];	// bg,text,action
+		this.DOMobject = [];	// bg,text,action,settings
 	}
 	debuglog(str) {
 		debuglog('【PalGroup】 ' + str);

--- HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css	(revision 49)
@@ -1,13 +1,9 @@
-// Webviewの表示スタイル定義
-//
-// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
-// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+/* 
+	Webviewの表示スタイル定義
 
-body {
-  /*スクロールとズームを有効にするにはこのコメントを解除します
-  タッチ操作: 操作;
-  */
-}
+	CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
+	ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
+*/
 	*, *:before, *:after {
 		-webkit-box-sizing: border-box;
 		   -moz-box-sizing: border-box;
@@ -20,7 +16,7 @@
 				user-select: none;
 		font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
 		-webkit-font-smoothing: antialiased;
-//		-webkit-overflow-scrolling: touch;
+/*		-webkit-overflow-scrolling: touch;	*/
 	}
 
 	.buttonstyle {
@@ -112,6 +108,7 @@
 		margin: 0px;		padding: 5px;
 		border: 1px solid transparent;
 		border-radius: 8px;
+		background-color: #fff;
 		box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
 	}
 	.pallegend {
@@ -160,6 +157,20 @@
 	}
 
 
+
+	.palflex {
+		display: flex;
+		position: absolute;
+		left: 0px;		top: 0px;
+		width: 200%;	height: 100%;
+		margin: 0px;
+		padding: 15px;
+		border-radius: 5px;
+		background-color: gray;
+		opacity: 0.5;
+		text-decoration: none;	
+		justify-content: flex-start;
+	}
 	/* パレット要素の定義 */
 	.palbg,
 	.paltxtcol,
@@ -192,9 +203,23 @@
 		border: 1px solid rgba(0,0,0,0.2);
 		background-color: rgba(27, 158, 131, 0.6);
 		box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
+		/* ********************** */
+		position: relative;
+		width: 60px;	height: 60px;
+		margin: 0 10px;		padding: 0;
 	}
 
+	.palbutton {
+		position: absolute;
+		left: 0;		top: 0;
+		width: 100%;	height: 100%;
+		margin: 0;		padding: 0;
+		border: 1px solid black;
+		background-color: inherit;
+		box-shadow: inherit;
+	}
 
+
 	/* フォーカス枠と拡大縮小・回転用マーカー定義 */
 	.scaler,
 	.roller,

--- HtmlDrawApp/HTMLDrawApp/index.html	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/index.html	(revision 49)
@@ -199,12 +199,16 @@
 			<div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
 				<span class="paldesc1">設定</span><span class="paldesc2">変更</span>
 			</div>
-			<div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
-			<div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
-			<div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
-			<div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
-			<div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
-		</fieldset>
+			<div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
+				<ul class="palflex">
+					<li class="palset palset0" data-objid="palset0" data-palid="0"></li>
+					<li class="palset palset1" data-objid="palset1" data-palid="1"></li>
+					<li class="palset palset2" data-objid="palset2" data-palid="2"></li>
+					<li class="palset palset3" data-objid="palset3" data-palid="3"></li>
+					<li class="palset palset4" data-objid="palset4" data-palid="4"></li>
+				</ul>
+			</div>
+</fieldset>
 	</div> <!-- apparea -->
 
 	<script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
@@ -214,7 +218,7 @@
 	<script type="text/javascript" src="js/CommandObj.js"></script>
 	<script type="text/javascript" src="js/UI_parts.js"></script>
 	<script type="text/javascript" src="js/palgroup.js"></script>
-	<script type="text/javascript" src="js/palette.js"></script>
+	<script type="text/javascript" src="js/Palette.js"></script>
 	<script type="text/javascript" src="js/DispObj.js"></script>
 	<script type="text/javascript" src="js/ObjIDMgr.js"></script>
 	<script type="text/javascript" src="js/ThreadMessage.js"></script>

--- HtmlDrawApp/HTMLDrawApp/js/Settings.js	(nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/js/Settings.js	(revision 49)
@@ -0,0 +1,185 @@
+//
+// Application 設定情報保持
+//
+window.MyAppSettings = (function () {
+
+
+	// Private Variables ----------
+
+	var showSettingPalette = true;		// 設定パレットを表示する/しない
+	var initialSizeOfElement = 200;		// text/image dropしたときの要素の初期サイズ
+
+	var elementBorderLine = true;		// 識別のために要素の周りに線を引く/引かない
+	var elementAnimation = true;		// アニメーション停止/再開
+	var elementAspect = true;			// アスペクト比を保ったまま拡大する/しない
+	var scaleFont = true;				// 要素を拡大したときにフォントも拡大する/しない
+	var alwaysOffPaletteAnimation = false;	// パレットは常にアニメーションしない/する
+
+	var canvasWidth = 1000;				// キャンバス幅
+	var canvasHeight = 600;				// キャンバス高さ
+	var canvasColor = "#fff";			// キャンバスのデフォルトカラー
+
+
+
+	// Private Functions ---------
+
+	var funcShowElementBorderline = function () { funcChangeElementBorderline("1px solid black"); };
+	var funcHideElementBorderline = function () { funcChangeElementBorderline(""); };
+	var funcChangeElementBorderline = function (strborder) {
+		// 背景 (frameArea) に枠を設定
+		window.frameArea.DOMobject.style.border = strborder;
+
+		// 表示要素に枠を設定 (CSS Ruleとして設定)
+		let dispobjRuleBefore = ".DispObj { border: "
+		let dispobjRuleAfter = ";}";
+		let elestyle = document.getElementById('styledispobj');
+		elestyle.sheet.removeRule(0);
+		elestyle.sheet.insertRule(dispobjRuleBefore + strborder + dispobjRuleAfter, 0);
+	};
+
+	var funcRemoveFocusedObject = function () {
+		let focused = window.partsFocus.getFocusedObjid();
+		if (null != focused) {
+			// Delete command発行
+			var obj1 = new CCommandObj();
+			obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
+			window.postToWorker.post(obj1);
+		}
+	};
+
+
+
+	// Public I/F -----------------
+	return {
+		// 設定情報を Local Storage に保存 / 読み込み
+		saveSettings: function () {
+		},
+		loadSettings: function () {
+		},
+
+
+		// 設定情報 ではないが……
+		removeFocusedObject: function () { funcRemoveFocusedObject(); },
+
+
+		// 設定パレット表示/非表示設定
+		getShowHideSettingPalette: function () { return showSettingPalette; },
+		setShowHideSettingPalette: function (palette) {
+			console.log('設定変更  設定パレット表示=' + palette);
+			if (true === palette)	showSettingPalette = true;
+			else					showSettingPalette = false;
+
+			// 設定を反映
+			window.CSSPalGroup.showSettingPalette(showSettingPalette);
+		},
+
+		// 画像,Text dropでの要素の初期サイズ (長辺の長さ)
+		getInitialSizeOfElement: function () { return initialSizeOfElement; },
+		setInitialSizeOfElement: function (num) {
+			console.log('設定変更  要素初期サイズ=' + num);
+			let size = parseInt(num);
+			// あまり小さいと操作できなくなるので
+			if (5 <= size) initialSizeOfElement = size;
+			else {
+				console.error('設定変更 要素初期サイズ指定エラー 指定=' + num + '\n前回の設定を保持 = ' + initialSizeOfElement);
+			}
+		},
+
+		// 識別のための境界線を表示する/しない設定
+		getElementBorderLine: function () { return elementBorderLine; },
+		setElementBorderLine: function (borderline) {
+			console.log('設定変更  要素に枠を表示=' + borderline);
+			if (true === borderline)		elementBorderLine = true;
+			else							elementBorderLine = false;
+
+			// 設定を反映
+			if (true === elementBorderLine) funcShowElementBorderline();
+			else							funcHideElementBorderline();
+		},
+
+		// アニメーションする/しない設定
+		getElementAnimation: function () { return elementAnimation; },
+		setElementAnimation: function (anime) {
+			console.log('設定変更  アニメーション再生=' + anime);
+			if (true === anime) elementAnimation = true;
+			else				elementAnimation = false;
+
+			// 設定を反映
+
+			// DispObjとPalette要素にPauseAnimation css classを付与する
+			if (true === elementAnimation) {
+				window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
+				if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
+					window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
+			}
+			else {
+				window.ObjIDMgr.addClassToAllObj('PauseAnimation');
+				window.CSSPalette.addClassToActionPalettes('PauseAnimation');
+			}
+		},
+
+		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
+		getElementAspect: function () { return elementAspect; },
+		setElementAspect: function (aspect) {
+			console.log('設定変更  アスペクト比を保つ=' + aspect);
+			if (true === aspect)	elementAspect = true;
+			else					elementAspect = false;
+		},
+
+		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
+		getScaleFont: function (scale) { return scaleFont; },
+		setScaleFont: function () {
+			console.log('設定変更  要素拡大でフォントも拡大=' + scale);
+			if (true === scale) scaleFont = true;
+			else				scaleFont = false;
+		},
+
+		// パレット上の要素は常にアニメーションをしない/する設定
+		getAlwaysOffPaletteAnimation: function () { return alwaysOffPaletteAnimation; },
+		setAlwaysOffPaletteAnimation: function (palani) {
+			console.log('設定変更  パレット要素は常にアニメーションしない=' + palani);
+			if (true === palani)	alwaysOffPaletteAnimation = true;
+			else					alwaysOffPaletteAnimation = false;
+
+			// 設定を反映
+			if (true === alwaysOffPaletteAnimation) {
+				window.CSSPalette.addClassToActionPalettes('PauseAnimation');
+			}
+			else {
+				window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
+			}
+		},
+
+		// キャンバス幅設定 (pixcel)
+		getCanvasWidth: function () { return canvasWidth; },
+		setCanvasWidth: function (width) {
+			console.log('設定変更  キャンバス幅=' + width);
+			let size = parseInt(width);
+			if (5 <= size) canvasWidth = size;
+			else {
+				console.error('設定変更 キャンバス幅指定エラー 指定=' + width + '\n前回の設定を保持 = ' + canvasWidth);
+			}
+		},
+
+		// キャンバス高さ設定 (pixcel)
+		getCanvasHeight: function () { return canvasHeight; },
+		setCanvasHeight: function (height) {
+			console.log('設定変更  キャンバス高さ=' + height);
+			let size = parseInt(height);
+			if (5 <= size) canvasHeight = size;
+			else {
+				console.error('設定変更 キャンバス高さ指定エラー 指定=' + height + '\n前回の設定を保持 = ' + canvasHeight);
+			}
+		},
+
+		// キャンバスのデフォルト背景色
+		getCanvasColor: function () { return canvasColor; },
+		setCanvasColor: function (color) {
+			console.log('設定変更  キャンバス背景色=' + color);
+			// 面倒なのでそのまま入れる
+			canvasColor = color;
+		}
+	};
+
+
+})();

--- HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js	(revision 49)
@@ -6,11 +6,307 @@
 // ・Target要素に自objidと同名のCSS class追加
 // ・外部からのDropによる text, image, css 読み込み
 
+class PaletteFunction{
+	constructor() {
+		this.paletteFunction = null;
+		this.dataScheme = null;
+		this.description = null;
+		this.replaceObject = null;
+	}
+
+	removeAllInformation() {
+		this.removeFunction();
+		this.removeImage();
+		this.removeDescription();
+		this.replaceObject = null;
+	}
+
+
+	// 機能の登録・削除・実行 ------------------
+
+	registerFunction(func) {
+		if (null != this.paletteFunction) {
+			console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ',  今回の機能 = ' + func.name);
+			// ひとまず処理継続
+		}
+		this.paletteFunction = func;
+		return true;
+	}
+	removeFunction() {
+		this.paletteFunction = null;
+	}
+	getFunction() {
+		return this.paletteFunction;
+	}
+	executeFunction() {
+		if (null == this.paletteFunction) {
+			console.error('パレット機能登録前に呼び出そうとした');
+			return false;
+		}
+		return this.paletteFunction();
+	}
+
+	// executeFunction実行後に PaletteFunction の Instance を入れ替える設定
+	// (Toggle button に使用)
+	setObjectToReplaceAfterExecution(object) {
+		this.replaceObject = object;
+	}
+	getObjectToReplaceAfterExecution() {
+		return this.replaceObject;
+	}
+
+
+	// 機能に関連した画像・説明文 登録・取得 ------------
+	registerImage(dataScheme) {
+		if (null != this.dataScheme) {
+			console.error('パレット機能 Imageの上書き登録');
+			// ひとまず処理継続
+		}
+		this.dataScheme = dataScheme;
+	}
+	removeImage() {
+		this.dataScheme = null;
+	}
+	getImage() {
+		return this.dataScheme;
+	}
+
+	registerDescription(text) {
+		if (null != this.description) {
+			console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ',  今回の説明 = ' + this.description);
+			// ひとまず処理継続
+		}
+		this.description = text;
+	}
+	removeDescription() {
+		this.description = null;
+	}
+	getDescription() {
+		return this.description;
+	}
+}	// class PaletteFunction
+
+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
+// 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
+var paletteFunctionObjects = (function () {
+	let paletteFunction = [];
+
+	var defineFunctions = function () {
+		let cnt = 0;
+		// 設定パレット非表示設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
+		paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		// 選択要素削除
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
+		paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		// 枠の表示/非表示
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
+		paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
+		paletteFunction[cnt].registerDescription("識別用の枠を消します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// アニメーションする/しない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
+		paletteFunction[cnt].registerDescription("アニメーションを停止します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
+		paletteFunction[cnt].registerDescription("アニメーションを再開します。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// パレット上の要素は常にアニメーションをしない/する設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
+		paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
+		paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
+		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
+		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
+		paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
+		paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+		// div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
+		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		cnt++;
+		paletteFunction[cnt] = new PaletteFunction();
+		paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
+		paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
+		paletteFunction[cnt].registerImage("images/StoreLogo.png");
+		paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
+		paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
+		cnt++;
+	};
+	defineFunctions();
+
+	return {
+		getItem: function (num) {
+			if (paletteFunction.length <= num) {
+				console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ',  len = ' + paletteFunction.length);
+				return null;
+			}
+			return paletteFunction[num];
+		}
+	};
+})();
+
+class PaletteShape {
+	constructor() {
+		this.DOMobject = null;
+		this.paletteFunction = null;
+	}
+
+	// DOM 要素を作成してこの Instance の表示要素として登録
+	createButtonElement(parent) {
+		if (null != this.DOMobject) {
+			console.error('パレットボタン  ボタン要素作成エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = 新規');
+		}
+
+		this.DOMobject = document.createElement('div');
+		this.setDomHandler();
+
+		// 引数 Element の Child として登録
+		this.setPalentElement(parent);
+
+		return true;
+	}
+
+	// 既に存在する Element をこの Instance の表示要素として登録する
+	setButtonElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン  ボタン要素設定エラー  引数の要素が未設定');
+			return false;
+		}
+		if (null != this.DOMobject) {
+			console.error('パレットボタン  ボタン要素設定エラー  要素の上書き\n以前のElement = ' + this.DOMobject + ',  今回のElement = ' + ele);
+		}
+		this.DOMobject = ele;
+		this.setDomHandler();
+		return true;
+	}
+
+	// スタイル定義は CSS file で指定する
+
+
+	// ボタンを引数 Element の Child として登録する
+	// Palent は position:static 以外の指定が必須
+	// Palent の left, top, width, height に合わせたサイズで表示する
+	setPalentElement(ele) {
+		if (null == ele) {
+			console.error('パレットボタン  親要素設定エラー  引数の親要素が未設定');
+			return false;
+		}
+		if (null == this.DOMobject) {
+			console.error('パレットボタン  親要素設定エラー  ボタン要素が登録されていません parent = ' + ele);
+			return false;
+		}
+
+		if (null == this.DOMobject.parentNode)	console.log('パレットボタン  親要素設定未設定状態');
+		else									this.DOMobject.parentNode.removeChild(this.DOMobject);
+
+		// 最も手前に追加
+		// DOM tree に入ったタイミングで CSS 設定が適用される
+		// (親要素の位置とサイズにフィットする)
+		ele.appendChild(this.DOMobject);
+		return true;
+	}
+
+	// ボタン Click で実行する機能を登録
+	setPaletteFunction(palfunc) {
+		if (null != this.paletteFunction) {
+			console.error('パレットボタンへの機能設定エラー  上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ',  今回の機能 = ' + palfunc.getFunction.name);
+			// ひとまず処理継続
+		}
+		this.paletteFunction = palfunc;
+
+		// 表示要素の更新
+		this.DOMobject.title = this.paletteFunction.getDescription();
+		this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
+		this.DOMobject.style.backgroundSize = 'cover';
+	}
+	clearPaletteFunction() {
+		this.paletteFunction = null;
+		this.DOMobject.title = null;
+		this.DOMobject.style.backgroundImage = 'none';
+	}
+
+
+	// Private 関数 ------------------------
+
+	setDomHandler() {
+		this.DOMobject.classList.add('palbutton');
+		this.DOMobject.dataset.objid = 'palbutton';
+		this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
+		this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
+		this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
+		this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
+	}
+
+
+	// Event handler ------------------------
+
+	onMouseDownPaletteShape(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+	}
+	onMouseUpPaletteShape(evt) {
+		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
+		evt.preventDefault();				// 要素既定のdefault動作を止める
+
+		// 登録処理実行
+		this.paletteFunction.executeFunction();
+
+		// Toggle button 処理
+		let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
+		if (null != replaceObject) {
+			this.clearPaletteFunction();
+			this.setPaletteFunction(replaceObject);
+		}
+	}
+
+}
+
 class CSSPalette {
 	constructor() {
-		this.DOMobject = [];
 		this.draggingDOM = null;
-	}
+		}
 
 	debuglog(str) {
 		debuglog('【CSSPalette】 ' + str);
@@ -63,6 +359,25 @@
 			this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
 		}
 		// 設定パレット
+		// (リファクタにより、設定パレットのみ処理を別物にしている)
+		let palfuncs = [
+			paletteFunctionObjects.getItem(0),	//	Show/Hide Setting palette
+			paletteFunctionObjects.getItem(1),	//	Remove focused element
+			paletteFunctionObjects.getItem(2),	//	Toggle element borderline
+			paletteFunctionObjects.getItem(4),	//	Toggle stop/play animations
+			paletteFunctionObjects.getItem(6),	//	Toggle always Off Palette animations
+			paletteFunctionObjects.getItem(8),	//	Toggle Aspect ratio
+			paletteFunctionObjects.getItem(10)	//	Toggle Scale font size
+		];
+		let elePalset = document.getElementsByClassName('palset');	// 土台 Element 取得
+		this.palSetting = [];
+		for (let cnt = 0; cnt < elePalset.length; cnt++) {
+			this.palSetting[cnt] = new PaletteShape();
+			this.palSetting[cnt].createButtonElement(elePalset[cnt]);
+			this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
+		}
+/*
+		// 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
 		this.DOMpalset = document.getElementsByClassName('palset');
 		for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
 			this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -75,6 +390,7 @@
 			this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
 			this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
 		}
+*/
 	}
 
 	// 操作関数 ----------------------------
@@ -180,6 +496,24 @@
 	}
 
 
+
+	// Palette に機能が登録されているか
+	// (Palette button 押下で実行する機能の存在可否)
+	hasFunction() {
+		let ret = false;
+		if (null != this.paletteFunction)
+			ret = true;
+		return ret;
+	}
+
+	executeFunction() {
+		if (null == this.paletteFunction) {
+			console.error('パレット登録機能の実行に失敗  機能が登録されていません' + this.DOMobject);
+			return false;
+		}
+
+	}
+
 	// Event handler -----------------------
 
 	// Drag&Drop event : Application外からのfileのやり取り
@@ -347,7 +681,7 @@
 
 
 
-
+/*
 	onMouseDownSetting(evt) {
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
@@ -396,7 +730,7 @@
 				break;
 		}
 	}
+*/
 
 
-
 } // class CSSPalette

--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 48)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js	(revision 49)
@@ -16,7 +16,7 @@
 		this.typeAction = 2;
 		this.typeSettings = 3;
 
-		this.DOMobject = [];	// bg,text,action
+		this.DOMobject = [];	// bg,text,action,settings
 	}
 	debuglog(str) {
 		debuglog('【PalGroup】 ' + str);

--- HtmlDrawApp/doc/TextColorSample/背景固定.txt	(nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/背景固定.txt	(revision 49)
@@ -0,0 +1,3 @@
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;