From 0d8c06ae2665ffaa94376955a9e709fc1e5321b5 Mon Sep 17 00:00:00 2001
From: {Shore} <{kisidakazuyuki@gmail.com}>
Date: Wed, 13 Dec 2023 11:06:12 +0900
Subject: [PATCH] debug finished
---
.../tabitems/font/FontCustomizer.tsx | 4 +-
.../tabitems/layer/LayerCustomizer.tsx | 6 +-
src/features/format_manager.ts | 4 +-
src/features/formatter.ts | 244 +++++++++++-------
src/features/getFormatValues.ts | 27 ++
src/features/prop.ts | 2 +
src/features/style_sheet.ts | 4 +-
7 files changed, 185 insertions(+), 106 deletions(-)
create mode 100644 src/features/getFormatValues.ts
diff --git a/src/components/tabitems/font/FontCustomizer.tsx b/src/components/tabitems/font/FontCustomizer.tsx
index 844add1..2a47a87 100644
--- a/src/components/tabitems/font/FontCustomizer.tsx
+++ b/src/components/tabitems/font/FontCustomizer.tsx
@@ -214,8 +214,8 @@ const FontCustomizer = () => {
}
cssKey={'font-weight'}
- actualValue={'700'}
- defaultValue={'400'}
+ actualValue={'bold'}
+ defaultValue={'normal'}
id={103}
onChange={onChange}
/>
diff --git a/src/components/tabitems/layer/LayerCustomizer.tsx b/src/components/tabitems/layer/LayerCustomizer.tsx
index fc4461e..75587f3 100644
--- a/src/components/tabitems/layer/LayerCustomizer.tsx
+++ b/src/components/tabitems/layer/LayerCustomizer.tsx
@@ -8,7 +8,7 @@ import { Tree, Button } from 'antd';
import { getStyleLayer } from '../../../features/style_layer';
import { ElementSelectionContext } from '../../../contexts/ElementSelectionContext';
import { getAbsoluteCSSSelector } from '../../../utils/CSSUtils';
-import { deleteFromAry } from '../../../features/formatter';
+import { deleteCssCommandGenerator } from '../../../features/formatter';
import t from '../../../features/translator';
import { updateFormat } from '../../../features/prop';
import { saveFormat } from '../../../features/format_manager';
@@ -86,7 +86,9 @@ const LayerCustomizer = () => {
id: string | number,
) => {
(async () => {
- deleteFromAry(selector, cssKey, id, prop);
+ const c = deleteCssCommandGenerator(selector, cssKey, id, prop);
+ if (!c) return;
+ await c.execute();
updateFormat(selector, cssKey, prop);
await saveFormat(prop);
})();
diff --git a/src/features/format_manager.ts b/src/features/format_manager.ts
index 828fbcc..430e98f 100644
--- a/src/features/format_manager.ts
+++ b/src/features/format_manager.ts
@@ -31,9 +31,7 @@ export const saveImediately = async (prop: IPropsContext): Promise => {
};
export const save = async (ary: FormatBlockByURL[]) => {
- await chrome.storage.local.set({ formats: JSON.stringify(ary) }).then(() => {
- resta_console.log('save', ary);
- });
+ await chrome.storage.local.set({ formats: JSON.stringify(ary) });
};
/**
diff --git a/src/features/formatter.ts b/src/features/formatter.ts
index df95d89..c3613c5 100644
--- a/src/features/formatter.ts
+++ b/src/features/formatter.ts
@@ -1,9 +1,4 @@
-import {
- StyleRule,
- getStyleSheet,
- removeStyleRule,
- setStyleRule,
-} from './style_sheet';
+import { StyleRule, getStyleSheet, removeStyleRule } from './style_sheet';
import * as resta_console from './resta_console';
import {
Format,
@@ -17,6 +12,7 @@ import CssCommand from './commands/CssCommand';
import TemplateCommand from './commands/TemplateCommand';
import { currentUrl, getDisplayedFormat, updateFormat } from './prop';
import { saveFormat } from './format_manager';
+import { getIndex, getFormatValue } from './getFormatValues';
export const initStyle = async () => {
// このページに対応するフォーマットがあれば適用
@@ -30,20 +26,13 @@ export const setFormatsAndPushToAry = (
const commands: CssCommand[] = [];
for (const rule of rules) {
for (const value of rule.values) {
- const c: CssCommand | null = pushToAry(
+ const c: CssCommand | null = setCommandGenerator(
rule.cssSelector,
value.key,
value.value,
rule.id,
prop,
);
- setStyleRule(
- {
- cssSelector: rule.cssSelector,
- keys: [value.key],
- },
- prop,
- );
if (c) {
commands.push(c);
}
@@ -52,7 +41,6 @@ export const setFormatsAndPushToAry = (
if (commands.length > 0) {
prop.executor.execute(new TemplateCommand(...commands));
}
- saveFormat(prop);
};
export type RemoveRule = {
@@ -91,43 +79,41 @@ export const setFormatAndPushToAry = (
resta_console.log('setFormatAndPushToAry:invalid args, value is not found');
return;
}
- const c = await pushToAry(cssSelector, key, value, id, prop);
+ const c = setCommandGenerator(cssSelector, key, value, id, prop);
if (c) {
prop.executor.execute(c);
}
- setStyleRule(
- {
- cssSelector: cssSelector,
- keys: [key],
- },
- prop,
- );
- saveFormat(prop);
};
/**
- * formatsArrayに変更内容を追加、ログにも追加する
- * すでに同じ要素がある場合は上書きし優先度レイヤーをトップにする
- * ログを返す
+ * 配列に対し、対応する要素を追加する
+ * @param cssSelector
+ * @param key
+ * @param value
+ * @param id
+ * @param prop
+ * @param index
+ * @returns
*/
-export const pushToAry = (
+export const addFormat = (
cssSelector: string | null,
key: string | null,
value: string | null,
id: number | string | null,
prop: IPropsContext,
-): CssCommand | null => {
+ index?: number,
+): void => {
if (!cssSelector) {
resta_console.warn('pushToAry:invalid args, cssSelector is not found');
- return null;
+ return;
}
if (!key) {
resta_console.warn('pushToAry:invalid args, key is not found');
- return null;
+ return;
}
if (!value && value !== '') {
resta_console.warn('pushToAry:invalid args, value is not found');
- return null;
+ return;
}
if (!id) {
id = 0;
@@ -138,81 +124,178 @@ export const pushToAry = (
// 以下のif文は、各配列が存在しない場合に配列を作成する処理
// すでに該当箇所への変更がある場合は書き換えている
- if (currentTargetFormatBlock == null) {
- currentTargetFormatBlock = { url: prop.editedUrl, formats: [] };
- prop.formatsArray.push(currentTargetFormatBlock);
+ if (!currentTargetFormatBlock) {
+ prop.formatsArray.push({ url: prop.editedUrl, formats: [] });
+ currentTargetFormatBlock = prop.formatsArray.find(
+ (e) => e.url === prop.editedUrl,
+ );
+
+ if (!currentTargetFormatBlock) {
+ resta_console.error('addFormat: currentTargetFormatBlock is undefined');
+ return;
+ }
}
let currentFormat: Format | undefined = currentTargetFormatBlock.formats.find(
(e) => e.cssSelector === cssSelector,
);
- if (currentFormat == null) {
- currentFormat = { cssSelector: cssSelector, changes: [] };
- currentTargetFormatBlock.formats.push(currentFormat);
+ if (!currentFormat) {
+ currentTargetFormatBlock.formats.push({
+ cssSelector: cssSelector,
+ changes: [],
+ });
+ currentFormat = currentTargetFormatBlock.formats.find(
+ (e) => e.cssSelector === cssSelector,
+ );
+ if (!currentFormat) {
+ resta_console.error('addFormat: currentFormat is undefined');
+ return;
+ }
}
let currentFormatChange: FormatChange | undefined =
currentFormat.changes.find((e) => e.cssKey === key);
- if (currentFormatChange == null) {
- currentFormatChange = { cssKey: key, cssValues: [] };
+ if (!currentFormatChange) {
currentFormat.changes.push({ cssKey: key, cssValues: [] });
+ currentFormatChange = currentFormat.changes.find((e) => e.cssKey === key);
+ if (!currentFormatChange) {
+ resta_console.error('addFormat: currentFormatChange is undefined');
+ return;
+ }
}
const currentFormatStyleValue: FormatStyleValue | undefined =
currentFormatChange.cssValues.find((e) => e.id === id);
- if (currentFormatStyleValue == null) {
- // idに対応する要素を追加する
- currentFormatChange.cssValues.push({ id: id, cssValue: value });
+ // 既に要素がある場合は取り除く。
+ // この後、追加する
+ if (currentFormatStyleValue) {
+ const index = getIndex(cssSelector, key, id, prop);
+ if (!(index == undefined || index === -1))
+ currentFormatChange.cssValues.splice(index, 1);
+ }
+
+ // currentFormatChange.cssValuesに対し、idを入れる
+ // この際、indexがあった場合はそのindexに入れる
+ if (index == undefined) {
+ currentFormatChange.cssValues.push({
+ id: id,
+ cssValue: value,
+ } as FormatStyleValue);
+ } else {
+ currentFormatChange.cssValues.splice(index, 0, {
+ id: id,
+ cssValue: value,
+ });
+ }
+
+ resta_console.log(
+ 'pushToAry',
+ currentFormatChange.cssValues,
+ prop.formatsArray,
+ );
+};
- // resta_console.log('pushToAry:push', cssSelector, key, value);
+export const setCommandGenerator = (
+ cssSelector: string,
+ key: string,
+ value: string,
+ id: number | string,
+ prop: IPropsContext,
+): CssCommand => {
+ // indexを検索する
+ // idに対応する変更がすでにあったら、そのindexを返す
+ const index = getIndex(cssSelector, key, id, prop);
+
+ // 新しく追加する場合
+ if (index == undefined || index === -1) {
return {
execute: () => {
- pushToAry(cssSelector, key, value, id, prop);
+ resta_console.log('execute:c', cssSelector, key, value, id);
+ addFormat(cssSelector, key, value, id, prop);
updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
},
undo: () => {
- deleteFromAry(cssSelector, key, 0, prop);
+ resta_console.log('undo:c', cssSelector, key, value, id);
+ deleteFormat(cssSelector, key, id, prop);
updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
},
};
} else {
- // すでにidに対応する要素がある場合
- // その要素を削除して末尾に追加する
- const index = getIndex(cssSelector, key, id, prop);
- if (index == undefined || index === -1) {
- resta_console.warn('pushToAry: bug detected, index is undefined');
- }
-
- // idに対応する要素を取り除く
- const log = currentFormatChange.cssValues.splice(
- currentFormatChange.cssValues.findIndex((e) => e.id === id) || 0,
- 1,
- );
+ // すでにある場合、indexを指定して上書きする
- // idに対応する要素を追加する
- // これにより、idに対応する要素が最後尾に移動する
- currentFormatChange.cssValues.push({ id: id, cssValue: value });
+ const oldValue = getFormatValue(cssSelector, key, id, prop);
+ if (!oldValue) {
+ resta_console.error('setCommandGenerator: oldValue is undefined');
+ return {
+ execute: () => {
+ resta_console.log('execute:error', cssSelector, key, value, id);
+ addFormat(cssSelector, key, value, id, prop);
+ updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
+ },
+ undo: () => {
+ resta_console.log('undo:error', cssSelector, key, value, id);
+ deleteFormat(cssSelector, key, id, prop);
+ updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
+ },
+ };
+ }
return {
execute: () => {
- pushToAry(cssSelector, key, value, id, prop);
+ resta_console.log('execute:r', cssSelector, key, value, id);
+ addFormat(cssSelector, key, value, id, prop);
updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
},
undo: () => {
- pushToAry(cssSelector, key, log ? log[0].cssValue : '', id, prop);
+ resta_console.log('undo:r', cssSelector, key, value, id);
+ addFormat(cssSelector, key, oldValue, id, prop, index);
updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
},
};
}
};
+export const deleteCssCommandGenerator = (
+ cssSelector: string,
+ key: string,
+ id: number | string,
+ prop: IPropsContext,
+): CssCommand | undefined => {
+ const index = getIndex(cssSelector, key, id, prop);
+ const oldValue = getFormatValue(cssSelector, key, id, prop);
+
+ if (!oldValue) {
+ resta_console.error('deleteCssCommandGenerator: oldValue is undefined');
+ return undefined;
+ }
+
+ return {
+ execute: () => {
+ deleteFormat(cssSelector, key, id, prop);
+ updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
+ },
+ undo: () => {
+ addFormat(cssSelector, key, oldValue, id, prop, index);
+ updateFormat(cssSelector, key, prop);
+ saveFormat(prop);
+ },
+ };
+};
+
/**
* formatsArrayから変更内容を削除
*/
-export const deleteFromAry = (
+export const deleteFormat = (
cssSelector: string,
key: string,
id: number | string,
@@ -238,39 +321,6 @@ export const deleteFromAry = (
resta_console.warn('deleteFromAry: bug detected, deletedElem is undefined');
return;
}
-
- resta_console.log('deleteFromAry', prop.formatsArray);
-
- // TODO: index処理どこいった？
- prop.executor.execute({
- execute: () => {
- deleteFromAry(cssSelector, key, id, prop);
- updateFormat(cssSelector, key, prop);
- },
- undo: () => {
- pushToAry(cssSelector, key, deletedElem[0].cssValue, id, prop);
- updateFormat(cssSelector, key, prop);
- },
- });
-
- saveFormat(prop);
-};
-
-/**
- * 要素の、cssSelectorに対するスタイルスタックのindexを返す
- * 要素がない場合はundefinedを返す
- */
-const getIndex = (
- cssSelector: string,
- key: string,
- id: number | string,
- prop: IPropsContext,
-): number | undefined => {
- return prop.formatsArray
- .find((e) => matchUrl(prop.editedUrl, e.url))
- ?.formats.find((e) => e.cssSelector === cssSelector)
- ?.changes.find((e) => e.cssKey === key)
- ?.cssValues.findIndex((e) => e.id === id);
};
/**
diff --git a/src/features/getFormatValues.ts b/src/features/getFormatValues.ts
new file mode 100644
index 0000000..05f4d22
--- /dev/null
+++ b/src/features/getFormatValues.ts
@@ -0,0 +1,27 @@
+import { IPropsContext } from '../contexts/PropsContext';
+import { matchUrl } from '../utils/urlUtil';
+
+export const getIndex = (
+ cssSelector: string,
+ key: string,
+ id: number | string,
+ prop: IPropsContext,
+): number | undefined => {
+ return prop.formatsArray
+ .find((e) => matchUrl(prop.editedUrl, e.url))
+ ?.formats.find((e) => e.cssSelector === cssSelector)
+ ?.changes.find((e) => e.cssKey === key)
+ ?.cssValues.findIndex((e) => e.id === id);
+};
+export const getFormatValue = (
+ cssSelector: string,
+ key: string,
+ id: number | string,
+ prop: IPropsContext,
+): string | undefined => {
+ return prop.formatsArray
+ .find((e) => matchUrl(prop.editedUrl, e.url))
+ ?.formats.find((e) => e.cssSelector === cssSelector)
+ ?.changes.find((e) => e.cssKey === key)
+ ?.cssValues.find((e) => e.id === id)?.cssValue;
+};
diff --git a/src/features/prop.ts b/src/features/prop.ts
index 5470694..f99cafb 100644
--- a/src/features/prop.ts
+++ b/src/features/prop.ts
@@ -61,9 +61,11 @@ export const updateFormat = (
cssKey,
);
if (!value) {
+ resta_console.log('updateFormat: remove', cssSelector, cssKey);
removeStyleRule(cssSelector, cssKey);
return;
}
+ resta_console.log('updateFormat: apply', cssSelector, cssKey, value);
setStyleRule(
{
cssSelector: cssSelector,
diff --git a/src/features/style_sheet.ts b/src/features/style_sheet.ts
index 59ed8a9..7ff9fbb 100644
--- a/src/features/style_sheet.ts
+++ b/src/features/style_sheet.ts
@@ -65,7 +65,7 @@ export const setStyleRule = (
continue;
}
if (rule.style.getPropertyValue(key) === value) continue;
- resta_console.log('setProperty');
+ resta_console.log('setProperty', key, value);
rule.style.setProperty(key, value);
}
} else {
@@ -80,7 +80,7 @@ export const setStyleRule = (
removeStyleRule(styles.cssSelector, key);
continue;
}
- resta_console.log('insertRule');
+ resta_console.log('insertRule', key, value);
if (canInsert) {
styleSheet?.insertRule(
`${styles.cssSelector}{${key}:${value}}`,