Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Commit 59bf20c

Browse files
joshualittjoshualitt
authored
[web] Migrate Flutter Web DOM usage to JS static interop - 21. (#33349)
1 parent 56e0c34 commit 59bf20c

File tree

6 files changed

+176
-86
lines changed

6 files changed

+176
-86
lines changed

‎lib/web_ui/lib/src/engine/dom.dart‎

Lines changed: 132 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ extension DomDocumentExtension on DomDocument {
8080
class DomHTMLDocument extends DomDocument {}
8181

8282
extension DomHTMLDocumentExtension on DomHTMLDocument {
83+
external DomFontFaceSet? get fonts;
8384
external DomHTMLHeadElement? get head;
8485
external DomHTMLBodyElement? get body;
8586
}
@@ -168,12 +169,14 @@ extension DomElementExtension on DomElement {
168169
js_util.getProperty<List<Object?>>(this, 'children').cast<DomElement>();
169170
external String get id;
170171
external set id(String id);
172+
external set innerHtml(String? html);
171173
external String? get outerHTML;
172174
external set spellcheck(bool? value);
173175
external String get tagName;
174176
external DomCSSStyleDeclaration get style;
175177
external void append(DomNode node);
176178
external String? getAttribute(String attributeName);
179+
external DomRect getBoundingClientRect();
177180
external void prepend(DomNode node);
178181
external DomElement? querySelector(String selectors);
179182
List<DomElement> querySelectorAll(String selectors) =>
@@ -189,65 +192,68 @@ extension DomElementExtension on DomElement {
189192
class DomCSSStyleDeclaration {}
190193

191194
extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
192-
set width(String value) => setProperty('width', value, '');
193-
set height(String value) => setProperty('height', value, '');
194-
set position(String value) => setProperty('position', value, '');
195-
set clip(String value) => setProperty('clip', value, '');
196-
set clipPath(String value) => setProperty('clip-path', value, '');
197-
set transform(String value) => setProperty('transform', value, '');
195+
set width(String value) => setProperty('width', value);
196+
set height(String value) => setProperty('height', value);
197+
set position(String value) => setProperty('position', value);
198+
set clip(String value) => setProperty('clip', value);
199+
set clipPath(String value) => setProperty('clip-path', value);
200+
set transform(String value) => setProperty('transform', value);
198201
set transformOrigin(String value) =>
199-
setProperty('transform-origin', value, '');
200-
set opacity(String value) => setProperty('opacity', value, '');
201-
set color(String value) => setProperty('color', value, '');
202-
set top(String value) => setProperty('top', value, '');
203-
set left(String value) => setProperty('left', value, '');
204-
set right(String value) => setProperty('right', value, '');
205-
set bottom(String value) => setProperty('bottom', value, '');
202+
setProperty('transform-origin', value);
203+
set opacity(String value) => setProperty('opacity', value);
204+
set color(String value) => setProperty('color', value);
205+
set top(String value) => setProperty('top', value);
206+
set left(String value) => setProperty('left', value);
207+
set right(String value) => setProperty('right', value);
208+
set bottom(String value) => setProperty('bottom', value);
206209
set backgroundColor(String value) =>
207-
setProperty('background-color', value, '');
208-
set pointerEvents(String value) => setProperty('pointer-events', value, '');
209-
set filter(String value) => setProperty('filter', value, '');
210-
set zIndex(String value) => setProperty('z-index', value, '');
211-
set whiteSpace(String value) => setProperty('white-space', value, '');
212-
set lineHeight(String value) => setProperty('line-height', value, '');
213-
set textStroke(String value) => setProperty('-webkit-text-stroke', value, '');
214-
set fontSize(String value) => setProperty('font-size', value, '');
215-
set fontWeight(String value) => setProperty('font-weight', value, '');
216-
set fontStyle(String value) => setProperty('font-style', value, '');
217-
set fontFamily(String value) => setProperty('font-family', value, '');
218-
set letterSpacing(String value) => setProperty('letter-spacing', value, '');
219-
set wordSpacing(String value) => setProperty('word-spacing', value, '');
220-
set textShadow(String value) => setProperty('text-shadow', value, '');
221-
set textDecoration(String value) => setProperty('text-decoration', value, '');
210+
setProperty('background-color', value);
211+
set pointerEvents(String value) => setProperty('pointer-events', value);
212+
set filter(String value) => setProperty('filter', value);
213+
set zIndex(String value) => setProperty('z-index', value);
214+
set whiteSpace(String value) => setProperty('white-space', value);
215+
set lineHeight(String value) => setProperty('line-height', value);
216+
set textStroke(String value) => setProperty('-webkit-text-stroke', value);
217+
set fontSize(String value) => setProperty('font-size', value);
218+
set fontWeight(String value) => setProperty('font-weight', value);
219+
set fontStyle(String value) => setProperty('font-style', value);
220+
set fontFamily(String value) => setProperty('font-family', value);
221+
set letterSpacing(String value) => setProperty('letter-spacing', value);
222+
set wordSpacing(String value) => setProperty('word-spacing', value);
223+
set textShadow(String value) => setProperty('text-shadow', value);
224+
set textDecoration(String value) => setProperty('text-decoration', value);
222225
set textDecorationColor(String value) =>
223-
setProperty('text-decoration-color', value, '');
226+
setProperty('text-decoration-color', value);
224227
set fontFeatureSettings(String value) =>
225-
setProperty('font-feature-settings', value, '');
228+
setProperty('font-feature-settings', value);
226229
set fontVariationSettings(String value) =>
227-
setProperty('font-variation-settings', value, '');
228-
set visibility(String value) => setProperty('visibility', value, '');
229-
set overflow(String value) => setProperty('overflow', value, '');
230-
set boxShadow(String value) => setProperty('box-shadow', value, '');
230+
setProperty('font-variation-settings', value);
231+
set visibility(String value) => setProperty('visibility', value);
232+
set overflow(String value) => setProperty('overflow', value);
233+
set boxShadow(String value) => setProperty('box-shadow', value);
231234
set borderTopLeftRadius(String value) =>
232-
setProperty('border-top-left-radius', value, '');
235+
setProperty('border-top-left-radius', value);
233236
set borderTopRightRadius(String value) =>
234-
setProperty('border-top-right-radius', value, '');
237+
setProperty('border-top-right-radius', value);
235238
set borderBottomLeftRadius(String value) =>
236-
setProperty('border-bottom-left-radius', value, '');
239+
setProperty('border-bottom-left-radius', value);
237240
set borderBottomRightRadius(String value) =>
238-
setProperty('border-bottom-right-radius', value, '');
239-
set borderRadius(String value) => setProperty('border-radius', value, '');
240-
set perspective(String value) => setProperty('perspective', value, '');
241-
set padding(String value) => setProperty('padding', value, '');
241+
setProperty('border-bottom-right-radius', value);
242+
set borderRadius(String value) => setProperty('border-radius', value);
243+
set perspective(String value) => setProperty('perspective', value);
244+
set padding(String value) => setProperty('padding', value);
242245
set backgroundImage(String value) =>
243-
setProperty('background-image', value, '');
244-
set border(String value) => setProperty('border', value, '');
245-
set mixBlendMode(String value) => setProperty('mix-blend-mode', value, '');
246-
set backgroundSize(String value) =>
247-
setProperty('background-size', value, '');
246+
setProperty('background-image', value);
247+
set border(String value) => setProperty('border', value);
248+
set mixBlendMode(String value) => setProperty('mix-blend-mode', value);
249+
set backgroundSize(String value) => setProperty('background-size', value);
248250
set backgroundBlendMode(String value) =>
249-
setProperty('background-blend-mode', value, '');
250-
set transformStyle(String value) => setProperty('transform-style', value, '');
251+
setProperty('background-blend-mode', value);
252+
set transformStyle(String value) => setProperty('transform-style', value);
253+
set display(String value) => setProperty('display', value);
254+
set flexDirection(String value) => setProperty('flex-direction', value);
255+
set alignItems(String value) => setProperty('align-items', value);
256+
set margin(String value) => setProperty('margin', value);
251257
String get width => getPropertyValue('width');
252258
String get height => getPropertyValue('height');
253259
String get position => getPropertyValue('position');
@@ -298,6 +304,10 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
298304
String get backgroundSize => getPropertyValue('background-size');
299305
String get backgroundBlendMode => getPropertyValue('background-blend-mode');
300306
String get transformStyle => getPropertyValue('transform-style');
307+
String get display => getPropertyValue('display');
308+
String get flexDirection => getPropertyValue('flex-direction');
309+
String get alignItems => getPropertyValue('align-items');
310+
String get margin => getPropertyValue('margin');
301311

302312
external String getPropertyValue(String property);
303313
void setProperty(String propertyName, String value, [String? priority]) {
@@ -313,6 +323,10 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
313323
@staticInterop
314324
class DomHTMLElement extends DomElement {}
315325

326+
extension DomHTMLElementExtension on DomHTMLElement {
327+
int get offsetWidth => js_util.getProperty<num>(this, 'offsetWidth') as int;
328+
}
329+
316330
@JS()
317331
@staticInterop
318332
class DomHTMLMetaElement extends DomHTMLElement {}
@@ -369,6 +383,21 @@ class DomHTMLButtonElement extends DomHTMLElement {}
369383
DomHTMLButtonElement createDomHTMLButtonElement() =>
370384
domDocument.createElement('button') as DomHTMLButtonElement;
371385

386+
@JS()
387+
@staticInterop
388+
class DomHTMLParagraphElement extends DomHTMLElement {}
389+
390+
DomHTMLParagraphElement createDomHTMLParagraphElement() =>
391+
domDocument.createElement('p') as DomHTMLParagraphElement;
392+
393+
@JS()
394+
@staticInterop
395+
class DomHTMLStyleElement extends DomHTMLElement {}
396+
397+
extension DomHTMLStyleElementExtension on DomHTMLStyleElement {
398+
external set type(String? value);
399+
}
400+
372401
@JS()
373402
@staticInterop
374403
class DomPerformance extends DomEventTarget {}
@@ -434,6 +463,7 @@ class DomCanvasRenderingContext2D {}
434463
extension DomCanvasRenderingContext2DExtension on DomCanvasRenderingContext2D {
435464
external Object? get fillStyle;
436465
external set fillStyle(Object? style);
466+
external String get font;
437467
external set font(String value);
438468
external set lineWidth(num? value);
439469
external set strokeStyle(Object? value);
@@ -452,6 +482,7 @@ extension DomCanvasRenderingContext2DExtension on DomCanvasRenderingContext2D {
452482
<Object>[text, x, y, if (maxWidth != null) maxWidth]);
453483
external DomImageData getImageData(int x, int y, int sw, int sh);
454484
external void lineTo(num x, num y);
485+
external DomTextMetrics measureText(String text);
455486
external void moveTo(num x, num y);
456487
external void save();
457488
external void stroke();
@@ -516,6 +547,14 @@ class DomText extends DomCharacterData {}
516547

517548
DomText createDomText(String data) => domDocument.createTextNode(data);
518549

550+
@JS()
551+
@staticInterop
552+
class DomTextMetrics {}
553+
554+
extension DomTextMetricsExtension on DomTextMetrics {
555+
external num? get width;
556+
}
557+
519558
@JS()
520559
@staticInterop
521560
class DomException {
@@ -526,6 +565,51 @@ extension DomExceptionExtension on DomException {
526565
external String get name;
527566
}
528567

568+
@JS()
569+
@staticInterop
570+
class DomRectReadOnly {}
571+
572+
extension DomRectReadOnlyExtension on DomRectReadOnly {
573+
external num get x;
574+
external num get y;
575+
external num get width;
576+
external num get height;
577+
external num get top;
578+
external num get right;
579+
external num get bottom;
580+
external num get left;
581+
}
582+
583+
@JS()
584+
@staticInterop
585+
class DomRect extends DomRectReadOnly {}
586+
587+
@JS()
588+
@staticInterop
589+
class DomFontFace {}
590+
591+
DomFontFace createDomFontFace(String family, Object source,
592+
[Map<Object?, Object?>? descriptors]) =>
593+
domCallConstructorString('FontFace', <Object>[
594+
family,
595+
source,
596+
if (descriptors != null) js_util.jsify(descriptors)
597+
])! as DomFontFace;
598+
599+
extension DomFontFaceExtension on DomFontFace {
600+
Future<DomFontFace> load() =>
601+
js_util.promiseToFuture(js_util.callMethod(this, 'load', <Object>[]));
602+
}
603+
604+
@JS()
605+
@staticInterop
606+
class DomFontFaceSet extends DomEventTarget {}
607+
608+
extension DomFontFaceSetExtension on DomFontFaceSet {
609+
external DomFontFaceSet? add(DomFontFace font);
610+
external void clear();
611+
}
612+
529613
extension DomResponseExtension on DomResponse {
530614
Future<dynamic> arrayBuffer() => js_util
531615
.promiseToFuture(js_util.callMethod(this, 'arrayBuffer', <Object>[]));

‎lib/web_ui/lib/src/engine/svg.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import 'dom.dart';
1111
class SVGElement extends DomElement {}
1212

1313
SVGElement createSVGElement(String tag) =>
14-
domDocument.createElementNS('http://www.w3.org/2000/svg', tag) as SVGElement;
14+
domDocument.createElementNS('http://www.w3.org/2000/svg', tag)
15+
as SVGElement;
1516

1617
@JS()
1718
@staticInterop

0 commit comments

Comments
 (0)