@designtools/shadows 0.1.15 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +15 -3
- package/dist/client/assets/index-BDAWhWHj.css +1 -0
- package/dist/client/assets/index-Bbp_GOgb.css +1 -0
- package/dist/client/assets/index-C70XoXXZ.css +1 -0
- package/dist/client/assets/index-CIchFrIN.js +111 -0
- package/dist/client/assets/index-CXzE7faF.js +111 -0
- package/dist/client/assets/index-DtcSwQv9.js +111 -0
- package/dist/client/index.html +2 -2
- package/dist/inject/selection.js +134 -19
- package/package.json +1 -1
package/dist/client/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Design Tools — Shadows</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CXzE7faF.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-Bbp_GOgb.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/inject/selection.js
CHANGED
|
@@ -7,6 +7,7 @@ let selectedElement = null;
|
|
|
7
7
|
let selectedDomPath = null;
|
|
8
8
|
let overlayRafId = null;
|
|
9
9
|
const previewBackups = /* @__PURE__ */ new Map();
|
|
10
|
+
const inlineStyleBackups = /* @__PURE__ */ new Map();
|
|
10
11
|
function createOverlays() {
|
|
11
12
|
highlightOverlay = document.createElement("div");
|
|
12
13
|
highlightOverlay.id = "tool-highlight";
|
|
@@ -81,30 +82,103 @@ function extractElementData(el) {
|
|
|
81
82
|
const computed = getComputedStyle(el);
|
|
82
83
|
const rect = el.getBoundingClientRect();
|
|
83
84
|
const relevantProps = [
|
|
84
|
-
|
|
85
|
-
"backgroundColor",
|
|
86
|
-
"borderColor",
|
|
87
|
-
"borderRadius",
|
|
88
|
-
"padding",
|
|
89
|
-
"margin",
|
|
90
|
-
"gap",
|
|
91
|
-
"fontSize",
|
|
92
|
-
"fontWeight",
|
|
93
|
-
"lineHeight",
|
|
94
|
-
"letterSpacing",
|
|
85
|
+
// Layout
|
|
95
86
|
"display",
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"
|
|
87
|
+
"position",
|
|
88
|
+
"top",
|
|
89
|
+
"right",
|
|
90
|
+
"bottom",
|
|
91
|
+
"left",
|
|
92
|
+
"z-index",
|
|
93
|
+
"overflow",
|
|
94
|
+
"overflow-x",
|
|
95
|
+
"overflow-y",
|
|
96
|
+
// Flexbox / Grid
|
|
97
|
+
"flex-direction",
|
|
98
|
+
"flex-wrap",
|
|
99
|
+
"justify-content",
|
|
100
|
+
"align-items",
|
|
101
|
+
"align-self",
|
|
102
|
+
"flex-grow",
|
|
103
|
+
"flex-shrink",
|
|
104
|
+
"flex-basis",
|
|
105
|
+
"order",
|
|
106
|
+
"grid-template-columns",
|
|
107
|
+
"grid-template-rows",
|
|
108
|
+
"gap",
|
|
109
|
+
"row-gap",
|
|
110
|
+
"column-gap",
|
|
111
|
+
// Size
|
|
99
112
|
"width",
|
|
100
113
|
"height",
|
|
101
|
-
"
|
|
114
|
+
"min-width",
|
|
115
|
+
"min-height",
|
|
116
|
+
"max-width",
|
|
117
|
+
"max-height",
|
|
118
|
+
// Spacing
|
|
119
|
+
"margin-top",
|
|
120
|
+
"margin-right",
|
|
121
|
+
"margin-bottom",
|
|
122
|
+
"margin-left",
|
|
123
|
+
"padding-top",
|
|
124
|
+
"padding-right",
|
|
125
|
+
"padding-bottom",
|
|
126
|
+
"padding-left",
|
|
127
|
+
// Typography
|
|
128
|
+
"font-family",
|
|
129
|
+
"font-size",
|
|
130
|
+
"font-weight",
|
|
131
|
+
"line-height",
|
|
132
|
+
"letter-spacing",
|
|
133
|
+
"text-align",
|
|
134
|
+
"text-decoration",
|
|
135
|
+
"text-transform",
|
|
136
|
+
"color",
|
|
137
|
+
"white-space",
|
|
138
|
+
// Background
|
|
139
|
+
"background-color",
|
|
140
|
+
"background-image",
|
|
141
|
+
"background-size",
|
|
142
|
+
"background-position",
|
|
143
|
+
// Border
|
|
144
|
+
"border-top-width",
|
|
145
|
+
"border-right-width",
|
|
146
|
+
"border-bottom-width",
|
|
147
|
+
"border-left-width",
|
|
148
|
+
"border-style",
|
|
149
|
+
"border-color",
|
|
150
|
+
"border-top-left-radius",
|
|
151
|
+
"border-top-right-radius",
|
|
152
|
+
"border-bottom-right-radius",
|
|
153
|
+
"border-bottom-left-radius",
|
|
154
|
+
// Effects
|
|
155
|
+
"opacity",
|
|
156
|
+
"box-shadow",
|
|
157
|
+
"transform",
|
|
158
|
+
"transition"
|
|
102
159
|
];
|
|
103
160
|
const computedStyles = {};
|
|
104
161
|
for (const prop of relevantProps) {
|
|
105
|
-
computedStyles[prop] = computed.getPropertyValue(
|
|
106
|
-
|
|
107
|
-
|
|
162
|
+
computedStyles[prop] = computed.getPropertyValue(prop);
|
|
163
|
+
}
|
|
164
|
+
const inheritableProps = [
|
|
165
|
+
"color",
|
|
166
|
+
"font-family",
|
|
167
|
+
"font-size",
|
|
168
|
+
"font-weight",
|
|
169
|
+
"line-height",
|
|
170
|
+
"letter-spacing",
|
|
171
|
+
"text-align",
|
|
172
|
+
"text-transform",
|
|
173
|
+
"white-space"
|
|
174
|
+
];
|
|
175
|
+
const parentComputedStyles = {};
|
|
176
|
+
const parentEl = el.parentElement;
|
|
177
|
+
if (parentEl) {
|
|
178
|
+
const parentComputed = getComputedStyle(parentEl);
|
|
179
|
+
for (const prop of inheritableProps) {
|
|
180
|
+
parentComputedStyles[prop] = parentComputed.getPropertyValue(prop);
|
|
181
|
+
}
|
|
108
182
|
}
|
|
109
183
|
const attributes = {};
|
|
110
184
|
for (const attr of Array.from(el.attributes)) {
|
|
@@ -112,6 +186,19 @@ function extractElementData(el) {
|
|
|
112
186
|
attributes[attr.name] = attr.value;
|
|
113
187
|
}
|
|
114
188
|
}
|
|
189
|
+
let sourceFile = null;
|
|
190
|
+
let sourceLine = null;
|
|
191
|
+
let sourceCol = null;
|
|
192
|
+
const dataSource = el.getAttribute("data-source");
|
|
193
|
+
if (dataSource) {
|
|
194
|
+
const lastColon = dataSource.lastIndexOf(":");
|
|
195
|
+
const secondLastColon = dataSource.lastIndexOf(":", lastColon - 1);
|
|
196
|
+
if (secondLastColon > 0) {
|
|
197
|
+
sourceFile = dataSource.slice(0, secondLastColon);
|
|
198
|
+
sourceLine = parseInt(dataSource.slice(secondLastColon + 1, lastColon), 10);
|
|
199
|
+
sourceCol = parseInt(dataSource.slice(lastColon + 1), 10);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
115
202
|
return {
|
|
116
203
|
tag: el.tagName.toLowerCase(),
|
|
117
204
|
className: (el.getAttribute("class") || "").trim(),
|
|
@@ -119,10 +206,14 @@ function extractElementData(el) {
|
|
|
119
206
|
dataVariant: el.getAttribute("data-variant"),
|
|
120
207
|
dataSize: el.getAttribute("data-size"),
|
|
121
208
|
computedStyles,
|
|
209
|
+
parentComputedStyles,
|
|
122
210
|
boundingRect: rect,
|
|
123
211
|
domPath: getDomPath(el),
|
|
124
212
|
textContent: (el.textContent || "").trim().slice(0, 100),
|
|
125
|
-
attributes
|
|
213
|
+
attributes,
|
|
214
|
+
sourceFile,
|
|
215
|
+
sourceLine,
|
|
216
|
+
sourceCol
|
|
126
217
|
};
|
|
127
218
|
}
|
|
128
219
|
function positionOverlay(overlay, rect) {
|
|
@@ -284,6 +375,30 @@ function onMessage(e) {
|
|
|
284
375
|
case "tool:reselectElement":
|
|
285
376
|
reselectCurrentElement();
|
|
286
377
|
break;
|
|
378
|
+
case "tool:previewInlineStyle": {
|
|
379
|
+
if (selectedElement && selectedElement instanceof HTMLElement) {
|
|
380
|
+
const prop = msg.property;
|
|
381
|
+
const value = msg.value;
|
|
382
|
+
if (!inlineStyleBackups.has(prop)) {
|
|
383
|
+
inlineStyleBackups.set(prop, selectedElement.style.getPropertyValue(prop));
|
|
384
|
+
}
|
|
385
|
+
selectedElement.style.setProperty(prop, value, "important");
|
|
386
|
+
}
|
|
387
|
+
break;
|
|
388
|
+
}
|
|
389
|
+
case "tool:revertInlineStyles": {
|
|
390
|
+
if (selectedElement && selectedElement instanceof HTMLElement) {
|
|
391
|
+
for (const [prop, original] of inlineStyleBackups) {
|
|
392
|
+
if (original) {
|
|
393
|
+
selectedElement.style.setProperty(prop, original);
|
|
394
|
+
} else {
|
|
395
|
+
selectedElement.style.removeProperty(prop);
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
inlineStyleBackups.clear();
|
|
399
|
+
}
|
|
400
|
+
break;
|
|
401
|
+
}
|
|
287
402
|
case "tool:setTheme":
|
|
288
403
|
if (msg.theme === "dark") {
|
|
289
404
|
document.documentElement.classList.add("dark");
|