Skip to content

Commit 313e361

Browse files
wizard04wsuwizard04wsu
committed
Merge branch 'dev'
2 parents 5b590df + 47b18c5 commit 313e361

6 files changed

Lines changed: 147 additions & 106 deletions

File tree

‎lib/javascript-regex.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ const thisPackage = {
2222
"regex_pattern",
2323
],
2424

25+
styleSheets: {
26+
"showCharacterSetBackgrounds": "charset-backgrounds",
27+
"showGroupOutlines": "group-outlines",
28+
},
29+
2530

2631
injectionPoints: [
2732
{
@@ -59,22 +64,20 @@ const thisPackage = {
5964
};
6065

6166
function toggleConfig(configName){
62-
atom.config.set(configName, !atom.config.get(`${thisPackage.name}.${configName}`));
67+
atom.config.set(`${thisPackage.name}.${configName}`, !atom.config.get(`${thisPackage.name}.${configName}`));
6368
};
6469

65-
function updateStyleSheet(configName, filename){
66-
console.log(disposableStyleSheets);
70+
function updateStyleSheet(configName){
6771
disposableStyleSheets[configName]?.dispose();
6872
if(atom.config.get(`${thisPackage.name}.${configName}`)){
69-
let path = `${package.path}/styles/${filename}.less`,
73+
let path = `${package.path}/styles/${thisPackage.styleSheets[configName]}.less`,
7074
css = package.themeManager.loadStylesheet(path);
7175
disposableStyleSheets[configName] = package.styleManager.addStyleSheet(css, { sourcePath: path, priority: 1 });
7276
}
7377
else{
7478
disposableStyleSheets[configName] = void 0;
7579
atom.config.set(`${thisPackage.name}.${configName}`, false);
7680
}
77-
console.log(">>",disposableStyleSheets);
7881
}
7982

8083
module.exports = {
@@ -146,18 +149,18 @@ module.exports = {
146149
"javascript-regex:toggle-group-outlines": ()=>toggleConfig("showGroupOutlines"),
147150
}));
148151

149-
// Load the main syntax highlighting stylesheet.
150-
let path = `${package.path}/styles/javascript-regex.less`,
152+
// Load the main stylesheet.
153+
let path = `${package.path}/styles/base.less`,
151154
css = package.themeManager.loadStylesheet(path);
152155
disposableStyleSheets["main"] = package.styleManager.addStyleSheet(css, { sourcePath: path, priority: 1 });
153156

154-
// Load stylesheets per the package settings.
155-
updateStyleSheet("showCharacterSetBackgrounds", "charset-backgrounds");
156-
updateStyleSheet("showGroupOutlines", "group-outlines");
157+
// Load additional stylesheets per the package settings.
158+
updateStyleSheet("showCharacterSetBackgrounds");
159+
updateStyleSheet("showGroupOutlines");
157160

158161
// Observe changes to the package settings.
159-
atom.config.onDidChange(`${thisPackage.name}.showCharacterSetBackgrounds`, {}, ()=>updateStyleSheet("showCharacterSetBackgrounds", "charset-backgrounds"));
160-
atom.config.onDidChange(`${thisPackage.name}.showGroupOutlines`, {}, ()=>updateStyleSheet("showGroupOutlines", "group-outlines"));
162+
atom.config.onDidChange(`${thisPackage.name}.showCharacterSetBackgrounds`, {}, ()=>updateStyleSheet("showCharacterSetBackgrounds"));
163+
atom.config.onDidChange(`${thisPackage.name}.showGroupOutlines`, {}, ()=>updateStyleSheet("showGroupOutlines"));
161164
},
162165

163166
serialize(){},

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "javascript-regex",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "Syntax highlighting for JavaScript regular expressions",
55
"keywords": [
66
"javascript",
@@ -11,8 +11,7 @@
1111
"repository": "https://github.com/wizard04wsu/javascript-regex",
1212
"license": "MIT",
1313
"main": "lib/javascript-regex.js",
14-
"styleSheets": [
15-
],
14+
"styleSheets": [],
1615
"activationHooks": [
1716
"source.js:root-scope-used",
1817
"source.jsx:root-scope-used",

styles/javascript-regex.less renamed to styles/base.less

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
}
1111

1212
//the pattern
13-
.syntax--meta.syntax--pattern {
13+
> .syntax--meta.syntax--pattern {
1414

1515
//invalid content (that isn't already classed as such)
1616
color: @invalid;
@@ -237,4 +237,9 @@
237237
}
238238
}
239239
}
240+
241+
//remove Atom editor's indent guides so that wrapped lines are flush with the left side of the editor
242+
.indent-guide {
243+
display: none;
244+
}
240245
}

‎styles/charset-backgrounds.less‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
@import "colors.less";
2+
//@editor-background-color: #282c34; //TODO: use JavaScript to update this with editor's current background color, and watch for changes
23

3-
.syntax--source.syntax--js .syntax--string.syntax--regexp {
4+
5+
.syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
46

5-
//the pattern
6-
.syntax--meta.syntax--pattern {
7+
//character sets
8+
.syntax--constant.syntax--other.syntax--character-class.syntax--set {
9+
background-color: @charset-bg;
710

8-
//character sets
911
.syntax--constant.syntax--other.syntax--character-class.syntax--set {
10-
background-color: @charset-bg;
12+
background-color: transparent;
13+
}
14+
15+
//inside the set -> character ranges
16+
.syntax--constant.syntax--other.syntax--character-class.syntax--range {
17+
background-color: @charset-range-bg;
1118

12-
//inside the set -> character ranges
1319
.syntax--constant.syntax--other.syntax--character-class.syntax--range {
14-
background-color: @charset-range-bg;
20+
background-color: transparent;
1521
}
1622
}
1723
}

‎styles/colors.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424

2525
// Colors used inside of a character set
2626
@charset: #56b6c2;
27-
@charset-bg: fade(#56b6c2, 6%);
27+
@charset-bg: fade(#56b6c2, 8%);
2828
@charset-delimiter: #88eeee;
2929
@charset-character-special: mix(@character-numeric, @charset, 60%);
3030
@charset-character-class: mix(@character-class, @charset, 60%);
3131
@charset-character-class-property: mix(@character-class-property, @charset, 75%);
3232
@charset-character-numeric: @character-numeric;
3333
@charset-character-numeric-charcode: @character-numeric-charcode;
3434
@charset-range-dash: @charset-delimiter;
35-
@charset-range-bg: fade(#88eeee, 6%);
35+
@charset-range-bg: fade(#88eeee, 8%);

‎styles/group-outlines.less‎

Lines changed: 109 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,128 @@
11
@import "colors.less";
22

3-
@group-outline-radius: ~"calc(var(--editor-line-height) / 2)";
4-
@group-outline-radius: ~"calc(var(--editor-line-height) * 1em / 2)";
3+
@half-line-height: ~"calc(var(--editor-line-height) * 1em / 2)";
4+
@half-line-padding: ~"calc((var(--editor-line-height) * 1em - 1em) / 2)";
55

66

7-
.syntax--source.syntax--js .syntax--string.syntax--regexp {
7+
.syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
88

9-
//the pattern
10-
.syntax--meta.syntax--pattern {
9+
//groups (including lookaround assertions)
10+
> .syntax--meta.syntax--group,
11+
:not(.syntax--invalid):not(.syntax--punctuation) > .syntax--meta.syntax--group:first-child,
12+
:not(.syntax--invalid) > :not(.syntax--punctuation):first-child + .syntax--meta.syntax--group,
13+
:not(.syntax--invalid) > :not(.syntax--definition):first-child + .syntax--meta.syntax--group,
14+
:not(.syntax--invalid) > :not(.syntax--group):first-child + .syntax--meta.syntax--group,
15+
:not(.syntax--invalid) > :not(.syntax--begin):first-child + .syntax--meta.syntax--group,
16+
:not(.syntax--invalid) > .syntax--meta.syntax--group:nth-child(n+3) {
17+
background-color: @group-bg;
18+
padding: 1px 0;
19+
position: relative;
1120

12-
//groups (including lookaround assertions)
13-
.syntax--meta.syntax--group {
14-
background-color: @group-bg;
15-
border-radius: @group-outline-radius;
16-
padding: 1px 0;
17-
position: relative;
21+
//lines above and below group content
22+
&::before {
23+
content: "";
24+
position: absolute;
25+
display: block;
26+
border: 1px solid @group-delimiter;
27+
border-width: 1px 0;
28+
inset: -1px @half-line-height;
29+
}
30+
&.syntax--capturing::before {
31+
border-color: @group-delimiter-capturing;
32+
}
33+
34+
//delimiters '(' and ')'
35+
.syntax--punctuation.syntax--definition.syntax--group.syntax--begin .syntax--punctuation.syntax--definition.syntax--group.syntax--begin,
36+
.syntax--punctuation.syntax--definition.syntax--group.syntax--end .syntax--punctuation.syntax--definition.syntax--group.syntax--end {
37+
color: transparent; //hide the parenthesis
38+
}
39+
> .syntax--punctuation.syntax--definition.syntax--group,
40+
> .syntax--meta.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
1841

19-
/*&:first-child {
20-
border-top-left-radius: 0;
21-
border-bottom-left-radius: 0;
42+
&.syntax--begin,
43+
&.syntax--end {
44+
display: inline-block;
45+
position: relative;
46+
color: transparent; //hide the parenthesis
2247
}
23-
&:last-child {
24-
border-top-right-radius: 0;
25-
border-bottom-right-radius: 0;
26-
}*/
2748

28-
//lines above and below group content
29-
&.syntax--non-capturing,
30-
&.syntax--assertion {
31-
box-shadow:
32-
0 -6px 0 -5px @group-delimiter,
33-
0 6px 0 -5px @group-delimiter;
49+
&.syntax--begin::before,
50+
&.syntax--end::after {
51+
content: "";
52+
position: absolute;
53+
width: @half-line-height;
3454
}
35-
&.syntax--capturing {
55+
56+
&.syntax--begin::before {
57+
inset: 1px auto 2px @half-line-padding;
58+
border-top-left-radius: 100% 50%;
59+
border-bottom-left-radius: 100% 50%;
3660
box-shadow:
37-
0 -6px 0 -5px @group-delimiter-capturing,
38-
0 6px 0 -5px @group-delimiter-capturing;
61+
-1px -1px 0 0 @group-delimiter,
62+
-1px 1px 0 0 @group-delimiter;
63+
border-left: 1px solid @group-delimiter;
3964
}
4065

41-
//delimiters '(' and ')'
42-
> .syntax--punctuation.syntax--definition.syntax--group,
43-
> .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
44-
45-
&.syntax--begin,
46-
&.syntax--end {
47-
display: inline-block;
48-
}
49-
50-
&.syntax--begin::before,
51-
&.syntax--end::after {
52-
content: "";
53-
position: absolute;
54-
width: ~"calc(2 * @{group-outline-radius})";
55-
border-radius: @group-outline-radius;
56-
}
57-
58-
&.syntax--begin::before {
59-
inset: 0 auto 0 3px;
60-
}
61-
62-
&.syntax--end::after {
63-
inset: 0 3px 0 auto;
64-
}
66+
&.syntax--end::after {
67+
inset: 1px @half-line-padding 2px auto;
68+
border-top-right-radius: 100% 50%;
69+
border-bottom-right-radius: 100% 50%;
70+
box-shadow:
71+
1px -1px 0 0 @group-delimiter,
72+
1px 1px 0 0 @group-delimiter;
73+
border-right: 1px solid @group-delimiter;
6574
}
66-
&.syntax--non-capturing > .syntax--punctuation.syntax--definition.syntax--group,
67-
&.syntax--non-capturing > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group,
68-
&.syntax--assertion > .syntax--punctuation.syntax--definition.syntax--group,
69-
&.syntax--assertion > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
70-
71-
&.syntax--begin::before {
72-
box-shadow:
73-
-2px -2px 0 -1px @group-delimiter,
74-
-2px 2px 0 -1px @group-delimiter;
75-
}
76-
77-
&.syntax--end::after {
78-
box-shadow:
79-
2px -2px 0 -1px @group-delimiter,
80-
2px 2px 0 -1px @group-delimiter;
81-
}
75+
}
76+
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group,
77+
> .syntax--meta.syntax--group.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group {
78+
79+
&.syntax--begin::before {
80+
box-shadow:
81+
-1px -1px 0 0 @group-delimiter-capturing,
82+
-1px 1px 0 0 @group-delimiter-capturing;
83+
border-left-color: @group-delimiter-capturing;
8284
}
83-
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group,
84-
&.syntax--capturing > .syntax--punctuation.syntax--definition.syntax--group > .syntax--punctuation.syntax--definition.syntax--group {
85-
86-
&.syntax--begin::before {
87-
box-shadow:
88-
-2px -2px 0 -1px @group-delimiter-capturing,
89-
-2px 2px 0 -1px @group-delimiter-capturing;
90-
}
91-
92-
&.syntax--end::after {
93-
box-shadow:
94-
2px -2px 0 -1px @group-delimiter-capturing,
95-
2px 2px 0 -1px @group-delimiter-capturing;
96-
}
85+
86+
&.syntax--end::after {
87+
box-shadow:
88+
1px -1px 0 0 @group-delimiter-capturing,
89+
1px 1px 0 0 @group-delimiter-capturing;
90+
border-right-color: @group-delimiter-capturing;
9791
}
9892
}
9993
}
10094
}
95+
96+
//adjustments for breaks in a wrapped line
97+
.line .syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
98+
99+
> .syntax--meta.syntax--group:first-child,
100+
:not(.syntax--invalid) > .syntax--meta.syntax--group:first-child {
101+
102+
&::before {
103+
left: 0;
104+
}
105+
}
106+
:not(.syntax--invalid):not(:first-child) .syntax--meta.syntax--group:first-child {
107+
108+
&::before {
109+
left: @half-line-height;
110+
}
111+
}
112+
}
113+
.line .syntax--source.syntax--js .syntax--string.syntax--regexp > .syntax--meta.syntax--pattern {
114+
115+
> .syntax--meta.syntax--group:last-child,
116+
:not(.syntax--invalid) > .syntax--meta.syntax--group:last-child {
117+
118+
&::before {
119+
right: 0;
120+
}
121+
}
122+
:not(.syntax--invalid):not(:last-child) .syntax--meta.syntax--group:last-child {
123+
124+
&::before {
125+
right: @half-line-height;
126+
}
127+
}
128+
}

0 commit comments

Comments
 (0)