Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit83d9050

Browse files
committed
feat: add hideResetStyles button (defaults to true)
1 parent76afabb commit83d9050

File tree

3 files changed

+46
-3
lines changed

3 files changed

+46
-3
lines changed

‎src/lib/rules.ts

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,20 @@ export interface StyleRuleWithProp extends MatchedStyleRule {
8989
interfaceComputeStylesOptions{
9090
sortImplicitFirst?:boolean;
9191
filter?:string;
92+
hideResetStyles?:boolean
93+
}
94+
95+
constresetSelectors=['*, ::after, ::before','*, :after, :before']
96+
constisMatchingSelector=(selector:string,patterns:string[])=>{
97+
constshortcut=patterns.includes(selector)
98+
if(shortcut)returntrue;
99+
100+
consttrimmedPatterns=patterns.map(p=>p.split(',').map(s=>s.trim()));
101+
constselectorTrimmedParts=selector.split(',').map(s=>s.trim());
102+
103+
if(trimmedPatterns.some(patternParts=>patternParts.every(part=>selectorTrimmedParts.includes(part))))returntrue;
104+
105+
returnfalse;
92106
}
93107

94108
/**
@@ -101,7 +115,7 @@ export const computeStyles = (
101115
rules:MatchedRule[],
102116
options:ComputeStylesOptions={},
103117
)=>{
104-
const{ sortImplicitFirst=false, filter}=options;
118+
const{ sortImplicitFirst=false, filter, hideResetStyles}=options;
105119

106120
constappliedRuleOrProp={}asRecord<string,StyleRuleWithProp>;
107121
constappliedStyles={}asRecord<string,string>;
@@ -123,6 +137,9 @@ export const computeStyles = (
123137
// console.log(rules);
124138
rules.forEach((rule)=>{
125139
if(rule.type!=="style")return;
140+
if(hideResetStyles&&isMatchingSelector(rule.selector,resetSelectors)){
141+
return
142+
}
126143

127144
Object.keys(rule.style).forEach((key)=>{
128145
insertOrder.push(key);

‎src/store.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const store = createStore(
1010
showSelector:true,
1111
groupByLayer:false,
1212
groupByMedia:false,
13+
hideResetStyles:true,
1314
//
1415
isExpanded:false,
1516
selectedLayers:[]asstring[],
@@ -47,6 +48,10 @@ export const store = createStore(
4748
groupByLayer:event.isExpanded ?true :ctx.groupByLayer,
4849
};
4950
},
51+
setHideResetStyles:{
52+
hideResetStyles:(_ctx,event:{hideResetStyles:boolean})=>
53+
event.hideResetStyles,
54+
},
5055
setInspected:(ctx,event:{inspected:InspectResult|null})=>{
5156
if(!event.inspected)return{ ...ctx,inspected:event.inspected};
5257

@@ -55,7 +60,7 @@ export const store = createStore(
5560
...ctx.env,
5661
});
5762

58-
constcomputed=computeStyles(rules,{filter:ctx.filter});
63+
constcomputed=computeStyles(rules,{filter:ctx.filter,hideResetStyles:ctx.hideResetStyles});
5964
constavailableLayers=Array.from(computed.rulesByLayer.keys());
6065
constsortedAvailableLayers=ctx.inspected?.layersOrder.length
6166
?sortArrayByOrder(availableLayers,ctx.inspected?.layersOrder)
@@ -97,7 +102,7 @@ export const store = createStore(
97102
...ctx,
98103
env:event.env,
99104
rules,
100-
computed:computeStyles(rules,{filter:ctx.filter}),
105+
computed:computeStyles(rules,{filter:ctx.filter,hideResetStyles:ctx.hideResetStyles}),
101106
};
102107
},
103108
},

‎src/toolbar.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useSelector } from "@xstate/store/react";
33
import{
44
BoxSelectIcon,
55
BugIcon,
6+
EyeIcon,
7+
EyeOffIcon,
68
LayersIcon,
79
MonitorSmartphone,
810
RefreshCwIcon,
@@ -32,6 +34,7 @@ export const Toolbar = (props: ToolbarProps) => {
3234
constisExpanded=useSelector(store,(s)=>s.context.isExpanded);
3335
constgroupByLayer=useSelector(store,(s)=>s.context.groupByLayer);
3436
constgroupByMedia=useSelector(store,(s)=>s.context.groupByMedia);
37+
consthideResetStyles=useSelector(store,(s)=>s.context.hideResetStyles);
3538
constavailableLayers=useSelector(store,(s)=>s.context.availableLayers);
3639
constselectedLayers=useSelector(store,(s)=>s.context.selectedLayers);
3740

@@ -110,6 +113,7 @@ export const Toolbar = (props: ToolbarProps) => {
110113
groupByLayer,
111114
availableLayers,
112115
selectedLayers,
116+
hideResetStyles,
113117
},
114118
computed,
115119
// api.state
@@ -125,6 +129,23 @@ export const Toolbar = (props: ToolbarProps) => {
125129
<RefreshCwIconclassName={toolbarIcon}/>
126130
</ToolbarButton>
127131
</Tooltip>
132+
<Tooltipcontent="Hide `*, :before, :after` styles">
133+
<Collapsible.TriggerasChild>
134+
<ToolbarButton
135+
aria-label="Hide `*, :before, :after` styles"
136+
aria-selected={hideResetStyles}
137+
onClick={()=>{
138+
store.send({
139+
type:"setHideResetStyles",
140+
hideResetStyles:!hideResetStyles,
141+
});
142+
refresh()
143+
}}
144+
>
145+
{hideResetStyles ?<EyeOffIconclassName={toolbarIcon}/> :<EyeIconclassName={toolbarIcon}/>}
146+
</ToolbarButton>
147+
</Collapsible.Trigger>
148+
</Tooltip>
128149
<Tooltip
129150
content={
130151
"Toggle layer visibility"+

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp