Merge pull request #944 from cwtickle/develop

[ver19.2.0] タイトルの背景矢印の透明度設定を有効化　他

SECURITY.md

@@ -15,7 +15,7 @@ v17の対応終了時期はv20リリース開始時を予定しています。
 
 | Version | Supported          | Latest Version | First Release | End of Support |
 | ------- | ------------------ |----------------|---------------|----------------|
-| v19     | :heavy_check_mark: |[v19.1.0](../../releases/tag/v19.1.0)          |2021-01-17|-|
+| v19     | :heavy_check_mark: |[v19.2.0](../../releases/tag/v19.2.0)          |2021-01-17|-|
 | v18     | :heavy_check_mark: |[v18.9.3](../../releases/tag/v18.9.3)          |2020-10-25|(At Release v21)|
 | v17     | :warning:          |[v17.5.8](../../releases/tag/v17.5.8)          |2020-09-27|(At Release v20)|
 | v16     | :x:                |[v16.4.10 (final)](../../releases/tag/v16.4.10)|2020-08-06|2021-01-17|

js/danoni_main.js

@@ -4,12 +4,12 @@
  * 
  * Source by tickle
  * Created : 2018/10/08
- * Revised : 2021/01/18
+ * Revised : 2021/01/20
  * 
  * https://github.com/cwtickle/danoniplus
  */
-const g_version = `Ver 19.1.0`;
-const g_revisedDate = `2021/01/18`;
+const g_version = `Ver 19.2.0`;
+const g_revisedDate = `2021/01/20`;
 const g_alphaVersion = ``;
 
 // カスタム用バージョン (danoni_custom.js 等で指定可)
@@ -198,6 +198,16 @@ const getNumAttr = (_baseObj, _attrkey) => parseFloat(_baseObj.getAttribute(_att
  */
 const hasVal = _data => _data !== undefined && _data !== ``;
 
+/**
+ * 部分一致検索（リストのいずれかに合致、大小文字問わず）
+ * @param {string} _str 検索文字
+ * @param {array} _list 検索リスト (英字は小文字にする必要あり)
+ * @param {string} prefix 前方一致条件 (前方一致時は ^)
+ * @param {string} suffix 後方一致条件 (後方一致時は $)
+ */
+const listMatching = (_str, _list, { prefix = ``, suffix = `` } = {}) =>
+	_list.findIndex(value => _str.toLowerCase().match(new RegExp(String.raw`${prefix}${value}${suffix}`, 'i'))) !== -1;
+
 /**
  * イベントハンドラ用オブジェクト
  * 参考: http://webkatu.com/remove-eventlistener/
@@ -1865,9 +1875,7 @@ function drawDefaultBackImage(_key) {
  * @param {string} _str 
  */
 function checkImage(_str) {
-	return (
-		g_imgExtensions.findIndex(value => _str.toLowerCase().match(new RegExp(String.raw`.${value}$`, 'i'))) !== -1 ? true : false
-	);
+	return listMatching(_str, g_imgExtensions, { prefix: `[.]`, suffix: `$` });
 }
 
 /**
@@ -1949,6 +1957,49 @@ function drawMainSpriteData(_frame, _depthName) {
 	});
 }
 
+/**
+ * 色名をカラーコードに変換
+ * @param {string} _color 
+ */
+const colorNameToCode = _color => {
+	const cxt = document.createElement(`canvas`).getContext(`2d`);
+	cxt.fillStyle = _color;
+	return cxt.fillStyle;
+}
+
+/**
+ * 10進 -> 16進数変換 (カラーコード形式になるよう0埋め)
+ * @param {number} _num 
+ */
+const byteToHex = _num => (`${('0' + _num.toString(16)).slice(-2)}`);
+
+/**
+ * 色名をカラーコードへ変換 (元々カラーコードの場合は除外)
+ * @param {string} _color 色名
+ */
+const colorToHex = (_color) => {
+
+	// すでにカラーコードのものやパーセント表記、位置表記系を除外
+	// 'at', 'to'のみ、'to left'や'to right'のように方向が入るため、半角スペースまで込みで判断
+	const exceptHeader = [`at `, `to `, `from`, `circle`, `ellipse`, `closest-`, `farthest-`, `transparent`];
+	const exceptFooter = [`deg`, `rad`, `grad`, `turn`, `repeat`];
+	if (_color.substring(0, 1) === `#` || !isNaN(parseFloat(_color)) ||
+		listMatching(_color, exceptHeader, { prefix: `^` }) ||
+		listMatching(_color, exceptFooter, { suffix: `$` })) {
+		return _color;
+	}
+
+	// 色_位置;透明度 (Ex: red 20%;255) の形式で取り込み
+	// 透明度はカラーコード形式に変換してRGBの後ろに設定
+	const tmpColor = _color.split(`;`);
+	const colorSet = tmpColor[0].split(` `);
+	let alphaVal = ``;
+	if (tmpColor.length > 1) {
+		alphaVal = byteToHex(setVal(tmpColor[1], 255, C_TYP_NUMBER));
+	}
+	return `${colorNameToCode(colorSet[0])}${alphaVal}${colorSet[1] !== undefined ? ` ${colorSet.slice(1).join(' ')}` : ''}`;
+}
+
 /**
  * グラデーション用のカラーフォーマットを作成
  * @param {string} _colorStr 
@@ -1969,14 +2020,15 @@ function makeColorGradation(_colorStr, { _defaultColorgrd = g_headerObj.defaultC
 		return `Default`;
 	}
 
-	// 矢印の塗りつぶしのみ、透明度を50%にする
-	const alphaVal = (_shadowFlg && _objType !== `frz`) ? `80` : ``;
+	// 矢印の塗りつぶしの場合：透明度を50%にする
+	// 背景矢印の場合　　　　：透明度を25%にする
+	const alphaVal = (_shadowFlg && _objType !== `frz`) ? `80` : (_objType === `titleArrow` ? `40` : ``);
 
 	let convertColorStr;
 	const tmpColorStr = _colorStr.split(`@`);
 	const colorArray = tmpColorStr[0].split(`:`);
 	for (let j = 0; j < colorArray.length; j++) {
-		colorArray[j] = colorArray[j].replace(/0x/g, `#`);
+		colorArray[j] = colorToHex(colorArray[j].replace(/0x/g, `#`));
 		if (_colorCdPaddingUse) {
 			colorArray[j] = `#${paddingLeft(colorArray[j].slice(1), 6, `0`)}`;
 		}
@@ -1996,9 +2048,12 @@ function makeColorGradation(_colorStr, { _defaultColorgrd = g_headerObj.defaultC
 		} else {
 			convertColorStr = `${defaultDir}, ${colorArray[0]}, ${colorArray[0]}`;
 		}
-	} else if (gradationType === `linear-gradient` && (colorArray[0].slice(0, 1) === `#` ||
-		(!colorArray[0].startsWith(`to `) && !colorArray[0].endsWith(`deg`)))) {
-		// "to XXXX" もしくは "XXXdeg"のパターン以外は方向を補完する
+	} else if (gradationType === `linear-gradient` &&
+		(colorArray[0].slice(0, 1) === `#` ||
+			(!colorArray[0].startsWith(`to `) && !listMatching(colorArray[0], [`deg`, `rad`, `turn`], { suffix: `$` }))
+		)
+	) {
+		// "to XXXX" もしくは "XXXdeg(rad, grad, turn)"のパターン以外は方向を補完する
 		convertColorStr = `${defaultDir}, ${colorArray.join(', ')}`;
 	} else {
 		convertColorStr = `${colorArray.join(', ')}`;
@@ -2060,7 +2115,7 @@ function titleInit() {
 				background: makeColorGradation(g_headerObj.titlearrowgrds[0] || g_headerObj.setColorOrg[0], {
 					_defaultColorgrd: [false, `#eeeeee`],
 					_objType: `titleArrow`,
-				}), rotate: 180, opacity: 0.25,
+				}), rotate: 180,
 			})
 		);
 	}
@@ -2082,7 +2137,7 @@ function titleInit() {
 
 		// グラデーションの指定がない場合、
 		// 矢印色の1番目と3番目を使ってタイトルをグラデーション
-		const titlegrd1 = g_headerObj.titlegrds[0] || `${g_headerObj.setColorOrg[0]},${g_headerObj.setColorOrg[2]}`;
+		const titlegrd1 = g_headerObj.titlegrds[0] || `${g_headerObj.setColorOrg[0]}:${g_headerObj.setColorOrg[2]}`;
 		const titlegrd2 = g_headerObj.titlegrds[1] || titlegrd1;
 
 		const titlegrds = [];