• R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#objective-cqtwindows誰得cocoapythonphprubygameguibathyscaphec翻訳omegat計画中(planning stage)frameworktwittertestdomvb.netdirectxbtronarduinopreviewerゲームエンジン

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


Commit MetaInfo

Révision51 (tree)
l'heure2016-12-14 23:35:50
Auteurtakoyaki_umaaaa

Message de Log

(empty log message)

Change Summary

Modification

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 51)
@@ -188,16 +188,28 @@
188188 border: 1px solid rgba(0,0,0,0.2);
189189 background-color: rgba(27, 158, 131, 0.6);
190190 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
191+ /* ********************** */
192+ position: relative;
193+ width: 60px; height: 60px;
194+ margin: 7px 7px; padding: 0;
191195 }
192196 .paltxtcol {
193197 border: 1px solid rgba(0,0,0,0.2);
194198 background-color: rgba(154,145,140,0.6);
195199 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
200+ /* ********************** */
201+ position: relative;
202+ width: 60px; height: 60px;
203+ margin: 7px 7px; padding: 0;
196204 }
197205 .palact {
198206 border: 1px solid rgba(0,0,0,0.2);
199207 background-color: rgba(156, 165, 55, 0.6);
200208 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
209+ /* ********************** */
210+ position: relative;
211+ width: 60px; height: 60px;
212+ margin: 7px 7px; padding: 0;
201213 }
202214 .palset {
203215 border: 1px solid rgba(0,0,0,0.2);
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 51)
@@ -155,43 +155,52 @@
155155 }
156156 </style>
157157
158- <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
158+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
159159 <legend class="pallegend"> Background Palette </legend>
160160 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
161161 <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
162162 </div>
163- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
164- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
165- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
166- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
167- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
163+ <ul class="palflex">
164+ <li class="palbg palbg0" data-objid="palbg0" data-palid="0"></li>
165+ <li class="palbg palbg1" data-objid="palbg1" data-palid="1"></li>
166+ <li class="palbg palbg2" data-objid="palbg2" data-palid="2"></li>
167+ <li class="palbg palbg3" data-objid="palbg3" data-palid="3"></li>
168+ <li class="palbg palbg4" data-objid="palbg4" data-palid="4"></li>
169+ </ul>
170+ <div class="palsize"></div>
168171 </fieldset>
169172 <br />
170173
171- <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
174+ <fieldset class="palgroup palgroup1" data-objid="palgroup1" style="width:400px; height:130px;" title="テキストの色を設定するパレットです">
172175 <legend class="pallegend"> Style Palette </legend>
173176 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
174177 <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
175178 </div>
176- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></div>
177- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></div>
178- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></div>
179- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></div>
180- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></div>
179+ <ul class="palflex">
180+ <li class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
181+ <li class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
182+ <li class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
183+ <li class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
184+ <li class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
185+ </ul>
186+ <div class="palsize"></div>
181187 </fieldset>
182188
183189 <br />
184190
185- <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
191+ <fieldset class="palgroup palgroup2" data-objid="palgroup2" style="width:400px; height:130px;" title="動きを設定するパレットです">
186192 <legend class="pallegend"> Action Palette </legend>
187193 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
188194 <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
189195 </div>
190- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
191- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
192- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
193- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
194- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
196+ <ul class="palflex">
197+ <li class="palact palact0" data-objid="palact0" data-palid="0"></li>
198+ <li class="palact palact1" data-objid="palact1" data-palid="1"></li>
199+ <li class="palact palact2" data-objid="palact2" data-palid="2"></li>
200+ <li class="palact palact3" data-objid="palact3" data-palid="3"></li>
201+ <li class="palact palact4" data-objid="palact4" data-palid="4"></li>
202+ </ul>
203+ <div class="palsize"></div>
195204 </fieldset>
196205
197206 <fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (revision 51)
@@ -4,10 +4,8 @@
44 class appArea {
55 constructor(dom) {
66 this.DOMobject = dom;
7- this.mouseMoveFunc = null;
8- this.mouseUpFunc = null;
9- this.touchMoveFunc = null;
10- this.touchEndFunc = null;
7+
8+ this.clearCallEventObj();
119 }
1210 // 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
1311 // 取得するための正規表現object取得
@@ -112,6 +110,26 @@
112110 this.mouseMoveFunc = mouseMove;
113111 this.mouseUpFunc = mouseUp;
114112 }
113+ setInputEventObj(
114+ strclass, // End event callback 第2引数 targetとして返してほしいelementが持つ css class名
115+ funcMove, // Move eventで呼んでほしい関数 or null
116+ funcEnd // End eventで呼んでほしい関数 or null
117+ ) {
118+ this.debuglog('setInputEventObj strclass=' + strclass + ', callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ', callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
119+
120+ // Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
121+ if (null != funcMove || null != funcEnd) {
122+ if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
123+ console.error('入力イベント callback設定上書き \n\
124+Before strclass=' + this.strclass + 'callbackMove=' + (this.inputMoveFunc ? this.inputMoveFunc.name : 'null') + ', callbackUp=' + (this.inputEndFunc ? this.inputEndFunc.name : 'null') + '\n\
125+After strclass=' + strclass + 'callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ', callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
126+ }
127+ }
128+
129+ this.strclass = strclass;
130+ this.inputMoveFunc = funcMove;
131+ this.inputEndFunc = funcEnd;
132+ }
115133 // Touch I/F 用
116134 // 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
117135 setSingleTouchEventObj(
@@ -143,6 +161,8 @@
143161 this.mouseUpFunc = null;
144162 this.touchMoveFunc = null;
145163 this.touchEndFunc = null;
164+ this.inputMoveFunc = null;
165+ this.inputEndFunc = null;
146166 }
147167 // Event handler -------------------
148168
@@ -159,11 +179,17 @@
159179 if (null != this.mouseMoveFunc) {
160180 this.mouseMoveFunc(evt);
161181 }
182+ if (null != this.inputMoveFunc) {
183+ this.inputMoveFunc(evt);
184+ }
162185 }
163186 onTouchMove(evt){
164187 if (null != this.touchMoveFunc) {
165188 this.touchMoveFunc(evt.targetTouches[0], evt);
166189 }
190+ if (null != this.inputMoveFunc) {
191+ this.inputMoveFunc(evt);
192+ }
167193 }
168194
169195 // ドロップ処理
@@ -178,6 +204,9 @@
178204 if (null != this.mouseUpFunc) {
179205 this.mouseUpFunc(evt, e);
180206 }
207+ if (null != this.inputEndFunc) {
208+ this.inputEndFunc(evt, e);
209+ }
181210 }
182211 onTouchEnd(evt){
183212 this.debuglog('タッチエンド onTouchEnd() findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
@@ -190,6 +219,9 @@
190219 if (null != this.touchEndFunc) {
191220 this.touchEndFunc(evt.changedTouches[0], e, evt);
192221 }
222+ if (null != this.inputEndFunc) {
223+ this.inputEndFunc(evt, e);
224+ }
193225 }
194226
195227
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 51)
@@ -9,7 +9,7 @@
99 // パレットのCSS機能ボタンを押したときに実行する機能を提供する
1010 // (保持中CSS class nameを対象Elementに付加, 削除)
1111 // (Button instanceが自分の機能を意識しないようにするためのclass)
12-class PaletteCSS {
12+class PaletteApplyCSS {
1313 constructor() {
1414 this.paletteRule = null;
1515 this.dataScheme = null;
@@ -91,12 +91,12 @@
9191 getDescription() {
9292 return this.description;
9393 }
94-} PaletteCSS
94+}
9595
9696 // パレットのFunctionボタンを押したときに実行する機能を提供する
9797 class PaletteFunction {
9898 constructor() {
99- this.paletteFunction = null;
99+ this.palettePressFunction = null;
100100 this.dataScheme = null;
101101 this.description = null;
102102 this.replaceObject = null;
@@ -117,25 +117,25 @@
117117 // 登録するとき、必要に応じてthisやargをbindすること
118118
119119 registerFunction(func) {
120- if (null != this.paletteFunction) {
121- console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ', 今回の機能 = ' + func.name);
120+ if (null != this.palettePressFunction) {
121+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.palettePressFunction.name + ', 今回の機能 = ' + func.name);
122122 // ひとまず処理継続
123123 }
124- this.paletteFunction = func;
124+ this.palettePressFunction = func;
125125 return true;
126126 }
127127 removeFunction() {
128- this.paletteFunction = null;
128+ this.palettePressFunction = null;
129129 }
130130 getFunction() {
131- return this.paletteFunction;
131+ return this.palettePressFunction;
132132 }
133133 executeFunction() {
134- if (null == this.paletteFunction) {
134+ if (null == this.palettePressFunction) {
135135 console.error('パレット機能登録前に呼び出そうとした');
136136 return false;
137137 }
138- return this.paletteFunction();
138+ return this.palettePressFunction();
139139 }
140140
141141 // executeFunction実行後に PaletteFunction の Instance を入れ替える設定
@@ -181,86 +181,86 @@
181181 // パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
182182 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
183183 var paletteFunctionObjects = (function () {
184- let paletteFunction = [];
184+ let palettePressFunction =[];
185185
186186 var defineFunctions = function () {
187187 let cnt = 0;
188188 // 設定パレット非表示設定
189- paletteFunction[cnt] = new PaletteFunction();
190- paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
191- paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
192- paletteFunction[cnt].registerImage("images/StoreLogo.png");
189+ palettePressFunction[cnt] = new PaletteFunction();
190+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
191+ palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
192+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
193193 cnt++;
194194 // 選択要素削除
195- paletteFunction[cnt] = new PaletteFunction();
196- paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
197- paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
198- paletteFunction[cnt].registerImage("images/StoreLogo.png");
195+ palettePressFunction[cnt] = new PaletteFunction();
196+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
197+ palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
198+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
199199 cnt++;
200200 // 枠の表示/非表示
201- paletteFunction[cnt] = new PaletteFunction();
202- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
203- paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
204- paletteFunction[cnt].registerImage("images/StoreLogo.png");
201+ palettePressFunction[cnt] = new PaletteFunction();
202+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
203+ palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
204+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
205205 cnt++;
206- paletteFunction[cnt] = new PaletteFunction();
207- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
208- paletteFunction[cnt].registerDescription("識別用の枠を消します。");
209- paletteFunction[cnt].registerImage("images/StoreLogo.png");
210- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
211- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
206+ palettePressFunction[cnt] = new PaletteFunction();
207+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
208+ palettePressFunction[cnt].registerDescription("識別用の枠を消します。");
209+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
210+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
211+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
212212 cnt++;
213213 // アニメーションする/しない設定
214- paletteFunction[cnt] = new PaletteFunction();
215- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
216- paletteFunction[cnt].registerDescription("アニメーションを停止します。");
217- paletteFunction[cnt].registerImage("images/StoreLogo.png");
214+ palettePressFunction[cnt] = new PaletteFunction();
215+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
216+ palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
217+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
218218 cnt++;
219- paletteFunction[cnt] = new PaletteFunction();
220- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
221- paletteFunction[cnt].registerDescription("アニメーションを再開します。");
222- paletteFunction[cnt].registerImage("images/StoreLogo.png");
223- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
224- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
219+ palettePressFunction[cnt] = new PaletteFunction();
220+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
221+ palettePressFunction[cnt].registerDescription("アニメーションを再開します。");
222+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
223+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
224+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
225225 cnt++;
226226 // パレット上の要素は常にアニメーションをしない/する設定
227- paletteFunction[cnt] = new PaletteFunction();
228- paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
229- paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
230- paletteFunction[cnt].registerImage("images/StoreLogo.png");
227+ palettePressFunction[cnt] = new PaletteFunction();
228+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
229+ palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
230+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
231231 cnt++;
232- paletteFunction[cnt] = new PaletteFunction();
233- paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
234- paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
235- paletteFunction[cnt].registerImage("images/StoreLogo.png");
236- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
237- paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
232+ palettePressFunction[cnt] = new PaletteFunction();
233+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
234+ palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
235+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
236+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
237+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
238238 cnt++;
239239 // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
240- paletteFunction[cnt] = new PaletteFunction();
241- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
242- paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
243- paletteFunction[cnt].registerImage("images/StoreLogo.png");
240+ palettePressFunction[cnt] = new PaletteFunction();
241+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
242+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
243+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
244244 cnt++;
245- paletteFunction[cnt] = new PaletteFunction();
246- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
247- paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
248- paletteFunction[cnt].registerImage("images/StoreLogo.png");
249- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
250- paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
245+ palettePressFunction[cnt]= new PaletteFunction();
246+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
247+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
248+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
249+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
250+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
251251 cnt++;
252252 // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
253- paletteFunction[cnt] = new PaletteFunction();
254- paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
255- paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
256- paletteFunction[cnt].registerImage("images/StoreLogo.png");
253+ palettePressFunction[cnt] = new PaletteFunction();
254+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
255+ palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
256+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
257257 cnt++;
258- paletteFunction[cnt] = new PaletteFunction();
259- paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
260- paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
261- paletteFunction[cnt].registerImage("images/StoreLogo.png");
262- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
263- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
258+ palettePressFunction[cnt] = new PaletteFunction();
259+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
260+ palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
261+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
262+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
263+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
264264 cnt++;
265265 };
266266 defineFunctions();
@@ -267,11 +267,11 @@
267267
268268 return {
269269 getItem: function (num) {
270- if (paletteFunction.length <= num) {
271- console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + paletteFunction.length);
270+ if (palettePressFunction.length <= num) {
271+ console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + palettePressFunction.length);
272272 return null;
273273 }
274- return paletteFunction[num];
274+ return palettePressFunction[num];
275275 }
276276 };
277277 })();
@@ -281,7 +281,7 @@
281281 class PaletteShapeFunctionButton {
282282 constructor() {
283283 this.DOMobject = null;
284- this.paletteFunction = null;
284+ this.palettePressFunction = null;
285285 }
286286
287287 // 表示に使用するDOM要素を作成
@@ -288,7 +288,8 @@
288288 // DOM 要素を作成してこの Instance の表示要素として登録
289289 createButtonElement(parent) {
290290 if (null != this.DOMobject) {
291- console.error('パレットボタン ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
291+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
292+ // そのまま実行
292293 }
293294
294295 this.DOMobject = document.createElement('div');
@@ -304,11 +305,11 @@
304305 // 既に存在する Element をこの Instance の表示要素として登録する
305306 setButtonElement(ele) {
306307 if (null == ele) {
307- console.error('パレットボタン ボタン要素設定エラー 引数の要素が未設定');
308+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素設定エラー 引数の要素が未設定');
308309 return false;
309310 }
310311 if (null != this.DOMobject) {
311- console.error('パレットボタン ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
312+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
312313 }
313314 this.DOMobject = ele;
314315 this.setDomHandler();
@@ -324,15 +325,15 @@
324325 // Palent の left, top, width, height に合わせたサイズで表示する
325326 setPalentElement(ele) {
326327 if (null == ele) {
327- console.error('パレットボタン 親要素設定エラー 引数の親要素が未設定');
328+ console.error('パレットボタン(PaletteShapeFunctionButton) 親要素設定エラー 引数の親要素が未設定');
328329 return false;
329330 }
330331 if (null == this.DOMobject) {
331- console.error('パレットボタン 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
332+ console.error('パレットボタン(PaletteShapeFunctionButton) 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
332333 return false;
333334 }
334335
335- if (null == this.DOMobject.parentNode) console.log('パレットボタン 親要素設定未設定状態');
336+ if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton) 親要素設定未設定状態');
336337 else this.DOMobject.parentNode.removeChild(this.DOMobject);
337338
338339 // 最も手前に追加
@@ -343,20 +344,20 @@
343344 }
344345
345346 // ボタン Click で実行する機能を登録
346- setPaletteFunction(palfunc) {
347- if (null != this.paletteFunction) {
348- console.error('パレットボタンへの機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
347+ setPalettePressFunction(palfunc) {
348+ if (null != this.palettePressFunction) {
349+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
349350 // ひとまず処理継続
350351 }
351- this.paletteFunction = palfunc;
352+ this.palettePressFunction = palfunc;
352353
353354 // 表示要素の更新
354- this.DOMobject.title = this.paletteFunction.getDescription();
355- this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
355+ this.DOMobject.title = this.palettePressFunction.getDescription();
356+ this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
356357 this.DOMobject.style.backgroundSize = 'cover';
357358 }
358- clearPaletteFunction() {
359- this.paletteFunction = null;
359+ clearPalettePressFunction() {
360+ this.palettePressFunction = null;
360361 this.DOMobject.title = null;
361362 this.DOMobject.style.backgroundImage = 'none';
362363 }
@@ -367,10 +368,10 @@
367368 setDomHandler() {
368369 this.DOMobject.classList.add('palbutton');
369370 this.DOMobject.dataset.objid = 'palbutton';
370- this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
371- this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
372- this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
373- this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
371+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
372+ this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
373+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
374+ this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
374375 this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
375376 this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
376377 this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -379,22 +380,22 @@
379380
380381 // Event handler ------------------------
381382
382- onMouseDownPaletteShape(evt) {
383+ onMouseDownPaletteShapeFunctionButton(evt) {
383384 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
384385 evt.preventDefault(); // 要素既定のdefault動作を止める
385386 }
386- onMouseUpPaletteShape(evt) {
387+ onMouseUpPaletteShapeFunctionButton(evt) {
387388 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
388389 evt.preventDefault(); // 要素既定のdefault動作を止める
389390
390- // 登録処理実行
391- this.paletteFunction.executeFunction();
391+ // Function実行
392+ this.palettePressFunction.executeFunction();
392393
393394 // Toggle button 処理
394- let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
395+ let replaceObject = this.palettePressFunction.getObjectToReplaceAfterExecution();
395396 if (null != replaceObject) {
396- this.clearPaletteFunction();
397- this.setPaletteFunction(replaceObject);
397+ this.clearPalettePressFunction();
398+ this.setPalettePressFunction(replaceObject);
398399 }
399400 }
400401 } // class PaletteShapeFunctionButton
@@ -405,24 +406,270 @@
405406 // DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
406407 // Input eventから必要機能の呼び出し
407408 class PaletteShapeCSSButton {
408-}
409+ constructor() {
410+ this.DOMobject = null;
411+ this.paletteDropFunction = null;
412+ }
409413
410-// Drop file(CSS定義test)の内容読み込み
411-// string objectを返す
412-// Stringの解析
413-// class name取得
414-// 定義内容取得
415-// description取得
416-// data scheme取得
417-// StringをStyle elementへadd - Ruleへの参照を返す
418-// Element指定は必須
419-// StringをStyle elementへreplace - Ruleへの参照を返す
420-// Element指定は必須
421-// CSS class name指定でRuleへの参照を返す
422-// Element指定あり …… 指定Element内から検索
423-// Element指定なし …… document全体から検索
414+ // 表示に使用するDOM要素を作成
415+ // DOM 要素を作成してこの Instance の表示要素として登録
416+ createButtonElement(parent) {
417+ if (null != this.DOMobject) {
418+ console.error('パレットボタン(PaletteShapeCSSButton) ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
419+ // そのまま実行
420+ }
424421
422+ this.DOMobject = document.createElement('div');
423+ this.setDomHandler();
425424
425+ // 引数 Element の Child として登録
426+ this.setPalentElement(parent);
427+
428+ return true;
429+ }
430+
431+ // 親要素設定。所属パレットを切り替えたい場合など
432+ // ボタンを引数 Element の Child として登録する
433+ // Palent は position:static 以外の指定が必須
434+ // Palent の left, top, width, height に合わせたサイズで表示する
435+ setPalentElement(ele) {
436+ if (null == ele) {
437+ console.error('パレットボタン(PaletteShapeCSSButton) 親要素設定エラー 引数の親要素が未設定');
438+ return false;
439+ }
440+ if (null == this.DOMobject) {
441+ console.error('パレットボタン(PaletteShapeCSSButton) 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
442+ return false;
443+ }
444+
445+ if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton) 親要素設定未設定状態');
446+ else this.DOMobject.parentNode.removeChild(this.DOMobject);
447+
448+ // 最も手前に追加
449+ // DOM tree に入ったタイミングで CSS 設定が適用される
450+ // (親要素の位置とサイズにフィットする)
451+ ele.appendChild(this.DOMobject);
452+ return true;
453+ }
454+
455+ // Paletteボタン対象Dropで実行する機能を登録
456+ setPaletteDropFunction(dropcssfunc) {
457+ if (null != this.paletteDropFunction) {
458+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
459+ // ひとまず処理継続
460+ }
461+ this.paletteDropFunction = palfunc;
462+
463+ // 表示要素の更新
464+ this.DOMobject.title = this.palettePressFunction.getDescription();
465+ this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
466+ this.DOMobject.style.backgroundSize = 'cover';
467+ }
468+
469+ clearPaletteDropFunction() {
470+ this.paletteDropFunction = null;
471+ this.DOMobject.title = null;
472+ this.DOMobject.style.backgroundImage = 'none';
473+ }
474+
475+
476+ // Private 関数 ------------------------
477+
478+ setDomHandler() {
479+ this.DOMobject.classList.add('palbutton');
480+ this.DOMobject.dataset.objid = 'palbutton';
481+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
482+ // this.DOMobject.addEventListener('mousemove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
483+ // this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
484+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
485+ // this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
486+ // this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
487+ this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
488+ this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
489+ this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
490+ }
491+
492+
493+ // Event handler ------------------------
494+
495+ // Mouse/Touch event handler
496+ // Mouse Up座標にあるElementにCSS classを追加する
497+
498+ // 移動対象Palette要素選択
499+ onMouseDownPaletteShapeCSSButton(evt) {
500+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
501+ evt.preventDefault(); // 要素既定のdefault動作を止める
502+ // Mouse/Touch event 差分
503+ let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
504+
505+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
506+ window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
507+ this.startMovingElement(evt);
508+ }
509+ startMovingElement(evt){
510+ // Drag対象を保持
511+ this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
512+ // ElementのDrag開始位置を保持
513+ this.startElementX = parseInt(this.draggingDOM.style.left);
514+ this.startElementY = parseInt(this.draggingDOM.style.top);
515+ // MouseのDrag開始位置を保持
516+ this.startDragX = evt.pageX;
517+ this.startDragY = evt.pageY;
518+ this.draggingDOM.style.opacity = 0.4;
519+ }
520+
521+ // Palette要素移動
522+ onMouseMovePaletteShapeCSSButton(evt) {
523+ if (null == this.draggingDOM) return;
524+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
525+ evt.preventDefault(); // 要素既定のdefault動作を止める
526+
527+ // 画像の仮移動
528+ this.endDragX = evt.pageX;
529+ this.endDragY = evt.pageY;
530+ // 移動量取得
531+ let moveX = this.endDragX - this.startDragX;
532+ let moveY = this.endDragY - this.startDragY;
533+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
534+ moveX = this.startElementX + moveX;
535+ moveY = this.startElementY + moveY;
536+
537+ window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
538+ }
539+ renderMoveDragging(x, y) {
540+ if (null == this.draggingDOM) return;
541+ this.draggingDOM.style.left = x + "px";
542+ this.draggingDOM.style.top = y + "px";
543+ }
544+
545+ // Palette要素移動完了
546+ onMouseUpPaletteShapeCSSButton(evt) {
547+ if (null == this.draggingDOM) return;
548+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
549+ evt.preventDefault(); // 要素既定のdefault動作を止める
550+ this.endMovingElement(evt);
551+ }
552+ endMovingElement(evt) {
553+ // 初期表示状態に戻す
554+ this.draggingDOM.style.left = this.startElementX + "px";
555+ this.draggingDOM.style.top = this.startElementY + "px";
556+ this.draggingDOM.style.opacity = 1.0;
557+
558+ // Drag中 element情報をクリア
559+ this.draggingDOM = null;
560+ // Mouse event callback設定をクリア
561+ window.appArea.clearCallEventObj();
562+
563+ // マウス座標直下にある要素を検索
564+ // (evt.targetは自分を指してしまうため)
565+ let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
566+ if (null == target) {
567+ if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
568+ target = window.frameArea;
569+ }
570+
571+ // Target element へ CSS classを追加する
572+ }
573+
574+
575+ // Drag&Drop event
576+ // Applicationの外からFile Dropされたときに
577+ // File内容情報を読み込み、CSSに反映させる
578+ onDragStartPaletteShapeCSSButton(evt) {
579+ evt.preventDefault();
580+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
581+ }
582+ onDragOverPaletteShapeCSSButton(evt) {
583+ evt.preventDefault();
584+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
585+ evt.dataTransfer.dropEffect = "copy";
586+ }
587+ onDropPaletteShapeCSSButton(evt) {
588+ this.debuglog('onDrop');
589+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
590+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
591+ evt.preventDefault(); // 要素既定のdefault動作を止める
592+
593+ // Text, Imageそれぞれの解析処理呼び出し
594+ getDropFile(evt, this.replaceCSSText.bind(this), this.parseImage.bind(this), this.parseError.bind(this));
595+ }
596+
597+ replaceCSSText(file) {
598+ let cssText = null;
599+ cssText = this.paletteTextParser.readTextFile(file);
600+ this.paletteTextParser.parseText(cssText);
601+ let rule = this.paletteApplyCss.getCSS();
602+ this.paletteTextParser.replaceCSSRule(rule, cssText);
603+ }
604+ parseImage(file) {
605+ console.error('画像ファイルには未対応');
606+ return false;
607+ }
608+ parseError() {
609+ console.error('ドロップファイル解析エラー');
610+ return false;
611+ }
612+} // class PaletteShapeCSSButton
613+
614+// Text解析、CSS登録
615+// CSSの汎用操作を扱うわけではない
616+// 解析後のTextやImageは保持しない
617+// singletonにしたいがやり方がわからないので1つだけ作るようにする;´Д`)運用でカバー
618+class PaletteCSSTextParser {
619+ constructor() {
620+ this.filename = null;
621+ this.cssText = null;
622+ }
623+
624+ // Drop file(CSS定義test)の内容読み込み(file, ele, num)
625+ // 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
626+ // keyframeはkeyframe登録専用のstyle elementに登録する
627+ // string objectを返す
628+ // 引数style elementへのCSS登録
629+ // num番目のCSSへ上書きする
630+ // (len <= num) or (num < 0) はaddする
631+ readTextFile(
632+ file, // 読みこむ対象ファイル
633+ readComplete // 読み込み完了Callback(function(fileReadStr))
634+ ) {
635+ // file名保持
636+ this.filename = file.name;
637+
638+ let text = null;
639+ // drop fileの読み込み
640+ let reader = new FileReader();
641+ // Text fileを読み込み
642+ reader.readAsText(file);
643+ reader.onload = function (evt) {
644+ this.cssText = evt.target.result; // 読み込んだ文字列
645+ if (null != readComplete)
646+ readComplete(this.cssText);
647+ }.bind(this);
648+ }
649+
650+ // Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
651+ // class name取得
652+ // 定義内容取得
653+ // description取得
654+ // data scheme取得
655+ // comment取得
656+ parseText(str) {
657+ // Textを下記要素に分解する
658+ // ・
659+ }
660+
661+ // StringをStyle elementへadd - Ruleへの参照を返す
662+ // Element指定は必須
663+ // StringをStyle elementへreplace - Ruleへの参照を返す
664+ // Element指定は必須
665+ replaceCSSRule(rule, text) {
666+ }
667+
668+ // CSS class name指定でRuleへの参照を返す
669+ // Element指定あり …… 指定Element内から検索
670+ // Element指定なし …… document全体から検索
671+}
672+
426673 class CSSPalette {
427674 constructor() {
428675 this.draggingDOM = null;
@@ -440,6 +687,14 @@
440687
441688 // palette要素を保持
442689 // 背景設定パレット
690+ let elePalbg = document.getElementsByClassName('palbg');
691+ this.palBackground = [];
692+ for (let cnt = 0; cnt < elePalbg.length; cnt++) {
693+ this.palBackground[cnt] = new PaletteShapeCSSButton();
694+ this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
695+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
696+ }
697+/*
443698 this.DOMpalbg = document.getElementsByClassName('palbg');
444699 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
445700 this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -452,7 +707,16 @@
452707 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
453708 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
454709 }
455- // テキストカラーパレット
710+*/
711+ // スタイルパレット
712+ let elePalstyle = document.getElementsByClassName('paltxtcol');
713+ this.palStyle = [];
714+ for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
715+ this.palStyle[cnt] = new PaletteShapeCSSButton();
716+ this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
717+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
718+ }
719+/*
456720 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
457721 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
458722 this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -465,7 +729,16 @@
465729 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
466730 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
467731 }
732+*/
468733 // アクションパレット
734+ let elePalaction = document.getElementsByClassName('palact');
735+ this.palAction = [];
736+ for (let cnt = 0; cnt < elePalaction.length; cnt++) {
737+ this.palAction[cnt] = new PaletteShapeCSSButton();
738+ this.palAction[cnt].createButtonElement(elePalaction[cnt]);
739+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
740+ }
741+/*
469742 this.DOMpalact = document.getElementsByClassName('palact');
470743 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
471744 this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -478,6 +751,7 @@
478751 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
479752 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
480753 }
754+*/
481755 // 設定パレット
482756 // (リファクタにより、設定パレットのみ処理を別物にしている)
483757 let palfuncs = [
@@ -490,11 +764,11 @@
490764 paletteFunctionObjects.getItem(10) // Toggle Scale font size
491765 ];
492766 let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
493- this.palSetting = [];
767+ this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
494768 for (let cnt = 0; cnt < elePalset.length; cnt++) {
495- this.palSetting[cnt] = new PaletteShapeFunctionButton();
496- this.palSetting[cnt].createButtonElement(elePalset[cnt]);
497- this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
769+ this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
770+ this.palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
771+ this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
498772 }
499773 /*
500774 // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
@@ -692,7 +966,7 @@
692966 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
693967 evt.preventDefault(); // 要素既定のdefault動作を止める
694968 // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
695- window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
969+ window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
696970 this.startMovingElement(evt.targetTouches[0]);
697971 }
698972 startMovingElement(evt){
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 51)
@@ -38,7 +38,9 @@
3838
3939 let palsize = document.getElementsByClassName('palsize');
4040 this.paletteSizeChanger = [];
41- this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
41+ for (let cnt = 0; cnt < palsize.length; cnt++) {
42+ this.paletteSizeChanger[cnt] = new PalGroupSize(palsize[cnt]);
43+ }
4244 }
4345
4446 // 操作関数 ----------------------------
@@ -148,6 +150,9 @@
148150 this.DOMobject.title = "ドラッグでサイズを変更します";
149151 this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
150152 this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
153+ if (null == this.DOMobject.parentNode) {
154+ console.error('パレットサイズ変更エラー 指定要素の親要素が見つかりません。\nサイズ変更対象が見つからないためパレットのサイズは変更できません');
155+ }
151156 }
152157
153158 onMouseDownPalGroupSize(evt) {
@@ -167,13 +172,13 @@
167172 this.startChangingSize(evt.targetTouches[0]);
168173 }
169174 startChangingSize(evt) {
170- let target = evt.target.parentNode;
175+ let target = this.DOMobject.parentNode;
171176 this.startLeft = parseInt(target.style.left);
172177 this.startTop = parseInt(target.style.top);
173- this.startWidth = parseInt(target.style.width);
178+ this.startWidth = parseInt(target.style.width);
174179 this.startHeight = parseInt(target.style.height);
175- this.startDragX = evt.pageX;
176- this.startDragY = evt.pageY;
180+ this.startDragX = evt.pageX;
181+ this.startDragY = evt.pageY;
177182 }
178183
179184 InputMovePalGroupSize(evt, touchevt) {
@@ -192,10 +197,10 @@
192197 window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
193198 }
194199 renderInputMovePalGroupSize(eleTarget, left, top, width, height) {
195- eleTarget.style.left = left + "px";
196- eleTarget.style.top = top + "px";
197- eleTarget.style.width = width + "px";
198- eleTarget.style.height = height + "px";
200+ eleTarget.style.left = left + "px";
201+ eleTarget.style.top = top + "px";
202+ eleTarget.style.width = width + "px";
203+ eleTarget.style.height = height + "px";
199204 }
200205
201206 InputUpPalGroupSize(evt, touchevt) {
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 51)
@@ -188,16 +188,28 @@
188188 border: 1px solid rgba(0,0,0,0.2);
189189 background-color: rgba(27, 158, 131, 0.6);
190190 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
191+ /* ********************** */
192+ position: relative;
193+ width: 60px; height: 60px;
194+ margin: 7px 7px; padding: 0;
191195 }
192196 .paltxtcol {
193197 border: 1px solid rgba(0,0,0,0.2);
194198 background-color: rgba(154,145,140,0.6);
195199 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
200+ /* ********************** */
201+ position: relative;
202+ width: 60px; height: 60px;
203+ margin: 7px 7px; padding: 0;
196204 }
197205 .palact {
198206 border: 1px solid rgba(0,0,0,0.2);
199207 background-color: rgba(156, 165, 55, 0.6);
200208 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
209+ /* ********************** */
210+ position: relative;
211+ width: 60px; height: 60px;
212+ margin: 7px 7px; padding: 0;
201213 }
202214 .palset {
203215 border: 1px solid rgba(0,0,0,0.2);
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 51)
@@ -155,43 +155,52 @@
155155 }
156156 </style>
157157
158- <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
158+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
159159 <legend class="pallegend"> Background Palette </legend>
160160 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
161161 <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
162162 </div>
163- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
164- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
165- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
166- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
167- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
163+ <ul class="palflex">
164+ <li class="palbg palbg0" data-objid="palbg0" data-palid="0"></li>
165+ <li class="palbg palbg1" data-objid="palbg1" data-palid="1"></li>
166+ <li class="palbg palbg2" data-objid="palbg2" data-palid="2"></li>
167+ <li class="palbg palbg3" data-objid="palbg3" data-palid="3"></li>
168+ <li class="palbg palbg4" data-objid="palbg4" data-palid="4"></li>
169+ </ul>
170+ <div class="palsize"></div>
168171 </fieldset>
169172 <br />
170173
171- <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
174+ <fieldset class="palgroup palgroup1" data-objid="palgroup1" style="width:400px; height:130px;" title="テキストの色を設定するパレットです">
172175 <legend class="pallegend"> Style Palette </legend>
173176 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
174177 <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
175178 </div>
176- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></div>
177- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></div>
178- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></div>
179- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></div>
180- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></div>
179+ <ul class="palflex">
180+ <li class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
181+ <li class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
182+ <li class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
183+ <li class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
184+ <li class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
185+ </ul>
186+ <div class="palsize"></div>
181187 </fieldset>
182188
183189 <br />
184190
185- <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
191+ <fieldset class="palgroup palgroup2" data-objid="palgroup2" style="width:400px; height:130px;" title="動きを設定するパレットです">
186192 <legend class="pallegend"> Action Palette </legend>
187193 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
188194 <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
189195 </div>
190- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
191- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
192- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
193- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
194- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
196+ <ul class="palflex">
197+ <li class="palact palact0" data-objid="palact0" data-palid="0"></li>
198+ <li class="palact palact1" data-objid="palact1" data-palid="1"></li>
199+ <li class="palact palact2" data-objid="palact2" data-palid="2"></li>
200+ <li class="palact palact3" data-objid="palact3" data-palid="3"></li>
201+ <li class="palact palact4" data-objid="palact4" data-palid="4"></li>
202+ </ul>
203+ <div class="palsize"></div>
195204 </fieldset>
196205
197206 <fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">
--- HtmlDrawApp/HTMLDrawApp/js/apparea.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js (revision 51)
@@ -4,10 +4,8 @@
44 class appArea {
55 constructor(dom) {
66 this.DOMobject = dom;
7- this.mouseMoveFunc = null;
8- this.mouseUpFunc = null;
9- this.touchMoveFunc = null;
10- this.touchEndFunc = null;
7+
8+ this.clearCallEventObj();
119 }
1210 // 保存ファイルから編集エリア内容 (DispFieldの divとそこに連なるelement) を
1311 // 取得するための正規表現object取得
@@ -112,6 +110,26 @@
112110 this.mouseMoveFunc = mouseMove;
113111 this.mouseUpFunc = mouseUp;
114112 }
113+ setInputEventObj(
114+ strclass, // End event callback 第2引数 targetとして返してほしいelementが持つ css class名
115+ funcMove, // Move eventで呼んでほしい関数 or null
116+ funcEnd // End eventで呼んでほしい関数 or null
117+ ) {
118+ this.debuglog('setInputEventObj strclass=' + strclass + ', callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ', callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
119+
120+ // Callbackを上書きしてしまう場合はエラー出力し、ひとまず処理を継続
121+ if (null != funcMove || null != funcEnd) {
122+ if (null != this.mouseMoveFunc || null != this.mouseUpFunc) {
123+ console.error('入力イベント callback設定上書き \n\
124+Before strclass=' + this.strclass + 'callbackMove=' + (this.inputMoveFunc ? this.inputMoveFunc.name : 'null') + ', callbackUp=' + (this.inputEndFunc ? this.inputEndFunc.name : 'null') + '\n\
125+After strclass=' + strclass + 'callbackMove=' + ((null != funcMove) ? funcMove.name : 'null') + ', callbackUp=' + ((null != funcEnd) ? funcEnd.name : 'null'));
126+ }
127+ }
128+
129+ this.strclass = strclass;
130+ this.inputMoveFunc = funcMove;
131+ this.inputEndFunc = funcEnd;
132+ }
115133 // Touch I/F 用
116134 // 最初のtouch objectのみを返す (そのため mouse I/Fと同じように扱える)
117135 setSingleTouchEventObj(
@@ -143,6 +161,8 @@
143161 this.mouseUpFunc = null;
144162 this.touchMoveFunc = null;
145163 this.touchEndFunc = null;
164+ this.inputMoveFunc = null;
165+ this.inputEndFunc = null;
146166 }
147167 // Event handler -------------------
148168
@@ -159,11 +179,17 @@
159179 if (null != this.mouseMoveFunc) {
160180 this.mouseMoveFunc(evt);
161181 }
182+ if (null != this.inputMoveFunc) {
183+ this.inputMoveFunc(evt);
184+ }
162185 }
163186 onTouchMove(evt){
164187 if (null != this.touchMoveFunc) {
165188 this.touchMoveFunc(evt.targetTouches[0], evt);
166189 }
190+ if (null != this.inputMoveFunc) {
191+ this.inputMoveFunc(evt);
192+ }
167193 }
168194
169195 // ドロップ処理
@@ -178,6 +204,9 @@
178204 if (null != this.mouseUpFunc) {
179205 this.mouseUpFunc(evt, e);
180206 }
207+ if (null != this.inputEndFunc) {
208+ this.inputEndFunc(evt, e);
209+ }
181210 }
182211 onTouchEnd(evt){
183212 this.debuglog('タッチエンド onTouchEnd() findClass=' + this.strclass + ', callback move=' + (this.touchMoveFunc ? this.touchMoveFunc.name : 'null') + ', End=' + (this.touchEndFunc ? this.touchEndFunc.name : 'null'));
@@ -190,6 +219,9 @@
190219 if (null != this.touchEndFunc) {
191220 this.touchEndFunc(evt.changedTouches[0], e, evt);
192221 }
222+ if (null != this.inputEndFunc) {
223+ this.inputEndFunc(evt, e);
224+ }
193225 }
194226
195227
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 51)
@@ -9,7 +9,7 @@
99 // パレットのCSS機能ボタンを押したときに実行する機能を提供する
1010 // (保持中CSS class nameを対象Elementに付加, 削除)
1111 // (Button instanceが自分の機能を意識しないようにするためのclass)
12-class PaletteCSS {
12+class PaletteApplyCSS {
1313 constructor() {
1414 this.paletteRule = null;
1515 this.dataScheme = null;
@@ -91,12 +91,12 @@
9191 getDescription() {
9292 return this.description;
9393 }
94-} PaletteCSS
94+}
9595
9696 // パレットのFunctionボタンを押したときに実行する機能を提供する
9797 class PaletteFunction {
9898 constructor() {
99- this.paletteFunction = null;
99+ this.palettePressFunction = null;
100100 this.dataScheme = null;
101101 this.description = null;
102102 this.replaceObject = null;
@@ -117,25 +117,25 @@
117117 // 登録するとき、必要に応じてthisやargをbindすること
118118
119119 registerFunction(func) {
120- if (null != this.paletteFunction) {
121- console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ', 今回の機能 = ' + func.name);
120+ if (null != this.palettePressFunction) {
121+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.palettePressFunction.name + ', 今回の機能 = ' + func.name);
122122 // ひとまず処理継続
123123 }
124- this.paletteFunction = func;
124+ this.palettePressFunction = func;
125125 return true;
126126 }
127127 removeFunction() {
128- this.paletteFunction = null;
128+ this.palettePressFunction = null;
129129 }
130130 getFunction() {
131- return this.paletteFunction;
131+ return this.palettePressFunction;
132132 }
133133 executeFunction() {
134- if (null == this.paletteFunction) {
134+ if (null == this.palettePressFunction) {
135135 console.error('パレット機能登録前に呼び出そうとした');
136136 return false;
137137 }
138- return this.paletteFunction();
138+ return this.palettePressFunction();
139139 }
140140
141141 // executeFunction実行後に PaletteFunction の Instance を入れ替える設定
@@ -181,86 +181,86 @@
181181 // パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
182182 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
183183 var paletteFunctionObjects = (function () {
184- let paletteFunction = [];
184+ let palettePressFunction =[];
185185
186186 var defineFunctions = function () {
187187 let cnt = 0;
188188 // 設定パレット非表示設定
189- paletteFunction[cnt] = new PaletteFunction();
190- paletteFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
191- paletteFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
192- paletteFunction[cnt].registerImage("images/StoreLogo.png");
189+ palettePressFunction[cnt] = new PaletteFunction();
190+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setShowHideSettingPalette.bind(this, false));
191+ palettePressFunction[cnt].registerDescription("設定パレット (このパレット) を非表示にします。表示させたい場合は設定画面から表示設定を変更できます。");
192+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
193193 cnt++;
194194 // 選択要素削除
195- paletteFunction[cnt] = new PaletteFunction();
196- paletteFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
197- paletteFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
198- paletteFunction[cnt].registerImage("images/StoreLogo.png");
195+ palettePressFunction[cnt] = new PaletteFunction();
196+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.removeFocusedObject.bind(this));
197+ palettePressFunction[cnt].registerDescription("選択中の要素を削除します。なにも選択していない場合は何も変化しません。");
198+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
199199 cnt++;
200200 // 枠の表示/非表示
201- paletteFunction[cnt] = new PaletteFunction();
202- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
203- paletteFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
204- paletteFunction[cnt].registerImage("images/StoreLogo.png");
201+ palettePressFunction[cnt] = new PaletteFunction();
202+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, true));
203+ palettePressFunction[cnt].registerDescription("編集中の要素に識別用の枠を表示します。");
204+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
205205 cnt++;
206- paletteFunction[cnt] = new PaletteFunction();
207- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
208- paletteFunction[cnt].registerDescription("識別用の枠を消します。");
209- paletteFunction[cnt].registerImage("images/StoreLogo.png");
210- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
211- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
206+ palettePressFunction[cnt] = new PaletteFunction();
207+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementBorderLine.bind(this, false));
208+ palettePressFunction[cnt].registerDescription("識別用の枠を消します。");
209+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
210+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
211+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
212212 cnt++;
213213 // アニメーションする/しない設定
214- paletteFunction[cnt] = new PaletteFunction();
215- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
216- paletteFunction[cnt].registerDescription("アニメーションを停止します。");
217- paletteFunction[cnt].registerImage("images/StoreLogo.png");
214+ palettePressFunction[cnt] = new PaletteFunction();
215+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, false));
216+ palettePressFunction[cnt].registerDescription("アニメーションを停止します。");
217+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
218218 cnt++;
219- paletteFunction[cnt] = new PaletteFunction();
220- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
221- paletteFunction[cnt].registerDescription("アニメーションを再開します。");
222- paletteFunction[cnt].registerImage("images/StoreLogo.png");
223- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
224- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
219+ palettePressFunction[cnt] = new PaletteFunction();
220+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAnimation.bind(this, true));
221+ palettePressFunction[cnt].registerDescription("アニメーションを再開します。");
222+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
223+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
224+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
225225 cnt++;
226226 // パレット上の要素は常にアニメーションをしない/する設定
227- paletteFunction[cnt] = new PaletteFunction();
228- paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
229- paletteFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
230- paletteFunction[cnt].registerImage("images/StoreLogo.png");
227+ palettePressFunction[cnt] = new PaletteFunction();
228+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, true));
229+ palettePressFunction[cnt].registerDescription("パレットのボタンはアニメーションしないようにします。");
230+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
231231 cnt++;
232- paletteFunction[cnt] = new PaletteFunction();
233- paletteFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
234- paletteFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
235- paletteFunction[cnt].registerImage("images/StoreLogo.png");
236- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
237- paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
232+ palettePressFunction[cnt] = new PaletteFunction();
233+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setAlwaysOffPaletteAnimation.bind(this, false));
234+ palettePressFunction[cnt].registerDescription("パレットのボタンもアニメーションさせます。");
235+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
236+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
237+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
238238 cnt++;
239239 // image要素拡大縮小操作中、画像のアスペクト比を保つ/保たない設定
240- paletteFunction[cnt] = new PaletteFunction();
241- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
242- paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
243- paletteFunction[cnt].registerImage("images/StoreLogo.png");
240+ palettePressFunction[cnt] = new PaletteFunction();
241+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, true));
242+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、元画像の縦横比率を保つようにします。");
243+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
244244 cnt++;
245- paletteFunction[cnt] = new PaletteFunction();
246- paletteFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
247- paletteFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
248- paletteFunction[cnt].registerImage("images/StoreLogo.png");
249- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt -1]);
250- paletteFunction[cnt -1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
245+ palettePressFunction[cnt]= new PaletteFunction();
246+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setElementAspect.bind(this, false));
247+ palettePressFunction[cnt].registerDescription("画像の大きさ変更するとき、縦横の長さを自由に設定できるようにします。");
248+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
249+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
250+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
251251 cnt++;
252252 // div要素拡大縮小操作中、フォントのサイズも変更する/しない設定
253- paletteFunction[cnt] = new PaletteFunction();
254- paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
255- paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
256- paletteFunction[cnt].registerImage("images/StoreLogo.png");
253+ palettePressFunction[cnt] = new PaletteFunction();
254+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, true));
255+ palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさも変更するようにします (枠の縦サイズと連動します)");
256+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
257257 cnt++;
258- paletteFunction[cnt] = new PaletteFunction();
259- paletteFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
260- paletteFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
261- paletteFunction[cnt].registerImage("images/StoreLogo.png");
262- paletteFunction[cnt].setObjectToReplaceAfterExecution(paletteFunction[cnt - 1]);
263- paletteFunction[cnt - 1].setObjectToReplaceAfterExecution(paletteFunction[cnt]);
258+ palettePressFunction[cnt] = new PaletteFunction();
259+ palettePressFunction[cnt].registerFunction(window.MyAppSettings.setScaleFont.bind(this, false));
260+ palettePressFunction[cnt].registerDescription("枠の大きさを変更するとき、文字の大きさは変わらないようにします");
261+ palettePressFunction[cnt].registerImage("images/StoreLogo.png");
262+ palettePressFunction[cnt].setObjectToReplaceAfterExecution(palettePressFunction[cnt - 1]);
263+ palettePressFunction[cnt - 1].setObjectToReplaceAfterExecution(palettePressFunction[cnt]);
264264 cnt++;
265265 };
266266 defineFunctions();
@@ -267,11 +267,11 @@
267267
268268 return {
269269 getItem: function (num) {
270- if (paletteFunction.length <= num) {
271- console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + paletteFunction.length);
270+ if (palettePressFunction.length <= num) {
271+ console.error('パレット機能取得要求エラー 指定された値が範囲外 num = ' + num + ', len = ' + palettePressFunction.length);
272272 return null;
273273 }
274- return paletteFunction[num];
274+ return palettePressFunction[num];
275275 }
276276 };
277277 })();
@@ -281,7 +281,7 @@
281281 class PaletteShapeFunctionButton {
282282 constructor() {
283283 this.DOMobject = null;
284- this.paletteFunction = null;
284+ this.palettePressFunction = null;
285285 }
286286
287287 // 表示に使用するDOM要素を作成
@@ -288,7 +288,8 @@
288288 // DOM 要素を作成してこの Instance の表示要素として登録
289289 createButtonElement(parent) {
290290 if (null != this.DOMobject) {
291- console.error('パレットボタン ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
291+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
292+ // そのまま実行
292293 }
293294
294295 this.DOMobject = document.createElement('div');
@@ -304,11 +305,11 @@
304305 // 既に存在する Element をこの Instance の表示要素として登録する
305306 setButtonElement(ele) {
306307 if (null == ele) {
307- console.error('パレットボタン ボタン要素設定エラー 引数の要素が未設定');
308+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素設定エラー 引数の要素が未設定');
308309 return false;
309310 }
310311 if (null != this.DOMobject) {
311- console.error('パレットボタン ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
312+ console.error('パレットボタン(PaletteShapeFunctionButton) ボタン要素設定エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = ' + ele);
312313 }
313314 this.DOMobject = ele;
314315 this.setDomHandler();
@@ -324,15 +325,15 @@
324325 // Palent の left, top, width, height に合わせたサイズで表示する
325326 setPalentElement(ele) {
326327 if (null == ele) {
327- console.error('パレットボタン 親要素設定エラー 引数の親要素が未設定');
328+ console.error('パレットボタン(PaletteShapeFunctionButton) 親要素設定エラー 引数の親要素が未設定');
328329 return false;
329330 }
330331 if (null == this.DOMobject) {
331- console.error('パレットボタン 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
332+ console.error('パレットボタン(PaletteShapeFunctionButton) 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
332333 return false;
333334 }
334335
335- if (null == this.DOMobject.parentNode) console.log('パレットボタン 親要素設定未設定状態');
336+ if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton) 親要素設定未設定状態');
336337 else this.DOMobject.parentNode.removeChild(this.DOMobject);
337338
338339 // 最も手前に追加
@@ -343,20 +344,20 @@
343344 }
344345
345346 // ボタン Click で実行する機能を登録
346- setPaletteFunction(palfunc) {
347- if (null != this.paletteFunction) {
348- console.error('パレットボタンへの機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
347+ setPalettePressFunction(palfunc) {
348+ if (null != this.palettePressFunction) {
349+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
349350 // ひとまず処理継続
350351 }
351- this.paletteFunction = palfunc;
352+ this.palettePressFunction = palfunc;
352353
353354 // 表示要素の更新
354- this.DOMobject.title = this.paletteFunction.getDescription();
355- this.DOMobject.style.backgroundImage = 'url(' + this.paletteFunction.getImage() + ')';
355+ this.DOMobject.title = this.palettePressFunction.getDescription();
356+ this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
356357 this.DOMobject.style.backgroundSize = 'cover';
357358 }
358- clearPaletteFunction() {
359- this.paletteFunction = null;
359+ clearPalettePressFunction() {
360+ this.palettePressFunction = null;
360361 this.DOMobject.title = null;
361362 this.DOMobject.style.backgroundImage = 'none';
362363 }
@@ -367,10 +368,10 @@
367368 setDomHandler() {
368369 this.DOMobject.classList.add('palbutton');
369370 this.DOMobject.dataset.objid = 'palbutton';
370- this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShape.bind(this), false);
371- this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShape.bind(this), false);
372- this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShape.bind(this), false);
373- this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShape.bind(this), false);
371+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
372+ this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
373+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeFunctionButton.bind(this), false);
374+ this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeFunctionButton.bind(this), false);
374375 this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
375376 this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
376377 this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
@@ -379,22 +380,22 @@
379380
380381 // Event handler ------------------------
381382
382- onMouseDownPaletteShape(evt) {
383+ onMouseDownPaletteShapeFunctionButton(evt) {
383384 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
384385 evt.preventDefault(); // 要素既定のdefault動作を止める
385386 }
386- onMouseUpPaletteShape(evt) {
387+ onMouseUpPaletteShapeFunctionButton(evt) {
387388 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
388389 evt.preventDefault(); // 要素既定のdefault動作を止める
389390
390- // 登録処理実行
391- this.paletteFunction.executeFunction();
391+ // Function実行
392+ this.palettePressFunction.executeFunction();
392393
393394 // Toggle button 処理
394- let replaceObject = this.paletteFunction.getObjectToReplaceAfterExecution();
395+ let replaceObject = this.palettePressFunction.getObjectToReplaceAfterExecution();
395396 if (null != replaceObject) {
396- this.clearPaletteFunction();
397- this.setPaletteFunction(replaceObject);
397+ this.clearPalettePressFunction();
398+ this.setPalettePressFunction(replaceObject);
398399 }
399400 }
400401 } // class PaletteShapeFunctionButton
@@ -405,24 +406,270 @@
405406 // DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
406407 // Input eventから必要機能の呼び出し
407408 class PaletteShapeCSSButton {
408-}
409+ constructor() {
410+ this.DOMobject = null;
411+ this.paletteDropFunction = null;
412+ }
409413
410-// Drop file(CSS定義test)の内容読み込み
411-// string objectを返す
412-// Stringの解析
413-// class name取得
414-// 定義内容取得
415-// description取得
416-// data scheme取得
417-// StringをStyle elementへadd - Ruleへの参照を返す
418-// Element指定は必須
419-// StringをStyle elementへreplace - Ruleへの参照を返す
420-// Element指定は必須
421-// CSS class name指定でRuleへの参照を返す
422-// Element指定あり …… 指定Element内から検索
423-// Element指定なし …… document全体から検索
414+ // 表示に使用するDOM要素を作成
415+ // DOM 要素を作成してこの Instance の表示要素として登録
416+ createButtonElement(parent) {
417+ if (null != this.DOMobject) {
418+ console.error('パレットボタン(PaletteShapeCSSButton) ボタン要素作成エラー 要素の上書き\n以前のElement = ' + this.DOMobject + ', 今回のElement = 新規');
419+ // そのまま実行
420+ }
424421
422+ this.DOMobject = document.createElement('div');
423+ this.setDomHandler();
425424
425+ // 引数 Element の Child として登録
426+ this.setPalentElement(parent);
427+
428+ return true;
429+ }
430+
431+ // 親要素設定。所属パレットを切り替えたい場合など
432+ // ボタンを引数 Element の Child として登録する
433+ // Palent は position:static 以外の指定が必須
434+ // Palent の left, top, width, height に合わせたサイズで表示する
435+ setPalentElement(ele) {
436+ if (null == ele) {
437+ console.error('パレットボタン(PaletteShapeCSSButton) 親要素設定エラー 引数の親要素が未設定');
438+ return false;
439+ }
440+ if (null == this.DOMobject) {
441+ console.error('パレットボタン(PaletteShapeCSSButton) 親要素設定エラー ボタン要素が登録されていません parent = ' + ele);
442+ return false;
443+ }
444+
445+ if (null == this.DOMobject.parentNode) console.log('パレットボタン(PaletteShapeFunctionButton) 親要素設定未設定状態');
446+ else this.DOMobject.parentNode.removeChild(this.DOMobject);
447+
448+ // 最も手前に追加
449+ // DOM tree に入ったタイミングで CSS 設定が適用される
450+ // (親要素の位置とサイズにフィットする)
451+ ele.appendChild(this.DOMobject);
452+ return true;
453+ }
454+
455+ // Paletteボタン対象Dropで実行する機能を登録
456+ setPaletteDropFunction(dropcssfunc) {
457+ if (null != this.paletteDropFunction) {
458+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
459+ // ひとまず処理継続
460+ }
461+ this.paletteDropFunction = palfunc;
462+
463+ // 表示要素の更新
464+ this.DOMobject.title = this.palettePressFunction.getDescription();
465+ this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
466+ this.DOMobject.style.backgroundSize = 'cover';
467+ }
468+
469+ clearPaletteDropFunction() {
470+ this.paletteDropFunction = null;
471+ this.DOMobject.title = null;
472+ this.DOMobject.style.backgroundImage = 'none';
473+ }
474+
475+
476+ // Private 関数 ------------------------
477+
478+ setDomHandler() {
479+ this.DOMobject.classList.add('palbutton');
480+ this.DOMobject.dataset.objid = 'palbutton';
481+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
482+ // this.DOMobject.addEventListener('mousemove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
483+ // this.DOMobject.addEventListener('mouseup', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
484+ this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
485+ // this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
486+ // this.DOMobject.addEventListener('touchend', this.onMouseUpPaletteShapeCSSButton.bind(this), false);
487+ this.DOMobject.addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
488+ this.DOMobject.addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
489+ this.DOMobject.addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
490+ }
491+
492+
493+ // Event handler ------------------------
494+
495+ // Mouse/Touch event handler
496+ // Mouse Up座標にあるElementにCSS classを追加する
497+
498+ // 移動対象Palette要素選択
499+ onMouseDownPaletteShapeCSSButton(evt) {
500+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
501+ evt.preventDefault(); // 要素既定のdefault動作を止める
502+ // Mouse/Touch event 差分
503+ let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
504+
505+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
506+ window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
507+ this.startMovingElement(evt);
508+ }
509+ startMovingElement(evt){
510+ // Drag対象を保持
511+ this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
512+ // ElementのDrag開始位置を保持
513+ this.startElementX = parseInt(this.draggingDOM.style.left);
514+ this.startElementY = parseInt(this.draggingDOM.style.top);
515+ // MouseのDrag開始位置を保持
516+ this.startDragX = evt.pageX;
517+ this.startDragY = evt.pageY;
518+ this.draggingDOM.style.opacity = 0.4;
519+ }
520+
521+ // Palette要素移動
522+ onMouseMovePaletteShapeCSSButton(evt) {
523+ if (null == this.draggingDOM) return;
524+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
525+ evt.preventDefault(); // 要素既定のdefault動作を止める
526+
527+ // 画像の仮移動
528+ this.endDragX = evt.pageX;
529+ this.endDragY = evt.pageY;
530+ // 移動量取得
531+ let moveX = this.endDragX - this.startDragX;
532+ let moveY = this.endDragY - this.startDragY;
533+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
534+ moveX = this.startElementX + moveX;
535+ moveY = this.startElementY + moveY;
536+
537+ window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
538+ }
539+ renderMoveDragging(x, y) {
540+ if (null == this.draggingDOM) return;
541+ this.draggingDOM.style.left = x + "px";
542+ this.draggingDOM.style.top = y + "px";
543+ }
544+
545+ // Palette要素移動完了
546+ onMouseUpPaletteShapeCSSButton(evt) {
547+ if (null == this.draggingDOM) return;
548+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
549+ evt.preventDefault(); // 要素既定のdefault動作を止める
550+ this.endMovingElement(evt);
551+ }
552+ endMovingElement(evt) {
553+ // 初期表示状態に戻す
554+ this.draggingDOM.style.left = this.startElementX + "px";
555+ this.draggingDOM.style.top = this.startElementY + "px";
556+ this.draggingDOM.style.opacity = 1.0;
557+
558+ // Drag中 element情報をクリア
559+ this.draggingDOM = null;
560+ // Mouse event callback設定をクリア
561+ window.appArea.clearCallEventObj();
562+
563+ // マウス座標直下にある要素を検索
564+ // (evt.targetは自分を指してしまうため)
565+ let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
566+ if (null == target) {
567+ if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
568+ target = window.frameArea;
569+ }
570+
571+ // Target element へ CSS classを追加する
572+ }
573+
574+
575+ // Drag&Drop event
576+ // Applicationの外からFile Dropされたときに
577+ // File内容情報を読み込み、CSSに反映させる
578+ onDragStartPaletteShapeCSSButton(evt) {
579+ evt.preventDefault();
580+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
581+ }
582+ onDragOverPaletteShapeCSSButton(evt) {
583+ evt.preventDefault();
584+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
585+ evt.dataTransfer.dropEffect = "copy";
586+ }
587+ onDropPaletteShapeCSSButton(evt) {
588+ this.debuglog('onDrop');
589+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
590+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
591+ evt.preventDefault(); // 要素既定のdefault動作を止める
592+
593+ // Text, Imageそれぞれの解析処理呼び出し
594+ getDropFile(evt, this.replaceCSSText.bind(this), this.parseImage.bind(this), this.parseError.bind(this));
595+ }
596+
597+ replaceCSSText(file) {
598+ let cssText = null;
599+ cssText = this.paletteTextParser.readTextFile(file);
600+ this.paletteTextParser.parseText(cssText);
601+ let rule = this.paletteApplyCss.getCSS();
602+ this.paletteTextParser.replaceCSSRule(rule, cssText);
603+ }
604+ parseImage(file) {
605+ console.error('画像ファイルには未対応');
606+ return false;
607+ }
608+ parseError() {
609+ console.error('ドロップファイル解析エラー');
610+ return false;
611+ }
612+} // class PaletteShapeCSSButton
613+
614+// Text解析、CSS登録
615+// CSSの汎用操作を扱うわけではない
616+// 解析後のTextやImageは保持しない
617+// singletonにしたいがやり方がわからないので1つだけ作るようにする;´Д`)運用でカバー
618+class PaletteCSSTextParser {
619+ constructor() {
620+ this.filename = null;
621+ this.cssText = null;
622+ }
623+
624+ // Drop file(CSS定義test)の内容読み込み(file, ele, num)
625+ // 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
626+ // keyframeはkeyframe登録専用のstyle elementに登録する
627+ // string objectを返す
628+ // 引数style elementへのCSS登録
629+ // num番目のCSSへ上書きする
630+ // (len <= num) or (num < 0) はaddする
631+ readTextFile(
632+ file, // 読みこむ対象ファイル
633+ readComplete // 読み込み完了Callback(function(fileReadStr))
634+ ) {
635+ // file名保持
636+ this.filename = file.name;
637+
638+ let text = null;
639+ // drop fileの読み込み
640+ let reader = new FileReader();
641+ // Text fileを読み込み
642+ reader.readAsText(file);
643+ reader.onload = function (evt) {
644+ this.cssText = evt.target.result; // 読み込んだ文字列
645+ if (null != readComplete)
646+ readComplete(this.cssText);
647+ }.bind(this);
648+ }
649+
650+ // Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
651+ // class name取得
652+ // 定義内容取得
653+ // description取得
654+ // data scheme取得
655+ // comment取得
656+ parseText(str) {
657+ // Textを下記要素に分解する
658+ // ・
659+ }
660+
661+ // StringをStyle elementへadd - Ruleへの参照を返す
662+ // Element指定は必須
663+ // StringをStyle elementへreplace - Ruleへの参照を返す
664+ // Element指定は必須
665+ replaceCSSRule(rule, text) {
666+ }
667+
668+ // CSS class name指定でRuleへの参照を返す
669+ // Element指定あり …… 指定Element内から検索
670+ // Element指定なし …… document全体から検索
671+}
672+
426673 class CSSPalette {
427674 constructor() {
428675 this.draggingDOM = null;
@@ -440,6 +687,14 @@
440687
441688 // palette要素を保持
442689 // 背景設定パレット
690+ let elePalbg = document.getElementsByClassName('palbg');
691+ this.palBackground = [];
692+ for (let cnt = 0; cnt < elePalbg.length; cnt++) {
693+ this.palBackground[cnt] = new PaletteShapeCSSButton();
694+ this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
695+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
696+ }
697+/*
443698 this.DOMpalbg = document.getElementsByClassName('palbg');
444699 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
445700 this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -452,7 +707,16 @@
452707 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
453708 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
454709 }
455- // テキストカラーパレット
710+*/
711+ // スタイルパレット
712+ let elePalstyle = document.getElementsByClassName('paltxtcol');
713+ this.palStyle = [];
714+ for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
715+ this.palStyle[cnt] = new PaletteShapeCSSButton();
716+ this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
717+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
718+ }
719+/*
456720 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
457721 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
458722 this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -465,7 +729,16 @@
465729 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
466730 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
467731 }
732+*/
468733 // アクションパレット
734+ let elePalaction = document.getElementsByClassName('palact');
735+ this.palAction = [];
736+ for (let cnt = 0; cnt < elePalaction.length; cnt++) {
737+ this.palAction[cnt] = new PaletteShapeCSSButton();
738+ this.palAction[cnt].createButtonElement(elePalaction[cnt]);
739+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
740+ }
741+/*
469742 this.DOMpalact = document.getElementsByClassName('palact');
470743 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
471744 this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
@@ -478,6 +751,7 @@
478751 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
479752 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
480753 }
754+*/
481755 // 設定パレット
482756 // (リファクタにより、設定パレットのみ処理を別物にしている)
483757 let palfuncs = [
@@ -490,11 +764,11 @@
490764 paletteFunctionObjects.getItem(10) // Toggle Scale font size
491765 ];
492766 let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
493- this.palSetting = [];
767+ this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
494768 for (let cnt = 0; cnt < elePalset.length; cnt++) {
495- this.palSetting[cnt] = new PaletteShapeFunctionButton();
496- this.palSetting[cnt].createButtonElement(elePalset[cnt]);
497- this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
769+ this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
770+ this.palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
771+ this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
498772 }
499773 /*
500774 // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
@@ -692,7 +966,7 @@
692966 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
693967 evt.preventDefault(); // 要素既定のdefault動作を止める
694968 // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
695- window.appArea.setSingleTouchEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
969+ window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
696970 this.startMovingElement(evt.targetTouches[0]);
697971 }
698972 startMovingElement(evt){
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 50)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 51)
@@ -38,7 +38,9 @@
3838
3939 let palsize = document.getElementsByClassName('palsize');
4040 this.paletteSizeChanger = [];
41- this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
41+ for (let cnt = 0; cnt < palsize.length; cnt++) {
42+ this.paletteSizeChanger[cnt] = new PalGroupSize(palsize[cnt]);
43+ }
4244 }
4345
4446 // 操作関数 ----------------------------
@@ -148,6 +150,9 @@
148150 this.DOMobject.title = "ドラッグでサイズを変更します";
149151 this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
150152 this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
153+ if (null == this.DOMobject.parentNode) {
154+ console.error('パレットサイズ変更エラー 指定要素の親要素が見つかりません。\nサイズ変更対象が見つからないためパレットのサイズは変更できません');
155+ }
151156 }
152157
153158 onMouseDownPalGroupSize(evt) {
@@ -167,13 +172,13 @@
167172 this.startChangingSize(evt.targetTouches[0]);
168173 }
169174 startChangingSize(evt) {
170- let target = evt.target.parentNode;
175+ let target = this.DOMobject.parentNode;
171176 this.startLeft = parseInt(target.style.left);
172177 this.startTop = parseInt(target.style.top);
173- this.startWidth = parseInt(target.style.width);
178+ this.startWidth = parseInt(target.style.width);
174179 this.startHeight = parseInt(target.style.height);
175- this.startDragX = evt.pageX;
176- this.startDragY = evt.pageY;
180+ this.startDragX = evt.pageX;
181+ this.startDragY = evt.pageY;
177182 }
178183
179184 InputMovePalGroupSize(evt, touchevt) {
@@ -192,10 +197,10 @@
192197 window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
193198 }
194199 renderInputMovePalGroupSize(eleTarget, left, top, width, height) {
195- eleTarget.style.left = left + "px";
196- eleTarget.style.top = top + "px";
197- eleTarget.style.width = width + "px";
198- eleTarget.style.height = height + "px";
200+ eleTarget.style.left = left + "px";
201+ eleTarget.style.top = top + "px";
202+ eleTarget.style.width = width + "px";
203+ eleTarget.style.height = height + "px";
199204 }
200205
201206 InputUpPalGroupSize(evt, touchevt) {
--- HtmlDrawApp/doc/Palette螳夂セゥFileFormat.txt (nonexistent)
+++ HtmlDrawApp/doc/Palette螳夂セゥFileFormat.txt (revision 51)
@@ -0,0 +1,60 @@
1+パレット要素にドロップする Text file format
2+
3+File Types
4+ Style Style指定のみ
5+ Action Style + Animation
6+
7+Items
8+ [Section] [Data] [Regex Key] [Times]
9+ Comment Text "Comment" many times
10+ Types "Style"/"Action" "Types" only once
11+ Description Text "Description" only once
12+ Rule Text "Rule" only once
13+ Keyframe Text "Keyframe" only once
14+ Picture data scheme "Picture" only once
15+
16+
17+Block
18+ 定義領域の前後を定型文字列で囲む
19+
20+ [<Regex Key> Start]
21+ 各種定義テキスト
22+ [<Regex Key> End]
23+
24+ 例:
25+ [Types Start]
26+ Style
27+ [Types End]
28+ [Description Start]
29+ 定義ファイルの内容説明文章
30+ [Description End]
31+
32+
33+Rule定義について
34+ 疑似要素は使えない
35+ 最初の "{" から "}" の内容を読みこむ
36+
37+ 例
38+ [Rule Start]
39+ dummy {
40+ border-radius: 50%;
41+ }
42+ [Rule End]
43+
44+
45+Keyframe定義について
46+ Types が Action の場合のみ有効
47+
48+ 例
49+ [Keyframe Start]
50+ dummy {
51+ animation: balloon 0.4s linear 0.5s 1;
52+ transform-origin: 0 100%;
53+ }
54+ @keyframes balloon {
55+ 0% {transform: scaleX(0.0) scaleY(0.0) rotateZ(20deg);}
56+ 50% {transform: scaleX(0.5) scaleY(0.5) rotateZ(30deg);}
57+ 100% {transform: scaleX(1.0) scaleY(1.0) rotateZ(0deg);}
58+ }
59+ [Keyframe End]
60+
--- HtmlDrawApp/doc/構成.txt (revision 50)
+++ HtmlDrawApp/doc/構成.txt (revision 51)
@@ -33,7 +33,9 @@
3333 DispObj user setting default visible absolute 300
3434 focusbar フォーカス要素 default default visible absolute 500
3535 PalGroup パレット要素 grouping default default visible absolute 1000
36- palbg 背景画像設定 drop file default visible absolute 1100
36+ palflex ボタン表示領域 gray 50% 90% x 75% 動的 relative
37+ palbg ボタン配置 transparent 60px x 60px visible relative
38+ palbutton ドラッグ可能ボタン picture inherit visible absolute
3739 paltxtcol テキスト色設定 drop file default visible absolute 1100
3840 palaction 動き設定 drop file default visible absolute 1100
3941