• R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

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


Commit MetaInfo

Revision49 (tree)
Time2016-12-12 19:11:12
Authortakoyaki_umaaaa

Log Message

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

Change Summary

Incremental Difference

--- 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 @@
1-// Webviewの表示スタイル定義
2-//
3-// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
4-// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
1+/*
2+ Webviewの表示スタイル定義
53
6-body {
7- /*スクロールとズームを有効にするにはこのコメントを解除します
8- タッチ操作: 操作;
9- */
10-}
4+ CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
5+ ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
6+*/
117 *, *:before, *:after {
128 -webkit-box-sizing: border-box;
139 -moz-box-sizing: border-box;
@@ -20,7 +16,7 @@
2016 user-select: none;
2117 font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, MS P明朝, MS 明朝, serif;
2218 -webkit-font-smoothing: antialiased;
23-// -webkit-overflow-scrolling: touch;
19+/* -webkit-overflow-scrolling: touch; */
2420 }
2521
2622 .buttonstyle {
@@ -112,6 +108,7 @@
112108 margin: 0px; padding: 5px;
113109 border: 1px solid transparent;
114110 border-radius: 8px;
111+ background-color: #fff;
115112 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
116113 }
117114 .pallegend {
@@ -160,6 +157,20 @@
160157 }
161158
162159
160+
161+ .palflex {
162+ display: flex;
163+ position: absolute;
164+ left: 0px; top: 0px;
165+ width: 200%; height: 100%;
166+ margin: 0px;
167+ padding: 15px;
168+ border-radius: 5px;
169+ background-color: gray;
170+ opacity: 0.5;
171+ text-decoration: none;
172+ justify-content: flex-start;
173+ }
163174 /* パレット要素の定義 */
164175 .palbg,
165176 .paltxtcol,
@@ -192,9 +203,23 @@
192203 border: 1px solid rgba(0,0,0,0.2);
193204 background-color: rgba(27, 158, 131, 0.6);
194205 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
206+ /* ********************** */
207+ position: relative;
208+ width: 60px; height: 60px;
209+ margin: 0 10px; padding: 0;
195210 }
196211
212+ .palbutton {
213+ position: absolute;
214+ left: 0; top: 0;
215+ width: 100%; height: 100%;
216+ margin: 0; padding: 0;
217+ border: 1px solid black;
218+ background-color: inherit;
219+ box-shadow: inherit;
220+ }
197221
222+
198223 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
199224 .scaler,
200225 .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 @@
199199 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
200200 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
201201 </div>
202- <div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
203- <div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
204- <div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
205- <div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
206- <div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
207- </fieldset>
202+ <div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
203+ <ul class="palflex">
204+ <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
205+ <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
206+ <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
207+ <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
208+ <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
209+ </ul>
210+ </div>
211+</fieldset>
208212 </div> <!-- apparea -->
209213
210214 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
@@ -214,7 +218,7 @@
214218 <script type="text/javascript" src="js/CommandObj.js"></script>
215219 <script type="text/javascript" src="js/UI_parts.js"></script>
216220 <script type="text/javascript" src="js/palgroup.js"></script>
217- <script type="text/javascript" src="js/palette.js"></script>
221+ <script type="text/javascript" src="js/Palette.js"></script>
218222 <script type="text/javascript" src="js/DispObj.js"></script>
219223 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
220224 <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 @@
1+//
2+// Application 設定情報保持
3+//
4+window.MyAppSettings = (function () {
5+
6+
7+ // Private Variables ----------
8+
9+ var showSettingPalette = true; // 設定パレットを表示する/しない
10+ var initialSizeOfElement = 200; // text/image dropしたときの要素の初期サイズ
11+
12+ var elementBorderLine = true; // 識別のために要素の周りに線を引く/引かない
13+ var elementAnimation = true; // アニメーション停止/再開
14+ var elementAspect = true; // アスペクト比を保ったまま拡大する/しない
15+ var scaleFont = true; // 要素を拡大したときにフォントも拡大する/しない
16+ var alwaysOffPaletteAnimation = false; // パレットは常にアニメーションしない/する
17+
18+ var canvasWidth = 1000; // キャンバス幅
19+ var canvasHeight = 600; // キャンバス高さ
20+ var canvasColor = "#fff"; // キャンバスのデフォルトカラー
21+
22+
23+
24+ // Private Functions ---------
25+
26+ var funcShowElementBorderline = function () { funcChangeElementBorderline("1px solid black"); };
27+ var funcHideElementBorderline = function () { funcChangeElementBorderline(""); };
28+ var funcChangeElementBorderline = function (strborder) {
29+ // 背景 (frameArea) に枠を設定
30+ window.frameArea.DOMobject.style.border = strborder;
31+
32+ // 表示要素に枠を設定 (CSS Ruleとして設定)
33+ let dispobjRuleBefore = ".DispObj { border: "
34+ let dispobjRuleAfter = ";}";
35+ let elestyle = document.getElementById('styledispobj');
36+ elestyle.sheet.removeRule(0);
37+ elestyle.sheet.insertRule(dispobjRuleBefore + strborder + dispobjRuleAfter, 0);
38+ };
39+
40+ var funcRemoveFocusedObject = function () {
41+ let focused = window.partsFocus.getFocusedObjid();
42+ if (null != focused) {
43+ // Delete command発行
44+ var obj1 = new CCommandObj();
45+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
46+ window.postToWorker.post(obj1);
47+ }
48+ };
49+
50+
51+
52+ // Public I/F -----------------
53+ return {
54+ // 設定情報を Local Storage に保存 / 読み込み
55+ saveSettings: function () {
56+ },
57+ loadSettings: function () {
58+ },
59+
60+
61+ // 設定情報 ではないが……
62+ removeFocusedObject: function () { funcRemoveFocusedObject(); },
63+
64+
65+ // 設定パレット表示/非表示設定
66+ getShowHideSettingPalette: function () { return showSettingPalette; },
67+ setShowHideSettingPalette: function (palette) {
68+ console.log('設定変更 設定パレット表示=' + palette);
69+ if (true === palette) showSettingPalette = true;
70+ else showSettingPalette = false;
71+
72+ // 設定を反映
73+ window.CSSPalGroup.showSettingPalette(showSettingPalette);
74+ },
75+
76+ // 画像,Text dropでの要素の初期サイズ (長辺の長さ)
77+ getInitialSizeOfElement: function () { return initialSizeOfElement; },
78+ setInitialSizeOfElement: function (num) {
79+ console.log('設定変更 要素初期サイズ=' + num);
80+ let size = parseInt(num);
81+ // あまり小さいと操作できなくなるので
82+ if (5 <= size) initialSizeOfElement = size;
83+ else {
84+ console.error('設定変更 要素初期サイズ指定エラー 指定=' + num + '\n前回の設定を保持 = ' + initialSizeOfElement);
85+ }
86+ },
87+
88+ // 識別のための境界線を表示する/しない設定
89+ getElementBorderLine: function () { return elementBorderLine; },
90+ setElementBorderLine: function (borderline) {
91+ console.log('設定変更 要素に枠を表示=' + borderline);
92+ if (true === borderline) elementBorderLine = true;
93+ else elementBorderLine = false;
94+
95+ // 設定を反映
96+ if (true === elementBorderLine) funcShowElementBorderline();
97+ else funcHideElementBorderline();
98+ },
99+
100+ // アニメーションする/しない設定
101+ getElementAnimation: function () { return elementAnimation; },
102+ setElementAnimation: function (anime) {
103+ console.log('設定変更 アニメーション再生=' + anime);
104+ if (true === anime) elementAnimation = true;
105+ else elementAnimation = false;
106+
107+ // 設定を反映
108+
109+ // DispObjとPalette要素にPauseAnimation css classを付与する
110+ if (true === elementAnimation) {
111+ window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
112+ if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
113+ window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
114+ }
115+ else {
116+ window.ObjIDMgr.addClassToAllObj('PauseAnimation');
117+ window.CSSPalette.addClassToActionPalettes('PauseAnimation');
118+ }
119+ },
120+
121+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
122+ getElementAspect: function () { return elementAspect; },
123+ setElementAspect: function (aspect) {
124+ console.log('設定変更 アスペクト比を保つ=' + aspect);
125+ if (true === aspect) elementAspect = true;
126+ else elementAspect = false;
127+ },
128+
129+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
130+ getScaleFont: function (scale) { return scaleFont; },
131+ setScaleFont: function () {
132+ console.log('設定変更 要素拡大でフォントも拡大=' + scale);
133+ if (true === scale) scaleFont = true;
134+ else scaleFont = false;
135+ },
136+
137+ // パレット上の要素は常にアニメーションをしない/する設定
138+ getAlwaysOffPaletteAnimation: function () { return alwaysOffPaletteAnimation; },
139+ setAlwaysOffPaletteAnimation: function (palani) {
140+ console.log('設定変更 パレット要素は常にアニメーションしない=' + palani);
141+ if (true === palani) alwaysOffPaletteAnimation = true;
142+ else alwaysOffPaletteAnimation = false;
143+
144+ // 設定を反映
145+ if (true === alwaysOffPaletteAnimation) {
146+ window.CSSPalette.addClassToActionPalettes('PauseAnimation');
147+ }
148+ else {
149+ window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
150+ }
151+ },
152+
153+ // キャンバス幅設定 (pixcel)
154+ getCanvasWidth: function () { return canvasWidth; },
155+ setCanvasWidth: function (width) {
156+ console.log('設定変更 キャンバス幅=' + width);
157+ let size = parseInt(width);
158+ if (5 <= size) canvasWidth = size;
159+ else {
160+ console.error('設定変更 キャンバス幅指定エラー 指定=' + width + '\n前回の設定を保持 = ' + canvasWidth);
161+ }
162+ },
163+
164+ // キャンバス高さ設定 (pixcel)
165+ getCanvasHeight: function () { return canvasHeight; },
166+ setCanvasHeight: function (height) {
167+ console.log('設定変更 キャンバス高さ=' + height);
168+ let size = parseInt(height);
169+ if (5 <= size) canvasHeight = size;
170+ else {
171+ console.error('設定変更 キャンバス高さ指定エラー 指定=' + height + '\n前回の設定を保持 = ' + canvasHeight);
172+ }
173+ },
174+
175+ // キャンバスのデフォルト背景色
176+ getCanvasColor: function () { return canvasColor; },
177+ setCanvasColor: function (color) {
178+ console.log('設定変更 キャンバス背景色=' + color);
179+ // 面倒なのでそのまま入れる
180+ canvasColor = color;
181+ }
182+ };
183+
184+
185+})();
--- 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 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9+class PaletteFunction{
10+ constructor() {
11+ this.paletteFunction = null;
12+ this.dataScheme = null;
13+ this.description = null;
14+ this.replaceObject = null;
15+ }
16+
17+ removeAllInformation() {
18+ this.removeFunction();
19+ this.removeImage();
20+ this.removeDescription();
21+ this.replaceObject = null;
22+ }
23+
24+
25+ // 機能の登録・削除・実行 ------------------
26+
27+ registerFunction(func) {
28+ if (null != this.paletteFunction) {
29+ console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ', 今回の機能 = ' + func.name);
30+ // ひとまず処理継続
31+ }
32+ this.paletteFunction = func;
33+ return true;
34+ }
35+ removeFunction() {
36+ this.paletteFunction = null;
37+ }
38+ getFunction() {
39+ return this.paletteFunction;
40+ }
41+ executeFunction() {
42+ if (null == this.paletteFunction) {
43+ console.error('パレット機能登録前に呼び出そうとした');
44+ return false;
45+ }
46+ return this.paletteFunction();
47+ }
48+
49+ // executeFunction実行後に PaletteFunction の Instance を入れ替える設定
50+ // (Toggle button に使用)
51+ setObjectToReplaceAfterExecution(object) {
52+ this.replaceObject = object;
53+ }
54+ getObjectToReplaceAfterExecution() {
55+ return this.replaceObject;
56+ }
57+
58+
59+ // 機能に関連した画像・説明文 登録・取得 ------------
60+ registerImage(dataScheme) {
61+ if (null != this.dataScheme) {
62+ console.error('パレット機能 Imageの上書き登録');
63+ // ひとまず処理継続
64+ }
65+ this.dataScheme = dataScheme;
66+ }
67+ removeImage() {
68+ this.dataScheme = null;
69+ }
70+ getImage() {
71+ return this.dataScheme;
72+ }
73+
74+ registerDescription(text) {
75+ if (null != this.description) {
76+ console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ', 今回の説明 = ' + this.description);
77+ // ひとまず処理継続
78+ }
79+ this.description = text;
80+ }
81+ removeDescription() {
82+ this.description = null;
83+ }
84+ getDescription() {
85+ return this.description;
86+ }
87+} // class PaletteFunction
88+
89+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
90+// 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
91+var paletteFunctionObjects = (function () {
92+ let paletteFunction = [];
93+
94+ var defineFunctions = function () {
95+ let cnt = 0;
96+ // 設定パレット非表示設定
97+ paletteFunction[cnt] = new PaletteFunction();
98+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
99+ paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
100+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
101+ cnt++;
102+ // 選択要素削除
103+ paletteFunction[cnt] = new PaletteFunction();
104+ paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
105+ paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
106+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
107+ cnt++;
108+ // 枠の表示/非表示
109+ paletteFunction[cnt] = new PaletteFunction();
110+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
111+ paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
112+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
113+ cnt++;
114+ paletteFunction[cnt] = new PaletteFunction();
115+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
116+ paletteFunction[cnt].registerDescription("識別用の枠を消します。");
117+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
118+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
119+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
120+ cnt++;
121+ // アニメーションする/しない設定
122+ paletteFunction[cnt] = new PaletteFunction();
123+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
124+ paletteFunction[cnt].registerDescription("アニメーションを停止します。");
125+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
126+ cnt++;
127+ paletteFunction[cnt] = new PaletteFunction();
128+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
129+ paletteFunction[cnt].registerDescription("アニメーションを再開します。");
130+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
131+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
132+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
133+ cnt++;
134+ // パレット上の要素は常にアニメーションをしない/する設定
135+ paletteFunction[cnt] = new PaletteFunction();
136+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
137+ paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
138+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
139+ cnt++;
140+ paletteFunction[cnt] = new PaletteFunction();
141+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
142+ paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
143+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
144+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
145+ paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
146+ cnt++;
147+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
148+ paletteFunction[cnt] = new PaletteFunction();
149+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
150+ paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
151+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
152+ cnt++;
153+ paletteFunction[cnt] = new PaletteFunction();
154+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
155+ paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
156+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
157+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
158+ paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
159+ cnt++;
160+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
161+ paletteFunction[cnt] = new PaletteFunction();
162+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
163+ paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
164+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
165+ cnt++;
166+ paletteFunction[cnt] = new PaletteFunction();
167+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
168+ paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
169+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
170+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
171+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
172+ cnt++;
173+ };
174+ defineFunctions();
175+
176+ return {
177+ getItem: function (num) {
178+ if (paletteFunction.length <= num) {
179+ console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + paletteFunction.length);
180+ return null;
181+ }
182+ return paletteFunction[num];
183+ }
184+ };
185+})();
186+
187+class PaletteShape {
188+ constructor() {
189+ this.DOMobject = null;
190+ this.paletteFunction = null;
191+ }
192+
193+ // DOM 要素を作成してこの Instance の表示要素として登録
194+ createButtonElement(parent) {
195+ if (null != this.DOMobject) {
196+ console.error('パレットボタン ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
197+ }
198+
199+ this.DOMobject = document.createElement('div');
200+ this.setDomHandler();
201+
202+ // 引数 Element の Child として登録
203+ this.setPalentElement(parent);
204+
205+ return true;
206+ }
207+
208+ // 既に存在する Element をこの Instance の表示要素として登録する
209+ setButtonElement(ele) {
210+ if (null == ele) {
211+ console.error('パレットボタン ボタン要素設定エラー 引数の要素が未設定');
212+ return false;
213+ }
214+ if (null != this.DOMobject) {
215+ console.error('パレットボタン ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
216+ }
217+ this.DOMobject = ele;
218+ this.setDomHandler();
219+ return true;
220+ }
221+
222+ // スタイル定義は CSS file で指定する
223+
224+
225+ // ボタンを引数 Element の Child として登録する
226+ // Palent は position:static 以外の指定が必須
227+ // Palent の left, top, width, height に合わせたサイズで表示する
228+ setPalentElement(ele) {
229+ if (null == ele) {
230+ console.error('パレットボタン 親要素設定エラー 引数の親要素が未設定');
231+ return false;
232+ }
233+ if (null == this.DOMobject) {
234+ console.error('パレットボタン 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
235+ return false;
236+ }
237+
238+ if (null == this.DOMobject.parentNode) console.log('パレットボタン 親要素設定未設定状態');
239+ else this.DOMobject.parentNode.removeChild(this.DOMobject);
240+
241+ // 最も手前に追加
242+ // DOM tree に入ったタイミングで CSS 設定が適用される
243+ // (親要素の位置とサイズにフィットする)
244+ ele.appendChild(this.DOMobject);
245+ return true;
246+ }
247+
248+ // ボタン Click で実行する機能を登録
249+ setPaletteFunction(palfunc) {
250+ if (null != this.paletteFunction) {
251+ console.error('パレットボタンへの機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
252+ // ひとまず処理継続
253+ }
254+ this.paletteFunction = palfunc;
255+
256+ // 表示要素の更新
257+ this.DOMobject.title = this.paletteFunction.getDescription();
258+ this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
259+ this.DOMobject.style.backgroundSize = 'cover';
260+ }
261+ clearPaletteFunction() {
262+ this.paletteFunction = null;
263+ this.DOMobject.title = null;
264+ this.DOMobject.style.backgroundImage = 'none';
265+ }
266+
267+
268+ // Private 関数 ------------------------
269+
270+ setDomHandler() {
271+ this.DOMobject.classList.add('palbutton');
272+ this.DOMobject.dataset.objid = 'palbutton';
273+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
274+ this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
275+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
276+ this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
277+ this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
278+ this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
279+ this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
280+ }
281+
282+
283+ // Event handler ------------------------
284+
285+ onMouseDownPaletteShape(evt) {
286+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
287+ evt.preventDefault(); // 要素既定のdefault動作を止める
288+ }
289+ onMouseUpPaletteShape(evt) {
290+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
291+ evt.preventDefault(); // 要素既定のdefault動作を止める
292+
293+ // 登録処理実行
294+ this.paletteFunction.executeFunction();
295+
296+ // Toggle button 処理
297+ let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
298+ if (null != replaceObject) {
299+ this.clearPaletteFunction();
300+ this.setPaletteFunction(replaceObject);
301+ }
302+ }
303+
304+}
305+
9306 class CSSPalette {
10307 constructor() {
11- this.DOMobject = [];
12308 this.draggingDOM = null;
13- }
309+ }
14310
15311 debuglog(str) {
16312 debuglog('【CSSPalette】 ' + str);
@@ -63,6 +359,25 @@
63359 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
64360 }
65361 // 設定パレット
362+ // (リファクタにより、設定パレットのみ処理を別物にしている)
363+ let palfuncs = [
364+ paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
365+ paletteFunctionObjects.getItem(1), // Remove focused element
366+ paletteFunctionObjects.getItem(2), // Toggle element borderline
367+ paletteFunctionObjects.getItem(4), // Toggle stop/play animations
368+ paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
369+ paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
370+ paletteFunctionObjects.getItem(10) // Toggle Scale font size
371+ ];
372+ let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
373+ this.palSetting = [];
374+ for (let cnt = 0; cnt < elePalset.length; cnt++) {
375+ this.palSetting[cnt] = new PaletteShape();
376+ this.palSetting[cnt].createButtonElement(elePalset[cnt]);
377+ this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
378+ }
379+/*
380+ // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
66381 this.DOMpalset = document.getElementsByClassName('palset');
67382 for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
68383 this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -75,6 +390,7 @@
75390 this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
76391 this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
77392 }
393+*/
78394 }
79395
80396 // 操作関数 ----------------------------
@@ -180,6 +496,24 @@
180496 }
181497
182498
499+
500+ // Palette に機能が登録されているか
501+ // (Palette button 押下で実行する機能の存在可否)
502+ hasFunction() {
503+ let ret = false;
504+ if (null != this.paletteFunction)
505+ ret = true;
506+ return ret;
507+ }
508+
509+ executeFunction() {
510+ if (null == this.paletteFunction) {
511+ console.error('パレット登録機能の実行に失敗 機能が登録されていません' + this.DOMobject);
512+ return false;
513+ }
514+
515+ }
516+
183517 // Event handler -----------------------
184518
185519 // Drag&Drop event : Application外からのfileのやり取り
@@ -347,7 +681,7 @@
347681
348682
349683
350-
684+/*
351685 onMouseDownSetting(evt) {
352686 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
353687 evt.preventDefault(); // 要素既定のdefault動作を止める
@@ -396,7 +730,7 @@
396730 break;
397731 }
398732 }
733+*/
399734
400735
401-
402736 } // 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 @@
1616 this.typeAction = 2;
1717 this.typeSettings = 3;
1818
19- this.DOMobject = []; // bg,text,action
19+ this.DOMobject = []; // bg,text,action,settings
2020 }
2121 debuglog(str) {
2222 debuglog('【PalGroup】 ' + str);
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 48)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 49)
@@ -1,13 +1,9 @@
1-// Webviewの表示スタイル定義
2-//
3-// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
4-// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
1+/*
2+ Webviewの表示スタイル定義
53
6-body {
7- /*スクロールとズームを有効にするにはこのコメントを解除します
8- タッチ操作: 操作;
9- */
10-}
4+ CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
5+ ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
6+*/
117 *, *:before, *:after {
128 -webkit-box-sizing: border-box;
139 -moz-box-sizing: border-box;
@@ -20,7 +16,7 @@
2016 user-select: none;
2117 font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, MS P明朝, MS 明朝, serif;
2218 -webkit-font-smoothing: antialiased;
23-// -webkit-overflow-scrolling: touch;
19+/* -webkit-overflow-scrolling: touch; */
2420 }
2521
2622 .buttonstyle {
@@ -112,6 +108,7 @@
112108 margin: 0px; padding: 5px;
113109 border: 1px solid transparent;
114110 border-radius: 8px;
111+ background-color: #fff;
115112 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
116113 }
117114 .pallegend {
@@ -160,6 +157,20 @@
160157 }
161158
162159
160+
161+ .palflex {
162+ display: flex;
163+ position: absolute;
164+ left: 0px; top: 0px;
165+ width: 200%; height: 100%;
166+ margin: 0px;
167+ padding: 15px;
168+ border-radius: 5px;
169+ background-color: gray;
170+ opacity: 0.5;
171+ text-decoration: none;
172+ justify-content: flex-start;
173+ }
163174 /* パレット要素の定義 */
164175 .palbg,
165176 .paltxtcol,
@@ -192,9 +203,23 @@
192203 border: 1px solid rgba(0,0,0,0.2);
193204 background-color: rgba(27, 158, 131, 0.6);
194205 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
206+ /* ********************** */
207+ position: relative;
208+ width: 60px; height: 60px;
209+ margin: 0 10px; padding: 0;
195210 }
196211
212+ .palbutton {
213+ position: absolute;
214+ left: 0; top: 0;
215+ width: 100%; height: 100%;
216+ margin: 0; padding: 0;
217+ border: 1px solid black;
218+ background-color: inherit;
219+ box-shadow: inherit;
220+ }
197221
222+
198223 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
199224 .scaler,
200225 .roller,
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 48)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 49)
@@ -199,12 +199,16 @@
199199 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
200200 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
201201 </div>
202- <div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
203- <div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
204- <div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
205- <div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
206- <div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
207- </fieldset>
202+ <div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
203+ <ul class="palflex">
204+ <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
205+ <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
206+ <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
207+ <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
208+ <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
209+ </ul>
210+ </div>
211+</fieldset>
208212 </div> <!-- apparea -->
209213
210214 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
@@ -214,7 +218,7 @@
214218 <script type="text/javascript" src="js/CommandObj.js"></script>
215219 <script type="text/javascript" src="js/UI_parts.js"></script>
216220 <script type="text/javascript" src="js/palgroup.js"></script>
217- <script type="text/javascript" src="js/palette.js"></script>
221+ <script type="text/javascript" src="js/Palette.js"></script>
218222 <script type="text/javascript" src="js/DispObj.js"></script>
219223 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
220224 <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 @@
1+//
2+// Application 設定情報保持
3+//
4+window.MyAppSettings = (function () {
5+
6+
7+ // Private Variables ----------
8+
9+ var showSettingPalette = true; // 設定パレットを表示する/しない
10+ var initialSizeOfElement = 200; // text/image dropしたときの要素の初期サイズ
11+
12+ var elementBorderLine = true; // 識別のために要素の周りに線を引く/引かない
13+ var elementAnimation = true; // アニメーション停止/再開
14+ var elementAspect = true; // アスペクト比を保ったまま拡大する/しない
15+ var scaleFont = true; // 要素を拡大したときにフォントも拡大する/しない
16+ var alwaysOffPaletteAnimation = false; // パレットは常にアニメーションしない/する
17+
18+ var canvasWidth = 1000; // キャンバス幅
19+ var canvasHeight = 600; // キャンバス高さ
20+ var canvasColor = "#fff"; // キャンバスのデフォルトカラー
21+
22+
23+
24+ // Private Functions ---------
25+
26+ var funcShowElementBorderline = function () { funcChangeElementBorderline("1px solid black"); };
27+ var funcHideElementBorderline = function () { funcChangeElementBorderline(""); };
28+ var funcChangeElementBorderline = function (strborder) {
29+ // 背景 (frameArea) に枠を設定
30+ window.frameArea.DOMobject.style.border = strborder;
31+
32+ // 表示要素に枠を設定 (CSS Ruleとして設定)
33+ let dispobjRuleBefore = ".DispObj { border: "
34+ let dispobjRuleAfter = ";}";
35+ let elestyle = document.getElementById('styledispobj');
36+ elestyle.sheet.removeRule(0);
37+ elestyle.sheet.insertRule(dispobjRuleBefore + strborder + dispobjRuleAfter, 0);
38+ };
39+
40+ var funcRemoveFocusedObject = function () {
41+ let focused = window.partsFocus.getFocusedObjid();
42+ if (null != focused) {
43+ // Delete command発行
44+ var obj1 = new CCommandObj();
45+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
46+ window.postToWorker.post(obj1);
47+ }
48+ };
49+
50+
51+
52+ // Public I/F -----------------
53+ return {
54+ // 設定情報を Local Storage に保存 / 読み込み
55+ saveSettings: function () {
56+ },
57+ loadSettings: function () {
58+ },
59+
60+
61+ // 設定情報 ではないが……
62+ removeFocusedObject: function () { funcRemoveFocusedObject(); },
63+
64+
65+ // 設定パレット表示/非表示設定
66+ getShowHideSettingPalette: function () { return showSettingPalette; },
67+ setShowHideSettingPalette: function (palette) {
68+ console.log('設定変更 設定パレット表示=' + palette);
69+ if (true === palette) showSettingPalette = true;
70+ else showSettingPalette = false;
71+
72+ // 設定を反映
73+ window.CSSPalGroup.showSettingPalette(showSettingPalette);
74+ },
75+
76+ // 画像,Text dropでの要素の初期サイズ (長辺の長さ)
77+ getInitialSizeOfElement: function () { return initialSizeOfElement; },
78+ setInitialSizeOfElement: function (num) {
79+ console.log('設定変更 要素初期サイズ=' + num);
80+ let size = parseInt(num);
81+ // あまり小さいと操作できなくなるので
82+ if (5 <= size) initialSizeOfElement = size;
83+ else {
84+ console.error('設定変更 要素初期サイズ指定エラー 指定=' + num + '\n前回の設定を保持 = ' + initialSizeOfElement);
85+ }
86+ },
87+
88+ // 識別のための境界線を表示する/しない設定
89+ getElementBorderLine: function () { return elementBorderLine; },
90+ setElementBorderLine: function (borderline) {
91+ console.log('設定変更 要素に枠を表示=' + borderline);
92+ if (true === borderline) elementBorderLine = true;
93+ else elementBorderLine = false;
94+
95+ // 設定を反映
96+ if (true === elementBorderLine) funcShowElementBorderline();
97+ else funcHideElementBorderline();
98+ },
99+
100+ // アニメーションする/しない設定
101+ getElementAnimation: function () { return elementAnimation; },
102+ setElementAnimation: function (anime) {
103+ console.log('設定変更 アニメーション再生=' + anime);
104+ if (true === anime) elementAnimation = true;
105+ else elementAnimation = false;
106+
107+ // 設定を反映
108+
109+ // DispObjとPalette要素にPauseAnimation css classを付与する
110+ if (true === elementAnimation) {
111+ window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
112+ if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
113+ window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
114+ }
115+ else {
116+ window.ObjIDMgr.addClassToAllObj('PauseAnimation');
117+ window.CSSPalette.addClassToActionPalettes('PauseAnimation');
118+ }
119+ },
120+
121+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
122+ getElementAspect: function () { return elementAspect; },
123+ setElementAspect: function (aspect) {
124+ console.log('設定変更 アスペクト比を保つ=' + aspect);
125+ if (true === aspect) elementAspect = true;
126+ else elementAspect = false;
127+ },
128+
129+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
130+ getScaleFont: function (scale) { return scaleFont; },
131+ setScaleFont: function () {
132+ console.log('設定変更 要素拡大でフォントも拡大=' + scale);
133+ if (true === scale) scaleFont = true;
134+ else scaleFont = false;
135+ },
136+
137+ // パレット上の要素は常にアニメーションをしない/する設定
138+ getAlwaysOffPaletteAnimation: function () { return alwaysOffPaletteAnimation; },
139+ setAlwaysOffPaletteAnimation: function (palani) {
140+ console.log('設定変更 パレット要素は常にアニメーションしない=' + palani);
141+ if (true === palani) alwaysOffPaletteAnimation = true;
142+ else alwaysOffPaletteAnimation = false;
143+
144+ // 設定を反映
145+ if (true === alwaysOffPaletteAnimation) {
146+ window.CSSPalette.addClassToActionPalettes('PauseAnimation');
147+ }
148+ else {
149+ window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
150+ }
151+ },
152+
153+ // キャンバス幅設定 (pixcel)
154+ getCanvasWidth: function () { return canvasWidth; },
155+ setCanvasWidth: function (width) {
156+ console.log('設定変更 キャンバス幅=' + width);
157+ let size = parseInt(width);
158+ if (5 <= size) canvasWidth = size;
159+ else {
160+ console.error('設定変更 キャンバス幅指定エラー 指定=' + width + '\n前回の設定を保持 = ' + canvasWidth);
161+ }
162+ },
163+
164+ // キャンバス高さ設定 (pixcel)
165+ getCanvasHeight: function () { return canvasHeight; },
166+ setCanvasHeight: function (height) {
167+ console.log('設定変更 キャンバス高さ=' + height);
168+ let size = parseInt(height);
169+ if (5 <= size) canvasHeight = size;
170+ else {
171+ console.error('設定変更 キャンバス高さ指定エラー 指定=' + height + '\n前回の設定を保持 = ' + canvasHeight);
172+ }
173+ },
174+
175+ // キャンバスのデフォルト背景色
176+ getCanvasColor: function () { return canvasColor; },
177+ setCanvasColor: function (color) {
178+ console.log('設定変更 キャンバス背景色=' + color);
179+ // 面倒なのでそのまま入れる
180+ canvasColor = color;
181+ }
182+ };
183+
184+
185+})();
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 48)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 49)
@@ -6,11 +6,307 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9+class PaletteFunction{
10+ constructor() {
11+ this.paletteFunction = null;
12+ this.dataScheme = null;
13+ this.description = null;
14+ this.replaceObject = null;
15+ }
16+
17+ removeAllInformation() {
18+ this.removeFunction();
19+ this.removeImage();
20+ this.removeDescription();
21+ this.replaceObject = null;
22+ }
23+
24+
25+ // 機能の登録・削除・実行 ------------------
26+
27+ registerFunction(func) {
28+ if (null != this.paletteFunction) {
29+ console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ', 今回の機能 = ' + func.name);
30+ // ひとまず処理継続
31+ }
32+ this.paletteFunction = func;
33+ return true;
34+ }
35+ removeFunction() {
36+ this.paletteFunction = null;
37+ }
38+ getFunction() {
39+ return this.paletteFunction;
40+ }
41+ executeFunction() {
42+ if (null == this.paletteFunction) {
43+ console.error('パレット機能登録前に呼び出そうとした');
44+ return false;
45+ }
46+ return this.paletteFunction();
47+ }
48+
49+ // executeFunction実行後に PaletteFunction の Instance を入れ替える設定
50+ // (Toggle button に使用)
51+ setObjectToReplaceAfterExecution(object) {
52+ this.replaceObject = object;
53+ }
54+ getObjectToReplaceAfterExecution() {
55+ return this.replaceObject;
56+ }
57+
58+
59+ // 機能に関連した画像・説明文 登録・取得 ------------
60+ registerImage(dataScheme) {
61+ if (null != this.dataScheme) {
62+ console.error('パレット機能 Imageの上書き登録');
63+ // ひとまず処理継続
64+ }
65+ this.dataScheme = dataScheme;
66+ }
67+ removeImage() {
68+ this.dataScheme = null;
69+ }
70+ getImage() {
71+ return this.dataScheme;
72+ }
73+
74+ registerDescription(text) {
75+ if (null != this.description) {
76+ console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ', 今回の説明 = ' + this.description);
77+ // ひとまず処理継続
78+ }
79+ this.description = text;
80+ }
81+ removeDescription() {
82+ this.description = null;
83+ }
84+ getDescription() {
85+ return this.description;
86+ }
87+} // class PaletteFunction
88+
89+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
90+// 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
91+var paletteFunctionObjects = (function () {
92+ let paletteFunction = [];
93+
94+ var defineFunctions = function () {
95+ let cnt = 0;
96+ // 設定パレット非表示設定
97+ paletteFunction[cnt] = new PaletteFunction();
98+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
99+ paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
100+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
101+ cnt++;
102+ // 選択要素削除
103+ paletteFunction[cnt] = new PaletteFunction();
104+ paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
105+ paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
106+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
107+ cnt++;
108+ // 枠の表示/非表示
109+ paletteFunction[cnt] = new PaletteFunction();
110+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
111+ paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
112+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
113+ cnt++;
114+ paletteFunction[cnt] = new PaletteFunction();
115+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
116+ paletteFunction[cnt].registerDescription("識別用の枠を消します。");
117+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
118+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
119+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
120+ cnt++;
121+ // アニメーションする/しない設定
122+ paletteFunction[cnt] = new PaletteFunction();
123+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
124+ paletteFunction[cnt].registerDescription("アニメーションを停止します。");
125+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
126+ cnt++;
127+ paletteFunction[cnt] = new PaletteFunction();
128+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
129+ paletteFunction[cnt].registerDescription("アニメーションを再開します。");
130+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
131+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
132+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
133+ cnt++;
134+ // パレット上の要素は常にアニメーションをしない/する設定
135+ paletteFunction[cnt] = new PaletteFunction();
136+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
137+ paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
138+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
139+ cnt++;
140+ paletteFunction[cnt] = new PaletteFunction();
141+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
142+ paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
143+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
144+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
145+ paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
146+ cnt++;
147+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
148+ paletteFunction[cnt] = new PaletteFunction();
149+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
150+ paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
151+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
152+ cnt++;
153+ paletteFunction[cnt] = new PaletteFunction();
154+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
155+ paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
156+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
157+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
158+ paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
159+ cnt++;
160+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
161+ paletteFunction[cnt] = new PaletteFunction();
162+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
163+ paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
164+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
165+ cnt++;
166+ paletteFunction[cnt] = new PaletteFunction();
167+ paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
168+ paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
169+ paletteFunction[cnt].registerImage("images/StoreLogo.png");
170+ paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
171+ paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
172+ cnt++;
173+ };
174+ defineFunctions();
175+
176+ return {
177+ getItem: function (num) {
178+ if (paletteFunction.length <= num) {
179+ console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + paletteFunction.length);
180+ return null;
181+ }
182+ return paletteFunction[num];
183+ }
184+ };
185+})();
186+
187+class PaletteShape {
188+ constructor() {
189+ this.DOMobject = null;
190+ this.paletteFunction = null;
191+ }
192+
193+ // DOM 要素を作成してこの Instance の表示要素として登録
194+ createButtonElement(parent) {
195+ if (null != this.DOMobject) {
196+ console.error('パレットボタン ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
197+ }
198+
199+ this.DOMobject = document.createElement('div');
200+ this.setDomHandler();
201+
202+ // 引数 Element の Child として登録
203+ this.setPalentElement(parent);
204+
205+ return true;
206+ }
207+
208+ // 既に存在する Element をこの Instance の表示要素として登録する
209+ setButtonElement(ele) {
210+ if (null == ele) {
211+ console.error('パレットボタン ボタン要素設定エラー 引数の要素が未設定');
212+ return false;
213+ }
214+ if (null != this.DOMobject) {
215+ console.error('パレットボタン ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
216+ }
217+ this.DOMobject = ele;
218+ this.setDomHandler();
219+ return true;
220+ }
221+
222+ // スタイル定義は CSS file で指定する
223+
224+
225+ // ボタンを引数 Element の Child として登録する
226+ // Palent は position:static 以外の指定が必須
227+ // Palent の left, top, width, height に合わせたサイズで表示する
228+ setPalentElement(ele) {
229+ if (null == ele) {
230+ console.error('パレットボタン 親要素設定エラー 引数の親要素が未設定');
231+ return false;
232+ }
233+ if (null == this.DOMobject) {
234+ console.error('パレットボタン 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
235+ return false;
236+ }
237+
238+ if (null == this.DOMobject.parentNode) console.log('パレットボタン 親要素設定未設定状態');
239+ else this.DOMobject.parentNode.removeChild(this.DOMobject);
240+
241+ // 最も手前に追加
242+ // DOM tree に入ったタイミングで CSS 設定が適用される
243+ // (親要素の位置とサイズにフィットする)
244+ ele.appendChild(this.DOMobject);
245+ return true;
246+ }
247+
248+ // ボタン Click で実行する機能を登録
249+ setPaletteFunction(palfunc) {
250+ if (null != this.paletteFunction) {
251+ console.error('パレットボタンへの機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
252+ // ひとまず処理継続
253+ }
254+ this.paletteFunction = palfunc;
255+
256+ // 表示要素の更新
257+ this.DOMobject.title = this.paletteFunction.getDescription();
258+ this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
259+ this.DOMobject.style.backgroundSize = 'cover';
260+ }
261+ clearPaletteFunction() {
262+ this.paletteFunction = null;
263+ this.DOMobject.title = null;
264+ this.DOMobject.style.backgroundImage = 'none';
265+ }
266+
267+
268+ // Private 関数 ------------------------
269+
270+ setDomHandler() {
271+ this.DOMobject.classList.add('palbutton');
272+ this.DOMobject.dataset.objid = 'palbutton';
273+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
274+ this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
275+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
276+ this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
277+ this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
278+ this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
279+ this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
280+ }
281+
282+
283+ // Event handler ------------------------
284+
285+ onMouseDownPaletteShape(evt) {
286+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
287+ evt.preventDefault(); // 要素既定のdefault動作を止める
288+ }
289+ onMouseUpPaletteShape(evt) {
290+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
291+ evt.preventDefault(); // 要素既定のdefault動作を止める
292+
293+ // 登録処理実行
294+ this.paletteFunction.executeFunction();
295+
296+ // Toggle button 処理
297+ let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
298+ if (null != replaceObject) {
299+ this.clearPaletteFunction();
300+ this.setPaletteFunction(replaceObject);
301+ }
302+ }
303+
304+}
305+
9306 class CSSPalette {
10307 constructor() {
11- this.DOMobject = [];
12308 this.draggingDOM = null;
13- }
309+ }
14310
15311 debuglog(str) {
16312 debuglog('【CSSPalette】 ' + str);
@@ -63,6 +359,25 @@
63359 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
64360 }
65361 // 設定パレット
362+ // (リファクタにより、設定パレットのみ処理を別物にしている)
363+ let palfuncs = [
364+ paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
365+ paletteFunctionObjects.getItem(1), // Remove focused element
366+ paletteFunctionObjects.getItem(2), // Toggle element borderline
367+ paletteFunctionObjects.getItem(4), // Toggle stop/play animations
368+ paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
369+ paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
370+ paletteFunctionObjects.getItem(10) // Toggle Scale font size
371+ ];
372+ let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
373+ this.palSetting = [];
374+ for (let cnt = 0; cnt < elePalset.length; cnt++) {
375+ this.palSetting[cnt] = new PaletteShape();
376+ this.palSetting[cnt].createButtonElement(elePalset[cnt]);
377+ this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
378+ }
379+/*
380+ // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
66381 this.DOMpalset = document.getElementsByClassName('palset');
67382 for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
68383 this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -75,6 +390,7 @@
75390 this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
76391 this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
77392 }
393+*/
78394 }
79395
80396 // 操作関数 ----------------------------
@@ -180,6 +496,24 @@
180496 }
181497
182498
499+
500+ // Palette に機能が登録されているか
501+ // (Palette button 押下で実行する機能の存在可否)
502+ hasFunction() {
503+ let ret = false;
504+ if (null != this.paletteFunction)
505+ ret = true;
506+ return ret;
507+ }
508+
509+ executeFunction() {
510+ if (null == this.paletteFunction) {
511+ console.error('パレット登録機能の実行に失敗 機能が登録されていません' + this.DOMobject);
512+ return false;
513+ }
514+
515+ }
516+
183517 // Event handler -----------------------
184518
185519 // Drag&Drop event : Application外からのfileのやり取り
@@ -347,7 +681,7 @@
347681
348682
349683
350-
684+/*
351685 onMouseDownSetting(evt) {
352686 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
353687 evt.preventDefault(); // 要素既定のdefault動作を止める
@@ -396,7 +730,7 @@
396730 break;
397731 }
398732 }
733+*/
399734
400735
401-
402736 } // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 48)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 49)
@@ -16,7 +16,7 @@
1616 this.typeAction = 2;
1717 this.typeSettings = 3;
1818
19- this.DOMobject = []; // bg,text,action
19+ this.DOMobject = []; // bg,text,action,settings
2020 }
2121 debuglog(str) {
2222 debuglog('【PalGroup】 ' + str);
--- HtmlDrawApp/doc/TextColorSample/背景固定.txt (nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/背景固定.txt (revision 49)
@@ -0,0 +1,3 @@
1+ background-repeat: no-repeat;
2+ background-attachment: fixed;
3+ background-size: cover;