• R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javaandroidc++objective-ccocoa誰得c#gamebathyscaphephplinuxrubyqtpythoncomegat翻訳windowstwitterguiframeworkbtronvb.netdirectxtestdom計画中(planning stage)previewerpukiwikimruby

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


Commit MetaInfo

Revision55 (tree)
Time2016-12-18 10:16:15
Authortakoyaki_umaaaa

Log Message

・Keyframe設定ファイルの動作確認
・設定パレットに要素追加
・パレットグループ選択で最前面に移動

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 55)
@@ -164,4 +164,17 @@
164164 window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
165165 }
166166 }
167+
168+ bringtofront(id) {
169+ if (id < this.ObjIDLen) {
170+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
171+ window.frameArea.DOMobject.appendChild(this.ObjIDarray[id].DOMbase);
172+ }
173+ }
174+ sendtoback(id) {
175+ if (id < this.ObjIDLen) {
176+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
177+ window.frameArea.DOMobject.insertBefore(this.ObjIDarray[id].DOMbase, window.frameArea.DOMobject.firstChild);
178+ }
179+ }
167180 } // class CObjIDMgr
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 55)
@@ -272,20 +272,32 @@
272272
273273 var defineFunctions = function () {
274274 let cnt = 0;
275- // 設定パレット非表示設定
275+ // 設定パレット非表示設定0
276276 palettePressFunction[cnt] = new PaletteFunction();
277277 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
278278 palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
279279 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
280280 cnt++;
281- // 選択要素削除
281+ // 選択要素削除1
282282 palettePressFunction[cnt] = new PaletteFunction();
283283 palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
284284 palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
285285 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
286286 cnt++;
287- // 枠の表示/非表示
287+ // 選択要素最前面2
288288 palettePressFunction[cnt] = new PaletteFunction();
289+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.bringtofront.bind(this));
290+ palettePressFunction[cnt].registerDescription("選択中の要素を最前面に移動します。");
291+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
292+ cnt++;
293+ // 選択要素最背面3
294+ palettePressFunction[cnt] = new PaletteFunction();
295+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.sendtoback.bind(this));
296+ palettePressFunction[cnt].registerDescription("選択中の要素を最背面に移動します。");
297+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
298+ cnt++;
299+ // 枠の表示/非表示4
300+ palettePressFunction[cnt] = new PaletteFunction();
289301 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
290302 palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
291303 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
@@ -297,7 +309,7 @@
297309 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
298310 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
299311 cnt++;
300- // アニメーションする/しない設定
312+ // アニメーションする/しない設定6
301313 palettePressFunction[cnt] = new PaletteFunction();
302314 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
303315 palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
@@ -310,23 +322,10 @@
310322 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
311323 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
312324 cnt++;
313- // パレット上の要素は常にアニメーションをしない/する設定
325+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定8
314326 palettePressFunction[cnt] = new PaletteFunction();
315- palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
316- palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
317- palettePressFunction[cnt].registerImage("images/StoreLogo.png");
318- cnt++;
319- palettePressFunction[cnt] = new PaletteFunction();
320- palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
321- palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
322- palettePressFunction[cnt].registerImage("images/StoreLogo.png");
323- palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
324- palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
325- cnt++;
326- // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
327- palettePressFunction[cnt] = new PaletteFunction();
328327 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
329- palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
328+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、現在の縦横比率を保つようにします。");
330329 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
331330 cnt++;
332331 palettePressFunction[cnt]= new PaletteFunction();
@@ -336,7 +335,7 @@
336335 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
337336 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
338337 cnt++;
339- // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
338+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定10
340339 palettePressFunction[cnt] = new PaletteFunction();
341340 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
342341 palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
@@ -962,9 +961,10 @@
962961 let palfuncs = [
963962 paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
964963 paletteFunctionObjects.getItem(1), // Remove focused element
965- paletteFunctionObjects.getItem(2), // Toggle element borderline
966- paletteFunctionObjects.getItem(4), // Toggle stop/play animations
967- paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
964+ paletteFunctionObjects.getItem(2), // Bring to front
965+ paletteFunctionObjects.getItem(3), // Send to back
966+ paletteFunctionObjects.getItem(4), // Toggle element borderline
967+ paletteFunctionObjects.getItem(6), // Toggle stop/play animations
968968 paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
969969 paletteFunctionObjects.getItem(10) // Toggle Scale font size
970970 ];
--- HtmlDrawApp/HTMLDrawApp/js/Settings.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/Settings.js (revision 55)
@@ -13,7 +13,6 @@
1313 var elementAnimation = true; // アニメーション停止/再開
1414 var elementAspect = true; // アスペクト比を保ったまま拡大する/しない
1515 var scaleFont = true; // 要素を拡大したときにフォントも拡大する/しない
16- var alwaysOffPaletteAnimation = false; // パレットは常にアニメーションしない/する
1716
1817 var canvasWidth = 1000; // キャンバス幅
1918 var canvasHeight = 600; // キャンバス高さ
@@ -47,6 +46,24 @@
4746 }
4847 };
4948
49+ var funcBringToFront = function () {
50+ let focused = window.partsFocus.getFocusedObjid();
51+ if (null != focused) {
52+ // 最前面に移動 command発行
53+ var obj1 = new CCommandObj();
54+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.bringtofront, focused, null, null, null, 1);
55+ window.postToWorker.post(obj1);
56+ }
57+ };
58+ var funcSendToBack = function () {
59+ let focused = window.partsFocus.getFocusedObjid();
60+ if (null != focused) {
61+ // 最背面に移動 command発行
62+ var obj1 = new CCommandObj();
63+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.sendtoback, focused, null, null, null, 1);
64+ window.postToWorker.post(obj1);
65+ }
66+ };
5067
5168
5269 // Public I/F -----------------
@@ -60,6 +77,8 @@
6077
6178 // 設定情報 ではないが……
6279 removeFocusedObject: function () { funcRemoveFocusedObject(); },
80+ bringtofront: function () { funcBringToFront(); },
81+ sendtoback: function () { funcSendToBack(); },
6382
6483
6584 // 設定パレット表示/非表示設定
@@ -109,12 +128,9 @@
109128 // DispObjとPalette要素にPauseAnimation css classを付与する
110129 if (true === elementAnimation) {
111130 window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
112- if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
113- window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
114131 }
115132 else {
116133 window.ObjIDMgr.addClassToAllObj('PauseAnimation');
117- window.CSSPalette.addClassToActionPalettes('PauseAnimation');
118134 }
119135 },
120136
@@ -134,22 +150,6 @@
134150 else scaleFont = false;
135151 },
136152
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-
153153 // キャンバス幅設定 (pixcel)
154154 getCanvasWidth: function () { return canvasWidth; },
155155 setCanvasWidth: function (width) {
--- HtmlDrawApp/HTMLDrawApp/js/CommandObj.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/CommandObj.js (revision 55)
@@ -31,6 +31,8 @@
3131 mirrorlr: 13,
3232 mirrorud: 14,
3333 deletebox: 100,
34+ bringtofront: 110,
35+ sendtoback: 120,
3436 };
3537
3638
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 55)
@@ -113,7 +113,7 @@
113113 // objid rect
114114 window.ObjIDMgr.movebox(cmd.param2, cmd.param1);
115115 break;
116- case cmdCmd.scalebox: // 拡大縮小
116+ case cmdCmd.scalebox: // 拡大縮小
117117 // objid rect fontscale
118118 window.ObjIDMgr.scalebox(cmd.param1, cmd.param3, cmd.param4);
119119 break;
@@ -127,12 +127,18 @@
127127 case cmdCmd.mirrorud: // 上下反転
128128 window.ObjIDMgr.mirrorUD(cmd.param1);
129129 break;
130- case cmdCmd.deletebox: // 要素の削除
130+ case cmdCmd.deletebox: // 要素の削除
131131 // Focus先が消えるため、focusも解除
132132 window.partsFocus.setClingingPartner(null);
133133 // objid
134134 window.ObjIDMgr.deletebox(cmd.param1);
135135 break;
136+ case cmdCmd.bringtofront: // 最前面に移動
137+ window.ObjIDMgr.bringtofront(cmd.param1);
138+ break;
139+ case cmdCmd.sendtoback: // 最背面に移動
140+ window.ObjIDMgr.sendtoback(cmd.param1);
141+ break;
136142 default:
137143 console.error('未定義のコマンド cmd=' + cmd.cmd);
138144 break;
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 55)
@@ -93,6 +93,10 @@
9393 // MouseのDrag開始位置を保持
9494 this.startDragX = x;
9595 this.startDragY = y;
96+
97+ // 選択したパレットを最前面にする
98+ window.appArea.DOMobject.removeChild(this.draggingDOM);
99+ window.appArea.DOMobject.appendChild(this.draggingDOM);
96100 }
97101 mouseMove(evt, touchevt) {
98102 if (null == this.draggingDOM) return;
@@ -137,7 +141,7 @@
137141 window.appArea.clearCallEventObj();
138142 this.endMovingPalette();
139143 }
140- endMovingPalette(){
144+ endMovingPalette() {
141145 // Drag中 element情報をクリア
142146 this.draggingDOM = null;
143147 }
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 55)
@@ -145,7 +145,7 @@
145145 line-height: 110px;
146146 font-size: 110px;
147147 font-weight: bold;
148- color: rgba(255, 255, 255, 0.3);
148+ color: rgba(255, 255, 255, 0.15);
149149 }
150150 .paldesc1 {
151151 left: calc( -80px + 10% ); top: calc( -40px + 20%);
@@ -164,9 +164,9 @@
164164 overflow: scroll;
165165 width: calc(100% - 20px); height: calc(100% - 40px);
166166 margin: -5px 10px; padding: 15px;
167- background-color: gray;
168- box-shadow: 10px 10px 20px -4px #777 inset;
169- opacity: 0.6;
167+ background-color: rgba(0,0,0,0.15);
168+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21) inset;
169+/* opacity: 0.6; */
170170 justify-content: flex-start;
171171 }
172172 /* パレット要素の定義 */
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 55)
@@ -48,7 +48,7 @@
4848 @keyframes animeact3 { to { color: black; } }
4949 @keyframes animeact4 { to { color: black; } }
5050 @keyframes animeact5 { to { color: black; } }
51- </style>
51+ </style>
5252 <style id="styleAction">
5353 .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
5454 .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
@@ -130,14 +130,17 @@
130130 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
131131 </div>
132132 <ul class="palflex">
133- <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134- <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135- <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136- <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137- <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
133+ <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134+ <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135+ <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136+ <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137+ <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
138+ <li class="palettesetting palset5" data-objid="palset5" data-palid="5"></li>
139+ <li class="palettesetting palset6" data-objid="palset6" data-palid="6"></li>
140+ <li class="palettesetting palset7" data-objid="palset7" data-palid="7"></li>
138141 </ul>
139142 <div class="palsize"></div>
140- </fieldset>
143+ </fieldset>
141144 </div> <!-- apparea -->
142145
143146 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 55)
@@ -164,4 +164,17 @@
164164 window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
165165 }
166166 }
167+
168+ bringtofront(id) {
169+ if (id < this.ObjIDLen) {
170+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
171+ window.frameArea.DOMobject.appendChild(this.ObjIDarray[id].DOMbase);
172+ }
173+ }
174+ sendtoback(id) {
175+ if (id < this.ObjIDLen) {
176+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
177+ window.frameArea.DOMobject.insertBefore(this.ObjIDarray[id].DOMbase, window.frameArea.DOMobject.firstChild);
178+ }
179+ }
167180 } // class CObjIDMgr
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 55)
@@ -1,10 +1,12 @@
11 // palette.js
22 // Canvas上の要素を変更するための内容を保持するpalette
3-// Background用, Text color用, Action用 の3種類ある
3+// Background(削除予定)用, Style用, Action用 の3種類ある
44 // 主な機能
55 // ・Drag&Dropによる移動
6-// ・Target要素に自objidと同名のCSS class追加
7-// ・外部からのDropによる text, image, css 読み込み
6+// ・Drop Target の要素にCSS class追加
7+// ・外部からのDrop fileによる css 定義読み込み
8+//
9+// createPaletteButtons()関数で各ボタンのinstanceを作成する
810
911 // パレットのCSS機能ボタンをDropしたときに実行する機能を提供する
1012 // (保持中CSS class nameを対象Elementに付加, 削除)
@@ -11,7 +13,6 @@
1113 // (Button instanceが自分の機能を意識しないようにするためのclass)
1214 class PaletteApplyCSS {
1315 constructor() {
14-// this.paletteRule = null;
1516 this.dataScheme = null;
1617 this.description = null;
1718 this.groupname = null;
@@ -271,20 +272,32 @@
271272
272273 var defineFunctions = function () {
273274 let cnt = 0;
274- // 設定パレット非表示設定
275+ // 設定パレット非表示設定0
275276 palettePressFunction[cnt] = new PaletteFunction();
276277 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
277278 palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
278279 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
279280 cnt++;
280- // 選択要素削除
281+ // 選択要素削除1
281282 palettePressFunction[cnt] = new PaletteFunction();
282283 palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
283284 palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
284285 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
285286 cnt++;
286- // 枠の表示/非表示
287+ // 選択要素最前面2
287288 palettePressFunction[cnt] = new PaletteFunction();
289+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.bringtofront.bind(this));
290+ palettePressFunction[cnt].registerDescription("選択中の要素を最前面に移動します。");
291+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
292+ cnt++;
293+ // 選択要素最背面3
294+ palettePressFunction[cnt] = new PaletteFunction();
295+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.sendtoback.bind(this));
296+ palettePressFunction[cnt].registerDescription("選択中の要素を最背面に移動します。");
297+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
298+ cnt++;
299+ // 枠の表示/非表示4
300+ palettePressFunction[cnt] = new PaletteFunction();
288301 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
289302 palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
290303 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
@@ -296,7 +309,7 @@
296309 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
297310 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
298311 cnt++;
299- // アニメーションする/しない設定
312+ // アニメーションする/しない設定6
300313 palettePressFunction[cnt] = new PaletteFunction();
301314 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
302315 palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
@@ -309,23 +322,10 @@
309322 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
310323 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
311324 cnt++;
312- // パレット上の要素は常にアニメーションをしない/する設定
325+ // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定8
313326 palettePressFunction[cnt] = new PaletteFunction();
314- palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
315- palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
316- palettePressFunction[cnt].registerImage("images/StoreLogo.png");
317- cnt++;
318- palettePressFunction[cnt] = new PaletteFunction();
319- palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
320- palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
321- palettePressFunction[cnt].registerImage("images/StoreLogo.png");
322- palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
323- palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
324- cnt++;
325- // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
326- palettePressFunction[cnt] = new PaletteFunction();
327327 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
328- palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
328+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、現在の縦横比率を保つようにします。");
329329 palettePressFunction[cnt].registerImage("images/StoreLogo.png");
330330 cnt++;
331331 palettePressFunction[cnt]= new PaletteFunction();
@@ -335,7 +335,7 @@
335335 palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
336336 palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
337337 cnt++;
338- // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
338+ // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定10
339339 palettePressFunction[cnt] = new PaletteFunction();
340340 palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
341341 palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
@@ -486,7 +486,6 @@
486486 }
487487 } // class PaletteShapeFunctionButton
488488
489-// PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
490489
491490 // パレットのCSSボタン表示部分の定義class
492491 // DOM Elementの保持、ボタンdrag & dropで呼び出す機能との関連付け
@@ -554,17 +553,7 @@
554553 ele.appendChild(this.DOMobject);
555554 return true;
556555 }
557-/*
558- // Paletteボタン対象Dropで実行する機能を登録
559- setpaletteApplyCss(dropcssfunc) {
560- if (null != this.paletteApplyCss) {
561- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteApplyCss.getFunction.name + ', 今回の機能 = ' + dropcssfunc.name);
562- // ひとまず処理継続
563- }
564- this.paletteApplyCss = dropcssfunc;
565556
566- }
567-*/
568557 clearpaletteApplyCss() {
569558 this.paletteApplyCss = null;
570559 this.DOMobject.title = null;
@@ -693,7 +682,7 @@
693682
694683 // Drag&Drop event
695684 // Applicationの外からFile Dropされたときに
696- // File内容情報を読み込み、CSSに反映させる
685+ // File内容を読み込み、CSSに反映させる
697686 onDragStartPaletteShapeCSSButton(evt) {
698687 debuglog('onDragStartPaletteShapeCSSButton');
699688 evt.preventDefault();
@@ -772,10 +761,6 @@
772761 // Drop file(CSS定義test)の内容読み込み(file, ele, num)
773762 // 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
774763 // keyframeはkeyframe登録専用のstyle elementに登録する
775- // string objectを返す
776- // 引数style elementへのCSS登録
777- // num番目のCSSへ上書きする
778- // (len <= num) or (num < 0) はaddする
779764 readTextFile(
780765 file, // 読みこむ対象ファイル
781766 readComplete // 読み込み完了Callback(function(fileReadStr))
@@ -941,9 +926,6 @@
941926 // keyframe dataはそのまま使うので特に加工しない
942927 return true;
943928 }
944-
945-
946-
947929 }
948930
949931 // ul li要素の上にdivボタンを作成
@@ -979,9 +961,10 @@
979961 let palfuncs = [
980962 paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
981963 paletteFunctionObjects.getItem(1), // Remove focused element
982- paletteFunctionObjects.getItem(2), // Toggle element borderline
983- paletteFunctionObjects.getItem(4), // Toggle stop/play animations
984- paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
964+ paletteFunctionObjects.getItem(2), // Bring to front
965+ paletteFunctionObjects.getItem(3), // Send to back
966+ paletteFunctionObjects.getItem(4), // Toggle element borderline
967+ paletteFunctionObjects.getItem(6), // Toggle stop/play animations
985968 paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
986969 paletteFunctionObjects.getItem(10) // Toggle Scale font size
987970 ];
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Settings.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Settings.js (revision 55)
@@ -13,7 +13,6 @@
1313 var elementAnimation = true; // アニメーション停止/再開
1414 var elementAspect = true; // アスペクト比を保ったまま拡大する/しない
1515 var scaleFont = true; // 要素を拡大したときにフォントも拡大する/しない
16- var alwaysOffPaletteAnimation = false; // パレットは常にアニメーションしない/する
1716
1817 var canvasWidth = 1000; // キャンバス幅
1918 var canvasHeight = 600; // キャンバス高さ
@@ -47,6 +46,24 @@
4746 }
4847 };
4948
49+ var funcBringToFront = function () {
50+ let focused = window.partsFocus.getFocusedObjid();
51+ if (null != focused) {
52+ // 最前面に移動 command発行
53+ var obj1 = new CCommandObj();
54+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.bringtofront, focused, null, null, null, 1);
55+ window.postToWorker.post(obj1);
56+ }
57+ };
58+ var funcSendToBack = function () {
59+ let focused = window.partsFocus.getFocusedObjid();
60+ if (null != focused) {
61+ // 最背面に移動 command発行
62+ var obj1 = new CCommandObj();
63+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.sendtoback, focused, null, null, null, 1);
64+ window.postToWorker.post(obj1);
65+ }
66+ };
5067
5168
5269 // Public I/F -----------------
@@ -60,6 +77,8 @@
6077
6178 // 設定情報 ではないが……
6279 removeFocusedObject: function () { funcRemoveFocusedObject(); },
80+ bringtofront: function () { funcBringToFront(); },
81+ sendtoback: function () { funcSendToBack(); },
6382
6483
6584 // 設定パレット表示/非表示設定
@@ -109,12 +128,9 @@
109128 // DispObjとPalette要素にPauseAnimation css classを付与する
110129 if (true === elementAnimation) {
111130 window.ObjIDMgr.removeClassToAllObj('PauseAnimation');
112- if (false === alwaysOffPaletteAnimation) // ここでthis.getAlwaysOffPaletteAnimation()は使わない。thisを使わないようにするため。
113- window.CSSPalette.removeClassToActionPalettes('PauseAnimation');
114131 }
115132 else {
116133 window.ObjIDMgr.addClassToAllObj('PauseAnimation');
117- window.CSSPalette.addClassToActionPalettes('PauseAnimation');
118134 }
119135 },
120136
@@ -134,22 +150,6 @@
134150 else scaleFont = false;
135151 },
136152
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-
153153 // キャンバス幅設定 (pixcel)
154154 getCanvasWidth: function () { return canvasWidth; },
155155 setCanvasWidth: function (width) {
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandObj.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandObj.js (revision 55)
@@ -31,6 +31,8 @@
3131 mirrorlr: 13,
3232 mirrorud: 14,
3333 deletebox: 100,
34+ bringtofront: 110,
35+ sendtoback: 120,
3436 };
3537
3638
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 55)
@@ -93,6 +93,10 @@
9393 // MouseのDrag開始位置を保持
9494 this.startDragX = x;
9595 this.startDragY = y;
96+
97+ // 選択したパレットを最前面にする
98+ window.appArea.DOMobject.removeChild(this.draggingDOM);
99+ window.appArea.DOMobject.appendChild(this.draggingDOM);
96100 }
97101 mouseMove(evt, touchevt) {
98102 if (null == this.draggingDOM) return;
@@ -137,7 +141,7 @@
137141 window.appArea.clearCallEventObj();
138142 this.endMovingPalette();
139143 }
140- endMovingPalette(){
144+ endMovingPalette() {
141145 // Drag中 element情報をクリア
142146 this.draggingDOM = null;
143147 }
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 55)
@@ -145,7 +145,7 @@
145145 line-height: 110px;
146146 font-size: 110px;
147147 font-weight: bold;
148- color: rgba(255, 255, 255, 0.3);
148+ color: rgba(255, 255, 255, 0.15);
149149 }
150150 .paldesc1 {
151151 left: calc( -80px + 10% ); top: calc( -40px + 20%);
@@ -164,9 +164,9 @@
164164 overflow: scroll;
165165 width: calc(100% - 20px); height: calc(100% - 40px);
166166 margin: -5px 10px; padding: 15px;
167- background-color: gray;
168- box-shadow: 10px 10px 20px -4px #777 inset;
169- opacity: 0.6;
167+ background-color: rgba(0,0,0,0.15);
168+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21) inset;
169+/* opacity: 0.6; */
170170 justify-content: flex-start;
171171 }
172172 /* パレット要素の定義 */
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 54)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 55)
@@ -48,7 +48,7 @@
4848 @keyframes animeact3 { to { color: black; } }
4949 @keyframes animeact4 { to { color: black; } }
5050 @keyframes animeact5 { to { color: black; } }
51- </style>
51+ </style>
5252 <style id="styleAction">
5353 .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
5454 .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
@@ -130,14 +130,17 @@
130130 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
131131 </div>
132132 <ul class="palflex">
133- <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134- <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135- <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136- <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137- <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
133+ <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134+ <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135+ <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136+ <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137+ <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
138+ <li class="palettesetting palset5" data-objid="palset5" data-palid="5"></li>
139+ <li class="palettesetting palset6" data-objid="palset6" data-palid="6"></li>
140+ <li class="palettesetting palset7" data-objid="palset7" data-palid="7"></li>
138141 </ul>
139142 <div class="palsize"></div>
140- </fieldset>
143+ </fieldset>
141144 </div> <!-- apparea -->
142145
143146 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>