• 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évision50 (tree)
l'heure2016-12-14 04:35:16
Auteurtakoyaki_umaaaa

Message de Log

・Settingsパレットはだいたい完成
・その他のパレットについて検討中

Change Summary

Modification

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 50)
@@ -103,7 +103,7 @@
103103 display: inline-block;
104104 position: absolute;
105105 left:0px; top:310px;
106- width: 400px; /* (5+25+5) * 5 + (5+5) */
106+ width: 400px;
107107 height: 120px;
108108 margin: 0px; padding: 5px;
109109 border: 1px solid transparent;
@@ -148,26 +148,26 @@
148148 color: rgba(255, 255, 255, 0.3);
149149 }
150150 .paldesc1 {
151- left: -20px; top: -20px;
151+ left: calc( -80px + 10% ); top: calc( -40px + 20%);
152152 text-align: left;
153153 }
154154 .paldesc2 {
155- right: -40px; bottom: -60px;
155+ right: calc( -160px + 30%); bottom: calc( -120px + 60% );
156156 text-align: right;
157157 }
158158
159159
160-
160+ /* パレット内のボタン表示領域 (スクロール可能領域) */
161161 .palflex {
162162 display: flex;
163- position: absolute;
164- left: 0px; top: 0px;
165- width: 200%; height: 100%;
166- margin: 0px;
167- padding: 15px;
168- border-radius: 5px;
163+ flex-wrap: wrap;
164+ position: relative;
165+ overflow: scroll;
166+ width: calc(100% - 20px); height: calc(100% - 40px);
167+ margin: -5px 10px; padding: 15px;
169168 background-color: gray;
170- opacity: 0.5;
169+ box-shadow: 10px 10px 20px -4px #777 inset;
170+ opacity: 0.6;
171171 text-decoration: none;
172172 justify-content: flex-start;
173173 }
@@ -206,9 +206,10 @@
206206 /* ********************** */
207207 position: relative;
208208 width: 60px; height: 60px;
209- margin: 0 10px; padding: 0;
209+ margin: 7px 7px; padding: 0;
210210 }
211211
212+ /* パレット内の個々のボタン Element */
212213 .palbutton {
213214 position: absolute;
214215 left: 0; top: 0;
@@ -219,7 +220,19 @@
219220 box-shadow: inherit;
220221 }
221222
223+ /* パレットサイズ変更用 Element */
224+ .palsize {
225+ position: absolute;
226+ left: 100%; top: 100%;
227+ width: 15px; height: 15px;
228+ padding: 0; margin: 0;
229+ background-color: orange;
230+ border: 2px solid black;
231+ border-radius: 50%;
232+ transform: translateX(-50%) translateY(-50%);
233+ }
222234
235+
223236 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
224237 .scaler,
225238 .roller,
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 50)
@@ -194,31 +194,30 @@
194194 <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
195195 </fieldset>
196196
197- <fieldset class="palgroup palgroup3" data-objid="palgroup3" title="設定を変更するパレットです" draggable="false">
197+ <fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">
198198 <legend class="pallegend"> Setting Palette </legend>
199199 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
200200 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
201201 </div>
202- <div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
203- <ul class="palflex">
202+ <ul class="palflex">
204203 <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
205204 <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
206205 <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
207206 <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
208207 <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
209- </ul>
210- </div>
211-</fieldset>
208+ </ul>
209+ <div class="palsize"></div>
210+ </fieldset>
212211 </div> <!-- apparea -->
213212
214213 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
215- <script type="text/javascript" src="js/settings.js"></script>
214+ <script type="text/javascript" src="js/Settings.js"></script>
216215 <script type="text/javascript" src="js/Common.js"></script>
217216 <script type="text/javascript" src="js/Queue.js"></script>
218217 <script type="text/javascript" src="js/CommandObj.js"></script>
219218 <script type="text/javascript" src="js/UI_parts.js"></script>
220219 <script type="text/javascript" src="js/palgroup.js"></script>
221- <script type="text/javascript" src="js/Palette.js"></script>
220+ <script type="text/javascript" src="js/palette.js"></script>
222221 <script type="text/javascript" src="js/DispObj.js"></script>
223222 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
224223 <script type="text/javascript" src="js/ThreadMessage.js"></script>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 50)
@@ -6,8 +6,96 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9-class PaletteFunction{
9+// パレットのCSS機能ボタンを押したときに実行する機能を提供する
10+// (保持中CSS class nameを対象Elementに付加, 削除)
11+// (Button instanceが自分の機能を意識しないようにするためのclass)
12+class PaletteCSS {
1013 constructor() {
14+ this.paletteRule = null;
15+ this.dataScheme = null;
16+ this.description = null;
17+ }
18+
19+ // 機能の登録・削除・実行 ------------------
20+ // 前提:既にCSS ruleはdocumentに登録されている
21+ // CSS ruleへの参照を保持
22+ // 適用要求で対象Elementに保持ruleをadd class
23+
24+ registerCSS(rule) {
25+ if (null != this.paletteRule) {
26+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteRule + '\n今回の機能 = ' + rule);
27+ // ひとまず処理継続
28+ }
29+ this.paletteRule = rule;
30+ return true;
31+ }
32+ removeCSS() {
33+ this.paletteRule = null;
34+ }
35+ getCSS() {
36+ return this.paletteRule;
37+ }
38+ getClassName() {
39+ return this.paletteRule.name;
40+ }
41+ // 保持中CSS class nameを引数ElementのclassListに追加
42+ addClass(ele) {
43+ if (null == ele) {
44+ console.error('CSS適用対象要素が指定されていません');
45+ return false;
46+ }
47+ if (null == this.paletteRule) {
48+ console.error('CSSが未登録のまま 要素にCSSを追加しようとしました\nEle = ' + ele);
49+ return false;
50+ }
51+ ele.classList.add(this.paletteRule.name);
52+ }
53+ // 保持中CSS class nameを引数ElementのclassListから削除
54+ removeClass(ele) {
55+ if (null == ele) {
56+ console.error('CSS適用対象要素が指定されていません');
57+ return false;
58+ }
59+ if (null == this.paletteRule) {
60+ console.error('CSSが未登録のまま 要素にCSSを削除しようとしました\nEle = ' + ele);
61+ return false;
62+ }
63+ ele.classList.remove(this.paletteRule.name);
64+ }
65+
66+ // 登録されたCSSの機能に関連した画像・説明文の 登録・取得 ------------
67+ registerImage(dataScheme) {
68+ if (null != this.dataScheme) {
69+ console.error('パレット機能 Imageの上書き登録');
70+ // ひとまず処理継続
71+ }
72+ this.dataScheme = dataScheme;
73+ }
74+ removeImage() {
75+ this.dataScheme = null;
76+ }
77+ getImage() {
78+ return this.dataScheme;
79+ }
80+
81+ registerDescription(text) {
82+ if (null != this.description) {
83+ console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ', 今回の説明 = ' + this.description);
84+ // ひとまず処理継続
85+ }
86+ this.description = text;
87+ }
88+ removeDescription() {
89+ this.description = null;
90+ }
91+ getDescription() {
92+ return this.description;
93+ }
94+} PaletteCSS
95+
96+// パレットのFunctionボタンを押したときに実行する機能を提供する
97+class PaletteFunction {
98+ constructor() {
1199 this.paletteFunction = null;
12100 this.dataScheme = null;
13101 this.description = null;
@@ -23,10 +111,14 @@
23111
24112
25113 // 機能の登録・削除・実行 ------------------
114+ // 前提:既に関数の実体は関数としてどこかに保持されている
115+ // 関数への参照を保持
116+ // 実行要求で保持関数を実行
117+ // 登録するとき、必要に応じてthisやargをbindすること
26118
27119 registerFunction(func) {
28120 if (null != this.paletteFunction) {
29- console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ', 今回の機能 = ' + func.name);
121+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ', 今回の機能 = ' + func.name);
30122 // ひとまず処理継続
31123 }
32124 this.paletteFunction = func;
@@ -56,7 +148,7 @@
56148 }
57149
58150
59- // 機能に関連した画像・説明文 登録・取得 ------------
151+ // 登録された関数の機能に関連した画像・説明文の 登録・取得 ------------
60152 registerImage(dataScheme) {
61153 if (null != this.dataScheme) {
62154 console.error('パレット機能 Imageの上書き登録');
@@ -86,7 +178,7 @@
86178 }
87179 } // class PaletteFunction
88180
89-// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
181+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
90182 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
91183 var paletteFunctionObjects = (function () {
92184 let paletteFunction = [];
@@ -184,12 +276,15 @@
184276 };
185277 })();
186278
187-class PaletteShape {
279+// パレットのFunctionボタン表示部分の定義class
280+// DOM Elementの保持、押下での実行機能との関連付け
281+class PaletteShapeFunctionButton {
188282 constructor() {
189283 this.DOMobject = null;
190284 this.paletteFunction = null;
191285 }
192286
287+ // 表示に使用するDOM要素を作成
193288 // DOM 要素を作成してこの Instance の表示要素として登録
194289 createButtonElement(parent) {
195290 if (null != this.DOMobject) {
@@ -205,6 +300,7 @@
205300 return true;
206301 }
207302
303+ // 表示に使用するDOM要素を登録
208304 // 既に存在する Element をこの Instance の表示要素として登録する
209305 setButtonElement(ele) {
210306 if (null == ele) {
@@ -222,6 +318,7 @@
222318 // スタイル定義は CSS file で指定する
223319
224320
321+ // 親要素設定。所属パレットを切り替えたい場合など
225322 // ボタンを引数 Element の Child として登録する
226323 // Palent は position:static 以外の指定が必須
227324 // Palent の left, top, width, height に合わせたサイズで表示する
@@ -300,9 +397,32 @@
300397 this.setPaletteFunction(replaceObject);
301398 }
302399 }
400+} // class PaletteShapeFunctionButton
303401
402+// PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
403+
404+// パレットのCSSボタン表示部分の定義class
405+// DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
406+// Input eventから必要機能の呼び出し
407+class PaletteShapeCSSButton {
304408 }
305409
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全体から検索
424+
425+
306426 class CSSPalette {
307427 constructor() {
308428 this.draggingDOM = null;
@@ -372,7 +492,7 @@
372492 let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
373493 this.palSetting = [];
374494 for (let cnt = 0; cnt < elePalset.length; cnt++) {
375- this.palSetting[cnt] = new PaletteShape();
495+ this.palSetting[cnt] = new PaletteShapeFunctionButton();
376496 this.palSetting[cnt].createButtonElement(elePalset[cnt]);
377497 this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
378498 }
@@ -410,6 +530,7 @@
410530 ) {
411531 let cssstr1 = '.paltxtcol' + id + ' {\n';
412532 let cssstr2 = '\n}';
533+ // 書換先style ele 書換先id 追加str 追加str 定義file 結果callback
413534 setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
414535 };
415536 // 指定された画像を font colorとして設定する
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 50)
@@ -35,6 +35,10 @@
3535 this.DOMobject[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
3636 this.DOMobject[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
3737 }
38+
39+ let palsize = document.getElementsByClassName('palsize');
40+ this.paletteSizeChanger = [];
41+ this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
3842 }
3943
4044 // 操作関数 ----------------------------
@@ -135,4 +139,72 @@
135139 // Drag中 element情報をクリア
136140 this.draggingDOM = null;
137141 }
142+} // class PalGroup
143+
144+
145+class PalGroupSize {
146+ constructor(ele) {
147+ this.DOMobject = ele;
148+ this.DOMobject.title = "ドラッグでサイズを変更します";
149+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
150+ this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
151+ }
152+
153+ onMouseDownPalGroupSize(evt) {
154+ debuglog('onMouseDownPalGroupSize');
155+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
156+ evt.preventDefault(); // 要素既定のdefault動作を止める
157+ // Mouse eventをappAreaからScalerに渡してもらうように設定
158+ window.appArea.setMouseEventObj(null, this.InputMovePalGroupSize.bind(this), this.InputUpPalGroupSize.bind(this));
159+ this.startChangingSize(evt);
160+ }
161+ onTouchStartPalGroupSize(evt) {
162+ debuglog('onMouseDownPalGroupSize');
163+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
164+ evt.preventDefault(); // 要素既定のdefault動作を止める
165+ // Mouse eventをappAreaからScalerに渡してもらうように設定
166+ window.appArea.setSingleTouchEventObj(null, this.InputMovePalGroupSize.bind(this), this.InputUpPalGroupSize.bind(this));
167+ this.startChangingSize(evt.targetTouches[0]);
168+ }
169+ startChangingSize(evt) {
170+ let target = evt.target.parentNode;
171+ this.startLeft = parseInt(target.style.left);
172+ this.startTop = parseInt(target.style.top);
173+ this.startWidth = parseInt(target.style.width);
174+ this.startHeight = parseInt(target.style.height);
175+ this.startDragX = evt.pageX;
176+ this.startDragY = evt.pageY;
177+ }
178+
179+ InputMovePalGroupSize(evt, touchevt) {
180+ if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
181+ if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
182+ if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
183+ if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
184+
185+ this.endDragX = evt.pageX;
186+ this.endDragY = evt.pageY;
187+ let moveX = this.endDragX - this.startDragX;
188+ let moveY = this.endDragY - this.startDragY;
189+
190+ let eleTarget = this.DOMobject.parentNode;
191+ if (null != eleTarget)
192+ window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
193+ }
194+ 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";
199+ }
200+
201+ InputUpPalGroupSize(evt, touchevt) {
202+ if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
203+ if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
204+ if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
205+ if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
206+
207+ window.appArea.clearCallEventObj();
208+ }
209+
138210 }
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 50)
@@ -103,7 +103,7 @@
103103 display: inline-block;
104104 position: absolute;
105105 left:0px; top:310px;
106- width: 400px; /* (5+25+5) * 5 + (5+5) */
106+ width: 400px;
107107 height: 120px;
108108 margin: 0px; padding: 5px;
109109 border: 1px solid transparent;
@@ -148,26 +148,26 @@
148148 color: rgba(255, 255, 255, 0.3);
149149 }
150150 .paldesc1 {
151- left: -20px; top: -20px;
151+ left: calc( -80px + 10% ); top: calc( -40px + 20%);
152152 text-align: left;
153153 }
154154 .paldesc2 {
155- right: -40px; bottom: -60px;
155+ right: calc( -160px + 30%); bottom: calc( -120px + 60% );
156156 text-align: right;
157157 }
158158
159159
160-
160+ /* パレット内のボタン表示領域 (スクロール可能領域) */
161161 .palflex {
162162 display: flex;
163- position: absolute;
164- left: 0px; top: 0px;
165- width: 200%; height: 100%;
166- margin: 0px;
167- padding: 15px;
168- border-radius: 5px;
163+ flex-wrap: wrap;
164+ position: relative;
165+ overflow: scroll;
166+ width: calc(100% - 20px); height: calc(100% - 40px);
167+ margin: -5px 10px; padding: 15px;
169168 background-color: gray;
170- opacity: 0.5;
169+ box-shadow: 10px 10px 20px -4px #777 inset;
170+ opacity: 0.6;
171171 text-decoration: none;
172172 justify-content: flex-start;
173173 }
@@ -206,9 +206,10 @@
206206 /* ********************** */
207207 position: relative;
208208 width: 60px; height: 60px;
209- margin: 0 10px; padding: 0;
209+ margin: 7px 7px; padding: 0;
210210 }
211211
212+ /* パレット内の個々のボタン Element */
212213 .palbutton {
213214 position: absolute;
214215 left: 0; top: 0;
@@ -219,7 +220,19 @@
219220 box-shadow: inherit;
220221 }
221222
223+ /* パレットサイズ変更用 Element */
224+ .palsize {
225+ position: absolute;
226+ left: 100%; top: 100%;
227+ width: 15px; height: 15px;
228+ padding: 0; margin: 0;
229+ background-color: orange;
230+ border: 2px solid black;
231+ border-radius: 50%;
232+ transform: translateX(-50%) translateY(-50%);
233+ }
222234
235+
223236 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
224237 .scaler,
225238 .roller,
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 50)
@@ -194,31 +194,30 @@
194194 <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
195195 </fieldset>
196196
197- <fieldset class="palgroup palgroup3" data-objid="palgroup3" title="設定を変更するパレットです" draggable="false">
197+ <fieldset class="palgroup palgroup3" data-objid="palgroup3" style="width:400px; height:130px;" title="設定を変更するパレットです">
198198 <legend class="pallegend"> Setting Palette </legend>
199199 <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
200200 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
201201 </div>
202- <div style="overflow-x:scroll; overflow-y:hidden; position:absolute; left:0; top: 10px; width:90%; height:75%; margin:10px; padding:0;">
203- <ul class="palflex">
202+ <ul class="palflex">
204203 <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
205204 <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
206205 <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
207206 <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
208207 <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
209- </ul>
210- </div>
211-</fieldset>
208+ </ul>
209+ <div class="palsize"></div>
210+ </fieldset>
212211 </div> <!-- apparea -->
213212
214213 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
215- <script type="text/javascript" src="js/settings.js"></script>
214+ <script type="text/javascript" src="js/Settings.js"></script>
216215 <script type="text/javascript" src="js/Common.js"></script>
217216 <script type="text/javascript" src="js/Queue.js"></script>
218217 <script type="text/javascript" src="js/CommandObj.js"></script>
219218 <script type="text/javascript" src="js/UI_parts.js"></script>
220219 <script type="text/javascript" src="js/palgroup.js"></script>
221- <script type="text/javascript" src="js/Palette.js"></script>
220+ <script type="text/javascript" src="js/palette.js"></script>
222221 <script type="text/javascript" src="js/DispObj.js"></script>
223222 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
224223 <script type="text/javascript" src="js/ThreadMessage.js"></script>
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 50)
@@ -6,8 +6,96 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9-class PaletteFunction{
9+// パレットのCSS機能ボタンを押したときに実行する機能を提供する
10+// (保持中CSS class nameを対象Elementに付加, 削除)
11+// (Button instanceが自分の機能を意識しないようにするためのclass)
12+class PaletteCSS {
1013 constructor() {
14+ this.paletteRule = null;
15+ this.dataScheme = null;
16+ this.description = null;
17+ }
18+
19+ // 機能の登録・削除・実行 ------------------
20+ // 前提:既にCSS ruleはdocumentに登録されている
21+ // CSS ruleへの参照を保持
22+ // 適用要求で対象Elementに保持ruleをadd class
23+
24+ registerCSS(rule) {
25+ if (null != this.paletteRule) {
26+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteRule + '\n今回の機能 = ' + rule);
27+ // ひとまず処理継続
28+ }
29+ this.paletteRule = rule;
30+ return true;
31+ }
32+ removeCSS() {
33+ this.paletteRule = null;
34+ }
35+ getCSS() {
36+ return this.paletteRule;
37+ }
38+ getClassName() {
39+ return this.paletteRule.name;
40+ }
41+ // 保持中CSS class nameを引数ElementのclassListに追加
42+ addClass(ele) {
43+ if (null == ele) {
44+ console.error('CSS適用対象要素が指定されていません');
45+ return false;
46+ }
47+ if (null == this.paletteRule) {
48+ console.error('CSSが未登録のまま 要素にCSSを追加しようとしました\nEle = ' + ele);
49+ return false;
50+ }
51+ ele.classList.add(this.paletteRule.name);
52+ }
53+ // 保持中CSS class nameを引数ElementのclassListから削除
54+ removeClass(ele) {
55+ if (null == ele) {
56+ console.error('CSS適用対象要素が指定されていません');
57+ return false;
58+ }
59+ if (null == this.paletteRule) {
60+ console.error('CSSが未登録のまま 要素にCSSを削除しようとしました\nEle = ' + ele);
61+ return false;
62+ }
63+ ele.classList.remove(this.paletteRule.name);
64+ }
65+
66+ // 登録されたCSSの機能に関連した画像・説明文の 登録・取得 ------------
67+ registerImage(dataScheme) {
68+ if (null != this.dataScheme) {
69+ console.error('パレット機能 Imageの上書き登録');
70+ // ひとまず処理継続
71+ }
72+ this.dataScheme = dataScheme;
73+ }
74+ removeImage() {
75+ this.dataScheme = null;
76+ }
77+ getImage() {
78+ return this.dataScheme;
79+ }
80+
81+ registerDescription(text) {
82+ if (null != this.description) {
83+ console.error('パレット機能 上書き登録\n以前の説明 = ' + text + ', 今回の説明 = ' + this.description);
84+ // ひとまず処理継続
85+ }
86+ this.description = text;
87+ }
88+ removeDescription() {
89+ this.description = null;
90+ }
91+ getDescription() {
92+ return this.description;
93+ }
94+} PaletteCSS
95+
96+// パレットのFunctionボタンを押したときに実行する機能を提供する
97+class PaletteFunction {
98+ constructor() {
1199 this.paletteFunction = null;
12100 this.dataScheme = null;
13101 this.description = null;
@@ -23,10 +111,14 @@
23111
24112
25113 // 機能の登録・削除・実行 ------------------
114+ // 前提:既に関数の実体は関数としてどこかに保持されている
115+ // 関数への参照を保持
116+ // 実行要求で保持関数を実行
117+ // 登録するとき、必要に応じてthisやargをbindすること
26118
27119 registerFunction(func) {
28120 if (null != this.paletteFunction) {
29- console.error('パレット機能 上書き登録\n以前の機能 = ' + paletteFunction.name + ', 今回の機能 = ' + func.name);
121+ console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteFunction.name + ', 今回の機能 = ' + func.name);
30122 // ひとまず処理継続
31123 }
32124 this.paletteFunction = func;
@@ -56,7 +148,7 @@
56148 }
57149
58150
59- // 機能に関連した画像・説明文 登録・取得 ------------
151+ // 登録された関数の機能に関連した画像・説明文の 登録・取得 ------------
60152 registerImage(dataScheme) {
61153 if (null != this.dataScheme) {
62154 console.error('パレット機能 Imageの上書き登録');
@@ -86,7 +178,7 @@
86178 }
87179 } // class PaletteFunction
88180
89-// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。
181+// パレット機能定義 Class と 表示定義 Class を繋ぐ Class。即時実行。
90182 // 表示定義 Class 寄りの存在 (画面仕様に影響される処理内容なので)
91183 var paletteFunctionObjects = (function () {
92184 let paletteFunction = [];
@@ -184,12 +276,15 @@
184276 };
185277 })();
186278
187-class PaletteShape {
279+// パレットのFunctionボタン表示部分の定義class
280+// DOM Elementの保持、押下での実行機能との関連付け
281+class PaletteShapeFunctionButton {
188282 constructor() {
189283 this.DOMobject = null;
190284 this.paletteFunction = null;
191285 }
192286
287+ // 表示に使用するDOM要素を作成
193288 // DOM 要素を作成してこの Instance の表示要素として登録
194289 createButtonElement(parent) {
195290 if (null != this.DOMobject) {
@@ -205,6 +300,7 @@
205300 return true;
206301 }
207302
303+ // 表示に使用するDOM要素を登録
208304 // 既に存在する Element をこの Instance の表示要素として登録する
209305 setButtonElement(ele) {
210306 if (null == ele) {
@@ -222,6 +318,7 @@
222318 // スタイル定義は CSS file で指定する
223319
224320
321+ // 親要素設定。所属パレットを切り替えたい場合など
225322 // ボタンを引数 Element の Child として登録する
226323 // Palent は position:static 以外の指定が必須
227324 // Palent の left, top, width, height に合わせたサイズで表示する
@@ -300,9 +397,32 @@
300397 this.setPaletteFunction(replaceObject);
301398 }
302399 }
400+} // class PaletteShapeFunctionButton
303401
402+// PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
403+
404+// パレットのCSSボタン表示部分の定義class
405+// DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
406+// Input eventから必要機能の呼び出し
407+class PaletteShapeCSSButton {
304408 }
305409
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全体から検索
424+
425+
306426 class CSSPalette {
307427 constructor() {
308428 this.draggingDOM = null;
@@ -372,7 +492,7 @@
372492 let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
373493 this.palSetting = [];
374494 for (let cnt = 0; cnt < elePalset.length; cnt++) {
375- this.palSetting[cnt] = new PaletteShape();
495+ this.palSetting[cnt] = new PaletteShapeFunctionButton();
376496 this.palSetting[cnt].createButtonElement(elePalset[cnt]);
377497 this.palSetting[cnt].setPaletteFunction(palfuncs[cnt]);
378498 }
@@ -410,6 +530,7 @@
410530 ) {
411531 let cssstr1 = '.paltxtcol' + id + ' {\n';
412532 let cssstr2 = '\n}';
533+ // 書換先style ele 書換先id 追加str 追加str 定義file 結果callback
413534 setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
414535 };
415536 // 指定された画像を font colorとして設定する
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 49)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 50)
@@ -35,6 +35,10 @@
3535 this.DOMobject[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
3636 this.DOMobject[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
3737 }
38+
39+ let palsize = document.getElementsByClassName('palsize');
40+ this.paletteSizeChanger = [];
41+ this.paletteSizeChanger[0] = new PalGroupSize(palsize[0]);
3842 }
3943
4044 // 操作関数 ----------------------------
@@ -135,4 +139,72 @@
135139 // Drag中 element情報をクリア
136140 this.draggingDOM = null;
137141 }
142+} // class PalGroup
143+
144+
145+class PalGroupSize {
146+ constructor(ele) {
147+ this.DOMobject = ele;
148+ this.DOMobject.title = "ドラッグでサイズを変更します";
149+ this.DOMobject.addEventListener('mousedown', this.onMouseDownPalGroupSize.bind(this), false);
150+ this.DOMobject.addEventListener('touchstart', this.onTouchStartPalGroupSize.bind(this), false);
151+ }
152+
153+ onMouseDownPalGroupSize(evt) {
154+ debuglog('onMouseDownPalGroupSize');
155+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
156+ evt.preventDefault(); // 要素既定のdefault動作を止める
157+ // Mouse eventをappAreaからScalerに渡してもらうように設定
158+ window.appArea.setMouseEventObj(null, this.InputMovePalGroupSize.bind(this), this.InputUpPalGroupSize.bind(this));
159+ this.startChangingSize(evt);
160+ }
161+ onTouchStartPalGroupSize(evt) {
162+ debuglog('onMouseDownPalGroupSize');
163+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
164+ evt.preventDefault(); // 要素既定のdefault動作を止める
165+ // Mouse eventをappAreaからScalerに渡してもらうように設定
166+ window.appArea.setSingleTouchEventObj(null, this.InputMovePalGroupSize.bind(this), this.InputUpPalGroupSize.bind(this));
167+ this.startChangingSize(evt.targetTouches[0]);
168+ }
169+ startChangingSize(evt) {
170+ let target = evt.target.parentNode;
171+ this.startLeft = parseInt(target.style.left);
172+ this.startTop = parseInt(target.style.top);
173+ this.startWidth = parseInt(target.style.width);
174+ this.startHeight = parseInt(target.style.height);
175+ this.startDragX = evt.pageX;
176+ this.startDragY = evt.pageY;
177+ }
178+
179+ InputMovePalGroupSize(evt, touchevt) {
180+ if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
181+ if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
182+ if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
183+ if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
184+
185+ this.endDragX = evt.pageX;
186+ this.endDragY = evt.pageY;
187+ let moveX = this.endDragX - this.startDragX;
188+ let moveY = this.endDragY - this.startDragY;
189+
190+ let eleTarget = this.DOMobject.parentNode;
191+ if (null != eleTarget)
192+ window.renderLoop.requestRenderFunc(this.renderInputMovePalGroupSize.bind(this, eleTarget, this.startLeft, this.startTop, this.startWidth + moveX, this.startHeight + moveY));
193+ }
194+ 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";
199+ }
200+
201+ InputUpPalGroupSize(evt, touchevt) {
202+ if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
203+ if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
204+ if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
205+ if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
206+
207+ window.appArea.clearCallEventObj();
208+ }
209+
138210 }