OSDN -- オープンソース・ソフトウェアの開発とダウンロード
日本語の翻訳状況 translation status for ja
  • R/O
  • SSH
  • HTTPS

コミット

よく使われているワード(クリックで追加)

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

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


コミットメタ情報

リビジョン53 (tree)
日時2016-12-18 06:29:39
作者takoyaki_umaaaa

ログメッセージ

・機能パレットのリファクタリング、動作面ではほぼ完了
・Save/Loadについては未対応
・まだ以前の実装が残っているため削除する必要がある(削除実施前にようやく動作するようになったので、念のためコミットしておく)

変更サマリ

差分

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 53)
@@ -108,7 +108,7 @@
108108 margin: 0px; padding: 5px;
109109 border: 1px solid transparent;
110110 border-radius: 8px;
111- background-color: #fff;
111+/* background-color: #fff; */
112112 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
113113 }
114114 .pallegend {
@@ -161,7 +161,6 @@
161161 .palflex {
162162 display: flex;
163163 flex-wrap: wrap;
164- position: relative;
165164 overflow: scroll;
166165 width: calc(100% - 20px); height: calc(100% - 40px);
167166 margin: -5px 10px; padding: 15px;
@@ -168,60 +167,37 @@
168167 background-color: gray;
169168 box-shadow: 10px 10px 20px -4px #777 inset;
170169 opacity: 0.6;
171- text-decoration: none;
172170 justify-content: flex-start;
173171 }
174172 /* パレット要素の定義 */
175- .palbg,
176- .paltxtcol,
177- .palact,
178- .palset {
173+ .palettebackground,
174+ .palettestyle,
175+ .paletteaction,
176+ .palettesetting {
179177 display: inline-block;
180- position: absolute;
181- width: 50px; height: 50px;
182- border-radius: 8px;
183- margin: 4px; padding: 0;
178+ position: relative;
179+ width: 60px; height: 60px;
180+ margin: 7px 7px; padding: 0;
181+ border-radius: 50%;
184182 text-align: center;
185- font-size: 45px; line-height: 45px;
183+ font-size: 55px; line-height: 55px;
184+ transition: all 0.2s ease-out;
186185 }
187- .palbg {
188- border: 1px solid rgba(0,0,0,0.2);
186+ .palettebackground {
189187 background-color: rgba(27, 158, 131, 0.6);
190- 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;
195188 }
196- .paltxtcol {
197- border: 1px solid rgba(0,0,0,0.2);
189+ .palettestyle {
198190 background-color: rgba(154,145,140,0.6);
199- 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;
204191 }
205- .palact {
206- border: 1px solid rgba(0,0,0,0.2);
192+ .paletteaction {
207193 background-color: rgba(156, 165, 55, 0.6);
208- 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;
213194 }
214- .palset {
215- border: 1px solid rgba(0,0,0,0.2);
195+ .palettesetting {
216196 background-color: rgba(27, 158, 131, 0.6);
217- box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
218- /* ********************** */
219- position: relative;
220- width: 60px; height: 60px;
221- margin: 7px 7px; padding: 0;
222197 }
223198
224199 /* パレット内の個々のボタン Element */
200+ /* ul liの上に動的に作成される */
225201 .palbutton {
226202 position: absolute;
227203 left: 0; top: 0;
@@ -228,8 +204,9 @@
228204 width: 100%; height: 100%;
229205 margin: 0; padding: 0;
230206 border: 1px solid black;
207+ border-radius: inherit;
231208 background-color: inherit;
232- box-shadow: inherit;
209+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
233210 }
234211
235212 /* パレットサイズ変更用 Element */
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 53)
@@ -21,138 +21,59 @@
2121 }
2222 </style>
2323 <!-- Palette -->
24- <style id="stylepalbg">
25- .palbg0 {
26- background-image: url(dummy.png);
27- }
28-
29- .palbg1 {
30- background-image: url(dummy.png);
31- }
32-
33- .palbg2 {
34- background-image: url(dummy.png);
35- }
36-
37- .palbg3 {
38- background-image: url(dummy.png);
39- }
40-
41- .palbg4 {
42- background-image: url(dummy.png);
43- }
24+ <style id="styleBackground">
25+ .palbg0 { background-image: url(dummy.png); }
26+ .palbg1 { background-image: url(dummy.png); }
27+ .palbg2 { background-image: url(dummy.png); }
28+ .palbg3 { background-image: url(dummy.png); }
29+ .palbg4 { background-image: url(dummy.png); }
4430 </style>
45- <style id="stylepaltxtcol">
46- .paltxtcol0 {
47- color: black;
48- }
49-
50- .paltxtcol1 {
51- color: red;
52- }
53-
54- .paltxtcol2 {
55- color: blue;
56- }
57-
58- .paltxtcol3 {
59- color: green;
60- }
61-
62- .paltxtcol4 {
63- color: brown;
64- }
31+ <style id="keyframeBackground">
32+ @keyframes animeact1 { to { color: black; } }
33+ @keyframes animeact2 { to { color: black; } }
34+ @keyframes animeact3 { to { color: black; } }
35+ @keyframes animeact4 { to { color: black; } }
36+ @keyframes animeact5 { to { color: black; } }
6537 </style>
66- <style id="stylepalact">
67- .palact0 {
68- animation: animeY1 0.5s ease-in 0.3s 1 normal;
69- }
70-
38+ <style id="styleStyle">
39+ .paltxtcol0 { color: black; }
40+ .paltxtcol1 { color: red; }
41+ .paltxtcol2 { color: blue; }
42+ .paltxtcol3 { color: green; }
43+ .paltxtcol4 { color: brown; }
44+ </style>
45+ <style id="keyframeStyle">
46+ @keyframes animeact1 { to { color: black; } }
47+ @keyframes animeact2 { to { color: black; } }
48+ @keyframes animeact3 { to { color: black; } }
49+ @keyframes animeact4 { to { color: black; } }
50+ @keyframes animeact5 { to { color: black; } }
51+ </style>
52+ <style id="styleAction">
53+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
54+ .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
55+ .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
56+ .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
57+ .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
58+ </style>
59+ <style id="keyframeAction">
7160 @keyframes animeY1 {
72- 0% {
73- transform: translateY(-60px) translateX(-30px);
74- }
75-
76- 10% {
77- transform: translateY(20px) translateX(30px);
78- }
79-
80- 20% {
81- transform: translateY(-40px) translateX(-20px);
82- }
83-
84- 30% {
85- transform: translateY(50px) translateX(-10px);
86- }
87-
88- 40% {
89- transform: translateY(-40px) translateX(20px);
90- }
91-
92- 50% {
93- transform: translateY(30px) translateX(-15px);
94- }
95-
96- 60% {
97- transform: translateY(-25px) translateX(0px);
98- }
99-
100- 70% {
101- transform: translateY(15px) translateX(-15px);
102- }
103-
104- 80% {
105- transform: translateY(-10px) translateX(10px);
106- }
107-
108- 90% {
109- transform: translateY(0px) translateX(-5px);
110- }
111-
112- 100% {
113- transform: translateY(0px) translateX(0px);
114- }
61+ 0% { transform: translateY(-60px) translateX(-30px); }
62+ 10% { transform: translateY(20px) translateX(30px); }
63+ 20% { transform: translateY(-40px) translateX(-20px); }
64+ 30% { transform: translateY(50px) translateX(-10px); }
65+ 40% { transform: translateY(-40px) translateX(20px); }
66+ 50% { transform: translateY(30px) translateX(-15px); }
67+ 60% { transform: translateY(-25px) translateX(0px); }
68+ 70% { transform: translateY(15px) translateX(-15px); }
69+ 80% { transform: translateY(-10px) translateX(10px); }
70+ 90% { transform: translateY(0px) translateX(-5px); }
71+ 100% { transform: translateY(0px) translateX(0px); }
11572 }
116-
117- .palact1 {
118- animation: animeact1 2s ease-in 0.3s 1 normal;
119- }
120-
121- @keyframes animeact1 {
122- to {
123- color: black;
124- }
125- }
126-
127- .palact2 {
128- animation: animeact2 2s ease-in 0.3s 1 normal;
129- }
130-
131- @keyframes animeact2 {
132- to {
133- color: black;
134- }
135- }
136-
137- .palact3 {
138- animation: animeact3 2s ease-in 0.3s 1 normal;
139- }
140-
141- @keyframes animeact3 {
142- to {
143- color: black;
144- }
145- }
146-
147- .palact4 {
148- animation: animeact4 2s ease-in 0.3s 1 normal;
149- }
150-
151- @keyframes animeact4 {
152- to {
153- color: black;
154- }
155- }
73+ @keyframes animeact1 { to { color: black; } }
74+ @keyframes animeact2 { to { color: black; } }
75+ @keyframes animeact3 { to { color: black; } }
76+ @keyframes animeact4 { to { color: black; } }
15677 </style>
15778
15879 <fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
@@ -161,11 +82,11 @@
16182 <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
16283 </div>
16384 <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>
85+ <li class="palettebackground palbg0" data-objid="palbg0" data-palid="0"></li>
86+ <li class="palettebackground palbg1" data-objid="palbg1" data-palid="1"></li>
87+ <li class="palettebackground palbg2" data-objid="palbg2" data-palid="2"></li>
88+ <li class="palettebackground palbg3" data-objid="palbg3" data-palid="3"></li>
89+ <li class="palettebackground palbg4" data-objid="palbg4" data-palid="4"></li>
16990 </ul>
17091 <div class="palsize"></div>
17192 </fieldset>
@@ -177,11 +98,11 @@
17798 <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
17899 </div>
179100 <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>
101+ <li class="palettestyle paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
102+ <li class="palettestyle paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
103+ <li class="palettestyle paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
104+ <li class="palettestyle paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
105+ <li class="palettestyle paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
185106 </ul>
186107 <div class="palsize"></div>
187108 </fieldset>
@@ -194,11 +115,11 @@
194115 <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
195116 </div>
196117 <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>
118+ <li class="paletteaction palact0" data-objid="palact0" data-palid="0"></li>
119+ <li class="paletteaction palact1" data-objid="palact1" data-palid="1"></li>
120+ <li class="paletteaction palact2" data-objid="palact2" data-palid="2"></li>
121+ <li class="paletteaction palact3" data-objid="palact3" data-palid="3"></li>
122+ <li class="paletteaction palact4" data-objid="palact4" data-palid="4"></li>
202123 </ul>
203124 <div class="palsize"></div>
204125 </fieldset>
@@ -209,11 +130,11 @@
209130 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
210131 </div>
211132 <ul class="palflex">
212- <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
213- <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
214- <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
215- <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
216- <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
133+ <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134+ <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135+ <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136+ <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137+ <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
217138 </ul>
218139 <div class="palsize"></div>
219140 </fieldset>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 53)
@@ -440,6 +440,7 @@
440440
441441
442442 function prohibitDropHandler_dragStart(evt) {
443+ debuglog('prohibitDropHandler_dragStart');
443444 evt.preventDefault();
444445 }
445446 function prohibitDropHandler_dragOver(evt) {
@@ -447,7 +448,7 @@
447448 evt.dataTransfer.dropEffect = "none";
448449 }
449450 function prohibitDropHandler_drop(evt) {
450- this.debuglog('prohibitDropHandler_drop');
451+ debuglog('prohibitDropHandler_drop');
451452 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
452453 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
453454 evt.preventDefault(); // 要素既定のdefault動作を止める
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 53)
@@ -6,52 +6,120 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9-// パレットのCSS機能ボタンを押したときに実行する機能を提供する
9+// パレットのCSS機能ボタンをDropしたときに実行する機能を提供する
1010 // (保持中CSS class nameを対象Elementに付加, 削除)
1111 // (Button instanceが自分の機能を意識しないようにするためのclass)
1212 class PaletteApplyCSS {
1313 constructor() {
14- this.paletteRule = null;
15- this.dataScheme = null;
14+// this.paletteRule = null;
15+ this.dataScheme = null;
1616 this.description = null;
17+ this.groupname = null;
18+ this.num = -1;
19+ this.eleStyle = null;
20+ this.eleKeyframe = null;
1721 }
22+ initialize(eleStyle, eleKeyframe, groupname, num) {
1823
24+ if (null == eleStyle || null == eleKeyframe) {
25+ console.error('PaletteApplyCSS 作成失敗 引数要素異常\neleStyle = ' + eleStyle + ', eleKeyframe = ' + eleKeyframe);
26+ return;
27+ }
28+ if (eleStyle.sheet.cssRules.length <= num
29+ || eleKeyframe.sheet.cssRules.length <= num) {
30+ console.error('PaletteApplyCSS 作成失敗 引数要素異常\nnum = ' + num + 'eleStyle.sheet.cssRules.length = ' + eleStyle.sheet.cssRules.length + ', eleKeyframe.sheet.cssRules.length = ' + eleKeyframe.sheet.cssRules.length);
31+ return;
32+ }
33+
34+ // CSS 書き換え対象 Rule への参照を保持
35+ this.groupname = groupname;
36+ this.num = num;
37+ this.eleStyle = eleStyle;
38+ this.eleKeyframe = eleKeyframe;
39+ }
40+
41+
42+ // 参照中のCSS Ruleを引数textで上書き
43+ // CSS class名は変化しない。本文のみ上書き。
44+ registerCSSRule(
45+ type, // 'Style' or 'Action'
46+ description, // 説明内容テキスト
47+ style, // CSS定義 本文のみ使用する
48+ keyframe, // @keyframeを含むテキスト or null
49+ picture // data scheme
50+ ) {
51+ this.removeDescription();
52+ this.removeImage();
53+
54+ this.registerDescription(description);
55+ this.registerImage(picture);
56+ this.replaceStyle(style);
57+ if (null != keyframe)
58+ this.replaceKeyframe(keyframe);
59+ }
60+
1961 // 機能の登録・削除・実行 ------------------
2062 // 前提：既にCSS ruleはdocumentに登録されている
2163 // CSS ruleへの参照を保持
2264 // 適用要求で対象Elementに保持ruleをadd class
65+ replaceStyle(text) {
66+ // '{' ～ '}' の間を抽出
67+ let strStyle = text.match(/\{([\s\S]*)\}/)[1];
68+ // class名追加
69+ let cssStyle = '.' + this.groupname + this.num + '{' + strStyle + '}';
2370
24- registerCSS(rule) {
25- if (null != this.paletteRule) {
26- console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteRule + '\n今回の機能 = ' + rule);
27- // ひとまず処理継続
28- }
29- this.paletteRule = rule;
71+ this.removeStyle();
72+ this.registerStyle(cssStyle);
73+ }
74+ registerStyle(text) {
75+ this.eleStyle.sheet.insertRule(text, this.num);
3076 return true;
3177 }
32- removeCSS() {
33- this.paletteRule = null;
78+ removeStyle() {
79+ this.eleStyle.sheet.deleteRule(this.num);
3480 }
35- getCSS() {
36- return this.paletteRule;
81+ getStyle() {
82+ return this.eleStyle.sheet.cssRules[this.num];
3783 }
3884 getClassName() {
39- return this.paletteRule.name;
85+ return this.eleStyle.sheet.cssRules[this.num].selectorText;
4086 }
87+ // Target element へ CSS classを追加する
88+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
89+ replaceClassToElement(
90+ CSSname, // 追加(上書き)する CSSclass名称文字列
91+ targetEle // 追加先 element
92+ ) {
93+ // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
94+ let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
95+ let DraggingPaletteType = result[0];
96+
97+ // Drop target elementに 同じ種類の CSS classがないかチェック
98+ let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
99+ result = reg.exec(targetEle.className);
100+ let DropEleOldClass = (null != result) ? result[0] : null;
101+
102+ // 同じ種類の CSS classがあれば削除
103+ if (null != DropEleOldClass)
104+ targetEle.classList.remove(DropEleOldClass);
105+
106+ // Drop target elementに Drag elementの CSS class定義を追加
107+ targetEle.classList.add(DraggingPaletteType + this.num);
108+ }
41109 // 保持中CSS class nameを引数ElementのclassListに追加
42- addClass(ele) {
110+ addClassToElement(ele) {
43111 if (null == ele) {
44112 console.error('CSS適用対象要素が指定されていません');
45113 return false;
46114 }
47- if (null == this.paletteRule) {
115+ if (null == this.eleStyle) {
48116 console.error('CSSが未登録のまま 要素にCSSを追加しようとしました\nEle = ' + ele);
49117 return false;
50118 }
51- ele.classList.add(this.paletteRule.name);
119+ ele.classList.add(this.getClassName());
52120 }
53121 // 保持中CSS class nameを引数ElementのclassListから削除
54- removeClass(ele) {
122+ removeClassToElement(ele) {
55123 if (null == ele) {
56124 console.error('CSS適用対象要素が指定されていません');
57125 return false;
@@ -60,9 +128,27 @@
60128 console.error('CSSが未登録のまま 要素にCSSを削除しようとしました\nEle = ' + ele);
61129 return false;
62130 }
63- ele.classList.remove(this.paletteRule.name);
131+ ele.classList.remove(this.getClassName());
64132 }
65133
134+ replaceKeyframe(text) {
135+ this.removeKeyframe();
136+ this.registerKeyframe(text);
137+ }
138+ registerKeyframe(text) {
139+ this.eleKeyframe.sheet.insertRule(text, this.num);
140+ return true;
141+ }
142+ removeKeyframe() {
143+ this.eleKeyframe.sheet.deleteRule(this.num);
144+ }
145+ getKeyframe() {
146+ return this.eleKeyframe.sheet.cssRules[this.num];
147+ }
148+ getKeyframeName() {
149+ return this.eleKeyframe.sheet.cssRules[this.num].name;
150+ }
151+
66152 // 登録されたCSSの機能に関連した画像・説明文の 登録・取得 ------------
67153 registerImage(dataScheme) {
68154 if (null != this.dataScheme) {
@@ -346,7 +432,7 @@
346432 // ボタン Click で実行する機能を登録
347433 setPalettePressFunction(palfunc) {
348434 if (null != this.palettePressFunction) {
349- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
435+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.name);
350436 // ひとまず処理継続
351437 }
352438 this.palettePressFunction = palfunc;
@@ -403,14 +489,31 @@
403489 // PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
404490
405491 // パレットのCSSボタン表示部分の定義class
406-// DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
492+// DOM Elementの保持、ボタンdrag & dropで呼び出す機能との関連付け
407493 // Input eventから必要機能の呼び出し
408494 class PaletteShapeCSSButton {
409495 constructor() {
496+ this.paletteType = null;
497+ this.num = -1;
410498 this.DOMobject = null;
411- this.paletteDropFunction = null;
499+ this.paletteTextParser = null;
412500 }
501+ initialize(paletteType, num) {
413502
503+ this.paletteType = paletteType;
504+ this.num = num;
505+ this.paletteTextParser = new PaletteCSSTextParser();
506+
507+ // paletteApplyCss に保持させるRuleへの参照を取得
508+ this.eleStyleArray = { 'Background': 'styleBackground', 'Style': 'styleStyle', 'Action': 'styleAction' }; // Setting paletteは CSSを使わない
509+ this.eleKeyframeArray = { 'Background': 'keyframeBackground', 'Style': 'keyframeStyle', 'Action': 'keyframeAction' };
510+
511+ let eleStyle = document.getElementById(this.eleStyleArray[this.paletteType]);
512+ let eleKeyframe = document.getElementById(this.eleKeyframeArray[this.paletteType]);
513+ this.paletteApplyCss = new PaletteApplyCSS();
514+ this.paletteApplyCss.initialize(eleStyle, eleKeyframe, paletteType, num);
515+ }
516+
414517 // 表示に使用するDOM要素を作成
415518 // DOM 要素を作成してこの Instance の表示要素として登録
416519 createButtonElement(parent) {
@@ -451,23 +554,19 @@
451554 ele.appendChild(this.DOMobject);
452555 return true;
453556 }
454-
557+/*
455558 // Paletteボタン対象Dropで実行する機能を登録
456- setPaletteDropFunction(dropcssfunc) {
457- if (null != this.paletteDropFunction) {
458- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
559+ setpaletteApplyCss(dropcssfunc) {
560+ if (null != this.paletteApplyCss) {
561+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteApplyCss.getFunction.name + ', 今回の機能 = ' + dropcssfunc.name);
459562 // ひとまず処理継続
460563 }
461- this.paletteDropFunction = palfunc;
564+ this.paletteApplyCss = dropcssfunc;
462565
463- // 表示要素の更新
464- this.DOMobject.title = this.palettePressFunction.getDescription();
465- this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
466- this.DOMobject.style.backgroundSize = 'cover';
467566 }
468-
469- clearPaletteDropFunction() {
470- this.paletteDropFunction = null;
567+*/
568+ clearpaletteApplyCss() {
569+ this.paletteApplyCss = null;
471570 this.DOMobject.title = null;
472571 this.DOMobject.style.backgroundImage = 'none';
473572 }
@@ -484,9 +583,9 @@
484583 this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
485584 // this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
486585 // 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);
586+ this.DOMobject.addEventListener('dragstart', this.onDragStartPaletteShapeCSSButton.bind(this), false);
587+ this.DOMobject.addEventListener('dragover', this.onDragOverPaletteShapeCSSButton.bind(this), false);
588+ this.DOMobject.addEventListener('drop', this.onDropPaletteShapeCSSButton.bind(this), false);
490589 }
491590
492591
@@ -502,7 +601,13 @@
502601 // Mouse/Touch event 差分
503602 let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
504603
505- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
604+ // ボタンにCSSが未登録なら、Userが drag 操作をする前に止める
605+ if (null == this.paletteApplyCss) {
606+ console.error('ボタンにCSSが登録されていません');
607+ return false;
608+ }
609+
610+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
506611 window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
507612 this.startMovingElement(evt);
508613 }
@@ -580,6 +685,9 @@
580685 }
581686
582687 // Target element へ CSS classを追加する
688+ if (null != this.paletteApplyCss) {
689+ this.paletteApplyCss.replaceClassToElement(this.paletteApplyCss.getClassName(), target.DOMobject);
690+ }
583691 }
584692
585693
@@ -587,6 +695,7 @@
587695 // Applicationの外からFile Dropされたときに
588696 // File内容情報を読み込み、CSSに反映させる
589697 onDragStartPaletteShapeCSSButton(evt) {
698+ debuglog('onDragStartPaletteShapeCSSButton');
590699 evt.preventDefault();
591700 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
592701 }
@@ -596,7 +705,7 @@
596705 evt.dataTransfer.dropEffect = "copy";
597706 }
598707 onDropPaletteShapeCSSButton(evt) {
599- this.debuglog('onDrop');
708+ debuglog('onDropPaletteShapeCSSButton');
600709 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
601710 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
602711 evt.preventDefault(); // 要素既定のdefault動作を止める
@@ -606,12 +715,29 @@
606715 }
607716
608717 replaceCSSText(file) {
609- let cssText = null;
610- cssText = this.paletteTextParser.readTextFile(file);
611- this.paletteTextParser.parseText(cssText);
612- let rule = this.paletteApplyCss.getCSS();
613- this.paletteTextParser.replaceCSSRule(rule, cssText);
718+ // File から定義内容の読み込み
719+ this.paletteTextParser.readTextFile(file, this.readComplete.bind(this));
614720 }
721+ readComplete(cssText) {
722+ let ret = false;
723+ // 読み込み文字列の解析
724+ ret = this.paletteTextParser.parseText(cssText);
725+ if (false == ret) // 致命的なエラー
726+ return false;
727+ // 解析済み文字列取得
728+ let type = this.paletteTextParser.resultOfParsingType();
729+ let description = this.paletteTextParser.resultOfParsingDescription();
730+ let style = this.paletteTextParser.resultOfParsingRule();
731+ let keyframe = this.paletteTextParser.resultOfParsingKeyframe();
732+ let picture = this.paletteTextParser.resultOfParsingPicture();
733+ // CSS 定義上書き登録
734+ let rule = this.paletteApplyCss.registerCSSRule(type, description, style, keyframe, picture);
735+
736+ // 表示要素の更新
737+ this.DOMobject.title = this.paletteApplyCss.getDescription();
738+ this.DOMobject.style.backgroundImage = 'url(' + this.paletteApplyCss.getImage() + ')';
739+ this.DOMobject.style.backgroundSize = 'cover';
740+ }
615741 parseImage(file) {
616742 console.error('画像ファイルには未対応');
617743 return false;
@@ -625,11 +751,22 @@
625751 // Text解析、CSS登録
626752 // CSSの汎用操作を扱うわけではない
627753 // 解析後のTextやImageは保持しない
628-// singletonにしたいがやり方がわからないので1つだけ作るようにする；´Д｀)運用でカバー
629754 class PaletteCSSTextParser {
630755 constructor() {
631756 this.filename = null;
632757 this.cssText = null;
758+
759+ // Parse text 用の定義
760+ this.startStrArray = ['\\[', ' Start\\]'];
761+ this.endStrArray = ['\\[', ' End\\]'];
762+ this.blockNameArray = ['Type', 'Description', 'Rule', 'Keyframe', 'Picture'];
763+ this.blockRequired = [true, false, true, false, false];
764+ this.typeNameArray = ['Style', 'Action'];
765+ // 分解後の文字列保持先連想配列の確保
766+ this.defineStrArray = [];
767+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
768+ this.defineStrArray[this.blockNameArray[cnt]] = null;
769+ }
633770 }
634771
635772 // Drop file(CSS定義test)の内容読み込み(file, ele, num)
@@ -659,26 +796,154 @@
659796 }
660797
661798 // Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
662- // class name取得
663- // 定義内容取得
664- // description取得
665- // data scheme取得
666- // comment取得
667799 parseText(str) {
668- // Textを下記要素に分解する
669- // ・
800+ // ブロックごとに分解して内部変数に結果を保持
801+ this.parseTextBlocks(str);
802+ // (定義チェック前に) 文字列前後の空白を削除
803+ this.parseTextClearBlankCharacters();
804+ // 必要な定義の存在チェック
805+ let abnormalData, notRecommended, resultStr;
806+ [abnormalData, notRecommended, resultStr] = this.parseTextCheckData();
807+ if (true == abnormalData) {
808+ console.error(resultStr);
809+ return false;
810+ }
811+ else if (true == notRecommended) {
812+ console.error(resultStr);
813+ }
814+
815+ // 読みこんだ文字列を CSS 定義差し替えに使える形に調整
816+ let ret = false;
817+// ret = this.parseTextRule();
818+// if (false == ret)
819+// return false;
820+ this.parseTextKeyframe();
821+
822+ return true;
670823 }
671824
672- // StringをStyle elementへadd - Ruleへの参照を返す
673- // Element指定は必須
674- // StringをStyle elementへreplace - Ruleへの参照を返す
675- // Element指定は必須
676- replaceCSSRule(rule, text) {
825+ resultOfParsingType() {
826+ return this.defineStrArray[this.blockNameArray[0]];
677827 }
828+ resultOfParsingDescription() {
829+ return this.defineStrArray[this.blockNameArray[1]];
830+ }
831+ resultOfParsingRule() {
832+ return this.defineStrArray[this.blockNameArray[2]];
833+ }
834+ resultOfParsingKeyframe() {
835+ return this.defineStrArray[this.blockNameArray[3]];
836+ }
837+ resultOfParsingPicture() {
838+ return this.defineStrArray[this.blockNameArray[4]];
839+ }
678840
679- // CSS class name指定でRuleへの参照を返す
680- // Element指定あり …… 指定Element内から検索
681- // Element指定なし …… document全体から検索
841+
842+
843+ // Private 関数 -------------------------
844+
845+ parseTextBlocks(str) {
846+ // ブロックごとに分解する
847+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
848+ // Keyword 作成
849+ let strStart = this.startStrArray[0] + this.blockNameArray[cnt] + this.startStrArray[1];
850+ let strEnd = this.endStrArray[0] + this.blockNameArray[cnt] + this.endStrArray[1];
851+ let strReg = strStart + '(\[\\s\\S\]*?)' + strEnd;
852+ let regKeyword = new RegExp(strReg);
853+ // 目的箇所の取得
854+ let strDefine = str.match(regKeyword);
855+ // 結果を保持
856+ if (null != strDefine)
857+ this.defineStrArray[this.blockNameArray[cnt]] = (0 < strDefine.length) ? strDefine[1] : null;
858+ }
859+ }
860+ // 文字列の前後にある空白を削除
861+ parseTextClearBlankCharacters() {
862+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
863+ if (null != this.defineStrArray[this.blockNameArray[cnt]])
864+ this.defineStrArray[this.blockNameArray[cnt]] = this.defineStrArray[this.blockNameArray[cnt]].replace(/^\s+|\s+$/g, "");
865+ }
866+ }
867+ parseTextCheckData() {
868+ let abnormalData = false;
869+ let notRecommended = false;
870+ let resultStr = "定義ファイルから下記のデータが正しく読み取れません。ファイルの内容に問題がないかご確認頂けないでしょうか。\n";
871+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
872+ // 存在しないデータがみつかった
873+ if (null == this.defineStrArray[this.blockNameArray[cnt]]) {
874+ // それは必須データ？
875+ if (true == this.blockRequired[cnt]) {
876+ abnormalData = true;
877+ resultStr += "Must：" + this.blockNameArray[cnt] + " 定義\n";
878+ }
879+ else {
880+ notRecommended = true;
881+ resultStr += "Should：" + this.blockNameArray[cnt] + " 定義\n";
882+ }
883+ }
884+ }
885+ // Type データの型チェック
886+ let ret = this.parseTextCheckType(this.defineStrArray[this.blockNameArray[0]]);
887+ if (false == ret) {
888+ abnormalData = true;
889+
890+ let strTypeName = null;
891+ let cnt = 0;
892+ while(true) {
893+ strTypeName += this.typeNameArray[cnt];
894+ if (++cnt < this.typeNameArray.length)
895+ break;
896+ strTypeName += ', ';
897+ }
898+ resultStr += this.blockNameArray[0] + "データとして設定する値は次のいずれかにしてください：" + strTypeName;
899+ }
900+
901+ return [abnormalData, notRecommended, resultStr];
902+ }
903+ parseTextCheckType(strType) {
904+ let result = false;
905+ for (let cnt = 0; cnt < this.typeNameArray.length; cnt++) {
906+ if (strType == this.typeNameArray[cnt]) {
907+ result = true;
908+ break;
909+ }
910+ }
911+ return result;
912+ }
913+
914+ // 内部変数 this.defineStrArray[this.blockNameArray[2]] から CSS 定義部分を抽出
915+ parseTextRule() {
916+ let strCSS = this.defineStrArray[this.blockNameArray[2]];
917+ let strRule = strCSS.match(/\{([\s\S]*)\}/);
918+ if (strRule.length < 1) {
919+ console.error('Rule定義内容が見つかりません\nRule = ' + strCSS);
920+ return false;
921+ }
922+ // 定義の差し替えに使える形で上書き
923+ this.defineStrArray[this.blockNameArray[2]] = strRule[1];
924+ }
925+
926+ // 内部変数 this.defineStrArray[this.blockNameArray[3]] の内容チェック
927+ parseTextKeyframe() {
928+ let strCSS = this.defineStrArray[this.blockNameArray[3]];
929+ if (null == strCSS) {
930+ console.log('keyframe定義なし');
931+ return true;
932+ }
933+ if (- 1 == strCSS.indexOf('@keyframe')) {
934+ if (this.typeNameArray[1] == this.defineStrArray[this.blockNameArray[0]]) {
935+ console.error('Keyframe定義が読み込めません\nkeyframe = ' +strCSS);
936+ // 致命的エラーにはしない。Animation定義未使用の可能性があるため
937+ this.defineStrArray[this.blockNameArray[3]] = null;
938+ return false;
939+ }
940+ }
941+ // keyframe dataはそのまま使うので特に加工しない
942+ return true;
943+ }
944+
945+
946+
682947 }
683948
684949 class CSSPalette {
@@ -692,16 +957,17 @@
692957
693958 initialize() {
694959 // CSS 情報定義先を保持
695- this.stylebg = document.getElementById('stylepalbg');
696- this.styletxtcol = document.getElementById('stylepaltxtcol');
697- this.styleact = document.getElementById('stylepalact');
960+ this.stylebg = document.getElementById('styleBackground');
961+ this.styletxtcol = document.getElementById('styleStyle');
962+ this.styleact = document.getElementById('styleAction');
698963
699964 // palette要素を保持
700965 // 背景設定パレット
701- let elePalbg = document.getElementsByClassName('palbg');
966+ let elePalbg = document.getElementsByClassName('palettebackground');
702967 this.palBackground = [];
703968 for (let cnt = 0; cnt < elePalbg.length; cnt++) {
704969 this.palBackground[cnt] = new PaletteShapeCSSButton();
970+ this.palBackground[cnt].initialize('Background', cnt);
705971 this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
706972 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
707973 }
@@ -720,10 +986,11 @@
720986 }
721987 */
722988 // スタイルパレット
723- let elePalstyle = document.getElementsByClassName('paltxtcol');
989+ let elePalstyle = document.getElementsByClassName('palettestyle');
724990 this.palStyle = [];
725991 for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
726992 this.palStyle[cnt] = new PaletteShapeCSSButton();
993+ this.palStyle[cnt].initialize('Style', cnt);
727994 this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
728995 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
729996 }
@@ -742,10 +1009,11 @@
7421009 }
7431010 */
7441011 // アクションパレット
745- let elePalaction = document.getElementsByClassName('palact');
1012+ let elePalaction = document.getElementsByClassName('paletteaction');
7461013 this.palAction = [];
7471014 for (let cnt = 0; cnt < elePalaction.length; cnt++) {
7481015 this.palAction[cnt] = new PaletteShapeCSSButton();
1016+ this.palAction[cnt].initialize('Action', cnt);
7491017 this.palAction[cnt].createButtonElement(elePalaction[cnt]);
7501018 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
7511019 }
@@ -774,7 +1042,7 @@
7741042 paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
7751043 paletteFunctionObjects.getItem(10) // Toggle Scale font size
7761044 ];
777- let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
1045+ let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
7781046 this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
7791047 for (let cnt = 0; cnt < elePalset.length; cnt++) {
7801048 this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 53)
@@ -108,7 +108,7 @@
108108 margin: 0px; padding: 5px;
109109 border: 1px solid transparent;
110110 border-radius: 8px;
111- background-color: #fff;
111+/* background-color: #fff; */
112112 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
113113 }
114114 .pallegend {
@@ -161,7 +161,6 @@
161161 .palflex {
162162 display: flex;
163163 flex-wrap: wrap;
164- position: relative;
165164 overflow: scroll;
166165 width: calc(100% - 20px); height: calc(100% - 40px);
167166 margin: -5px 10px; padding: 15px;
@@ -168,60 +167,36 @@
168167 background-color: gray;
169168 box-shadow: 10px 10px 20px -4px #777 inset;
170169 opacity: 0.6;
171- text-decoration: none;
172170 justify-content: flex-start;
173171 }
174172 /* パレット要素の定義 */
175- .palbg,
176- .paltxtcol,
177- .palact,
178- .palset {
173+ .palettebackground,
174+ .palettestyle,
175+ .paletteaction,
176+ .palettesetting {
179177 display: inline-block;
180- position: absolute;
181- width: 50px; height: 50px;
182- border-radius: 8px;
183- margin: 4px; padding: 0;
178+ position: relative;
179+ width: 60px; height: 60px;
180+ margin: 7px 7px; padding: 0;
181+ border-radius: 50%;
184182 text-align: center;
185- font-size: 45px; line-height: 45px;
183+ font-size: 55px; line-height: 55px;
186184 }
187- .palbg {
188- border: 1px solid rgba(0,0,0,0.2);
185+ .palettebackground {
189186 background-color: rgba(27, 158, 131, 0.6);
190- 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;
195187 }
196- .paltxtcol {
197- border: 1px solid rgba(0,0,0,0.2);
188+ .palettestyle {
198189 background-color: rgba(154,145,140,0.6);
199- 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;
204190 }
205- .palact {
206- border: 1px solid rgba(0,0,0,0.2);
191+ .paletteaction {
207192 background-color: rgba(156, 165, 55, 0.6);
208- 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;
213193 }
214- .palset {
215- border: 1px solid rgba(0,0,0,0.2);
194+ .palettesetting {
216195 background-color: rgba(27, 158, 131, 0.6);
217- box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
218- /* ********************** */
219- position: relative;
220- width: 60px; height: 60px;
221- margin: 7px 7px; padding: 0;
222196 }
223197
224198 /* パレット内の個々のボタン Element */
199+ /* ul liの上に動的に作成される */
225200 .palbutton {
226201 position: absolute;
227202 left: 0; top: 0;
@@ -228,8 +203,9 @@
228203 width: 100%; height: 100%;
229204 margin: 0; padding: 0;
230205 border: 1px solid black;
206+ border-radius: inherit;
231207 background-color: inherit;
232- box-shadow: inherit;
208+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
233209 }
234210
235211 /* パレットサイズ変更用 Element */
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 53)
@@ -21,138 +21,59 @@
2121 }
2222 </style>
2323 <!-- Palette -->
24- <style id="stylepalbg">
25- .palbg0 {
26- background-image: url(dummy.png);
27- }
28-
29- .palbg1 {
30- background-image: url(dummy.png);
31- }
32-
33- .palbg2 {
34- background-image: url(dummy.png);
35- }
36-
37- .palbg3 {
38- background-image: url(dummy.png);
39- }
40-
41- .palbg4 {
42- background-image: url(dummy.png);
43- }
24+ <style id="styleBackground">
25+ .palbg0 { background-image: url(dummy.png); }
26+ .palbg1 { background-image: url(dummy.png); }
27+ .palbg2 { background-image: url(dummy.png); }
28+ .palbg3 { background-image: url(dummy.png); }
29+ .palbg4 { background-image: url(dummy.png); }
4430 </style>
45- <style id="stylepaltxtcol">
46- .paltxtcol0 {
47- color: black;
48- }
49-
50- .paltxtcol1 {
51- color: red;
52- }
53-
54- .paltxtcol2 {
55- color: blue;
56- }
57-
58- .paltxtcol3 {
59- color: green;
60- }
61-
62- .paltxtcol4 {
63- color: brown;
64- }
31+ <style id="keyframeBackground">
32+ @keyframes animeact1 { to { color: black; } }
33+ @keyframes animeact2 { to { color: black; } }
34+ @keyframes animeact3 { to { color: black; } }
35+ @keyframes animeact4 { to { color: black; } }
36+ @keyframes animeact5 { to { color: black; } }
6537 </style>
66- <style id="stylepalact">
67- .palact0 {
68- animation: animeY1 0.5s ease-in 0.3s 1 normal;
69- }
70-
38+ <style id="styleStyle">
39+ .paltxtcol0 { color: black; }
40+ .paltxtcol1 { color: red; }
41+ .paltxtcol2 { color: blue; }
42+ .paltxtcol3 { color: green; }
43+ .paltxtcol4 { color: brown; }
44+ </style>
45+ <style id="keyframeStyle">
46+ @keyframes animeact1 { to { color: black; } }
47+ @keyframes animeact2 { to { color: black; } }
48+ @keyframes animeact3 { to { color: black; } }
49+ @keyframes animeact4 { to { color: black; } }
50+ @keyframes animeact5 { to { color: black; } }
51+ </style>
52+ <style id="styleAction">
53+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
54+ .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
55+ .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
56+ .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
57+ .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
58+ </style>
59+ <style id="keyframeAction">
7160 @keyframes animeY1 {
72- 0% {
73- transform: translateY(-60px) translateX(-30px);
74- }
75-
76- 10% {
77- transform: translateY(20px) translateX(30px);
78- }
79-
80- 20% {
81- transform: translateY(-40px) translateX(-20px);
82- }
83-
84- 30% {
85- transform: translateY(50px) translateX(-10px);
86- }
87-
88- 40% {
89- transform: translateY(-40px) translateX(20px);
90- }
91-
92- 50% {
93- transform: translateY(30px) translateX(-15px);
94- }
95-
96- 60% {
97- transform: translateY(-25px) translateX(0px);
98- }
99-
100- 70% {
101- transform: translateY(15px) translateX(-15px);
102- }
103-
104- 80% {
105- transform: translateY(-10px) translateX(10px);
106- }
107-
108- 90% {
109- transform: translateY(0px) translateX(-5px);
110- }
111-
112- 100% {
113- transform: translateY(0px) translateX(0px);
114- }
61+ 0% { transform: translateY(-60px) translateX(-30px); }
62+ 10% { transform: translateY(20px) translateX(30px); }
63+ 20% { transform: translateY(-40px) translateX(-20px); }
64+ 30% { transform: translateY(50px) translateX(-10px); }
65+ 40% { transform: translateY(-40px) translateX(20px); }
66+ 50% { transform: translateY(30px) translateX(-15px); }
67+ 60% { transform: translateY(-25px) translateX(0px); }
68+ 70% { transform: translateY(15px) translateX(-15px); }
69+ 80% { transform: translateY(-10px) translateX(10px); }
70+ 90% { transform: translateY(0px) translateX(-5px); }
71+ 100% { transform: translateY(0px) translateX(0px); }
11572 }
116-
117- .palact1 {
118- animation: animeact1 2s ease-in 0.3s 1 normal;
119- }
120-
121- @keyframes animeact1 {
122- to {
123- color: black;
124- }
125- }
126-
127- .palact2 {
128- animation: animeact2 2s ease-in 0.3s 1 normal;
129- }
130-
131- @keyframes animeact2 {
132- to {
133- color: black;
134- }
135- }
136-
137- .palact3 {
138- animation: animeact3 2s ease-in 0.3s 1 normal;
139- }
140-
141- @keyframes animeact3 {
142- to {
143- color: black;
144- }
145- }
146-
147- .palact4 {
148- animation: animeact4 2s ease-in 0.3s 1 normal;
149- }
150-
151- @keyframes animeact4 {
152- to {
153- color: black;
154- }
155- }
73+ @keyframes animeact1 { to { color: black; } }
74+ @keyframes animeact2 { to { color: black; } }
75+ @keyframes animeact3 { to { color: black; } }
76+ @keyframes animeact4 { to { color: black; } }
15677 </style>
15778
15879 <fieldset class="palgroup palgroup0" data-objid="palgroup0" style="width:400px; height:130px;" title="背景の色や画像を設定するパレットです">
@@ -161,11 +82,11 @@
16182 <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
16283 </div>
16384 <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>
85+ <li class="palettebackground palbg0" data-objid="palbg0" data-palid="0"></li>
86+ <li class="palettebackground palbg1" data-objid="palbg1" data-palid="1"></li>
87+ <li class="palettebackground palbg2" data-objid="palbg2" data-palid="2"></li>
88+ <li class="palettebackground palbg3" data-objid="palbg3" data-palid="3"></li>
89+ <li class="palettebackground palbg4" data-objid="palbg4" data-palid="4"></li>
16990 </ul>
17091 <div class="palsize"></div>
17192 </fieldset>
@@ -177,11 +98,11 @@
17798 <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
17899 </div>
179100 <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>
101+ <li class="palettestyle paltxtcol0" data-objid="paltxtcol0" data-palid="0"></li>
102+ <li class="palettestyle paltxtcol1" data-objid="paltxtcol1" data-palid="1"></li>
103+ <li class="palettestyle paltxtcol2" data-objid="paltxtcol2" data-palid="2"></li>
104+ <li class="palettestyle paltxtcol3" data-objid="paltxtcol3" data-palid="3"></li>
105+ <li class="palettestyle paltxtcol4" data-objid="paltxtcol4" data-palid="4"></li>
185106 </ul>
186107 <div class="palsize"></div>
187108 </fieldset>
@@ -194,11 +115,11 @@
194115 <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
195116 </div>
196117 <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>
118+ <li class="paletteaction palact0" data-objid="palact0" data-palid="0"></li>
119+ <li class="paletteaction palact1" data-objid="palact1" data-palid="1"></li>
120+ <li class="paletteaction palact2" data-objid="palact2" data-palid="2"></li>
121+ <li class="paletteaction palact3" data-objid="palact3" data-palid="3"></li>
122+ <li class="paletteaction palact4" data-objid="palact4" data-palid="4"></li>
202123 </ul>
203124 <div class="palsize"></div>
204125 </fieldset>
@@ -209,11 +130,11 @@
209130 <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
210131 </div>
211132 <ul class="palflex">
212- <li class="palset palset0" data-objid="palset0" data-palid="0"></li>
213- <li class="palset palset1" data-objid="palset1" data-palid="1"></li>
214- <li class="palset palset2" data-objid="palset2" data-palid="2"></li>
215- <li class="palset palset3" data-objid="palset3" data-palid="3"></li>
216- <li class="palset palset4" data-objid="palset4" data-palid="4"></li>
133+ <li class="palettesetting palset0" data-objid="palset0" data-palid="0"></li>
134+ <li class="palettesetting palset1" data-objid="palset1" data-palid="1"></li>
135+ <li class="palettesetting palset2" data-objid="palset2" data-palid="2"></li>
136+ <li class="palettesetting palset3" data-objid="palset3" data-palid="3"></li>
137+ <li class="palettesetting palset4" data-objid="palset4" data-palid="4"></li>
217138 </ul>
218139 <div class="palsize"></div>
219140 </fieldset>
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 53)
@@ -440,6 +440,7 @@
440440
441441
442442 function prohibitDropHandler_dragStart(evt) {
443+ debuglog('prohibitDropHandler_dragStart');
443444 evt.preventDefault();
444445 }
445446 function prohibitDropHandler_dragOver(evt) {
@@ -447,7 +448,7 @@
447448 evt.dataTransfer.dropEffect = "none";
448449 }
449450 function prohibitDropHandler_drop(evt) {
450- this.debuglog('prohibitDropHandler_drop');
451+ debuglog('prohibitDropHandler_drop');
451452 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
452453 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
453454 evt.preventDefault(); // 要素既定のdefault動作を止める
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 52)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 53)
@@ -6,52 +6,120 @@
66 // ・Target要素に自objidと同名のCSS class追加
77 // ・外部からのDropによる text, image, css 読み込み
88
9-// パレットのCSS機能ボタンを押したときに実行する機能を提供する
9+// パレットのCSS機能ボタンをDropしたときに実行する機能を提供する
1010 // (保持中CSS class nameを対象Elementに付加, 削除)
1111 // (Button instanceが自分の機能を意識しないようにするためのclass)
1212 class PaletteApplyCSS {
1313 constructor() {
14- this.paletteRule = null;
15- this.dataScheme = null;
14+// this.paletteRule = null;
15+ this.dataScheme = null;
1616 this.description = null;
17+ this.groupname = null;
18+ this.num = -1;
19+ this.eleStyle = null;
20+ this.eleKeyframe = null;
1721 }
22+ initialize(eleStyle, eleKeyframe, groupname, num) {
1823
24+ if (null == eleStyle || null == eleKeyframe) {
25+ console.error('PaletteApplyCSS 作成失敗 引数要素異常\neleStyle = ' + eleStyle + ', eleKeyframe = ' + eleKeyframe);
26+ return;
27+ }
28+ if (eleStyle.sheet.cssRules.length <= num
29+ || eleKeyframe.sheet.cssRules.length <= num) {
30+ console.error('PaletteApplyCSS 作成失敗 引数要素異常\nnum = ' + num + 'eleStyle.sheet.cssRules.length = ' + eleStyle.sheet.cssRules.length + ', eleKeyframe.sheet.cssRules.length = ' + eleKeyframe.sheet.cssRules.length);
31+ return;
32+ }
33+
34+ // CSS 書き換え対象 Rule への参照を保持
35+ this.groupname = groupname;
36+ this.num = num;
37+ this.eleStyle = eleStyle;
38+ this.eleKeyframe = eleKeyframe;
39+ }
40+
41+
42+ // 参照中のCSS Ruleを引数textで上書き
43+ // CSS class名は変化しない。本文のみ上書き。
44+ registerCSSRule(
45+ type, // 'Style' or 'Action'
46+ description, // 説明内容テキスト
47+ style, // CSS定義 本文のみ使用する
48+ keyframe, // @keyframeを含むテキスト or null
49+ picture // data scheme
50+ ) {
51+ this.removeDescription();
52+ this.removeImage();
53+
54+ this.registerDescription(description);
55+ this.registerImage(picture);
56+ this.replaceStyle(style);
57+ if (null != keyframe)
58+ this.replaceKeyframe(keyframe);
59+ }
60+
1961 // 機能の登録・削除・実行 ------------------
2062 // 前提：既にCSS ruleはdocumentに登録されている
2163 // CSS ruleへの参照を保持
2264 // 適用要求で対象Elementに保持ruleをadd class
65+ replaceStyle(text) {
66+ // '{' ～ '}' の間を抽出
67+ let strStyle = text.match(/\{([\s\S]*)\}/)[1];
68+ // class名追加
69+ let cssStyle = '.' + this.groupname + this.num + '{' + strStyle + '}';
2370
24- registerCSS(rule) {
25- if (null != this.paletteRule) {
26- console.error('パレット機能 上書き登録\n以前の機能 = ' + this.paletteRule + '\n今回の機能 = ' + rule);
27- // ひとまず処理継続
28- }
29- this.paletteRule = rule;
71+ this.removeStyle();
72+ this.registerStyle(cssStyle);
73+ }
74+ registerStyle(text) {
75+ this.eleStyle.sheet.insertRule(text, this.num);
3076 return true;
3177 }
32- removeCSS() {
33- this.paletteRule = null;
78+ removeStyle() {
79+ this.eleStyle.sheet.deleteRule(this.num);
3480 }
35- getCSS() {
36- return this.paletteRule;
81+ getStyle() {
82+ return this.eleStyle.sheet.cssRules[this.num];
3783 }
3884 getClassName() {
39- return this.paletteRule.name;
85+ return this.eleStyle.sheet.cssRules[this.num].selectorText;
4086 }
87+ // Target element へ CSS classを追加する
88+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
89+ replaceClassToElement(
90+ CSSname, // 追加(上書き)する CSSclass名称文字列
91+ targetEle // 追加先 element
92+ ) {
93+ // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
94+ let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
95+ let DraggingPaletteType = result[0];
96+
97+ // Drop target elementに 同じ種類の CSS classがないかチェック
98+ let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
99+ result = reg.exec(targetEle.className);
100+ let DropEleOldClass = (null != result) ? result[0] : null;
101+
102+ // 同じ種類の CSS classがあれば削除
103+ if (null != DropEleOldClass)
104+ targetEle.classList.remove(DropEleOldClass);
105+
106+ // Drop target elementに Drag elementの CSS class定義を追加
107+ targetEle.classList.add(DraggingPaletteType + this.num);
108+ }
41109 // 保持中CSS class nameを引数ElementのclassListに追加
42- addClass(ele) {
110+ addClassToElement(ele) {
43111 if (null == ele) {
44112 console.error('CSS適用対象要素が指定されていません');
45113 return false;
46114 }
47- if (null == this.paletteRule) {
115+ if (null == this.eleStyle) {
48116 console.error('CSSが未登録のまま 要素にCSSを追加しようとしました\nEle = ' + ele);
49117 return false;
50118 }
51- ele.classList.add(this.paletteRule.name);
119+ ele.classList.add(this.getClassName());
52120 }
53121 // 保持中CSS class nameを引数ElementのclassListから削除
54- removeClass(ele) {
122+ removeClassToElement(ele) {
55123 if (null == ele) {
56124 console.error('CSS適用対象要素が指定されていません');
57125 return false;
@@ -60,9 +128,27 @@
60128 console.error('CSSが未登録のまま 要素にCSSを削除しようとしました\nEle = ' + ele);
61129 return false;
62130 }
63- ele.classList.remove(this.paletteRule.name);
131+ ele.classList.remove(this.getClassName());
64132 }
65133
134+ replaceKeyframe(text) {
135+ this.removeKeyframe();
136+ this.registerKeyframe(text);
137+ }
138+ registerKeyframe(text) {
139+ this.eleKeyframe.sheet.insertRule(text, this.num);
140+ return true;
141+ }
142+ removeKeyframe() {
143+ this.eleKeyframe.sheet.deleteRule(this.num);
144+ }
145+ getKeyframe() {
146+ return this.eleKeyframe.sheet.cssRules[this.num];
147+ }
148+ getKeyframeName() {
149+ return this.eleKeyframe.sheet.cssRules[this.num].name;
150+ }
151+
66152 // 登録されたCSSの機能に関連した画像・説明文の 登録・取得 ------------
67153 registerImage(dataScheme) {
68154 if (null != this.dataScheme) {
@@ -346,7 +432,7 @@
346432 // ボタン Click で実行する機能を登録
347433 setPalettePressFunction(palfunc) {
348434 if (null != this.palettePressFunction) {
349- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
435+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.palettePressFunction.getFunction.name + ', 今回の機能 = ' + palfunc.name);
350436 // ひとまず処理継続
351437 }
352438 this.palettePressFunction = palfunc;
@@ -403,14 +489,31 @@
403489 // PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
404490
405491 // パレットのCSSボタン表示部分の定義class
406-// DOM Elementの保持、ボタンdrag & dropでの実行機能との関連付け
492+// DOM Elementの保持、ボタンdrag & dropで呼び出す機能との関連付け
407493 // Input eventから必要機能の呼び出し
408494 class PaletteShapeCSSButton {
409495 constructor() {
496+ this.paletteType = null;
497+ this.num = -1;
410498 this.DOMobject = null;
411- this.paletteDropFunction = null;
499+ this.paletteTextParser = null;
412500 }
501+ initialize(paletteType, num) {
413502
503+ this.paletteType = paletteType;
504+ this.num = num;
505+ this.paletteTextParser = new PaletteCSSTextParser();
506+
507+ // paletteApplyCss に保持させるRuleへの参照を取得
508+ this.eleStyleArray = { 'Background': 'styleBackground', 'Style': 'styleStyle', 'Action': 'styleAction' }; // Setting paletteは CSSを使わない
509+ this.eleKeyframeArray = { 'Background': 'keyframeBackground', 'Style': 'keyframeStyle', 'Action': 'keyframeAction' };
510+
511+ let eleStyle = document.getElementById(this.eleStyleArray[this.paletteType]);
512+ let eleKeyframe = document.getElementById(this.eleKeyframeArray[this.paletteType]);
513+ this.paletteApplyCss = new PaletteApplyCSS();
514+ this.paletteApplyCss.initialize(eleStyle, eleKeyframe, paletteType, num);
515+ }
516+
414517 // 表示に使用するDOM要素を作成
415518 // DOM 要素を作成してこの Instance の表示要素として登録
416519 createButtonElement(parent) {
@@ -451,23 +554,19 @@
451554 ele.appendChild(this.DOMobject);
452555 return true;
453556 }
454-
557+/*
455558 // Paletteボタン対象Dropで実行する機能を登録
456- setPaletteDropFunction(dropcssfunc) {
457- if (null != this.paletteDropFunction) {
458- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteDropFunction.getFunction.name + ', 今回の機能 = ' + palfunc.getFunction.name);
559+ setpaletteApplyCss(dropcssfunc) {
560+ if (null != this.paletteApplyCss) {
561+ console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteApplyCss.getFunction.name + ', 今回の機能 = ' + dropcssfunc.name);
459562 // ひとまず処理継続
460563 }
461- this.paletteDropFunction = palfunc;
564+ this.paletteApplyCss = dropcssfunc;
462565
463- // 表示要素の更新
464- this.DOMobject.title = this.palettePressFunction.getDescription();
465- this.DOMobject.style.backgroundImage = 'url(' + this.palettePressFunction.getImage() + ')';
466- this.DOMobject.style.backgroundSize = 'cover';
467566 }
468-
469- clearPaletteDropFunction() {
470- this.paletteDropFunction = null;
567+*/
568+ clearpaletteApplyCss() {
569+ this.paletteApplyCss = null;
471570 this.DOMobject.title = null;
472571 this.DOMobject.style.backgroundImage = 'none';
473572 }
@@ -484,9 +583,9 @@
484583 this.DOMobject.addEventListener('touchstart', this.onMouseDownPaletteShapeCSSButton.bind(this), false);
485584 // this.DOMobject.addEventListener('touchmove', this.onMouseMovePaletteShapeCSSButton.bind(this), false);
486585 // 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);
586+ this.DOMobject.addEventListener('dragstart', this.onDragStartPaletteShapeCSSButton.bind(this), false);
587+ this.DOMobject.addEventListener('dragover', this.onDragOverPaletteShapeCSSButton.bind(this), false);
588+ this.DOMobject.addEventListener('drop', this.onDropPaletteShapeCSSButton.bind(this), false);
490589 }
491590
492591
@@ -502,7 +601,13 @@
502601 // Mouse/Touch event 差分
503602 let eleTarget = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target;
504603
505- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
604+ // ボタンにCSSが未登録なら、Userが drag 操作をする前に止める
605+ if (null == this.paletteApplyCss) {
606+ console.error('ボタンにCSSが登録されていません');
607+ return false;
608+ }
609+
610+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
506611 window.appArea.setInputEventObj(eleTarget.dataset.objid, this.onMouseMovePaletteShapeCSSButton.bind(this), this.onMouseUpPaletteShapeCSSButton.bind(this));
507612 this.startMovingElement(evt);
508613 }
@@ -580,6 +685,9 @@
580685 }
581686
582687 // Target element へ CSS classを追加する
688+ if (null != this.paletteApplyCss) {
689+ this.paletteApplyCss.replaceClassToElement(this.paletteApplyCss.getClassName(), target.DOMobject);
690+ }
583691 }
584692
585693
@@ -587,6 +695,7 @@
587695 // Applicationの外からFile Dropされたときに
588696 // File内容情報を読み込み、CSSに反映させる
589697 onDragStartPaletteShapeCSSButton(evt) {
698+ debuglog('onDragStartPaletteShapeCSSButton');
590699 evt.preventDefault();
591700 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
592701 }
@@ -596,7 +705,7 @@
596705 evt.dataTransfer.dropEffect = "copy";
597706 }
598707 onDropPaletteShapeCSSButton(evt) {
599- this.debuglog('onDrop');
708+ debuglog('onDropPaletteShapeCSSButton');
600709 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
601710 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
602711 evt.preventDefault(); // 要素既定のdefault動作を止める
@@ -606,12 +715,29 @@
606715 }
607716
608717 replaceCSSText(file) {
609- let cssText = null;
610- cssText = this.paletteTextParser.readTextFile(file);
611- this.paletteTextParser.parseText(cssText);
612- let rule = this.paletteApplyCss.getCSS();
613- this.paletteTextParser.replaceCSSRule(rule, cssText);
718+ // File から定義内容の読み込み
719+ this.paletteTextParser.readTextFile(file, this.readComplete.bind(this));
614720 }
721+ readComplete(cssText) {
722+ let ret = false;
723+ // 読み込み文字列の解析
724+ ret = this.paletteTextParser.parseText(cssText);
725+ if (false == ret) // 致命的なエラー
726+ return false;
727+ // 解析済み文字列取得
728+ let type = this.paletteTextParser.resultOfParsingType();
729+ let description = this.paletteTextParser.resultOfParsingDescription();
730+ let style = this.paletteTextParser.resultOfParsingRule();
731+ let keyframe = this.paletteTextParser.resultOfParsingKeyframe();
732+ let picture = this.paletteTextParser.resultOfParsingPicture();
733+ // CSS 定義上書き登録
734+ let rule = this.paletteApplyCss.registerCSSRule(type, description, style, keyframe, picture);
735+
736+ // 表示要素の更新
737+ this.DOMobject.title = this.paletteApplyCss.getDescription();
738+ this.DOMobject.style.backgroundImage = 'url(' + this.paletteApplyCss.getImage() + ')';
739+ this.DOMobject.style.backgroundSize = 'cover';
740+ }
615741 parseImage(file) {
616742 console.error('画像ファイルには未対応');
617743 return false;
@@ -625,11 +751,22 @@
625751 // Text解析、CSS登録
626752 // CSSの汎用操作を扱うわけではない
627753 // 解析後のTextやImageは保持しない
628-// singletonにしたいがやり方がわからないので1つだけ作るようにする；´Д｀)運用でカバー
629754 class PaletteCSSTextParser {
630755 constructor() {
631756 this.filename = null;
632757 this.cssText = null;
758+
759+ // Parse text 用の定義
760+ this.startStrArray = ['\\[', ' Start\\]'];
761+ this.endStrArray = ['\\[', ' End\\]'];
762+ this.blockNameArray = ['Type', 'Description', 'Rule', 'Keyframe', 'Picture'];
763+ this.blockRequired = [true, false, true, false, false];
764+ this.typeNameArray = ['Style', 'Action'];
765+ // 分解後の文字列保持先連想配列の確保
766+ this.defineStrArray = [];
767+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
768+ this.defineStrArray[this.blockNameArray[cnt]] = null;
769+ }
633770 }
634771
635772 // Drop file(CSS定義test)の内容読み込み(file, ele, num)
@@ -659,26 +796,154 @@
659796 }
660797
661798 // Stringの解析・解析結果を一旦内部保持 (解析実行ごとに上書き)
662- // class name取得
663- // 定義内容取得
664- // description取得
665- // data scheme取得
666- // comment取得
667799 parseText(str) {
668- // Textを下記要素に分解する
669- // ・
800+ // ブロックごとに分解して内部変数に結果を保持
801+ this.parseTextBlocks(str);
802+ // (定義チェック前に) 文字列前後の空白を削除
803+ this.parseTextClearBlankCharacters();
804+ // 必要な定義の存在チェック
805+ let abnormalData, notRecommended, resultStr;
806+ [abnormalData, notRecommended, resultStr] = this.parseTextCheckData();
807+ if (true == abnormalData) {
808+ console.error(resultStr);
809+ return false;
810+ }
811+ else if (true == notRecommended) {
812+ console.error(resultStr);
813+ }
814+
815+ // 読みこんだ文字列を CSS 定義差し替えに使える形に調整
816+ let ret = false;
817+// ret = this.parseTextRule();
818+// if (false == ret)
819+// return false;
820+ this.parseTextKeyframe();
821+
822+ return true;
670823 }
671824
672- // StringをStyle elementへadd - Ruleへの参照を返す
673- // Element指定は必須
674- // StringをStyle elementへreplace - Ruleへの参照を返す
675- // Element指定は必須
676- replaceCSSRule(rule, text) {
825+ resultOfParsingType() {
826+ return this.defineStrArray[this.blockNameArray[0]];
677827 }
828+ resultOfParsingDescription() {
829+ return this.defineStrArray[this.blockNameArray[1]];
830+ }
831+ resultOfParsingRule() {
832+ return this.defineStrArray[this.blockNameArray[2]];
833+ }
834+ resultOfParsingKeyframe() {
835+ return this.defineStrArray[this.blockNameArray[3]];
836+ }
837+ resultOfParsingPicture() {
838+ return this.defineStrArray[this.blockNameArray[4]];
839+ }
678840
679- // CSS class name指定でRuleへの参照を返す
680- // Element指定あり …… 指定Element内から検索
681- // Element指定なし …… document全体から検索
841+
842+
843+ // Private 関数 -------------------------
844+
845+ parseTextBlocks(str) {
846+ // ブロックごとに分解する
847+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
848+ // Keyword 作成
849+ let strStart = this.startStrArray[0] + this.blockNameArray[cnt] + this.startStrArray[1];
850+ let strEnd = this.endStrArray[0] + this.blockNameArray[cnt] + this.endStrArray[1];
851+ let strReg = strStart + '(\[\\s\\S\]*?)' + strEnd;
852+ let regKeyword = new RegExp(strReg);
853+ // 目的箇所の取得
854+ let strDefine = str.match(regKeyword);
855+ // 結果を保持
856+ if (null != strDefine)
857+ this.defineStrArray[this.blockNameArray[cnt]] = (0 < strDefine.length) ? strDefine[1] : null;
858+ }
859+ }
860+ // 文字列の前後にある空白を削除
861+ parseTextClearBlankCharacters() {
862+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
863+ if (null != this.defineStrArray[this.blockNameArray[cnt]])
864+ this.defineStrArray[this.blockNameArray[cnt]] = this.defineStrArray[this.blockNameArray[cnt]].replace(/^\s+|\s+$/g, "");
865+ }
866+ }
867+ parseTextCheckData() {
868+ let abnormalData = false;
869+ let notRecommended = false;
870+ let resultStr = "定義ファイルから下記のデータが正しく読み取れません。ファイルの内容に問題がないかご確認頂けないでしょうか。\n";
871+ for (let cnt = 0; cnt < this.blockNameArray.length; cnt++) {
872+ // 存在しないデータがみつかった
873+ if (null == this.defineStrArray[this.blockNameArray[cnt]]) {
874+ // それは必須データ？
875+ if (true == this.blockRequired[cnt]) {
876+ abnormalData = true;
877+ resultStr += "Must：" + this.blockNameArray[cnt] + " 定義\n";
878+ }
879+ else {
880+ notRecommended = true;
881+ resultStr += "Should：" + this.blockNameArray[cnt] + " 定義\n";
882+ }
883+ }
884+ }
885+ // Type データの型チェック
886+ let ret = this.parseTextCheckType(this.defineStrArray[this.blockNameArray[0]]);
887+ if (false == ret) {
888+ abnormalData = true;
889+
890+ let strTypeName = null;
891+ let cnt = 0;
892+ while(true) {
893+ strTypeName += this.typeNameArray[cnt];
894+ if (++cnt < this.typeNameArray.length)
895+ break;
896+ strTypeName += ', ';
897+ }
898+ resultStr += this.blockNameArray[0] + "データとして設定する値は次のいずれかにしてください：" + strTypeName;
899+ }
900+
901+ return [abnormalData, notRecommended, resultStr];
902+ }
903+ parseTextCheckType(strType) {
904+ let result = false;
905+ for (let cnt = 0; cnt < this.typeNameArray.length; cnt++) {
906+ if (strType == this.typeNameArray[cnt]) {
907+ result = true;
908+ break;
909+ }
910+ }
911+ return result;
912+ }
913+
914+ // 内部変数 this.defineStrArray[this.blockNameArray[2]] から CSS 定義部分を抽出
915+ parseTextRule() {
916+ let strCSS = this.defineStrArray[this.blockNameArray[2]];
917+ let strRule = strCSS.match(/\{([\s\S]*)\}/);
918+ if (strRule.length < 1) {
919+ console.error('Rule定義内容が見つかりません\nRule = ' + strCSS);
920+ return false;
921+ }
922+ // 定義の差し替えに使える形で上書き
923+ this.defineStrArray[this.blockNameArray[2]] = strRule[1];
924+ }
925+
926+ // 内部変数 this.defineStrArray[this.blockNameArray[3]] の内容チェック
927+ parseTextKeyframe() {
928+ let strCSS = this.defineStrArray[this.blockNameArray[3]];
929+ if (null == strCSS) {
930+ console.log('keyframe定義なし');
931+ return true;
932+ }
933+ if (- 1 == strCSS.indexOf('@keyframe')) {
934+ if (this.typeNameArray[1] == this.defineStrArray[this.blockNameArray[0]]) {
935+ console.error('Keyframe定義が読み込めません\nkeyframe = ' +strCSS);
936+ // 致命的エラーにはしない。Animation定義未使用の可能性があるため
937+ this.defineStrArray[this.blockNameArray[3]] = null;
938+ return false;
939+ }
940+ }
941+ // keyframe dataはそのまま使うので特に加工しない
942+ return true;
943+ }
944+
945+
946+
682947 }
683948
684949 class CSSPalette {
@@ -692,16 +957,17 @@
692957
693958 initialize() {
694959 // CSS 情報定義先を保持
695- this.stylebg = document.getElementById('stylepalbg');
696- this.styletxtcol = document.getElementById('stylepaltxtcol');
697- this.styleact = document.getElementById('stylepalact');
960+ this.stylebg = document.getElementById('styleBackground');
961+ this.styletxtcol = document.getElementById('styleStyle');
962+ this.styleact = document.getElementById('styleAction');
698963
699964 // palette要素を保持
700965 // 背景設定パレット
701- let elePalbg = document.getElementsByClassName('palbg');
966+ let elePalbg = document.getElementsByClassName('palettebackground');
702967 this.palBackground = [];
703968 for (let cnt = 0; cnt < elePalbg.length; cnt++) {
704969 this.palBackground[cnt] = new PaletteShapeCSSButton();
970+ this.palBackground[cnt].initialize('Background', cnt);
705971 this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
706972 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
707973 }
@@ -720,10 +986,11 @@
720986 }
721987 */
722988 // スタイルパレット
723- let elePalstyle = document.getElementsByClassName('paltxtcol');
989+ let elePalstyle = document.getElementsByClassName('palettestyle');
724990 this.palStyle = [];
725991 for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
726992 this.palStyle[cnt] = new PaletteShapeCSSButton();
993+ this.palStyle[cnt].initialize('Style', cnt);
727994 this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
728995 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
729996 }
@@ -742,10 +1009,11 @@
7421009 }
7431010 */
7441011 // アクションパレット
745- let elePalaction = document.getElementsByClassName('palact');
1012+ let elePalaction = document.getElementsByClassName('paletteaction');
7461013 this.palAction = [];
7471014 for (let cnt = 0; cnt < elePalaction.length; cnt++) {
7481015 this.palAction[cnt] = new PaletteShapeCSSButton();
1016+ this.palAction[cnt].initialize('Action', cnt);
7491017 this.palAction[cnt].createButtonElement(elePalaction[cnt]);
7501018 // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
7511019 }
@@ -774,7 +1042,7 @@
7741042 paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
7751043 paletteFunctionObjects.getItem(10) // Toggle Scale font size
7761044 ];
777- let elePalset = document.getElementsByClassName('palset'); // 土台 Element 取得
1045+ let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
7781046 this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
7791047 for (let cnt = 0; cnt < elePalset.length; cnt++) {
7801048 this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
--- HtmlDrawApp/doc/Palette螳夂ｾｩFileFormat.txt (revision 52)
+++ HtmlDrawApp/doc/Palette螳夂ｾｩFileFormat.txt (revision 53)
@@ -7,7 +7,7 @@
77 Items
88 [Section] [Data] [Regex Key] [Times]
99 Comment Text "Comment" many times
10- Types "Style"/"Action" "Types" only once
10+ Type "Style"/"Action" "Type" only once
1111 Description Text "Description" only once
1212 Rule Text "Rule" only once
1313 Keyframe Text "Keyframe" only once
@@ -22,9 +22,9 @@
2222 [<Regex Key> End]
2323
2424 例：
25- [Types Start]
25+ [Type Start]
2626 Style
27- [Types End]
27+ [Type End]
2828 [Description Start]
2929 定義ファイルの内容説明文章
3030 [Description End]
@@ -43,7 +43,7 @@
4343
4444
4545 Keyframe定義について
46- Types が Action の場合のみ有効
46+ Type が Action の場合のみ有効
4747
4848 例
4949 [Keyframe Start]