• 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évision54 (tree)
l'heure2016-12-18 06:53:24
Auteurtakoyaki_umaaaa

Message de Log

・不要な実装を削除
・keyframe動作未確認

Change Summary

Modification

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 53)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 54)
@@ -181,7 +181,6 @@
181181 border-radius: 50%;
182182 text-align: center;
183183 font-size: 55px; line-height: 55px;
184- transition: all 0.2s ease-out;
185184 }
186185 .palettebackground {
187186 background-color: rgba(27, 158, 131, 0.6);
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 53)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 54)
@@ -946,465 +946,51 @@
946946
947947 }
948948
949-class CSSPalette {
950- constructor() {
951- this.draggingDOM = null;
952- }
953-
954- debuglog(str) {
955- debuglog('【CSSPalette】 ' + str);
949+// ul li要素の上にdivボタンを作成
950+function createPaletteButtons() {
951+ // 背景設定パレット
952+ let elePalbg = document.getElementsByClassName('palettebackground');
953+ let palBackground = [];
954+ for (let cnt = 0; cnt < elePalbg.length; cnt++) {
955+ palBackground[cnt] = new PaletteShapeCSSButton();
956+ palBackground[cnt].initialize('Background', cnt);
957+ palBackground[cnt].createButtonElement(elePalbg[cnt]);
958+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
956959 }
957-
958- initialize() {
959- // CSS 情報定義先を保持
960- this.stylebg = document.getElementById('styleBackground');
961- this.styletxtcol = document.getElementById('styleStyle');
962- this.styleact = document.getElementById('styleAction');
963-
964- // palette要素を保持
965- // 背景設定パレット
966- let elePalbg = document.getElementsByClassName('palettebackground');
967- this.palBackground = [];
968- for (let cnt = 0; cnt < elePalbg.length; cnt++) {
969- this.palBackground[cnt] = new PaletteShapeCSSButton();
970- this.palBackground[cnt].initialize('Background', cnt);
971- this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
972- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
973- }
974-/*
975- this.DOMpalbg = document.getElementsByClassName('palbg');
976- for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
977- this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
978- this.DOMpalbg[cnt].style.top = 40 + 'px';
979- this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
980- this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
981- this.DOMpalbg[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
982- this.DOMpalbg[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
983- this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
984- this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
985- this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
986- }
987-*/
988- // スタイルパレット
989- let elePalstyle = document.getElementsByClassName('palettestyle');
990- this.palStyle = [];
991- for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
992- this.palStyle[cnt] = new PaletteShapeCSSButton();
993- this.palStyle[cnt].initialize('Style', cnt);
994- this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
995- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
996- }
997-/*
998- this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
999- for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
1000- this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
1001- this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
1002- this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
1003- this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
1004- this.DOMpaltxtcol[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
1005- this.DOMpaltxtcol[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
1006- this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
1007- this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
1008- this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1009- }
1010-*/
1011- // アクションパレット
1012- let elePalaction = document.getElementsByClassName('paletteaction');
1013- this.palAction = [];
1014- for (let cnt = 0; cnt < elePalaction.length; cnt++) {
1015- this.palAction[cnt] = new PaletteShapeCSSButton();
1016- this.palAction[cnt].initialize('Action', cnt);
1017- this.palAction[cnt].createButtonElement(elePalaction[cnt]);
1018- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1019- }
1020-/*
1021- this.DOMpalact = document.getElementsByClassName('palact');
1022- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1023- this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
1024- this.DOMpalact[cnt].style.top = 40 + 'px';
1025- this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
1026- this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
1027- this.DOMpalact[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
1028- this.DOMpalact[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
1029- this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
1030- this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
1031- this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1032- }
1033-*/
1034- // 設定パレット
1035- // (リファクタにより、設定パレットのみ処理を別物にしている)
1036- let palfuncs = [
1037- paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
1038- paletteFunctionObjects.getItem(1), // Remove focused element
1039- paletteFunctionObjects.getItem(2), // Toggle element borderline
1040- paletteFunctionObjects.getItem(4), // Toggle stop/play animations
1041- paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
1042- paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
1043- paletteFunctionObjects.getItem(10) // Toggle Scale font size
1044- ];
1045- let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
1046- this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
1047- for (let cnt = 0; cnt < elePalset.length; cnt++) {
1048- this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
1049- this.palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
1050- this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
1051- }
1052-/*
1053- // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
1054- this.DOMpalset = document.getElementsByClassName('palset');
1055- for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
1056- this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
1057- this.DOMpalset[cnt].style.top = 40 + 'px';
1058- this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
1059- this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
1060- this.DOMpalset[cnt].addEventListener('touchstart', this.onTouchStartSetting.bind(this), false);
1061- this.DOMpalset[cnt].addEventListener('touchend', this.touchEndSetting.bind(this), false);
1062- this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
1063- this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
1064- this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
1065- }
1066-*/
960+ // スタイルパレット
961+ let elePalstyle = document.getElementsByClassName('palettestyle');
962+ let palStyle = [];
963+ for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
964+ palStyle[cnt] = new PaletteShapeCSSButton();
965+ palStyle[cnt].initialize('Style', cnt);
966+ palStyle[cnt].createButtonElement(elePalstyle[cnt]);
967+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1067968 }
1068-
1069- // 操作関数 ----------------------------
1070- definepalbg(
1071- id, // bg palette要素番号
1072- file // 画像を指しているfile object
1073- ) {
1074- let cssstr1 = '.palbg' + id + ' { background-image: url(';
1075- let cssstr2 = '); background-size: cover; }';
1076- setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpalbg[id], file));
969+ // アクションパレット
970+ let elePalaction = document.getElementsByClassName('paletteaction');
971+ let palAction = [];
972+ for (let cnt = 0; cnt < elePalaction.length; cnt++) {
973+ palAction[cnt] = new PaletteShapeCSSButton();
974+ palAction[cnt].initialize('Action', cnt);
975+ palAction[cnt].createButtonElement(elePalaction[cnt]);
976+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1077977 }
1078-
1079- // text color ('#000000, rgba(0,0,0,0) など)
1080- definepaltxtcolText(
1081- id, // txtcol palette要素番号
1082- file // Textを指しているfile object
1083- ) {
1084- let cssstr1 = '.paltxtcol' + id + ' {\n';
1085- let cssstr2 = '\n}';
1086- // 書換先style ele 書換先id 追加str 追加str 定義file 結果callback
1087- setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
1088- };
1089- // 指定された画像を font colorとして設定する
1090- definepaltxtcolImage(
1091- id, // txtcol palette要素番号
1092- file // 画像を指しているfile object
1093- ) {
1094- let cssstr1 = '.paltxtcol' + id + ' { background: url(';
1095- let cssstr2 = '); background-size: contain; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }';
1096- setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
1097- };
1098- loadresult(ele, file, result) {
1099- if (true == result) {
1100- // file名をtooltipにセット
1101- let title = file.name.match(/^[\s\S]*\./);
1102- ele.title = (null != title) ? title[0] : '';
1103- return;
1104- }
1105- else {
1106- console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
1107- return;
1108- }
978+ // 設定パレット
979+ let palfuncs = [
980+ paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
981+ paletteFunctionObjects.getItem(1), // Remove focused element
982+ paletteFunctionObjects.getItem(2), // Toggle element borderline
983+ paletteFunctionObjects.getItem(4), // Toggle stop/play animations
984+ paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
985+ paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
986+ paletteFunctionObjects.getItem(10) // Toggle Scale font size
987+ ];
988+ let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
989+ let palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
990+ for (let cnt = 0; cnt < elePalset.length; cnt++) {
991+ palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
992+ palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
993+ palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
1109994 }
1110- // 指定された Text fileを CSS animation定義として保持する
1111- // Text fileには下記2つの定義が含まれていること
1112- // 1. 「animation:」で始まり 「;」で終わる animation定義
1113- // 2. 「@keyframe」で始まり  「}」で終わる keyframe定義 (定義不要ならdummy定義)
1114- definepalactText(
1115- id, // act palette要素番号
1116- file // Textを指しているfile object
1117- ) {
1118- let cssstr1 = '.palact' + id + ' { ';
1119- let cssstr2 = '}';
995+}
1120996
1121- // drop fileの読み込み
1122- let reader = new FileReader();
1123- // Text fileを読み込み
1124- reader.readAsText(file);
1125- reader.onload = function (ele, num, cssstr1, cssstr2, filename, evt) {
1126- let cssdata = evt.target.result; // 読み込んだ文字列
1127-
1128- // 読み込んだ文字列を 「animation定義」と「keyframe定義」に分割
1129- let keyframeStartIndex = cssdata.indexOf('@keyframe');
1130- let strTmp = cssdata.slice(0, keyframeStartIndex - 1);
1131- let strAnimation = strTmp.match(/\{([\s\S]*)\}/)[1];
1132- let strKeyframe = cssdata.slice(keyframeStartIndex);
1133- if (null == strAnimation || null == strKeyframe) {
1134- console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
1135- return false;
1136- }
1137-
1138- // CSS定義の差し替え
1139- let defAnimNum = id * 2; // CSS定義が 'animation' と '@keyframe'のため
1140- let cssAnimation = String(cssstr1) + strAnimation + String(cssstr2);
1141- let cssKeyframe = strKeyframe;
1142- // animation定義置き換え
1143- ele.sheet.deleteRule(defAnimNum);
1144- ele.sheet.insertRule(cssAnimation, defAnimNum);
1145- // keyframe定義置き換え
1146- ele.sheet.deleteRule(defAnimNum + 1);
1147- ele.sheet.insertRule(cssKeyframe, defAnimNum + 1);
1148-
1149- // file名をtooltipにセット
1150- let title = filename.match(/^[\s\S]*\./);
1151- this.DOMpalact[num].title = (null != title) ? title[0] : '';
1152- }.bind(this, this.styleact, id, cssstr1, cssstr2, file.name);
1153- };
1154-
1155- // Action paletteの全要素に引数 CSS classを toggleでセット
1156- toggleClassToActionPalettes(classname) {
1157- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1158- this.DOMpalact[cnt].classList.toggle(classname);
1159- }
1160- }
1161- addClassToActionPalettes(classname) {
1162- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1163- this.DOMpalact[cnt].classList.add(classname);
1164- }
1165- }
1166- removeClassToActionPalettes(classname) {
1167- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1168- this.DOMpalact[cnt].classList.remove(classname);
1169- }
1170- }
1171-
1172-
1173-
1174- // Palette に機能が登録されているか
1175- // (Palette button 押下で実行する機能の存在可否)
1176- hasFunction() {
1177- let ret = false;
1178- if (null != this.paletteFunction)
1179- ret = true;
1180- return ret;
1181- }
1182-
1183- executeFunction() {
1184- if (null == this.paletteFunction) {
1185- console.error('パレット登録機能の実行に失敗 機能が登録されていません' + this.DOMobject);
1186- return false;
1187- }
1188-
1189- }
1190-
1191- // Event handler -----------------------
1192-
1193- // Drag&Drop event : Application外からのfileのやり取り
1194- // Mouse event : Elementに対する操作
1195-
1196- // Drag&Drop event
1197- // Applicationの外からFile Dropされたときに
1198- // File内容情報を読み込み、CSSに反映させる
1199- onDragStart(evt) {
1200- evt.preventDefault();
1201- }
1202- onDragOver(evt) {
1203- evt.preventDefault();
1204- evt.dataTransfer.dropEffect = "copy";
1205- }
1206- onDrop(evt) {
1207- this.debuglog('onDrop');
1208- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1209- evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
1210- evt.preventDefault(); // 要素既定のdefault動作を止める
1211-
1212-
1213- // drop対象 elementを特定
1214- let objid = evt.target.dataset.objid;
1215- let palid = parseInt(evt.target.dataset.palid);;
1216-
1217- // Dropされたfileを読み込み、CSSに反映
1218- if (null != objid.match(/^palbg/)) {
1219- getDropFile(evt, null, this.definepalbg.bind(this, palid), null);
1220- }
1221- else if (null != objid.match(/^paltxtcol/)) {
1222- getDropFile(evt, this.definepaltxtcolText.bind(this, palid), this.definepaltxtcolImage.bind(this, palid), null);
1223- }
1224- else if (null != objid.match(/^palact/)) {
1225- getDropFile(evt, this.definepalactText.bind(this, palid), null, null);
1226- }
1227- else if (null != objid.match(/^palset/)) {
1228- getDropFile(evt, this.definepalsetText.bind(this, palid), null, null);
1229- }
1230-
1231- }
1232-
1233-
1234-
1235- // Mouse event
1236- // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
1237- onMouseDown(evt) {
1238- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1239- evt.preventDefault(); // 要素既定のdefault動作を止める
1240- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
1241- window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
1242- this.startMovingElement(evt);
1243- }
1244- onTouchStart(evt){
1245- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1246- evt.preventDefault(); // 要素既定のdefault動作を止める
1247- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
1248- window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
1249- this.startMovingElement(evt.targetTouches[0]);
1250- }
1251- startMovingElement(evt){
1252- // Drag対象を保持
1253- this.draggingDOM = evt.target;
1254- // ElementのDrag開始位置を保持
1255- this.startElementX = parseInt(this.draggingDOM.style.left);
1256- this.startElementY = parseInt(this.draggingDOM.style.top);
1257- // MouseのDrag開始位置を保持
1258- this.startDragX = evt.pageX;
1259- this.startDragY = evt.pageY;
1260- }
1261- mouseMove(evt, touchevt) {
1262- if (null == this.draggingDOM) return;
1263- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1264- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1265- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1266- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1267-
1268- // 画像の仮移動
1269- this.endDragX = evt.pageX;
1270- this.endDragY = evt.pageY;
1271- // 移動量取得
1272- let moveX = this.endDragX - this.startDragX;
1273- let moveY = this.endDragY - this.startDragY;
1274- // dispObjがあった位置からマウス移動分移動させた後の位置取得
1275- moveX = this.startElementX + moveX;
1276- moveY = this.startElementY + moveY;
1277-
1278- window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
1279- //this.renderMoveDragging(moveX, moveY);
1280- }
1281- renderMoveDragging(x, y) {
1282- if (null == this.draggingDOM) return;
1283-
1284- this.draggingDOM.style.left = x + "px";
1285- this.draggingDOM.style.top = y + "px";
1286- if (1.0 == this.draggingDOM.style.opacity)
1287- this.draggingDOM.style.opacity = 0.4;
1288- }
1289- mouseUp(evt, target, touchevt) {
1290- if (null == this.draggingDOM) return;
1291- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1292- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1293- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1294- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1295- this.endMovingElement(evt);
1296- }
1297- touchEnd(evt) {
1298- if (null == this.draggingDOM) return;
1299- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1300- evt.preventDefault(); // 要素既定のdefault動作を止める
1301- this.endMovingElement(evt.changedTouches[0]);
1302- }
1303- endMovingElement(evt){
1304- let palobjid = this.draggingDOM.dataset.objid;
1305- let palid = this.draggingDOM.dataset.palid;
1306-
1307- // 初期表示状態に戻す
1308- this.draggingDOM.style.left = this.startElementX + "px";
1309- this.draggingDOM.style.top = this.startElementY + "px";
1310- this.draggingDOM.style.opacity = 1.0;
1311-
1312- // Drag中 element情報をクリア
1313- this.draggingDOM = null;
1314- // Mouse event callback設定をクリア
1315- window.appArea.clearCallEventObj();
1316-
1317- // マウス座標直下にある要素を検索
1318- // (evt.targetは自分を指してしまうため)
1319- let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
1320- if (null == target) {
1321- if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
1322- target = window.frameArea;
1323- }
1324-
1325- // Drag中 palette elementから target element へ CSS classを追加する
1326- // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
1327- if (null != target)
1328- this.replaceCSSclassToElement(palobjid, target.DOMobject);
1329- }
1330-
1331-
1332-
1333- // Target element へ CSS classを追加する
1334- // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
1335- replaceCSSclassToElement(
1336- CSSname, // 追加(上書き)する CSSclass名称文字列
1337- targetEle // 追加先 element
1338- ) {
1339- // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
1340- let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
1341- let DraggingPaletteType = result[0];
1342-
1343- // Drop target elementに 同じ種類の CSS classがないかチェック
1344- let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
1345- result = reg.exec(targetEle.className);
1346- let DropEleOldClass = (null != result) ? result[0] : null;
1347-
1348- // 同じ種類の CSS classがあれば削除
1349- if (null != DropEleOldClass)
1350- targetEle.classList.remove(DropEleOldClass);
1351-
1352- // Drop target elementに Drag elementの CSS class定義を追加
1353- targetEle.classList.add(CSSname);
1354- }
1355-
1356-
1357-
1358-/*
1359- onMouseDownSetting(evt) {
1360- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1361- evt.preventDefault(); // 要素既定のdefault動作を止める
1362- }
1363- onTouchStartSetting(evt) {
1364- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1365- evt.preventDefault(); // 要素既定のdefault動作を止める
1366- }
1367- mouseUpSetting(evt, touchevt) {
1368- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1369- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1370- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1371- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1372- this.executeSettingButton(evt);
1373- }
1374- touchEndSetting(evt){
1375- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1376- evt.preventDefault(); // 要素既定のdefault動作を止める
1377- this.executeSettingButton(evt.changedTouches[0]);
1378- }
1379- executeSettingButton(evt){
1380- switch (evt.target.dataset.objid) {
1381- case "palset0": // 設定パレット非表示
1382- window.MyAppSettings.setShowHideSettingPalette(false);
1383- break;
1384- case "palset1": // 選択中要素を削除
1385- window.MyAppSettings.removeFocusedObject();
1386- break;
1387- case "palset2": // 要素の枠を表示/非表示
1388- window.MyAppSettings.setElementBorderLine(true);
1389- break;
1390- case "palset3": // アニメーション停止/再開
1391- window.MyAppSettings.setElementAnimation(true);
1392- break;
1393- case "palset4": // 編集中の画像をファイルに保存
1394- break;
1395- case "palset5": // 編集中の画像をhtmlとして保存
1396- break;
1397- case "palset6": // 拡大縮小操作のとき、Aspect比を保持する/しない
1398- window.MyAppSettings.setElementAspect(true);
1399- break;
1400- case "palset7":
1401- window.MyAppSettings.setAlwaysOffPaletteAnimation(false);
1402- break;
1403- default:
1404- break;
1405- }
1406- }
1407-*/
1408-
1409-
1410-} // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 53)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 54)
@@ -51,8 +51,7 @@
5151 window.CSSPalGroup = new PalGroup();
5252 window.CSSPalGroup.initialize();
5353 // パレット作成
54- window.CSSPalette = new CSSPalette();
55- window.CSSPalette.initialize();
54+ createPaletteButtons();
5655
5756
5857 // --- test code -------
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 53)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 54)
@@ -1,10 +1,12 @@
11 // palette.js
22 // Canvas上の要素を変更するための内容を保持するpalette
3-// Background用, Text color用, Action用 の3種類ある
3+// Background(削除予定)用, Style用, Action用 の3種類ある
44 // 主な機能
55 // ・Drag&Dropによる移動
6-// ・Target要素に自objidと同名のCSS class追加
7-// ・外部からのDropによる text, image, css 読み込み
6+// ・Drop Target の要素にCSS class追加
7+// ・外部からのDrop fileによる css 定義読み込み
8+//
9+// createPaletteButtons()関数で各ボタンのinstanceを作成する
810
911 // パレットのCSS機能ボタンをDropしたときに実行する機能を提供する
1012 // (保持中CSS class nameを対象Elementに付加, 削除)
@@ -11,7 +13,6 @@
1113 // (Button instanceが自分の機能を意識しないようにするためのclass)
1214 class PaletteApplyCSS {
1315 constructor() {
14-// this.paletteRule = null;
1516 this.dataScheme = null;
1617 this.description = null;
1718 this.groupname = null;
@@ -486,7 +487,6 @@
486487 }
487488 } // class PaletteShapeFunctionButton
488489
489-// PaletteShapeFunctionButtonとは機能が違うし使いまわし部分も少ないので分けてしまう
490490
491491 // パレットのCSSボタン表示部分の定義class
492492 // DOM Elementの保持、ボタンdrag & dropで呼び出す機能との関連付け
@@ -554,17 +554,7 @@
554554 ele.appendChild(this.DOMobject);
555555 return true;
556556 }
557-/*
558- // Paletteボタン対象Dropで実行する機能を登録
559- setpaletteApplyCss(dropcssfunc) {
560- if (null != this.paletteApplyCss) {
561- console.error('パレットボタン(PaletteShapeFunctionButton)への機能設定エラー 上書き登録\n以前の機能 = ' + this.paletteApplyCss.getFunction.name + ', 今回の機能 = ' + dropcssfunc.name);
562- // ひとまず処理継続
563- }
564- this.paletteApplyCss = dropcssfunc;
565557
566- }
567-*/
568558 clearpaletteApplyCss() {
569559 this.paletteApplyCss = null;
570560 this.DOMobject.title = null;
@@ -693,7 +683,7 @@
693683
694684 // Drag&Drop event
695685 // Applicationの外からFile Dropされたときに
696- // File内容情報を読み込み、CSSに反映させる
686+ // File内容を読み込み、CSSに反映させる
697687 onDragStartPaletteShapeCSSButton(evt) {
698688 debuglog('onDragStartPaletteShapeCSSButton');
699689 evt.preventDefault();
@@ -772,10 +762,6 @@
772762 // Drop file(CSS定義test)の内容読み込み(file, ele, num)
773763 // 基本的には上書きで使う。パレット要素数とCSS定義数がイコールになる。
774764 // keyframeはkeyframe登録専用のstyle elementに登録する
775- // string objectを返す
776- // 引数style elementへのCSS登録
777- // num番目のCSSへ上書きする
778- // (len <= num) or (num < 0) はaddする
779765 readTextFile(
780766 file, // 読みこむ対象ファイル
781767 readComplete // 読み込み完了Callback(function(fileReadStr))
@@ -941,470 +927,53 @@
941927 // keyframe dataはそのまま使うので特に加工しない
942928 return true;
943929 }
944-
945-
946-
947930 }
948931
949-class CSSPalette {
950- constructor() {
951- this.draggingDOM = null;
952- }
953-
954- debuglog(str) {
955- debuglog('【CSSPalette】 ' + str);
932+// ul li要素の上にdivボタンを作成
933+function createPaletteButtons() {
934+ // 背景設定パレット
935+ let elePalbg = document.getElementsByClassName('palettebackground');
936+ let palBackground = [];
937+ for (let cnt = 0; cnt < elePalbg.length; cnt++) {
938+ palBackground[cnt] = new PaletteShapeCSSButton();
939+ palBackground[cnt].initialize('Background', cnt);
940+ palBackground[cnt].createButtonElement(elePalbg[cnt]);
941+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
956942 }
957-
958- initialize() {
959- // CSS 情報定義先を保持
960- this.stylebg = document.getElementById('styleBackground');
961- this.styletxtcol = document.getElementById('styleStyle');
962- this.styleact = document.getElementById('styleAction');
963-
964- // palette要素を保持
965- // 背景設定パレット
966- let elePalbg = document.getElementsByClassName('palettebackground');
967- this.palBackground = [];
968- for (let cnt = 0; cnt < elePalbg.length; cnt++) {
969- this.palBackground[cnt] = new PaletteShapeCSSButton();
970- this.palBackground[cnt].initialize('Background', cnt);
971- this.palBackground[cnt].createButtonElement(elePalbg[cnt]);
972- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
973- }
974-/*
975- this.DOMpalbg = document.getElementsByClassName('palbg');
976- for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
977- this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
978- this.DOMpalbg[cnt].style.top = 40 + 'px';
979- this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
980- this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
981- this.DOMpalbg[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
982- this.DOMpalbg[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
983- this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
984- this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
985- this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
986- }
987-*/
988- // スタイルパレット
989- let elePalstyle = document.getElementsByClassName('palettestyle');
990- this.palStyle = [];
991- for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
992- this.palStyle[cnt] = new PaletteShapeCSSButton();
993- this.palStyle[cnt].initialize('Style', cnt);
994- this.palStyle[cnt].createButtonElement(elePalstyle[cnt]);
995- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
996- }
997-/*
998- this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
999- for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
1000- this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
1001- this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
1002- this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
1003- this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
1004- this.DOMpaltxtcol[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
1005- this.DOMpaltxtcol[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
1006- this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
1007- this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
1008- this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1009- }
1010-*/
1011- // アクションパレット
1012- let elePalaction = document.getElementsByClassName('paletteaction');
1013- this.palAction = [];
1014- for (let cnt = 0; cnt < elePalaction.length; cnt++) {
1015- this.palAction[cnt] = new PaletteShapeCSSButton();
1016- this.palAction[cnt].initialize('Action', cnt);
1017- this.palAction[cnt].createButtonElement(elePalaction[cnt]);
1018- // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1019- }
1020-/*
1021- this.DOMpalact = document.getElementsByClassName('palact');
1022- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1023- this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
1024- this.DOMpalact[cnt].style.top = 40 + 'px';
1025- this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
1026- this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
1027- this.DOMpalact[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
1028- this.DOMpalact[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
1029- this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
1030- this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
1031- this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1032- }
1033-*/
1034- // 設定パレット
1035- // (リファクタにより、設定パレットのみ処理を別物にしている)
1036- let palfuncs = [
1037- paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
1038- paletteFunctionObjects.getItem(1), // Remove focused element
1039- paletteFunctionObjects.getItem(2), // Toggle element borderline
1040- paletteFunctionObjects.getItem(4), // Toggle stop/play animations
1041- paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
1042- paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
1043- paletteFunctionObjects.getItem(10) // Toggle Scale font size
1044- ];
1045- let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
1046- this.palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
1047- for (let cnt = 0; cnt < elePalset.length; cnt++) {
1048- this.palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
1049- this.palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
1050- this.palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
1051- }
1052-/*
1053- // 設定パレットは 要素のdrop処理がなく、表示ボタン押下で登録機能を実行する
1054- this.DOMpalset = document.getElementsByClassName('palset');
1055- for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
1056- this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
1057- this.DOMpalset[cnt].style.top = 40 + 'px';
1058- this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
1059- this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
1060- this.DOMpalset[cnt].addEventListener('touchstart', this.onTouchStartSetting.bind(this), false);
1061- this.DOMpalset[cnt].addEventListener('touchend', this.touchEndSetting.bind(this), false);
1062- this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
1063- this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
1064- this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
1065- }
1066-*/
943+ // スタイルパレット
944+ let elePalstyle = document.getElementsByClassName('palettestyle');
945+ let palStyle = [];
946+ for (let cnt = 0; cnt < elePalstyle.length; cnt++) {
947+ palStyle[cnt] = new PaletteShapeCSSButton();
948+ palStyle[cnt].initialize('Style', cnt);
949+ palStyle[cnt].createButtonElement(elePalstyle[cnt]);
950+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1067951 }
1068-
1069- // 操作関数 ----------------------------
1070- definepalbg(
1071- id, // bg palette要素番号
1072- file // 画像を指しているfile object
1073- ) {
1074- let cssstr1 = '.palbg' + id + ' { background-image: url(';
1075- let cssstr2 = '); background-size: cover; }';
1076- setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpalbg[id], file));
952+ // アクションパレット
953+ let elePalaction = document.getElementsByClassName('paletteaction');
954+ let palAction = [];
955+ for (let cnt = 0; cnt < elePalaction.length; cnt++) {
956+ palAction[cnt] = new PaletteShapeCSSButton();
957+ palAction[cnt].initialize('Action', cnt);
958+ palAction[cnt].createButtonElement(elePalaction[cnt]);
959+ // ボタンへの機能登録は 定義file drop か Save file 読み込みのとき
1077960 }
1078-
1079- // text color ('#000000, rgba(0,0,0,0) など)
1080- definepaltxtcolText(
1081- id, // txtcol palette要素番号
1082- file // Textを指しているfile object
1083- ) {
1084- let cssstr1 = '.paltxtcol' + id + ' {\n';
1085- let cssstr2 = '\n}';
1086- // 書換先style ele 書換先id 追加str 追加str 定義file 結果callback
1087- setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
1088- };
1089- // 指定された画像を font colorとして設定する
1090- definepaltxtcolImage(
1091- id, // txtcol palette要素番号
1092- file // 画像を指しているfile object
1093- ) {
1094- let cssstr1 = '.paltxtcol' + id + ' { background: url(';
1095- let cssstr2 = '); background-size: contain; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }';
1096- setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
1097- };
1098- loadresult(ele, file, result) {
1099- if (true == result) {
1100- // file名をtooltipにセット
1101- let title = file.name.match(/^[\s\S]*\./);
1102- ele.title = (null != title) ? title[0] : '';
1103- return;
1104- }
1105- else {
1106- console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
1107- return;
1108- }
961+ // 設定パレット
962+ let palfuncs = [
963+ paletteFunctionObjects.getItem(0), // Show/Hide Setting palette
964+ paletteFunctionObjects.getItem(1), // Remove focused element
965+ paletteFunctionObjects.getItem(2), // Toggle element borderline
966+ paletteFunctionObjects.getItem(4), // Toggle stop/play animations
967+ paletteFunctionObjects.getItem(6), // Toggle always Off Palette animations
968+ paletteFunctionObjects.getItem(8), // Toggle Aspect ratio
969+ paletteFunctionObjects.getItem(10) // Toggle Scale font size
970+ ];
971+ let elePalset = document.getElementsByClassName('palettesetting'); // 土台 Element 取得
972+ let palSetting = []; // ボタン機能提供Elementを保持するClass Instance配列
973+ for (let cnt = 0; cnt < elePalset.length; cnt++) {
974+ palSetting[cnt] = new PaletteShapeFunctionButton(); // ボタン機能Class Instance生成
975+ palSetting[cnt].createButtonElement(elePalset[cnt]); // ボタンElement生成とパレットに関連付け
976+ palSetting[cnt].setPalettePressFunction(palfuncs[cnt]); // ボタン押下で実行する機能の登録
1109977 }
1110- // 指定された Text fileを CSS animation定義として保持する
1111- // Text fileには下記2つの定義が含まれていること
1112- // 1. 「animation:」で始まり 「;」で終わる animation定義
1113- // 2. 「@keyframe」で始まり  「}」で終わる keyframe定義 (定義不要ならdummy定義)
1114- definepalactText(
1115- id, // act palette要素番号
1116- file // Textを指しているfile object
1117- ) {
1118- let cssstr1 = '.palact' + id + ' { ';
1119- let cssstr2 = '}';
978+}
1120979
1121- // drop fileの読み込み
1122- let reader = new FileReader();
1123- // Text fileを読み込み
1124- reader.readAsText(file);
1125- reader.onload = function (ele, num, cssstr1, cssstr2, filename, evt) {
1126- let cssdata = evt.target.result; // 読み込んだ文字列
1127-
1128- // 読み込んだ文字列を 「animation定義」と「keyframe定義」に分割
1129- let keyframeStartIndex = cssdata.indexOf('@keyframe');
1130- let strTmp = cssdata.slice(0, keyframeStartIndex - 1);
1131- let strAnimation = strTmp.match(/\{([\s\S]*)\}/)[1];
1132- let strKeyframe = cssdata.slice(keyframeStartIndex);
1133- if (null == strAnimation || null == strKeyframe) {
1134- console.error('パレットへの drop file読み込み失敗 \npalette=' + ele.dataset.objid + ', file=' + file.name);
1135- return false;
1136- }
1137-
1138- // CSS定義の差し替え
1139- let defAnimNum = id * 2; // CSS定義が 'animation' と '@keyframe'のため
1140- let cssAnimation = String(cssstr1) + strAnimation + String(cssstr2);
1141- let cssKeyframe = strKeyframe;
1142- // animation定義置き換え
1143- ele.sheet.deleteRule(defAnimNum);
1144- ele.sheet.insertRule(cssAnimation, defAnimNum);
1145- // keyframe定義置き換え
1146- ele.sheet.deleteRule(defAnimNum + 1);
1147- ele.sheet.insertRule(cssKeyframe, defAnimNum + 1);
1148-
1149- // file名をtooltipにセット
1150- let title = filename.match(/^[\s\S]*\./);
1151- this.DOMpalact[num].title = (null != title) ? title[0] : '';
1152- }.bind(this, this.styleact, id, cssstr1, cssstr2, file.name);
1153- };
1154-
1155- // Action paletteの全要素に引数 CSS classを toggleでセット
1156- toggleClassToActionPalettes(classname) {
1157- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1158- this.DOMpalact[cnt].classList.toggle(classname);
1159- }
1160- }
1161- addClassToActionPalettes(classname) {
1162- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1163- this.DOMpalact[cnt].classList.add(classname);
1164- }
1165- }
1166- removeClassToActionPalettes(classname) {
1167- for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
1168- this.DOMpalact[cnt].classList.remove(classname);
1169- }
1170- }
1171-
1172-
1173-
1174- // Palette に機能が登録されているか
1175- // (Palette button 押下で実行する機能の存在可否)
1176- hasFunction() {
1177- let ret = false;
1178- if (null != this.paletteFunction)
1179- ret = true;
1180- return ret;
1181- }
1182-
1183- executeFunction() {
1184- if (null == this.paletteFunction) {
1185- console.error('パレット登録機能の実行に失敗 機能が登録されていません' + this.DOMobject);
1186- return false;
1187- }
1188-
1189- }
1190-
1191- // Event handler -----------------------
1192-
1193- // Drag&Drop event : Application外からのfileのやり取り
1194- // Mouse event : Elementに対する操作
1195-
1196- // Drag&Drop event
1197- // Applicationの外からFile Dropされたときに
1198- // File内容情報を読み込み、CSSに反映させる
1199- onDragStart(evt) {
1200- evt.preventDefault();
1201- }
1202- onDragOver(evt) {
1203- evt.preventDefault();
1204- evt.dataTransfer.dropEffect = "copy";
1205- }
1206- onDrop(evt) {
1207- this.debuglog('onDrop');
1208- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1209- evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
1210- evt.preventDefault(); // 要素既定のdefault動作を止める
1211-
1212-
1213- // drop対象 elementを特定
1214- let objid = evt.target.dataset.objid;
1215- let palid = parseInt(evt.target.dataset.palid);;
1216-
1217- // Dropされたfileを読み込み、CSSに反映
1218- if (null != objid.match(/^palbg/)) {
1219- getDropFile(evt, null, this.definepalbg.bind(this, palid), null);
1220- }
1221- else if (null != objid.match(/^paltxtcol/)) {
1222- getDropFile(evt, this.definepaltxtcolText.bind(this, palid), this.definepaltxtcolImage.bind(this, palid), null);
1223- }
1224- else if (null != objid.match(/^palact/)) {
1225- getDropFile(evt, this.definepalactText.bind(this, palid), null, null);
1226- }
1227- else if (null != objid.match(/^palset/)) {
1228- getDropFile(evt, this.definepalsetText.bind(this, palid), null, null);
1229- }
1230-
1231- }
1232-
1233-
1234-
1235- // Mouse event
1236- // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
1237- onMouseDown(evt) {
1238- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1239- evt.preventDefault(); // 要素既定のdefault動作を止める
1240- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
1241- window.appArea.setMouseEventObj(evt.target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
1242- this.startMovingElement(evt);
1243- }
1244- onTouchStart(evt){
1245- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1246- evt.preventDefault(); // 要素既定のdefault動作を止める
1247- // Mouse eventをappAreaからCSSPalに渡してもらうように設定 (evt.targetは必ずpalette要素である前提。子要素なし。)
1248- window.appArea.setSingleTouchEventObj(evt.targetTouches[0].target.dataset.objid, this.mouseMove.bind(this), this.mouseUp.bind(this));
1249- this.startMovingElement(evt.targetTouches[0]);
1250- }
1251- startMovingElement(evt){
1252- // Drag対象を保持
1253- this.draggingDOM = evt.target;
1254- // ElementのDrag開始位置を保持
1255- this.startElementX = parseInt(this.draggingDOM.style.left);
1256- this.startElementY = parseInt(this.draggingDOM.style.top);
1257- // MouseのDrag開始位置を保持
1258- this.startDragX = evt.pageX;
1259- this.startDragY = evt.pageY;
1260- }
1261- mouseMove(evt, touchevt) {
1262- if (null == this.draggingDOM) return;
1263- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1264- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1265- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1266- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1267-
1268- // 画像の仮移動
1269- this.endDragX = evt.pageX;
1270- this.endDragY = evt.pageY;
1271- // 移動量取得
1272- let moveX = this.endDragX - this.startDragX;
1273- let moveY = this.endDragY - this.startDragY;
1274- // dispObjがあった位置からマウス移動分移動させた後の位置取得
1275- moveX = this.startElementX + moveX;
1276- moveY = this.startElementY + moveY;
1277-
1278- window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY));
1279- //this.renderMoveDragging(moveX, moveY);
1280- }
1281- renderMoveDragging(x, y) {
1282- if (null == this.draggingDOM) return;
1283-
1284- this.draggingDOM.style.left = x + "px";
1285- this.draggingDOM.style.top = y + "px";
1286- if (1.0 == this.draggingDOM.style.opacity)
1287- this.draggingDOM.style.opacity = 0.4;
1288- }
1289- mouseUp(evt, target, touchevt) {
1290- if (null == this.draggingDOM) return;
1291- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1292- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1293- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1294- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1295- this.endMovingElement(evt);
1296- }
1297- touchEnd(evt) {
1298- if (null == this.draggingDOM) return;
1299- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1300- evt.preventDefault(); // 要素既定のdefault動作を止める
1301- this.endMovingElement(evt.changedTouches[0]);
1302- }
1303- endMovingElement(evt){
1304- let palobjid = this.draggingDOM.dataset.objid;
1305- let palid = this.draggingDOM.dataset.palid;
1306-
1307- // 初期表示状態に戻す
1308- this.draggingDOM.style.left = this.startElementX + "px";
1309- this.draggingDOM.style.top = this.startElementY + "px";
1310- this.draggingDOM.style.opacity = 1.0;
1311-
1312- // Drag中 element情報をクリア
1313- this.draggingDOM = null;
1314- // Mouse event callback設定をクリア
1315- window.appArea.clearCallEventObj();
1316-
1317- // マウス座標直下にある要素を検索
1318- // (evt.targetは自分を指してしまうため)
1319- let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
1320- if (null == target) {
1321- if (window.frameArea.hitCheck(evt.pageX, evt.pageY))
1322- target = window.frameArea;
1323- }
1324-
1325- // Drag中 palette elementから target element へ CSS classを追加する
1326- // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
1327- if (null != target)
1328- this.replaceCSSclassToElement(palobjid, target.DOMobject);
1329- }
1330-
1331-
1332-
1333- // Target element へ CSS classを追加する
1334- // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
1335- replaceCSSclassToElement(
1336- CSSname, // 追加(上書き)する CSSclass名称文字列
1337- targetEle // 追加先 element
1338- ) {
1339- // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
1340- let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
1341- let DraggingPaletteType = result[0];
1342-
1343- // Drop target elementに 同じ種類の CSS classがないかチェック
1344- let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
1345- result = reg.exec(targetEle.className);
1346- let DropEleOldClass = (null != result) ? result[0] : null;
1347-
1348- // 同じ種類の CSS classがあれば削除
1349- if (null != DropEleOldClass)
1350- targetEle.classList.remove(DropEleOldClass);
1351-
1352- // Drop target elementに Drag elementの CSS class定義を追加
1353- targetEle.classList.add(CSSname);
1354- }
1355-
1356-
1357-
1358-/*
1359- onMouseDownSetting(evt) {
1360- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1361- evt.preventDefault(); // 要素既定のdefault動作を止める
1362- }
1363- onTouchStartSetting(evt) {
1364- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1365- evt.preventDefault(); // 要素既定のdefault動作を止める
1366- }
1367- mouseUpSetting(evt, touchevt) {
1368- if (evt.stopPropagation) evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1369- if (evt.preventDefault) evt.preventDefault(); // 要素既定のdefault動作を止める
1370- if (touchevt && touchevt.stopPropagation) touchevt.stopPropagation();
1371- if (touchevt && touchevt.preventDefault) touchevt.preventDefault();
1372- this.executeSettingButton(evt);
1373- }
1374- touchEndSetting(evt){
1375- evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
1376- evt.preventDefault(); // 要素既定のdefault動作を止める
1377- this.executeSettingButton(evt.changedTouches[0]);
1378- }
1379- executeSettingButton(evt){
1380- switch (evt.target.dataset.objid) {
1381- case "palset0": // 設定パレット非表示
1382- window.MyAppSettings.setShowHideSettingPalette(false);
1383- break;
1384- case "palset1": // 選択中要素を削除
1385- window.MyAppSettings.removeFocusedObject();
1386- break;
1387- case "palset2": // 要素の枠を表示/非表示
1388- window.MyAppSettings.setElementBorderLine(true);
1389- break;
1390- case "palset3": // アニメーション停止/再開
1391- window.MyAppSettings.setElementAnimation(true);
1392- break;
1393- case "palset4": // 編集中の画像をファイルに保存
1394- break;
1395- case "palset5": // 編集中の画像をhtmlとして保存
1396- break;
1397- case "palset6": // 拡大縮小操作のとき、Aspect比を保持する/しない
1398- window.MyAppSettings.setElementAspect(true);
1399- break;
1400- case "palset7":
1401- window.MyAppSettings.setAlwaysOffPaletteAnimation(false);
1402- break;
1403- default:
1404- break;
1405- }
1406- }
1407-*/
1408-
1409-
1410-} // class CSSPalette