章文轩
2 years ago
parent
eb80d3c916
commit
35c1130191
@ -0,0 +1,635 @@
|
||||
import 'package:collection/collection.dart';
|
||||
|
||||
import 'dart:async';
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import './flutter_html.dart';
|
||||
import './src/utils.dart';
|
||||
|
||||
typedef CustomRenderMatcher = bool Function(RenderContext context);
|
||||
|
||||
CustomRenderMatcher tagMatcher(String tag) => (context) {
|
||||
return context.tree.element?.localName == tag;
|
||||
};
|
||||
|
||||
CustomRenderMatcher blockElementMatcher() => (context) {
|
||||
return context.tree.style.display == Display.BLOCK &&
|
||||
(context.tree.children.isNotEmpty ||
|
||||
context.tree.element?.localName == "hr");
|
||||
};
|
||||
|
||||
CustomRenderMatcher listElementMatcher() => (context) {
|
||||
return context.tree.style.display == Display.LIST_ITEM;
|
||||
};
|
||||
|
||||
CustomRenderMatcher replacedElementMatcher() => (context) {
|
||||
return context.tree is ReplacedElement;
|
||||
};
|
||||
|
||||
CustomRenderMatcher dataUriMatcher(
|
||||
{String? encoding = 'base64', String? mime}) =>
|
||||
(context) {
|
||||
if (context.tree.element?.attributes == null ||
|
||||
_src(context.tree.element!.attributes.cast()) == null) return false;
|
||||
final dataUri = _dataUriFormat
|
||||
.firstMatch(_src(context.tree.element!.attributes.cast())!);
|
||||
return dataUri != null &&
|
||||
dataUri.namedGroup('mime') != "image/svg+xml" &&
|
||||
(mime == null || dataUri.namedGroup('mime') == mime) &&
|
||||
(encoding == null || dataUri.namedGroup('encoding') == ';$encoding');
|
||||
};
|
||||
|
||||
CustomRenderMatcher networkSourceMatcher({
|
||||
List<String> schemas: const ["https", "http"],
|
||||
List<String>? domains,
|
||||
String? extension,
|
||||
}) =>
|
||||
(context) {
|
||||
if (context.tree.element?.attributes.cast() == null ||
|
||||
_src(context.tree.element!.attributes.cast()) == null) return false;
|
||||
try {
|
||||
final src = Uri.parse(_src(context.tree.element!.attributes.cast())!);
|
||||
return schemas.contains(src.scheme) &&
|
||||
(domains == null || domains.contains(src.host)) &&
|
||||
(extension == null || src.path.endsWith(".$extension"));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
CustomRenderMatcher assetUriMatcher() => (context) =>
|
||||
context.tree.element?.attributes.cast() != null &&
|
||||
_src(context.tree.element!.attributes.cast()) != null &&
|
||||
_src(context.tree.element!.attributes.cast())!.startsWith("asset:") &&
|
||||
!_src(context.tree.element!.attributes.cast())!.endsWith(".svg");
|
||||
|
||||
CustomRenderMatcher textContentElementMatcher() => (context) {
|
||||
return context.tree is TextContentElement;
|
||||
};
|
||||
|
||||
CustomRenderMatcher interactableElementMatcher() => (context) {
|
||||
return context.tree is InteractableElement;
|
||||
};
|
||||
|
||||
CustomRenderMatcher layoutElementMatcher() => (context) {
|
||||
return context.tree is LayoutElement;
|
||||
};
|
||||
|
||||
CustomRenderMatcher verticalAlignMatcher() => (context) {
|
||||
return context.tree.style.verticalAlign != null &&
|
||||
context.tree.style.verticalAlign != VerticalAlign.BASELINE;
|
||||
};
|
||||
|
||||
CustomRenderMatcher fallbackMatcher() => (context) {
|
||||
return true;
|
||||
};
|
||||
|
||||
class CustomRender {
|
||||
final InlineSpan Function(RenderContext, List<InlineSpan> Function())?
|
||||
inlineSpan;
|
||||
final Widget Function(RenderContext, List<InlineSpan> Function())? widget;
|
||||
|
||||
CustomRender.inlineSpan({
|
||||
required this.inlineSpan,
|
||||
}) : widget = null;
|
||||
|
||||
CustomRender.widget({
|
||||
required this.widget,
|
||||
}) : inlineSpan = null;
|
||||
}
|
||||
|
||||
class SelectableCustomRender extends CustomRender {
|
||||
final TextSpan Function(RenderContext, List<TextSpan> Function()) textSpan;
|
||||
|
||||
SelectableCustomRender.fromTextSpan({
|
||||
required this.textSpan,
|
||||
}) : super.inlineSpan(inlineSpan: null);
|
||||
}
|
||||
|
||||
CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
|
||||
CustomRender.inlineSpan(inlineSpan: (context, buildChildren) {
|
||||
if (context.parser.selectable) {
|
||||
return TextSpan(
|
||||
style: context.style.generateTextStyle(),
|
||||
children: (children as List<TextSpan>?) ??
|
||||
context.tree.children
|
||||
.expandIndexed((i, childTree) => [
|
||||
if (childTree.style.display == Display.BLOCK &&
|
||||
i > 0 &&
|
||||
context.tree.children[i - 1] is ReplacedElement)
|
||||
TextSpan(text: "\n"),
|
||||
context.parser.parseTree(context, childTree),
|
||||
if (i != context.tree.children.length - 1 &&
|
||||
childTree.style.display == Display.BLOCK &&
|
||||
childTree.element?.localName != "html" &&
|
||||
childTree.element?.localName != "body")
|
||||
TextSpan(text: "\n"),
|
||||
])
|
||||
.toList(),
|
||||
);
|
||||
}
|
||||
return WidgetSpan(
|
||||
child: ContainerSpan(
|
||||
key: context.key,
|
||||
newContext: context,
|
||||
style: style ?? context.tree.style,
|
||||
shrinkWrap: context.parser.shrinkWrap,
|
||||
children: children ??
|
||||
context.tree.children
|
||||
.expandIndexed((i, childTree) => [
|
||||
if (context.parser.shrinkWrap &&
|
||||
childTree.style.display == Display.BLOCK &&
|
||||
i > 0 &&
|
||||
context.tree.children[i - 1] is ReplacedElement)
|
||||
TextSpan(text: "\n"),
|
||||
context.parser.parseTree(context, childTree),
|
||||
if (i != context.tree.children.length - 1 &&
|
||||
childTree.style.display == Display.BLOCK &&
|
||||
childTree.element?.localName != "html" &&
|
||||
childTree.element?.localName != "body")
|
||||
TextSpan(text: "\n"),
|
||||
])
|
||||
.toList(),
|
||||
));
|
||||
});
|
||||
|
||||
CustomRender listElementRender(
|
||||
{Style? style, Widget? child, List<InlineSpan>? children}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => WidgetSpan(
|
||||
child: ContainerSpan(
|
||||
key: context.key,
|
||||
newContext: context,
|
||||
style: style ?? context.tree.style,
|
||||
shrinkWrap: context.parser.shrinkWrap,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
textDirection:
|
||||
style?.direction ?? context.tree.style.direction,
|
||||
children: [
|
||||
(style?.listStylePosition ??
|
||||
context.tree.style.listStylePosition) ==
|
||||
ListStylePosition.OUTSIDE
|
||||
? Padding(
|
||||
padding: style?.padding?.nonNegative ??
|
||||
context.tree.style.padding?.nonNegative ??
|
||||
EdgeInsets.only(
|
||||
left: (style?.direction ??
|
||||
context.tree.style.direction) !=
|
||||
TextDirection.rtl
|
||||
? 10.0
|
||||
: 0.0,
|
||||
right: (style?.direction ??
|
||||
context.tree.style.direction) ==
|
||||
TextDirection.rtl
|
||||
? 10.0
|
||||
: 0.0),
|
||||
child: style?.markerContent ??
|
||||
context.style.markerContent)
|
||||
: Container(height: 0, width: 0),
|
||||
Text("\u0020",
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(fontWeight: FontWeight.w400)),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: (style?.listStylePosition ??
|
||||
context.tree.style.listStylePosition) ==
|
||||
ListStylePosition.INSIDE
|
||||
? EdgeInsets.only(
|
||||
left: (style?.direction ??
|
||||
context.tree.style.direction) !=
|
||||
TextDirection.rtl
|
||||
? 10.0
|
||||
: 0.0,
|
||||
right: (style?.direction ??
|
||||
context.tree.style.direction) ==
|
||||
TextDirection.rtl
|
||||
? 10.0
|
||||
: 0.0)
|
||||
: EdgeInsets.zero,
|
||||
child: StyledText(
|
||||
textSpan: TextSpan(
|
||||
children: _getListElementChildren(
|
||||
style?.listStylePosition ??
|
||||
context.tree.style.listStylePosition,
|
||||
buildChildren)
|
||||
..insertAll(
|
||||
0,
|
||||
context.tree.style.listStylePosition ==
|
||||
ListStylePosition.INSIDE
|
||||
? [
|
||||
WidgetSpan(
|
||||
alignment:
|
||||
PlaceholderAlignment
|
||||
.middle,
|
||||
child: style?.markerContent ??
|
||||
context.style
|
||||
.markerContent ??
|
||||
Container(
|
||||
height: 0, width: 0))
|
||||
]
|
||||
: []),
|
||||
style: style?.generateTextStyle() ??
|
||||
context.style.generateTextStyle(),
|
||||
),
|
||||
style: style ?? context.style,
|
||||
renderContext: context,
|
||||
)))
|
||||
],
|
||||
),
|
||||
),
|
||||
));
|
||||
|
||||
CustomRender replacedElementRender(
|
||||
{PlaceholderAlignment? alignment,
|
||||
TextBaseline? baseline,
|
||||
Widget? child}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => WidgetSpan(
|
||||
alignment:
|
||||
alignment ?? (context.tree as ReplacedElement).alignment,
|
||||
baseline: baseline ?? TextBaseline.alphabetic,
|
||||
child:
|
||||
child ?? (context.tree as ReplacedElement).toWidget(context)!,
|
||||
));
|
||||
|
||||
CustomRender textContentElementRender({String? text}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => TextSpan(
|
||||
style: context.style.generateTextStyle(),
|
||||
text: (text ?? (context.tree as TextContentElement).text)
|
||||
.transformed(context.tree.style.textTransform),
|
||||
));
|
||||
|
||||
CustomRender base64ImageRender() =>
|
||||
CustomRender.widget(widget: (context, buildChildren) {
|
||||
final decodedImage = base64.decode(
|
||||
_src(context.tree.element!.attributes.cast())!
|
||||
.split("base64,")[1]
|
||||
.trim());
|
||||
precacheImage(
|
||||
MemoryImage(decodedImage),
|
||||
context.buildContext,
|
||||
onError: (exception, StackTrace? stackTrace) {
|
||||
context.parser.onImageError?.call(exception, stackTrace);
|
||||
},
|
||||
);
|
||||
final widget = Image.memory(
|
||||
decodedImage,
|
||||
frameBuilder: (ctx, child, frame, _) {
|
||||
if (frame == null) {
|
||||
return Text(_alt(context.tree.element!.attributes.cast()) ?? "",
|
||||
style: context.style.generateTextStyle());
|
||||
}
|
||||
return child;
|
||||
},
|
||||
);
|
||||
return Builder(
|
||||
key: context.key,
|
||||
builder: (buildContext) {
|
||||
return GestureDetector(
|
||||
child: widget,
|
||||
onTap: () {
|
||||
if (MultipleTapGestureDetector.of(buildContext) != null) {
|
||||
MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
|
||||
}
|
||||
context.parser.onImageTap?.call(
|
||||
_src(context.tree.element!.attributes.cast())!
|
||||
.split("base64,")[1]
|
||||
.trim(),
|
||||
context,
|
||||
context.tree.element!.attributes.cast(),
|
||||
context.tree.element);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
CustomRender assetImageRender({
|
||||
double? width,
|
||||
double? height,
|
||||
}) =>
|
||||
CustomRender.widget(widget: (context, buildChildren) {
|
||||
final assetPath = _src(context.tree.element!.attributes.cast())!
|
||||
.replaceFirst('asset:', '');
|
||||
final widget = Image.asset(
|
||||
assetPath,
|
||||
width: width ?? _width(context.tree.element!.attributes.cast()),
|
||||
height: height ?? _height(context.tree.element!.attributes.cast()),
|
||||
frameBuilder: (ctx, child, frame, _) {
|
||||
if (frame == null) {
|
||||
return Text(_alt(context.tree.element!.attributes.cast()) ?? "",
|
||||
style: context.style.generateTextStyle());
|
||||
}
|
||||
return child;
|
||||
},
|
||||
);
|
||||
return Builder(
|
||||
key: context.key,
|
||||
builder: (buildContext) {
|
||||
return GestureDetector(
|
||||
child: widget,
|
||||
onTap: () {
|
||||
if (MultipleTapGestureDetector.of(buildContext) != null) {
|
||||
MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
|
||||
}
|
||||
context.parser.onImageTap?.call(
|
||||
assetPath,
|
||||
context,
|
||||
context.tree.element!.attributes.cast(),
|
||||
context.tree.element);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
CustomRender networkImageRender({
|
||||
Map<String, String>? headers,
|
||||
String Function(String?)? mapUrl,
|
||||
double? width,
|
||||
double? height,
|
||||
Widget Function(String?)? altWidget,
|
||||
Widget Function()? loadingWidget,
|
||||
}) =>
|
||||
CustomRender.widget(widget: (context, buildChildren) {
|
||||
final src = mapUrl?.call(_src(context.tree.element!.attributes.cast())) ??
|
||||
_src(context.tree.element!.attributes.cast())!;
|
||||
Completer<Size> completer = Completer();
|
||||
if (context.parser.cachedImageSizes[src] != null) {
|
||||
completer.complete(context.parser.cachedImageSizes[src]);
|
||||
} else {
|
||||
Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
|
||||
if (frame == null) {
|
||||
if (!completer.isCompleted) {
|
||||
completer.completeError("error");
|
||||
}
|
||||
return child;
|
||||
} else {
|
||||
return child;
|
||||
}
|
||||
});
|
||||
|
||||
ImageStreamListener? listener;
|
||||
listener =
|
||||
ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
|
||||
var myImage = imageInfo.image;
|
||||
Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
|
||||
if (!completer.isCompleted) {
|
||||
context.parser.cachedImageSizes[src] = size;
|
||||
completer.complete(size);
|
||||
image.image.resolve(ImageConfiguration()).removeListener(listener!);
|
||||
}
|
||||
}, onError: (object, stacktrace) {
|
||||
if (!completer.isCompleted) {
|
||||
completer.completeError(object);
|
||||
image.image.resolve(ImageConfiguration()).removeListener(listener!);
|
||||
}
|
||||
});
|
||||
|
||||
image.image.resolve(ImageConfiguration()).addListener(listener);
|
||||
}
|
||||
final attributes =
|
||||
context.tree.element!.attributes.cast<String, String>();
|
||||
final widget = FutureBuilder<Size>(
|
||||
future: completer.future,
|
||||
initialData: context.parser.cachedImageSizes[src],
|
||||
builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
|
||||
if (snapshot.hasData) {
|
||||
return Container(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
|
||||
maxHeight:
|
||||
(width ?? _width(attributes) ?? snapshot.data!.width) /
|
||||
_aspectRatio(attributes, snapshot)),
|
||||
child: AspectRatio(
|
||||
aspectRatio: _aspectRatio(attributes, snapshot),
|
||||
child: Image.network(
|
||||
src,
|
||||
headers: headers,
|
||||
width: width ?? _width(attributes) ?? snapshot.data!.width,
|
||||
height: height ?? _height(attributes),
|
||||
frameBuilder: (ctx, child, frame, _) {
|
||||
if (frame == null) {
|
||||
return altWidget?.call(_alt(attributes)) ??
|
||||
Text(_alt(attributes) ?? "",
|
||||
style: context.style.generateTextStyle());
|
||||
}
|
||||
return child;
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
} else if (snapshot.hasError) {
|
||||
return altWidget
|
||||
?.call(_alt(context.tree.element!.attributes.cast())) ??
|
||||
Text(_alt(context.tree.element!.attributes.cast()) ?? "",
|
||||
style: context.style.generateTextStyle());
|
||||
} else {
|
||||
return loadingWidget?.call() ?? const CircularProgressIndicator();
|
||||
}
|
||||
},
|
||||
);
|
||||
return Builder(
|
||||
key: context.key,
|
||||
builder: (buildContext) {
|
||||
return GestureDetector(
|
||||
child: widget,
|
||||
onTap: () {
|
||||
if (MultipleTapGestureDetector.of(buildContext) != null) {
|
||||
MultipleTapGestureDetector.of(buildContext)!.onTap?.call();
|
||||
}
|
||||
context.parser.onImageTap?.call(
|
||||
src,
|
||||
context,
|
||||
context.tree.element!.attributes.cast(),
|
||||
context.tree.element);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
CustomRender interactableElementRender({List<InlineSpan>? children}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => TextSpan(
|
||||
children: children ??
|
||||
(context.tree as InteractableElement)
|
||||
.children
|
||||
.map((tree) => context.parser.parseTree(context, tree))
|
||||
.map((childSpan) {
|
||||
return _getInteractableChildren(
|
||||
context,
|
||||
context.tree as InteractableElement,
|
||||
childSpan,
|
||||
context.style
|
||||
.generateTextStyle()
|
||||
.merge(childSpan.style));
|
||||
}).toList(),
|
||||
));
|
||||
|
||||
CustomRender layoutElementRender({Widget? child}) => CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => WidgetSpan(
|
||||
child: child ?? (context.tree as LayoutElement).toWidget(context)!,
|
||||
));
|
||||
|
||||
CustomRender verticalAlignRender(
|
||||
{double? verticalOffset, Style? style, List<InlineSpan>? children}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => WidgetSpan(
|
||||
child: Transform.translate(
|
||||
key: context.key,
|
||||
offset: Offset(
|
||||
0, verticalOffset ?? _getVerticalOffset(context.tree)),
|
||||
child: StyledText(
|
||||
textSpan: TextSpan(
|
||||
style: style?.generateTextStyle() ??
|
||||
context.style.generateTextStyle(),
|
||||
children: children ?? buildChildren.call(),
|
||||
),
|
||||
style: context.style,
|
||||
renderContext: context,
|
||||
),
|
||||
),
|
||||
));
|
||||
|
||||
CustomRender fallbackRender({Style? style, List<InlineSpan>? children}) =>
|
||||
CustomRender.inlineSpan(
|
||||
inlineSpan: (context, buildChildren) => TextSpan(
|
||||
style: style?.generateTextStyle() ??
|
||||
context.style.generateTextStyle(),
|
||||
children: context.tree.children
|
||||
.expand((tree) => [
|
||||
context.parser.parseTree(context, tree),
|
||||
if (tree.style.display == Display.BLOCK &&
|
||||
tree.element?.parent?.localName != "th" &&
|
||||
tree.element?.parent?.localName != "td" &&
|
||||
tree.element?.localName != "html" &&
|
||||
tree.element?.localName != "body")
|
||||
TextSpan(text: "\n"),
|
||||
])
|
||||
.toList(),
|
||||
));
|
||||
|
||||
final Map<CustomRenderMatcher, CustomRender> defaultRenders = {
|
||||
blockElementMatcher(): blockElementRender(),
|
||||
listElementMatcher(): listElementRender(),
|
||||
textContentElementMatcher(): textContentElementRender(),
|
||||
dataUriMatcher(): base64ImageRender(),
|
||||
assetUriMatcher(): assetImageRender(),
|
||||
networkSourceMatcher(): networkImageRender(),
|
||||
replacedElementMatcher(): replacedElementRender(),
|
||||
interactableElementMatcher(): interactableElementRender(),
|
||||
layoutElementMatcher(): layoutElementRender(),
|
||||
verticalAlignMatcher(): verticalAlignRender(),
|
||||
fallbackMatcher(): fallbackRender(),
|
||||
};
|
||||
|
||||
List<InlineSpan> _getListElementChildren(
|
||||
ListStylePosition? position, Function() buildChildren) {
|
||||
List<InlineSpan> children = buildChildren.call();
|
||||
if (position == ListStylePosition.INSIDE) {
|
||||
final tabSpan = WidgetSpan(
|
||||
child: Text("\t",
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(fontWeight: FontWeight.w400)),
|
||||
);
|
||||
children.insert(0, tabSpan);
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
InlineSpan _getInteractableChildren(RenderContext context,
|
||||
InteractableElement tree, InlineSpan childSpan, TextStyle childStyle) {
|
||||
if (childSpan is TextSpan) {
|
||||
return TextSpan(
|
||||
text: childSpan.text,
|
||||
children: childSpan.children
|
||||
?.map((e) => _getInteractableChildren(
|
||||
context, tree, e, childStyle.merge(childSpan.style)))
|
||||
.toList(),
|
||||
style: context.style.generateTextStyle().merge(childSpan.style == null
|
||||
? childStyle
|
||||
: childStyle.merge(childSpan.style)),
|
||||
semanticsLabel: childSpan.semanticsLabel,
|
||||
recognizer: TapGestureRecognizer()
|
||||
..onTap = context.parser.internalOnAnchorTap != null
|
||||
? () => context.parser.internalOnAnchorTap!(
|
||||
tree.href, context, tree.attributes, tree.element)
|
||||
: null,
|
||||
);
|
||||
} else {
|
||||
return WidgetSpan(
|
||||
child: MultipleTapGestureDetector(
|
||||
onTap: context.parser.internalOnAnchorTap != null
|
||||
? () => context.parser.internalOnAnchorTap!(
|
||||
tree.href, context, tree.attributes, tree.element)
|
||||
: null,
|
||||
child: GestureDetector(
|
||||
key: context.key,
|
||||
onTap: context.parser.internalOnAnchorTap != null
|
||||
? () => context.parser.internalOnAnchorTap!(
|
||||
tree.href, context, tree.attributes, tree.element)
|
||||
: null,
|
||||
child: (childSpan as WidgetSpan).child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
final _dataUriFormat = RegExp(
|
||||
"^(?<scheme>data):(?<mime>image\/[\\w\+\-\.]+)(?<encoding>;base64)?\,(?<data>.*)");
|
||||
|
||||
double _getVerticalOffset(StyledElement tree) {
|
||||
switch (tree.style.verticalAlign) {
|
||||
case VerticalAlign.SUB:
|
||||
return tree.style.fontSize!.size! / 2.5;
|
||||
case VerticalAlign.SUPER:
|
||||
return tree.style.fontSize!.size! / -2.5;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
String? _src(Map<String, String> attributes) {
|
||||
return attributes["src"];
|
||||
}
|
||||
|
||||
String? _alt(Map<String, String> attributes) {
|
||||
return attributes["alt"];
|
||||
}
|
||||
|
||||
double? _height(Map<String, String> attributes) {
|
||||
final heightString = attributes["height"];
|
||||
return heightString == null
|
||||
? heightString as double?
|
||||
: double.tryParse(heightString);
|
||||
}
|
||||
|
||||
double? _width(Map<String, String> attributes) {
|
||||
final widthString = attributes["width"];
|
||||
return widthString == null
|
||||
? widthString as double?
|
||||
: double.tryParse(widthString);
|
||||
}
|
||||
|
||||
double _aspectRatio(
|
||||
Map<String, String> attributes, AsyncSnapshot<Size> calculated) {
|
||||
final heightString = attributes["height"];
|
||||
final widthString = attributes["width"];
|
||||
if (heightString != null && widthString != null) {
|
||||
final height = double.tryParse(heightString);
|
||||
final width = double.tryParse(widthString);
|
||||
return height == null || width == null
|
||||
? calculated.data!.aspectRatio
|
||||
: width / height;
|
||||
}
|
||||
return calculated.data!.aspectRatio;
|
||||
}
|
||||
|
||||
extension ClampedEdgeInsets on EdgeInsetsGeometry {
|
||||
EdgeInsetsGeometry get nonNegative =>
|
||||
this.clamp(EdgeInsets.zero, const EdgeInsets.all(double.infinity));
|
||||
}
|
||||
@ -0,0 +1,371 @@
|
||||
library flutter_html;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import './custom_render.dart';
|
||||
import './html_parser.dart';
|
||||
import './src/html_elements.dart';
|
||||
import './style.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
|
||||
export './custom_render.dart';
|
||||
//export render context api
|
||||
export './html_parser.dart';
|
||||
//export render context api
|
||||
export './html_parser.dart';
|
||||
//export src for advanced custom render uses (e.g. casting context.tree)
|
||||
export './src/anchor.dart';
|
||||
export './src/interactable_element.dart';
|
||||
export './src/layout_element.dart';
|
||||
export './src/replaced_element.dart';
|
||||
export './src/styled_element.dart';
|
||||
//export style api
|
||||
export './style.dart';
|
||||
|
||||
class Html extends StatefulWidget {
|
||||
/// The `Html` widget takes HTML as input and displays a RichText
|
||||
/// tree of the parsed HTML content.
|
||||
///
|
||||
/// **Attributes**
|
||||
/// **data** *required* takes in a String of HTML data (required only for `Html` constructor).
|
||||
/// **document** *required* takes in a Document of HTML data (required only for `Html.fromDom` constructor).
|
||||
///
|
||||
/// **onLinkTap** This function is called whenever a link (`<a href>`)
|
||||
/// is tapped.
|
||||
/// **customRender** This function allows you to return your own widgets
|
||||
/// for existing or custom HTML tags.
|
||||
/// See [its wiki page](https://github.com/Sub6Resources/flutter_html/wiki/All-About-customRender) for more info.
|
||||
///
|
||||
/// **onImageError** This is called whenever an image fails to load or
|
||||
/// display on the page.
|
||||
///
|
||||
/// **shrinkWrap** This makes the Html widget take up only the width it
|
||||
/// needs and no more.
|
||||
///
|
||||
/// **onImageTap** This is called whenever an image is tapped.
|
||||
///
|
||||
/// **tagsList** Tag names in this array will be the only tags rendered. By default all supported HTML tags are rendered.
|
||||
///
|
||||
/// **style** Pass in the style information for the Html here.
|
||||
/// See [its wiki page](https://github.com/Sub6Resources/flutter_html/wiki/Style) for more info.
|
||||
Html({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
required this.data,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.customRenders = const {},
|
||||
this.onCssParseError,
|
||||
this.onImageError,
|
||||
this.shrinkWrap = false,
|
||||
this.onImageTap,
|
||||
this.tagsList = const [],
|
||||
this.style = const {},
|
||||
}) : documentElement = null,
|
||||
assert(data != null),
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
Html.fromDom({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
@required dom.Document? document,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.customRenders = const {},
|
||||
this.onCssParseError,
|
||||
this.onImageError,
|
||||
this.shrinkWrap = false,
|
||||
this.onImageTap,
|
||||
this.tagsList = const [],
|
||||
this.style = const {},
|
||||
}) : data = null,
|
||||
assert(document != null),
|
||||
this.documentElement = document!.documentElement,
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
Html.fromElement({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
@required this.documentElement,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.customRenders = const {},
|
||||
this.onCssParseError,
|
||||
this.onImageError,
|
||||
this.shrinkWrap = false,
|
||||
this.onImageTap,
|
||||
this.tagsList = const [],
|
||||
this.style = const {},
|
||||
}) : data = null,
|
||||
assert(documentElement != null),
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
/// A unique key for this Html widget to ensure uniqueness of anchors
|
||||
final GlobalKey _anchorKey;
|
||||
|
||||
/// The HTML data passed to the widget as a String
|
||||
final String? data;
|
||||
|
||||
/// The HTML data passed to the widget as a pre-processed [dom.Element]
|
||||
final dom.Element? documentElement;
|
||||
|
||||
/// A function that defines what to do when a link is tapped
|
||||
final OnTap? onLinkTap;
|
||||
|
||||
/// A function that defines what to do when an anchor link is tapped. When this value is set,
|
||||
/// the default anchor behaviour is overwritten.
|
||||
final OnTap? onAnchorTap;
|
||||
|
||||
/// A function that defines what to do when CSS fails to parse
|
||||
final OnCssParseError? onCssParseError;
|
||||
|
||||
/// A function that defines what to do when an image errors
|
||||
final ImageErrorListener? onImageError;
|
||||
|
||||
/// A parameter that should be set when the HTML widget is expected to be
|
||||
/// flexible
|
||||
final bool shrinkWrap;
|
||||
|
||||
/// A function that defines what to do when an image is tapped
|
||||
final OnTap? onImageTap;
|
||||
|
||||
/// A list of HTML tags that are the only tags that are rendered. By default, this list is empty and all supported HTML tags are rendered.
|
||||
final List<String> tagsList;
|
||||
|
||||
/// Either return a custom widget for specific node types or return null to
|
||||
/// fallback to the default rendering.
|
||||
final Map<CustomRenderMatcher, CustomRender> customRenders;
|
||||
|
||||
/// An API that allows you to override the default style for any HTML element
|
||||
final Map<String, Style> style;
|
||||
|
||||
static List<String> get tags => new List<String>.from(STYLED_ELEMENTS)
|
||||
..addAll(INTERACTABLE_ELEMENTS)
|
||||
..addAll(REPLACED_ELEMENTS)
|
||||
..addAll(LAYOUT_ELEMENTS)
|
||||
..addAll(TABLE_CELL_ELEMENTS)
|
||||
..addAll(TABLE_DEFINITION_ELEMENTS)
|
||||
..addAll(EXTERNAL_ELEMENTS);
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => _HtmlState();
|
||||
}
|
||||
|
||||
class _HtmlState extends State<Html> {
|
||||
late dom.Element documentElement;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
documentElement = widget.data != null
|
||||
? HtmlParser.parseHTML(widget.data!)
|
||||
: widget.documentElement!;
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(Html oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if ((widget.data != null && oldWidget.data != widget.data) ||
|
||||
oldWidget.documentElement != widget.documentElement) {
|
||||
documentElement = widget.data != null
|
||||
? HtmlParser.parseHTML(widget.data!)
|
||||
: widget.documentElement!;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: widget.shrinkWrap ? null : MediaQuery.of(context).size.width,
|
||||
child: HtmlParser(
|
||||
key: widget._anchorKey,
|
||||
htmlData: documentElement,
|
||||
onLinkTap: widget.onLinkTap,
|
||||
onAnchorTap: widget.onAnchorTap,
|
||||
onImageTap: widget.onImageTap,
|
||||
onCssParseError: widget.onCssParseError,
|
||||
onImageError: widget.onImageError,
|
||||
shrinkWrap: widget.shrinkWrap,
|
||||
selectable: false,
|
||||
style: widget.style,
|
||||
customRenders: {}
|
||||
..addAll(widget.customRenders)
|
||||
..addAll(defaultRenders),
|
||||
tagsList: widget.tagsList.isEmpty ? Html.tags : widget.tagsList,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SelectableHtml extends StatefulWidget {
|
||||
/// The `SelectableHtml` widget takes HTML as input and displays a RichText
|
||||
/// tree of the parsed HTML content (which is selectable)
|
||||
///
|
||||
/// **Attributes**
|
||||
/// **data** *required* takes in a String of HTML data (required only for `Html` constructor).
|
||||
/// **documentElement** *required* takes in a Element of HTML data (required only for `Html.fromDom` and `Html.fromElement` constructor).
|
||||
///
|
||||
/// **onLinkTap** This function is called whenever a link (`<a href>`)
|
||||
/// is tapped.
|
||||
///
|
||||
/// **onAnchorTap** This function is called whenever an anchor (#anchor-id)
|
||||
/// is tapped.
|
||||
///
|
||||
/// **tagsList** Tag names in this array will be the only tags rendered. By default, all tags that support selectable content are rendered.
|
||||
///
|
||||
/// **style** Pass in the style information for the Html here.
|
||||
/// See [its wiki page](https://github.com/Sub6Resources/flutter_html/wiki/Style) for more info.
|
||||
///
|
||||
/// **PLEASE NOTE**
|
||||
///
|
||||
/// There are a few caveats due to Flutter [#38474](https://github.com/flutter/flutter/issues/38474):
|
||||
///
|
||||
/// 1. The list of tags that can be rendered is significantly reduced.
|
||||
/// Key omissions include no support for images/video/audio, table, and ul/ol because they all require widgets and `WidgetSpan`s.
|
||||
///
|
||||
/// 2. No support for `customRender`, `customImageRender`, `onImageError`, `onImageTap`, `onMathError`, and `navigationDelegateForIframe`.
|
||||
///
|
||||
/// 3. Styling support is significantly reduced. Only text-related styling works
|
||||
/// (e.g. bold or italic), while container related styling (e.g. borders or padding/margin)
|
||||
/// do not work because we can't use the `ContainerSpan` class (it needs an enclosing `WidgetSpan`).
|
||||
|
||||
SelectableHtml({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
required this.data,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.onCssParseError,
|
||||
this.shrinkWrap = false,
|
||||
this.style = const {},
|
||||
this.customRenders = const {},
|
||||
this.tagsList = const [],
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : documentElement = null,
|
||||
assert(data != null),
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
SelectableHtml.fromDom({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
@required dom.Document? document,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.onCssParseError,
|
||||
this.shrinkWrap = false,
|
||||
this.style = const {},
|
||||
this.customRenders = const {},
|
||||
this.tagsList = const [],
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : data = null,
|
||||
assert(document != null),
|
||||
this.documentElement = document!.documentElement,
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
SelectableHtml.fromElement({
|
||||
Key? key,
|
||||
GlobalKey? anchorKey,
|
||||
@required this.documentElement,
|
||||
this.onLinkTap,
|
||||
this.onAnchorTap,
|
||||
this.onCssParseError,
|
||||
this.shrinkWrap = false,
|
||||
this.style = const {},
|
||||
this.customRenders = const {},
|
||||
this.tagsList = const [],
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : data = null,
|
||||
assert(documentElement != null),
|
||||
_anchorKey = anchorKey ?? GlobalKey(),
|
||||
super(key: key);
|
||||
|
||||
/// A unique key for this Html widget to ensure uniqueness of anchors
|
||||
final GlobalKey _anchorKey;
|
||||
|
||||
/// The HTML data passed to the widget as a String
|
||||
final String? data;
|
||||
|
||||
/// The HTML data passed to the widget as a pre-processed [dom.Element]
|
||||
final dom.Element? documentElement;
|
||||
|
||||
/// A function that defines what to do when a link is tapped
|
||||
final OnTap? onLinkTap;
|
||||
|
||||
/// A function that defines what to do when an anchor link is tapped. When this value is set,
|
||||
/// the default anchor behaviour is overwritten.
|
||||
final OnTap? onAnchorTap;
|
||||
|
||||
/// A function that defines what to do when CSS fails to parse
|
||||
final OnCssParseError? onCssParseError;
|
||||
|
||||
/// A parameter that should be set when the HTML widget is expected to be
|
||||
/// flexible
|
||||
final bool shrinkWrap;
|
||||
|
||||
/// A list of HTML tags that are the only tags that are rendered. By default, this list is empty and all supported HTML tags are rendered.
|
||||
final List<String> tagsList;
|
||||
|
||||
/// An API that allows you to override the default style for any HTML element
|
||||
final Map<String, Style> style;
|
||||
|
||||
/// Custom Selection controls allows you to override default toolbar and build custom toolbar
|
||||
/// options
|
||||
final TextSelectionControls? selectionControls;
|
||||
|
||||
/// Allows you to override the default scrollPhysics for [SelectableText.rich]
|
||||
final ScrollPhysics? scrollPhysics;
|
||||
|
||||
/// Either return a custom widget for specific node types or return null to
|
||||
/// fallback to the default rendering.
|
||||
final Map<CustomRenderMatcher, SelectableCustomRender> customRenders;
|
||||
|
||||
static List<String> get tags => new List<String>.from(SELECTABLE_ELEMENTS);
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => _SelectableHtmlState();
|
||||
}
|
||||
|
||||
class _SelectableHtmlState extends State<SelectableHtml> {
|
||||
late final dom.Element documentElement;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
documentElement = widget.data != null
|
||||
? HtmlParser.parseHTML(widget.data!)
|
||||
: widget.documentElement!;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: widget.shrinkWrap ? null : MediaQuery.of(context).size.width,
|
||||
child: HtmlParser(
|
||||
key: widget._anchorKey,
|
||||
htmlData: documentElement,
|
||||
onLinkTap: widget.onLinkTap,
|
||||
onAnchorTap: widget.onAnchorTap,
|
||||
onImageTap: null,
|
||||
onCssParseError: widget.onCssParseError,
|
||||
onImageError: null,
|
||||
shrinkWrap: widget.shrinkWrap,
|
||||
selectable: true,
|
||||
style: widget.style,
|
||||
customRenders: {}
|
||||
..addAll(widget.customRenders)
|
||||
..addAll(defaultRenders),
|
||||
tagsList:
|
||||
widget.tagsList.isEmpty ? SelectableHtml.tags : widget.tagsList,
|
||||
selectionControls: widget.selectionControls,
|
||||
scrollPhysics: widget.scrollPhysics,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,961 @@
|
||||
import 'dart:collection';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:csslib/parser.dart' as cssparser;
|
||||
import 'package:csslib/visitor.dart' as css;
|
||||
import 'package:flutter/material.dart';
|
||||
import './flutter_html.dart';
|
||||
import './src/css_parser.dart';
|
||||
import './src/html_elements.dart';
|
||||
import './src/utils.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
import 'package:html/parser.dart' as htmlparser;
|
||||
import 'package:numerus/numerus.dart';
|
||||
|
||||
typedef OnTap = void Function(
|
||||
String? url,
|
||||
RenderContext context,
|
||||
Map<String, String> attributes,
|
||||
dom.Element? element,
|
||||
);
|
||||
typedef OnCssParseError = String? Function(
|
||||
String css,
|
||||
List<cssparser.Message> errors,
|
||||
);
|
||||
|
||||
class HtmlParser extends StatelessWidget {
|
||||
final Key? key;
|
||||
final dom.Element htmlData;
|
||||
final OnTap? onLinkTap;
|
||||
final OnTap? onAnchorTap;
|
||||
final OnTap? onImageTap;
|
||||
final OnCssParseError? onCssParseError;
|
||||
final ImageErrorListener? onImageError;
|
||||
final bool shrinkWrap;
|
||||
final bool selectable;
|
||||
|
||||
final Map<String, Style> style;
|
||||
final Map<CustomRenderMatcher, CustomRender> customRenders;
|
||||
final List<String> tagsList;
|
||||
final OnTap? internalOnAnchorTap;
|
||||
final Html? root;
|
||||
final TextSelectionControls? selectionControls;
|
||||
final ScrollPhysics? scrollPhysics;
|
||||
|
||||
final Map<String, Size> cachedImageSizes = {};
|
||||
|
||||
HtmlParser({
|
||||
required this.key,
|
||||
required this.htmlData,
|
||||
required this.onLinkTap,
|
||||
required this.onAnchorTap,
|
||||
required this.onImageTap,
|
||||
required this.onCssParseError,
|
||||
required this.onImageError,
|
||||
required this.shrinkWrap,
|
||||
required this.selectable,
|
||||
required this.style,
|
||||
required this.customRenders,
|
||||
required this.tagsList,
|
||||
this.root,
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : this.internalOnAnchorTap = onAnchorTap != null
|
||||
? onAnchorTap
|
||||
: key != null
|
||||
? _handleAnchorTap(key, onLinkTap)
|
||||
: onLinkTap,
|
||||
super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Map<String, Map<String, List<css.Expression>>> declarations = _getExternalCssDeclarations(htmlData.getElementsByTagName("style"), onCssParseError);
|
||||
StyledElement lexedTree = lexDomTree(
|
||||
htmlData,
|
||||
customRenders.keys.toList(),
|
||||
tagsList,
|
||||
context,
|
||||
this,
|
||||
);
|
||||
StyledElement? externalCssStyledTree;
|
||||
if (declarations.isNotEmpty) {
|
||||
externalCssStyledTree = _applyExternalCss(declarations, lexedTree);
|
||||
}
|
||||
StyledElement inlineStyledTree = _applyInlineStyles(externalCssStyledTree ?? lexedTree, onCssParseError);
|
||||
StyledElement customStyledTree = _applyCustomStyles(style, inlineStyledTree);
|
||||
StyledElement cascadedStyledTree = _cascadeStyles(style, customStyledTree);
|
||||
StyledElement cleanedTree = cleanTree(cascadedStyledTree);
|
||||
InlineSpan parsedTree = parseTree(
|
||||
RenderContext(
|
||||
buildContext: context,
|
||||
parser: this,
|
||||
tree: cleanedTree,
|
||||
style: cleanedTree.style,
|
||||
),
|
||||
cleanedTree,
|
||||
);
|
||||
|
||||
// This is the final scaling that assumes any other StyledText instances are
|
||||
// using textScaleFactor = 1.0 (which is the default). This ensures the correct
|
||||
// scaling is used, but relies on https://github.com/flutter/flutter/pull/59711
|
||||
// to wrap everything when larger accessibility fonts are used.
|
||||
if (selectable) {
|
||||
return StyledText.selectable(
|
||||
textSpan: parsedTree as TextSpan,
|
||||
style: cleanedTree.style,
|
||||
textScaleFactor: MediaQuery.of(context).textScaleFactor,
|
||||
renderContext: RenderContext(
|
||||
buildContext: context,
|
||||
parser: this,
|
||||
tree: cleanedTree,
|
||||
style: cleanedTree.style,
|
||||
),
|
||||
selectionControls: selectionControls,
|
||||
scrollPhysics: scrollPhysics,
|
||||
);
|
||||
}
|
||||
return StyledText(
|
||||
textSpan: parsedTree,
|
||||
style: cleanedTree.style,
|
||||
textScaleFactor: MediaQuery.of(context).textScaleFactor,
|
||||
renderContext: RenderContext(
|
||||
buildContext: context,
|
||||
parser: this,
|
||||
tree: cleanedTree,
|
||||
style: cleanedTree.style,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// [parseHTML] converts a string of HTML to a DOM element using the dart `html` library.
|
||||
static dom.Element parseHTML(String data) {
|
||||
return htmlparser.parse(data).documentElement!;
|
||||
}
|
||||
|
||||
/// [parseCss] converts a string of CSS to a CSS stylesheet using the dart `csslib` library.
|
||||
static css.StyleSheet parseCss(String data) {
|
||||
return cssparser.parse(data);
|
||||
}
|
||||
|
||||
/// [lexDomTree] converts a DOM document to a simplified tree of [StyledElement]s.
|
||||
static StyledElement lexDomTree(
|
||||
dom.Element html,
|
||||
List<CustomRenderMatcher> customRenderMatchers,
|
||||
List<String> tagsList,
|
||||
BuildContext context,
|
||||
HtmlParser parser,
|
||||
) {
|
||||
StyledElement tree = StyledElement(
|
||||
name: "[Tree Root]",
|
||||
children: <StyledElement>[],
|
||||
node: html,
|
||||
style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2!),
|
||||
);
|
||||
|
||||
html.nodes.forEach((node) {
|
||||
tree.children.add(_recursiveLexer(
|
||||
node,
|
||||
customRenderMatchers,
|
||||
tagsList,
|
||||
context,
|
||||
parser,
|
||||
));
|
||||
});
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_recursiveLexer] is the recursive worker function for [lexDomTree].
|
||||
///
|
||||
/// It runs the parse functions of every type of
|
||||
/// element and returns a [StyledElement] tree representing the element.
|
||||
static StyledElement _recursiveLexer(
|
||||
dom.Node node,
|
||||
List<CustomRenderMatcher> customRenderMatchers,
|
||||
List<String> tagsList,
|
||||
BuildContext context,
|
||||
HtmlParser parser,
|
||||
) {
|
||||
List<StyledElement> children = <StyledElement>[];
|
||||
|
||||
node.nodes.forEach((childNode) {
|
||||
children.add(_recursiveLexer(
|
||||
childNode,
|
||||
customRenderMatchers,
|
||||
tagsList,
|
||||
context,
|
||||
parser,
|
||||
));
|
||||
});
|
||||
|
||||
//TODO(Sub6Resources): There's probably a more efficient way to look this up.
|
||||
if (node is dom.Element) {
|
||||
if (!tagsList.contains(node.localName)) {
|
||||
return EmptyContentElement();
|
||||
}
|
||||
if (STYLED_ELEMENTS.contains(node.localName)) {
|
||||
return parseStyledElement(node, children);
|
||||
} else if (INTERACTABLE_ELEMENTS.contains(node.localName)) {
|
||||
return parseInteractableElement(node, children);
|
||||
} else if (REPLACED_ELEMENTS.contains(node.localName)) {
|
||||
return parseReplacedElement(node, children);
|
||||
} else if (LAYOUT_ELEMENTS.contains(node.localName)) {
|
||||
return parseLayoutElement(node, children);
|
||||
} else if (TABLE_CELL_ELEMENTS.contains(node.localName)) {
|
||||
return parseTableCellElement(node, children);
|
||||
} else if (TABLE_DEFINITION_ELEMENTS.contains(node.localName)) {
|
||||
return parseTableDefinitionElement(node, children);
|
||||
} else {
|
||||
final StyledElement tree = parseStyledElement(node, children);
|
||||
for (final entry in customRenderMatchers) {
|
||||
if (entry.call(
|
||||
RenderContext(
|
||||
buildContext: context,
|
||||
parser: parser,
|
||||
tree: tree,
|
||||
style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2!),
|
||||
),
|
||||
)) {
|
||||
return tree;
|
||||
}
|
||||
}
|
||||
return EmptyContentElement();
|
||||
}
|
||||
} else if (node is dom.Text) {
|
||||
return TextContentElement(text: node.text, style: Style(), element: node.parent, node: node);
|
||||
} else {
|
||||
return EmptyContentElement();
|
||||
}
|
||||
}
|
||||
|
||||
static Map<String, Map<String, List<css.Expression>>> _getExternalCssDeclarations(List<dom.Element> styles, OnCssParseError? errorHandler) {
|
||||
String fullCss = "";
|
||||
for (final e in styles) {
|
||||
fullCss = fullCss + e.innerHtml;
|
||||
}
|
||||
if (fullCss.isNotEmpty) {
|
||||
final declarations = parseExternalCss(fullCss, errorHandler);
|
||||
return declarations;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
static StyledElement _applyExternalCss(Map<String, Map<String, List<css.Expression>>> declarations, StyledElement tree) {
|
||||
declarations.forEach((key, style) {
|
||||
try {
|
||||
if (tree.matchesSelector(key)) {
|
||||
tree.style = tree.style.merge(declarationsToStyle(style));
|
||||
}
|
||||
} catch (_) {}
|
||||
});
|
||||
|
||||
tree.children.forEach((e) => _applyExternalCss(declarations, e));
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
static StyledElement _applyInlineStyles(StyledElement tree, OnCssParseError? errorHandler) {
|
||||
if (tree.attributes.containsKey("style")) {
|
||||
final newStyle = inlineCssToStyle(tree.attributes['style'], errorHandler);
|
||||
if (newStyle != null) {
|
||||
tree.style = tree.style.merge(newStyle);
|
||||
}
|
||||
}
|
||||
|
||||
tree.children.forEach((e) => _applyInlineStyles(e, errorHandler));
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [applyCustomStyles] applies the [Style] objects passed into the [Html]
|
||||
/// widget onto the [StyledElement] tree, no cascading of styles is done at this point.
|
||||
static StyledElement _applyCustomStyles(Map<String, Style> style, StyledElement tree) {
|
||||
style.forEach((key, style) {
|
||||
try {
|
||||
if (tree.matchesSelector(key)) {
|
||||
tree.style = tree.style.merge(style);
|
||||
}
|
||||
} catch (_) {}
|
||||
});
|
||||
tree.children.forEach((e) => _applyCustomStyles(style, e));
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_cascadeStyles] cascades all of the inherited styles down the tree, applying them to each
|
||||
/// child that doesn't specify a different style.
|
||||
static StyledElement _cascadeStyles(Map<String, Style> style, StyledElement tree) {
|
||||
tree.children.forEach((child) {
|
||||
child.style = tree.style.copyOnlyInherited(child.style);
|
||||
_cascadeStyles(style, child);
|
||||
});
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [cleanTree] optimizes the [StyledElement] tree so all [BlockElement]s are
|
||||
/// on the first level, redundant levels are collapsed, empty elements are
|
||||
/// removed, and specialty elements are processed.
|
||||
static StyledElement cleanTree(StyledElement tree) {
|
||||
tree = _processInternalWhitespace(tree);
|
||||
tree = _processInlineWhitespace(tree);
|
||||
tree = _removeEmptyElements(tree);
|
||||
tree = _processListCharacters(tree);
|
||||
tree = _processBeforesAndAfters(tree);
|
||||
tree = _collapseMargins(tree);
|
||||
tree = _processFontSize(tree);
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [parseTree] converts a tree of [StyledElement]s to an [InlineSpan] tree.
|
||||
///
|
||||
/// [parseTree] is responsible for handling the [customRenders] parameter and
|
||||
/// deciding what different `Style.display` options look like as Widgets.
|
||||
InlineSpan parseTree(RenderContext context, StyledElement tree) {
|
||||
// Merge this element's style into the context so that children
|
||||
// inherit the correct style
|
||||
RenderContext newContext = RenderContext(
|
||||
buildContext: context.buildContext,
|
||||
parser: this,
|
||||
tree: tree,
|
||||
style: context.style.copyOnlyInherited(tree.style),
|
||||
key: AnchorKey.of(key, tree),
|
||||
);
|
||||
|
||||
for (final entry in customRenders.keys) {
|
||||
if (entry.call(newContext)) {
|
||||
final buildChildren = () => tree.children.map((tree) => parseTree(newContext, tree)).toList();
|
||||
if (newContext.parser.selectable && customRenders[entry] is SelectableCustomRender) {
|
||||
final selectableBuildChildren = () => tree.children.map((tree) => parseTree(newContext, tree) as TextSpan).toList();
|
||||
return (customRenders[entry] as SelectableCustomRender).textSpan.call(newContext, selectableBuildChildren);
|
||||
}
|
||||
if (newContext.parser.selectable) {
|
||||
return customRenders[entry]!.inlineSpan!.call(newContext, buildChildren) as TextSpan;
|
||||
}
|
||||
if (customRenders[entry]?.inlineSpan != null) {
|
||||
return customRenders[entry]!.inlineSpan!.call(newContext, buildChildren);
|
||||
}
|
||||
return WidgetSpan(
|
||||
child: ContainerSpan(
|
||||
newContext: newContext,
|
||||
style: tree.style,
|
||||
shrinkWrap: newContext.parser.shrinkWrap,
|
||||
child: customRenders[entry]!.widget!.call(newContext, buildChildren),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
return WidgetSpan(child: Container(height: 0, width: 0));
|
||||
}
|
||||
|
||||
static OnTap _handleAnchorTap(Key key, OnTap? onLinkTap) =>
|
||||
(String? url, RenderContext context, Map<String, String> attributes, dom.Element? element) {
|
||||
if (url?.startsWith("#") == true) {
|
||||
final anchorContext = AnchorKey.forId(key, url!.substring(1))?.currentContext;
|
||||
if (anchorContext != null) {
|
||||
Scrollable.ensureVisible(anchorContext);
|
||||
}
|
||||
return;
|
||||
}
|
||||
onLinkTap?.call(url, context, attributes, element);
|
||||
};
|
||||
|
||||
/// [processWhitespace] removes unnecessary whitespace from the StyledElement tree.
|
||||
///
|
||||
/// The criteria for determining which whitespace is replaceable is outlined
|
||||
/// at https://www.w3.org/TR/css-text-3/
|
||||
/// and summarized at https://medium.com/@patrickbrosset/when-does-white-space-matter-in-html-b90e8a7cdd33
|
||||
static StyledElement _processInternalWhitespace(StyledElement tree) {
|
||||
if ((tree.style.whiteSpace ?? WhiteSpace.NORMAL) == WhiteSpace.PRE) {
|
||||
// Preserve this whitespace
|
||||
} else if (tree is TextContentElement) {
|
||||
tree.text = _removeUnnecessaryWhitespace(tree.text!);
|
||||
} else {
|
||||
tree.children.forEach(_processInternalWhitespace);
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_processInlineWhitespace] is responsible for removing redundant whitespace
|
||||
/// between and among inline elements. It does so by creating a boolean [Context]
|
||||
/// and passing it to the [_processInlineWhitespaceRecursive] function.
|
||||
static StyledElement _processInlineWhitespace(StyledElement tree) {
|
||||
tree = _processInlineWhitespaceRecursive(tree, Context(false));
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_processInlineWhitespaceRecursive] analyzes the whitespace between and among different
|
||||
/// inline elements, and replaces any instance of two or more spaces with a single space, according
|
||||
/// to the w3's HTML whitespace processing specification linked to above.
|
||||
static StyledElement _processInlineWhitespaceRecursive(
|
||||
StyledElement tree,
|
||||
Context<bool> keepLeadingSpace,
|
||||
) {
|
||||
if (tree is TextContentElement) {
|
||||
/// initialize indices to negative numbers to make conditionals a little easier
|
||||
int textIndex = -1;
|
||||
int elementIndex = -1;
|
||||
/// initialize parent after to a whitespace to account for elements that are
|
||||
/// the last child in the list of elements
|
||||
String parentAfterText = " ";
|
||||
/// find the index of the text in the current tree
|
||||
if ((tree.element?.nodes.length ?? 0) >= 1) {
|
||||
textIndex = tree.element?.nodes.indexWhere((element) => element == tree.node) ?? -1;
|
||||
}
|
||||
/// get the parent nodes
|
||||
dom.NodeList? parentNodes = tree.element?.parent?.nodes;
|
||||
/// find the index of the tree itself in the parent nodes
|
||||
if ((parentNodes?.length ?? 0) >= 1) {
|
||||
elementIndex = parentNodes?.indexWhere((element) => element == tree.element) ?? -1;
|
||||
}
|
||||
/// if the tree is any node except the last node in the node list and the
|
||||
/// next node in the node list is a text node, then get its text. Otherwise
|
||||
/// the next node will be a [dom.Element], so keep unwrapping that until
|
||||
/// we get the underlying text node, and finally get its text.
|
||||
if (elementIndex < (parentNodes?.length ?? 1) - 1 && parentNodes?[elementIndex + 1] is dom.Text) {
|
||||
parentAfterText = parentNodes?[elementIndex + 1].text ?? " ";
|
||||
} else if (elementIndex < (parentNodes?.length ?? 1) - 1) {
|
||||
var parentAfter = parentNodes?[elementIndex + 1];
|
||||
while (parentAfter is dom.Element) {
|
||||
if (parentAfter.nodes.isNotEmpty) {
|
||||
parentAfter = parentAfter.nodes.first;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
parentAfterText = parentAfter?.text ?? " ";
|
||||
}
|
||||
/// If the text is the first element in the current tree node list, it
|
||||
/// starts with a whitespace, it isn't a line break, either the
|
||||
/// whitespace is unnecessary or it is a block element, and either it is
|
||||
/// first element in the parent node list or the previous element
|
||||
/// in the parent node list ends with a whitespace, delete it.
|
||||
///
|
||||
/// We should also delete the whitespace at any point in the node list
|
||||
/// if the previous element is a <br> because that tag makes the element
|
||||
/// act like a block element.
|
||||
if (textIndex < 1
|
||||
&& tree.text!.startsWith(' ')
|
||||
&& tree.element?.localName != "br"
|
||||
&& (!keepLeadingSpace.data
|
||||
|| tree.style.display == Display.BLOCK)
|
||||
&& (elementIndex < 1
|
||||
|| (elementIndex >= 1
|
||||
&& parentNodes?[elementIndex - 1] is dom.Text
|
||||
&& parentNodes![elementIndex - 1].text!.endsWith(" ")))
|
||||
) {
|
||||
tree.text = tree.text!.replaceFirst(' ', '');
|
||||
} else if (textIndex >= 1
|
||||
&& tree.text!.startsWith(' ')
|
||||
&& tree.element?.nodes[textIndex - 1] is dom.Element
|
||||
&& (tree.element?.nodes[textIndex - 1] as dom.Element).localName == "br"
|
||||
) {
|
||||
tree.text = tree.text!.replaceFirst(' ', '');
|
||||
}
|
||||
/// If the text is the last element in the current tree node list, it isn't
|
||||
/// a line break, and the next text node starts with a whitespace,
|
||||
/// update the [Context] to signify to that next text node whether it should
|
||||
/// keep its whitespace. This is based on whether the current text ends with a
|
||||
/// whitespace.
|
||||
if (textIndex == (tree.element?.nodes.length ?? 1) - 1
|
||||
&& tree.element?.localName != "br"
|
||||
&& parentAfterText.startsWith(' ')
|
||||
) {
|
||||
keepLeadingSpace.data = !tree.text!.endsWith(' ');
|
||||
}
|
||||
}
|
||||
|
||||
tree.children.forEach((e) => _processInlineWhitespaceRecursive(e, keepLeadingSpace));
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [removeUnnecessaryWhitespace] removes "unnecessary" white space from the given String.
|
||||
///
|
||||
/// The steps for removing this whitespace are as follows:
|
||||
/// (1) Remove any whitespace immediately preceding or following a newline.
|
||||
/// (2) Replace all newlines with a space
|
||||
/// (3) Replace all tabs with a space
|
||||
/// (4) Replace any instances of two or more spaces with a single space.
|
||||
static String _removeUnnecessaryWhitespace(String text) {
|
||||
return text
|
||||
.replaceAll(RegExp("\ *(?=\n)"), "\n")
|
||||
.replaceAll(RegExp("(?:\n)\ *"), "\n")
|
||||
.replaceAll("\n", " ")
|
||||
.replaceAll("\t", " ")
|
||||
.replaceAll(RegExp(" {2,}"), " ");
|
||||
}
|
||||
|
||||
/// [processListCharacters] adds list characters to the front of all list items.
|
||||
///
|
||||
/// The function uses the [_processListCharactersRecursive] function to do most of its work.
|
||||
static StyledElement _processListCharacters(StyledElement tree) {
|
||||
final olStack = ListQueue<Context>();
|
||||
tree = _processListCharactersRecursive(tree, olStack);
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_processListCharactersRecursive] uses a Stack of integers to properly number and
|
||||
/// bullet all list items according to the [ListStyleType] they have been given.
|
||||
static StyledElement _processListCharactersRecursive(
|
||||
StyledElement tree, ListQueue<Context> olStack) {
|
||||
if (tree.style.listStylePosition == null) {
|
||||
tree.style.listStylePosition = ListStylePosition.OUTSIDE;
|
||||
}
|
||||
if (tree.name == 'ol' && tree.style.listStyleType != null && tree.style.listStyleType!.type == "marker") {
|
||||
switch (tree.style.listStyleType!) {
|
||||
case ListStyleType.LOWER_LATIN:
|
||||
case ListStyleType.LOWER_ALPHA:
|
||||
case ListStyleType.UPPER_LATIN:
|
||||
case ListStyleType.UPPER_ALPHA:
|
||||
olStack.add(Context<String>('a'));
|
||||
if ((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start']!) : null) != null) {
|
||||
var start = int.tryParse(tree.attributes['start']!) ?? 1;
|
||||
var x = 1;
|
||||
while (x < start) {
|
||||
olStack.last.data = olStack.last.data.toString().nextLetter();
|
||||
x++;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
olStack.add(Context<int>((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start'] ?? "") ?? 1 : 1) - 1));
|
||||
break;
|
||||
}
|
||||
} else if (tree.style.display == Display.LIST_ITEM && tree.style.listStyleType != null && tree.style.listStyleType!.type == "widget") {
|
||||
tree.style.markerContent = tree.style.listStyleType!.widget!;
|
||||
} else if (tree.style.display == Display.LIST_ITEM && tree.style.listStyleType != null && tree.style.listStyleType!.type == "image") {
|
||||
tree.style.markerContent = Image.network(tree.style.listStyleType!.text);
|
||||
} else if (tree.style.display == Display.LIST_ITEM && tree.style.listStyleType != null) {
|
||||
String marker = "";
|
||||
switch (tree.style.listStyleType!) {
|
||||
case ListStyleType.NONE:
|
||||
break;
|
||||
case ListStyleType.CIRCLE:
|
||||
marker = '○';
|
||||
break;
|
||||
case ListStyleType.SQUARE:
|
||||
marker = '■';
|
||||
break;
|
||||
case ListStyleType.DISC:
|
||||
marker = '•';
|
||||
break;
|
||||
case ListStyleType.DECIMAL:
|
||||
if (olStack.isEmpty) {
|
||||
olStack.add(Context<int>((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start'] ?? "") ?? 1 : 1) - 1));
|
||||
}
|
||||
olStack.last.data += 1;
|
||||
marker = '${olStack.last.data}.';
|
||||
break;
|
||||
case ListStyleType.LOWER_LATIN:
|
||||
case ListStyleType.LOWER_ALPHA:
|
||||
if (olStack.isEmpty) {
|
||||
olStack.add(Context<String>('a'));
|
||||
if ((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start']!) : null) != null) {
|
||||
var start = int.tryParse(tree.attributes['start']!) ?? 1;
|
||||
var x = 1;
|
||||
while (x < start) {
|
||||
olStack.last.data = olStack.last.data.toString().nextLetter();
|
||||
x++;
|
||||
}
|
||||
}
|
||||
}
|
||||
marker = olStack.last.data.toString() + ".";
|
||||
olStack.last.data = olStack.last.data.toString().nextLetter();
|
||||
break;
|
||||
case ListStyleType.UPPER_LATIN:
|
||||
case ListStyleType.UPPER_ALPHA:
|
||||
if (olStack.isEmpty) {
|
||||
olStack.add(Context<String>('a'));
|
||||
if ((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start']!) : null) != null) {
|
||||
var start = int.tryParse(tree.attributes['start']!) ?? 1;
|
||||
var x = 1;
|
||||
while (x < start) {
|
||||
olStack.last.data = olStack.last.data.toString().nextLetter();
|
||||
x++;
|
||||
}
|
||||
}
|
||||
}
|
||||
marker = olStack.last.data.toString().toUpperCase() + ".";
|
||||
olStack.last.data = olStack.last.data.toString().nextLetter();
|
||||
break;
|
||||
case ListStyleType.LOWER_ROMAN:
|
||||
if (olStack.isEmpty) {
|
||||
olStack.add(Context<int>((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start'] ?? "") ?? 1 : 1) - 1));
|
||||
}
|
||||
olStack.last.data += 1;
|
||||
if (olStack.last.data <= 0) {
|
||||
marker = '${olStack.last.data}.';
|
||||
} else {
|
||||
marker = (olStack.last.data as int).toRomanNumeralString()!.toLowerCase() + ".";
|
||||
}
|
||||
break;
|
||||
case ListStyleType.UPPER_ROMAN:
|
||||
if (olStack.isEmpty) {
|
||||
olStack.add(Context<int>((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start'] ?? "") ?? 1 : 1) - 1));
|
||||
}
|
||||
olStack.last.data += 1;
|
||||
if (olStack.last.data <= 0) {
|
||||
marker = '${olStack.last.data}.';
|
||||
} else {
|
||||
marker = (olStack.last.data as int).toRomanNumeralString()! + ".";
|
||||
}
|
||||
break;
|
||||
}
|
||||
tree.style.markerContent = Text(
|
||||
marker,
|
||||
textAlign: TextAlign.right,
|
||||
style: tree.style.generateTextStyle(),
|
||||
);
|
||||
}
|
||||
|
||||
tree.children.forEach((e) => _processListCharactersRecursive(e, olStack));
|
||||
|
||||
if (tree.name == 'ol') {
|
||||
olStack.removeLast();
|
||||
}
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_processBeforesAndAfters] adds text content to the beginning and end of
|
||||
/// the list of the trees children according to the `before` and `after` Style
|
||||
/// properties.
|
||||
static StyledElement _processBeforesAndAfters(StyledElement tree) {
|
||||
if (tree.style.before != null) {
|
||||
tree.children.insert(
|
||||
0, TextContentElement(text: tree.style.before, style: tree.style.copyWith(beforeAfterNull: true, display: Display.INLINE)));
|
||||
}
|
||||
if (tree.style.after != null) {
|
||||
tree.children
|
||||
.add(TextContentElement(text: tree.style.after, style: tree.style.copyWith(beforeAfterNull: true, display: Display.INLINE)));
|
||||
}
|
||||
|
||||
tree.children.forEach(_processBeforesAndAfters);
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [collapseMargins] follows the specifications at https://www.w3.org/TR/CSS21/box.html#collapsing-margins
|
||||
/// for collapsing margins of block-level boxes. This prevents the doubling of margins between
|
||||
/// boxes, and makes for a more correct rendering of the html content.
|
||||
///
|
||||
/// Paraphrased from the CSS specification:
|
||||
/// Margins are collapsed if both belong to vertically-adjacent box edges, i.e form one of the following pairs:
|
||||
/// (1) Top margin of a box and top margin of its first in-flow child
|
||||
/// (2) Bottom margin of a box and top margin of its next in-flow following sibling
|
||||
/// (3) Bottom margin of a last in-flow child and bottom margin of its parent (if the parent's height is not explicit)
|
||||
/// (4) Top and Bottom margins of a box with a height of zero or no in-flow children.
|
||||
static StyledElement _collapseMargins(StyledElement tree) {
|
||||
//Short circuit if we've reached a leaf of the tree
|
||||
if (tree.children.isEmpty) {
|
||||
// Handle case (4) from above.
|
||||
if ((tree.style.height ?? 0) == 0) {
|
||||
tree.style.margin = EdgeInsets.zero;
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
//Collapsing should be depth-first.
|
||||
tree.children.forEach(_collapseMargins);
|
||||
|
||||
//The root boxes do not collapse.
|
||||
if (tree.name == '[Tree Root]' || tree.name == 'html') {
|
||||
return tree;
|
||||
}
|
||||
|
||||
// Handle case (1) from above.
|
||||
// Top margins cannot collapse if the element has padding
|
||||
if ((tree.style.padding?.top ?? 0) == 0) {
|
||||
final parentTop = tree.style.margin?.top ?? 0;
|
||||
final firstChildTop = tree.children.first.style.margin?.top ?? 0;
|
||||
final newOuterMarginTop = max(parentTop, firstChildTop);
|
||||
|
||||
// Set the parent's margin
|
||||
if (tree.style.margin == null) {
|
||||
tree.style.margin = EdgeInsets.only(top: newOuterMarginTop);
|
||||
} else {
|
||||
tree.style.margin = tree.style.margin!.copyWith(top: newOuterMarginTop);
|
||||
}
|
||||
|
||||
// And remove the child's margin
|
||||
if (tree.children.first.style.margin == null) {
|
||||
tree.children.first.style.margin = EdgeInsets.zero;
|
||||
} else {
|
||||
tree.children.first.style.margin =
|
||||
tree.children.first.style.margin!.copyWith(top: 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle case (3) from above.
|
||||
// Bottom margins cannot collapse if the element has padding
|
||||
if ((tree.style.padding?.bottom ?? 0) == 0) {
|
||||
final parentBottom = tree.style.margin?.bottom ?? 0;
|
||||
final lastChildBottom = tree.children.last.style.margin?.bottom ?? 0;
|
||||
final newOuterMarginBottom = max(parentBottom, lastChildBottom);
|
||||
|
||||
// Set the parent's margin
|
||||
if (tree.style.margin == null) {
|
||||
tree.style.margin = EdgeInsets.only(bottom: newOuterMarginBottom);
|
||||
} else {
|
||||
tree.style.margin =
|
||||
tree.style.margin!.copyWith(bottom: newOuterMarginBottom);
|
||||
}
|
||||
|
||||
// And remove the child's margin
|
||||
if (tree.children.last.style.margin == null) {
|
||||
tree.children.last.style.margin = EdgeInsets.zero;
|
||||
} else {
|
||||
tree.children.last.style.margin =
|
||||
tree.children.last.style.margin!.copyWith(bottom: 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle case (2) from above.
|
||||
if (tree.children.length > 1) {
|
||||
for (int i = 1; i < tree.children.length; i++) {
|
||||
final previousSiblingBottom =
|
||||
tree.children[i - 1].style.margin?.bottom ?? 0;
|
||||
final thisTop = tree.children[i].style.margin?.top ?? 0;
|
||||
final newInternalMargin = max(previousSiblingBottom, thisTop) / 2;
|
||||
|
||||
if (tree.children[i - 1].style.margin == null) {
|
||||
tree.children[i - 1].style.margin =
|
||||
EdgeInsets.only(bottom: newInternalMargin);
|
||||
} else {
|
||||
tree.children[i - 1].style.margin = tree.children[i - 1].style.margin!
|
||||
.copyWith(bottom: newInternalMargin);
|
||||
}
|
||||
|
||||
if (tree.children[i].style.margin == null) {
|
||||
tree.children[i].style.margin =
|
||||
EdgeInsets.only(top: newInternalMargin);
|
||||
} else {
|
||||
tree.children[i].style.margin =
|
||||
tree.children[i].style.margin!.copyWith(top: newInternalMargin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [removeEmptyElements] recursively removes empty elements.
|
||||
///
|
||||
/// An empty element is any [EmptyContentElement], any empty [TextContentElement],
|
||||
/// or any block-level [TextContentElement] that contains only whitespace and doesn't follow
|
||||
/// a block element or a line break.
|
||||
static StyledElement _removeEmptyElements(StyledElement tree) {
|
||||
List<StyledElement> toRemove = <StyledElement>[];
|
||||
bool lastChildBlock = true;
|
||||
tree.children.forEachIndexed((index, child) {
|
||||
if (child is EmptyContentElement || child is EmptyLayoutElement) {
|
||||
toRemove.add(child);
|
||||
} else if (child is TextContentElement
|
||||
&& ((tree.name == "body"
|
||||
&& (index == 0
|
||||
|| index + 1 == tree.children.length
|
||||
|| tree.children[index - 1].style.display == Display.BLOCK
|
||||
|| tree.children[index + 1].style.display == Display.BLOCK))
|
||||
|| tree.name == "ul")
|
||||
&& child.text!.replaceAll(' ', '').isEmpty) {
|
||||
toRemove.add(child);
|
||||
} else if (child is TextContentElement
|
||||
&& child.text!.isEmpty
|
||||
&& child.style.whiteSpace != WhiteSpace.PRE) {
|
||||
toRemove.add(child);
|
||||
} else if (child is TextContentElement &&
|
||||
child.style.whiteSpace != WhiteSpace.PRE &&
|
||||
tree.style.display == Display.BLOCK &&
|
||||
child.text!.isEmpty &&
|
||||
lastChildBlock) {
|
||||
toRemove.add(child);
|
||||
} else if (child.style.display == Display.NONE) {
|
||||
toRemove.add(child);
|
||||
} else {
|
||||
_removeEmptyElements(child);
|
||||
}
|
||||
|
||||
// This is used above to check if the previous element is a block element or a line break.
|
||||
lastChildBlock = (child.style.display == Display.BLOCK ||
|
||||
child.style.display == Display.LIST_ITEM ||
|
||||
(child is TextContentElement && child.text == '\n'));
|
||||
});
|
||||
tree.children.removeWhere((element) => toRemove.contains(element));
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/// [_processFontSize] changes percent-based font sizes (negative numbers in this implementation)
|
||||
/// to pixel-based font sizes.
|
||||
static StyledElement _processFontSize(StyledElement tree) {
|
||||
double? parentFontSize = tree.style.fontSize?.size ?? FontSize.medium.size;
|
||||
|
||||
tree.children.forEach((child) {
|
||||
if ((child.style.fontSize?.size ?? parentFontSize)! < 0) {
|
||||
child.style.fontSize =
|
||||
FontSize(parentFontSize! * -child.style.fontSize!.size!);
|
||||
}
|
||||
|
||||
_processFontSize(child);
|
||||
});
|
||||
return tree;
|
||||
}
|
||||
}
|
||||
|
||||
/// The [RenderContext] is available when parsing the tree. It contains information
|
||||
/// about the [BuildContext] of the `Html` widget, contains the configuration available
|
||||
/// in the [HtmlParser], and contains information about the [Style] of the current
|
||||
/// tree root.
|
||||
class RenderContext {
|
||||
final BuildContext buildContext;
|
||||
final HtmlParser parser;
|
||||
final StyledElement tree;
|
||||
final Style style;
|
||||
final AnchorKey? key;
|
||||
|
||||
RenderContext({
|
||||
required this.buildContext,
|
||||
required this.parser,
|
||||
required this.tree,
|
||||
required this.style,
|
||||
this.key,
|
||||
});
|
||||
}
|
||||
|
||||
/// A [ContainerSpan] is a widget with an [InlineSpan] child or children.
|
||||
///
|
||||
/// A [ContainerSpan] can have a border, background color, height, width, padding, and margin
|
||||
/// and can represent either an INLINE or BLOCK-level element.
|
||||
class ContainerSpan extends StatelessWidget {
|
||||
final AnchorKey? key;
|
||||
final Widget? child;
|
||||
final List<InlineSpan>? children;
|
||||
final Style style;
|
||||
final RenderContext newContext;
|
||||
final bool shrinkWrap;
|
||||
|
||||
ContainerSpan({
|
||||
this.key,
|
||||
this.child,
|
||||
this.children,
|
||||
required this.style,
|
||||
required this.newContext,
|
||||
this.shrinkWrap = false,
|
||||
}): super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext _) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
border: style.border,
|
||||
color: style.backgroundColor,
|
||||
),
|
||||
height: style.height,
|
||||
width: style.width,
|
||||
padding: style.padding?.nonNegative,
|
||||
margin: style.margin?.nonNegative,
|
||||
alignment: shrinkWrap ? null : style.alignment,
|
||||
child: child ??
|
||||
StyledText(
|
||||
textSpan: TextSpan(
|
||||
style: newContext.style.generateTextStyle(),
|
||||
children: children,
|
||||
),
|
||||
style: newContext.style,
|
||||
renderContext: newContext,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class StyledText extends StatelessWidget {
|
||||
final InlineSpan textSpan;
|
||||
final Style style;
|
||||
final double textScaleFactor;
|
||||
final RenderContext renderContext;
|
||||
final AnchorKey? key;
|
||||
final bool _selectable;
|
||||
final TextSelectionControls? selectionControls;
|
||||
final ScrollPhysics? scrollPhysics;
|
||||
|
||||
const StyledText({
|
||||
required this.textSpan,
|
||||
required this.style,
|
||||
this.textScaleFactor = 1.0,
|
||||
required this.renderContext,
|
||||
this.key,
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : _selectable = false,
|
||||
super(key: key);
|
||||
|
||||
const StyledText.selectable({
|
||||
required TextSpan textSpan,
|
||||
required this.style,
|
||||
this.textScaleFactor = 1.0,
|
||||
required this.renderContext,
|
||||
this.key,
|
||||
this.selectionControls,
|
||||
this.scrollPhysics,
|
||||
}) : textSpan = textSpan,
|
||||
_selectable = true,
|
||||
super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (_selectable) {
|
||||
return SelectableText.rich(
|
||||
textSpan as TextSpan,
|
||||
style: style.generateTextStyle(),
|
||||
textAlign: style.textAlign,
|
||||
textDirection: style.direction,
|
||||
textScaleFactor: textScaleFactor,
|
||||
maxLines: style.maxLines,
|
||||
selectionControls: selectionControls,
|
||||
scrollPhysics: scrollPhysics,
|
||||
);
|
||||
}
|
||||
return SizedBox(
|
||||
width: consumeExpandedBlock(style.display, renderContext),
|
||||
child: Text.rich(
|
||||
textSpan,
|
||||
style: style.generateTextStyle(),
|
||||
textAlign: style.textAlign,
|
||||
textDirection: style.direction,
|
||||
textScaleFactor: textScaleFactor,
|
||||
maxLines: style.maxLines,
|
||||
overflow: style.textOverflow,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
double? consumeExpandedBlock(Display? display, RenderContext context) {
|
||||
if ((display == Display.BLOCK || display == Display.LIST_ITEM) && !renderContext.parser.shrinkWrap) {
|
||||
return double.infinity;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
extension IterateLetters on String {
|
||||
String nextLetter() {
|
||||
String s = this.toLowerCase();
|
||||
if (s == "z") {
|
||||
return String.fromCharCode(s.codeUnitAt(0) - 25) + String.fromCharCode(s.codeUnitAt(0) - 25); // AA or aa
|
||||
} else {
|
||||
var lastChar = s.substring(s.length - 1);
|
||||
var sub = s.substring(0, s.length - 1);
|
||||
if (lastChar == "z") {
|
||||
// If a string of length > 1 ends in Z/z,
|
||||
// increment the string (excluding the last Z/z) recursively,
|
||||
// and append A/a (depending on casing) to it
|
||||
return sub.nextLetter() + 'a';
|
||||
} else {
|
||||
// (take till last char) append with (increment last char)
|
||||
return sub + String.fromCharCode(lastChar.codeUnitAt(0) + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import './styled_element.dart';
|
||||
|
||||
class AnchorKey extends GlobalKey {
|
||||
static final Set<AnchorKey> _registry = <AnchorKey>{};
|
||||
|
||||
final Key parentKey;
|
||||
final String id;
|
||||
|
||||
const AnchorKey._(this.parentKey, this.id) : super.constructor();
|
||||
|
||||
static AnchorKey? of(Key? parentKey, StyledElement? id) {
|
||||
final key = forId(parentKey, id?.elementId);
|
||||
if (key == null || _registry.contains(key)) {
|
||||
// Invalid id or already created a key with this id: silently ignore
|
||||
return null;
|
||||
}
|
||||
_registry.add(key);
|
||||
return key;
|
||||
}
|
||||
|
||||
static AnchorKey? forId(Key? parentKey, String? id) {
|
||||
if (parentKey == null || id == null || id.isEmpty || id == "[[No ID]]") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return AnchorKey._(parentKey, id);
|
||||
}
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
identical(this, other) ||
|
||||
other is AnchorKey && runtimeType == other.runtimeType && parentKey == other.parentKey && id == other.id;
|
||||
|
||||
@override
|
||||
int get hashCode => parentKey.hashCode ^ id.hashCode;
|
||||
|
||||
@override
|
||||
String toString() {
|
||||
return 'AnchorKey{parentKey: $parentKey, id: #$id}';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,981 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:csslib/visitor.dart' as css;
|
||||
import 'package:csslib/parser.dart' as cssparser;
|
||||
import 'package:flutter/material.dart';
|
||||
import '../flutter_html.dart';
|
||||
import './utils.dart';
|
||||
|
||||
Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
|
||||
Style style = new Style();
|
||||
declarations.forEach((property, value) {
|
||||
if (value.isNotEmpty) {
|
||||
switch (property) {
|
||||
case 'background-color':
|
||||
style.backgroundColor = ExpressionMapping.expressionToColor(value.first) ?? style.backgroundColor;
|
||||
break;
|
||||
case 'border':
|
||||
List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
borderWidths.removeWhere((element) => element == null || (element.text != "thin"
|
||||
&& element.text != "medium" && element.text != "thick"
|
||||
&& !(element is css.LengthTerm) && !(element is css.PercentageTerm)
|
||||
&& !(element is css.EmTerm) && !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm))
|
||||
);
|
||||
List<css.Expression?>? borderColors = value.where((element) => ExpressionMapping.expressionToColor(element) != null).toList();
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
|
||||
List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || !possibleBorderValues.contains(element.text));
|
||||
List<css.LiteralTerm?>? borderStyles = potentialStyles;
|
||||
style.border = ExpressionMapping.expressionToBorder(borderWidths, borderStyles, borderColors);
|
||||
break;
|
||||
case 'border-left':
|
||||
List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
borderWidths.removeWhere((element) => element == null || (element.text != "thin"
|
||||
&& element.text != "medium" && element.text != "thick"
|
||||
&& !(element is css.LengthTerm) && !(element is css.PercentageTerm)
|
||||
&& !(element is css.EmTerm) && !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm))
|
||||
);
|
||||
css.LiteralTerm? borderWidth = borderWidths.firstWhereOrNull((element) => element != null);
|
||||
css.Expression? borderColor = value.firstWhereOrNull((element) => ExpressionMapping.expressionToColor(element) != null);
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
|
||||
List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || !possibleBorderValues.contains(element.text));
|
||||
css.LiteralTerm? borderStyle = potentialStyles.firstOrNull;
|
||||
Border newBorder = Border(
|
||||
left: style.border?.left.copyWith(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor),
|
||||
) ?? BorderSide(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor) ?? Colors.black,
|
||||
),
|
||||
right: style.border?.right ?? BorderSide.none,
|
||||
top: style.border?.top ?? BorderSide.none,
|
||||
bottom: style.border?.bottom ?? BorderSide.none,
|
||||
);
|
||||
style.border = newBorder;
|
||||
break;
|
||||
case 'border-right':
|
||||
List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
borderWidths.removeWhere((element) => element == null || (element.text != "thin"
|
||||
&& element.text != "medium" && element.text != "thick"
|
||||
&& !(element is css.LengthTerm) && !(element is css.PercentageTerm)
|
||||
&& !(element is css.EmTerm) && !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm))
|
||||
);
|
||||
css.LiteralTerm? borderWidth = borderWidths.firstWhereOrNull((element) => element != null);
|
||||
css.Expression? borderColor = value.firstWhereOrNull((element) => ExpressionMapping.expressionToColor(element) != null);
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
|
||||
List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || !possibleBorderValues.contains(element.text));
|
||||
css.LiteralTerm? borderStyle = potentialStyles.firstOrNull;
|
||||
Border newBorder = Border(
|
||||
left: style.border?.left ?? BorderSide.none,
|
||||
right: style.border?.right.copyWith(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor),
|
||||
) ?? BorderSide(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor) ?? Colors.black,
|
||||
),
|
||||
top: style.border?.top ?? BorderSide.none,
|
||||
bottom: style.border?.bottom ?? BorderSide.none,
|
||||
);
|
||||
style.border = newBorder;
|
||||
break;
|
||||
case 'border-top':
|
||||
List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
borderWidths.removeWhere((element) => element == null || (element.text != "thin"
|
||||
&& element.text != "medium" && element.text != "thick"
|
||||
&& !(element is css.LengthTerm) && !(element is css.PercentageTerm)
|
||||
&& !(element is css.EmTerm) && !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm))
|
||||
);
|
||||
css.LiteralTerm? borderWidth = borderWidths.firstWhereOrNull((element) => element != null);
|
||||
css.Expression? borderColor = value.firstWhereOrNull((element) => ExpressionMapping.expressionToColor(element) != null);
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
|
||||
List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || !possibleBorderValues.contains(element.text));
|
||||
css.LiteralTerm? borderStyle = potentialStyles.firstOrNull;
|
||||
Border newBorder = Border(
|
||||
left: style.border?.left ?? BorderSide.none,
|
||||
right: style.border?.right ?? BorderSide.none,
|
||||
top: style.border?.top.copyWith(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor),
|
||||
) ?? BorderSide(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor) ?? Colors.black,
|
||||
),
|
||||
bottom: style.border?.bottom ?? BorderSide.none,
|
||||
);
|
||||
style.border = newBorder;
|
||||
break;
|
||||
case 'border-bottom':
|
||||
List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
borderWidths.removeWhere((element) => element == null || (element.text != "thin"
|
||||
&& element.text != "medium" && element.text != "thick"
|
||||
&& !(element is css.LengthTerm) && !(element is css.PercentageTerm)
|
||||
&& !(element is css.EmTerm) && !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm))
|
||||
);
|
||||
css.LiteralTerm? borderWidth = borderWidths.firstWhereOrNull((element) => element != null);
|
||||
css.Expression? borderColor = value.firstWhereOrNull((element) => ExpressionMapping.expressionToColor(element) != null);
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
|
||||
List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || !possibleBorderValues.contains(element.text));
|
||||
css.LiteralTerm? borderStyle = potentialStyles.firstOrNull;
|
||||
Border newBorder = Border(
|
||||
left: style.border?.left ?? BorderSide.none,
|
||||
right: style.border?.right ?? BorderSide.none,
|
||||
top: style.border?.top ?? BorderSide.none,
|
||||
bottom: style.border?.bottom.copyWith(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor),
|
||||
) ?? BorderSide(
|
||||
width: ExpressionMapping.expressionToBorderWidth(borderWidth),
|
||||
style: ExpressionMapping.expressionToBorderStyle(borderStyle),
|
||||
color: ExpressionMapping.expressionToColor(borderColor) ?? Colors.black,
|
||||
),
|
||||
);
|
||||
style.border = newBorder;
|
||||
break;
|
||||
case 'color':
|
||||
style.color = ExpressionMapping.expressionToColor(value.first) ?? style.color;
|
||||
break;
|
||||
case 'direction':
|
||||
style.direction = ExpressionMapping.expressionToDirection(value.first);
|
||||
break;
|
||||
case 'display':
|
||||
style.display = ExpressionMapping.expressionToDisplay(value.first);
|
||||
break;
|
||||
case 'line-height':
|
||||
style.lineHeight = ExpressionMapping.expressionToLineHeight(value.first);
|
||||
break;
|
||||
case 'font-family':
|
||||
style.fontFamily = ExpressionMapping.expressionToFontFamily(value.first) ?? style.fontFamily;
|
||||
break;
|
||||
case 'font-feature-settings':
|
||||
style.fontFeatureSettings = ExpressionMapping.expressionToFontFeatureSettings(value);
|
||||
break;
|
||||
case 'font-size':
|
||||
style.fontSize = ExpressionMapping.expressionToFontSize(value.first) ?? style.fontSize;
|
||||
break;
|
||||
case 'font-style':
|
||||
style.fontStyle = ExpressionMapping.expressionToFontStyle(value.first);
|
||||
break;
|
||||
case 'font-weight':
|
||||
style.fontWeight = ExpressionMapping.expressionToFontWeight(value.first);
|
||||
break;
|
||||
case 'list-style':
|
||||
css.LiteralTerm? position = value.firstWhereOrNull((e) => e is css.LiteralTerm && (e.text == "outside" || e.text == "inside")) as css.LiteralTerm?;
|
||||
css.UriTerm? image = value.firstWhereOrNull((e) => e is css.UriTerm) as css.UriTerm?;
|
||||
css.LiteralTerm? type = value.firstWhereOrNull((e) => e is css.LiteralTerm && e.text != "outside" && e.text != "inside") as css.LiteralTerm?;
|
||||
if (position != null) {
|
||||
switch (position.text) {
|
||||
case 'outside':
|
||||
style.listStylePosition = ListStylePosition.OUTSIDE;
|
||||
break;
|
||||
case 'inside':
|
||||
style.listStylePosition = ListStylePosition.INSIDE;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (image != null) {
|
||||
style.listStyleType = ExpressionMapping.expressionToListStyleType(image) ?? style.listStyleType;
|
||||
} else if (type != null) {
|
||||
style.listStyleType = ExpressionMapping.expressionToListStyleType(type) ?? style.listStyleType;
|
||||
}
|
||||
break;
|
||||
case 'list-style-image':
|
||||
if (value.first is css.UriTerm) {
|
||||
style.listStyleType = ExpressionMapping.expressionToListStyleType(value.first as css.UriTerm) ?? style.listStyleType;
|
||||
}
|
||||
break;
|
||||
case 'list-style-position':
|
||||
if (value.first is css.LiteralTerm) {
|
||||
switch ((value.first as css.LiteralTerm).text) {
|
||||
case 'outside':
|
||||
style.listStylePosition = ListStylePosition.OUTSIDE;
|
||||
break;
|
||||
case 'inside':
|
||||
style.listStylePosition = ListStylePosition.INSIDE;
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'height':
|
||||
style.height = ExpressionMapping.expressionToPaddingLength(value.first) ?? style.height;
|
||||
break;
|
||||
case 'list-style-type':
|
||||
if (value.first is css.LiteralTerm) {
|
||||
style.listStyleType = ExpressionMapping.expressionToListStyleType(value.first as css.LiteralTerm) ?? style.listStyleType;
|
||||
}
|
||||
break;
|
||||
case 'margin':
|
||||
List<css.LiteralTerm>? marginLengths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for margin length, so make sure to remove those before passing it to [ExpressionMapping]
|
||||
marginLengths.removeWhere((element) => !(element is css.LengthTerm)
|
||||
&& !(element is css.EmTerm)
|
||||
&& !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm)
|
||||
);
|
||||
List<double?> margin = ExpressionMapping.expressionToPadding(marginLengths);
|
||||
style.margin = (style.margin ?? EdgeInsets.zero).copyWith(
|
||||
left: margin[0],
|
||||
right: margin[1],
|
||||
top: margin[2],
|
||||
bottom: margin[3],
|
||||
);
|
||||
break;
|
||||
case 'margin-left':
|
||||
style.margin = (style.margin ?? EdgeInsets.zero).copyWith(
|
||||
left: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'margin-right':
|
||||
style.margin = (style.margin ?? EdgeInsets.zero).copyWith(
|
||||
right: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'margin-top':
|
||||
style.margin = (style.margin ?? EdgeInsets.zero).copyWith(
|
||||
top: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'margin-bottom':
|
||||
style.margin = (style.margin ?? EdgeInsets.zero).copyWith(
|
||||
bottom: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'padding':
|
||||
List<css.LiteralTerm>? paddingLengths = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for padding length, so make sure to remove those before passing it to [ExpressionMapping]
|
||||
paddingLengths.removeWhere((element) => !(element is css.LengthTerm)
|
||||
&& !(element is css.EmTerm)
|
||||
&& !(element is css.RemTerm)
|
||||
&& !(element is css.NumberTerm)
|
||||
);
|
||||
List<double?> padding = ExpressionMapping.expressionToPadding(paddingLengths);
|
||||
style.padding = (style.padding ?? EdgeInsets.zero).copyWith(
|
||||
left: padding[0],
|
||||
right: padding[1],
|
||||
top: padding[2],
|
||||
bottom: padding[3],
|
||||
);
|
||||
break;
|
||||
case 'padding-left':
|
||||
style.padding = (style.padding ?? EdgeInsets.zero).copyWith(
|
||||
left: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'padding-right':
|
||||
style.padding = (style.padding ?? EdgeInsets.zero).copyWith(
|
||||
right: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'padding-top':
|
||||
style.padding = (style.padding ?? EdgeInsets.zero).copyWith(
|
||||
top: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'padding-bottom':
|
||||
style.padding = (style.padding ?? EdgeInsets.zero).copyWith(
|
||||
bottom: ExpressionMapping.expressionToPaddingLength(value.first));
|
||||
break;
|
||||
case 'text-align':
|
||||
style.textAlign = ExpressionMapping.expressionToTextAlign(value.first);
|
||||
break;
|
||||
case 'text-decoration':
|
||||
List<css.LiteralTerm?>? textDecorationList = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [textDecorationList], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
textDecorationList.removeWhere((element) => element == null || (element.text != "none"
|
||||
&& element.text != "overline" && element.text != "underline" && element.text != "line-through"));
|
||||
List<css.Expression?>? nullableList = value;
|
||||
css.Expression? textDecorationColor;
|
||||
textDecorationColor = nullableList.firstWhereOrNull(
|
||||
(element) => element is css.HexColorTerm || element is css.FunctionTerm);
|
||||
List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
|
||||
/// List<css.LiteralTerm> might include other values than the ones we want for [textDecorationStyle], so make sure to remove those before passing it to [ExpressionMapping]
|
||||
potentialStyles.removeWhere((element) => element == null || (element.text != "solid"
|
||||
&& element.text != "double" && element.text != "dashed" && element.text != "dotted" && element.text != "wavy"));
|
||||
css.LiteralTerm? textDecorationStyle = potentialStyles.isNotEmpty ? potentialStyles.last : null;
|
||||
style.textDecoration = ExpressionMapping.expressionToTextDecorationLine(textDecorationList);
|
||||
if (textDecorationColor != null) style.textDecorationColor = ExpressionMapping.expressionToColor(textDecorationColor)
|
||||
?? style.textDecorationColor;
|
||||
if (textDecorationStyle != null) style.textDecorationStyle = ExpressionMapping.expressionToTextDecorationStyle(textDecorationStyle);
|
||||
break;
|
||||
case 'text-decoration-color':
|
||||
style.textDecorationColor = ExpressionMapping.expressionToColor(value.first) ?? style.textDecorationColor;
|
||||
break;
|
||||
case 'text-decoration-line':
|
||||
List<css.LiteralTerm?>? textDecorationList = value.whereType<css.LiteralTerm>().toList();
|
||||
style.textDecoration = ExpressionMapping.expressionToTextDecorationLine(textDecorationList);
|
||||
break;
|
||||
case 'text-decoration-style':
|
||||
style.textDecorationStyle = ExpressionMapping.expressionToTextDecorationStyle(value.first as css.LiteralTerm);
|
||||
break;
|
||||
case 'text-shadow':
|
||||
style.textShadow = ExpressionMapping.expressionToTextShadow(value);
|
||||
break;
|
||||
case 'text-transform':
|
||||
final val = (value.first as css.LiteralTerm).text;
|
||||
if (val == 'uppercase') {
|
||||
style.textTransform = TextTransform.uppercase;
|
||||
} else if (val == 'lowercase') {
|
||||
style.textTransform = TextTransform.lowercase;
|
||||
} else if (val == 'capitalize') {
|
||||
style.textTransform = TextTransform.capitalize;
|
||||
} else {
|
||||
style.textTransform = TextTransform.none;
|
||||
}
|
||||
break;
|
||||
case 'width':
|
||||
style.width = ExpressionMapping.expressionToPaddingLength(value.first) ?? style.width;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
return style;
|
||||
}
|
||||
|
||||
Style? inlineCssToStyle(String? inlineStyle, OnCssParseError? errorHandler) {
|
||||
var errors = <cssparser.Message>[];
|
||||
final sheet = cssparser.parse("*{$inlineStyle}", errors: errors);
|
||||
if (errors.isEmpty) {
|
||||
final declarations = DeclarationVisitor().getDeclarations(sheet);
|
||||
return declarationsToStyle(declarations["*"]!);
|
||||
} else if (errorHandler != null) {
|
||||
String? newCss = errorHandler.call(inlineStyle ?? "", errors);
|
||||
if (newCss != null) {
|
||||
return inlineCssToStyle(newCss, errorHandler);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
Map<String, Map<String, List<css.Expression>>> parseExternalCss(String css, OnCssParseError? errorHandler) {
|
||||
var errors = <cssparser.Message>[];
|
||||
final sheet = cssparser.parse(css, errors: errors);
|
||||
if (errors.isEmpty) {
|
||||
return DeclarationVisitor().getDeclarations(sheet);
|
||||
} else if (errorHandler != null) {
|
||||
String? newCss = errorHandler.call(css, errors);
|
||||
if (newCss != null) {
|
||||
return parseExternalCss(newCss, errorHandler);
|
||||
}
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
class DeclarationVisitor extends css.Visitor {
|
||||
Map<String, Map<String, List<css.Expression>>> _result = {};
|
||||
Map<String, List<css.Expression>> _properties = {};
|
||||
late String _selector;
|
||||
late String _currentProperty;
|
||||
|
||||
Map<String, Map<String, List<css.Expression>>> getDeclarations(css.StyleSheet sheet) {
|
||||
sheet.topLevels.forEach((element) {
|
||||
if (element.span != null) {
|
||||
_selector = element.span!.text;
|
||||
element.visit(this);
|
||||
if (_result[_selector] != null) {
|
||||
_properties.forEach((key, value) {
|
||||
if (_result[_selector]![key] != null) {
|
||||
_result[_selector]![key]!.addAll(new List<css.Expression>.from(value));
|
||||
} else {
|
||||
_result[_selector]![key] = new List<css.Expression>.from(value);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
_result[_selector] = new Map<String, List<css.Expression>>.from(_properties);
|
||||
}
|
||||
_properties.clear();
|
||||
}
|
||||
});
|
||||
return _result;
|
||||
}
|
||||
|
||||
@override
|
||||
void visitDeclaration(css.Declaration node) {
|
||||
_currentProperty = node.property;
|
||||
_properties[_currentProperty] = <css.Expression>[];
|
||||
node.expression!.visit(this);
|
||||
}
|
||||
|
||||
@override
|
||||
void visitExpressions(css.Expressions node) {
|
||||
if (_properties[_currentProperty] != null) {
|
||||
_properties[_currentProperty]!.addAll(node.expressions);
|
||||
} else {
|
||||
_properties[_currentProperty] = node.expressions;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Mapping functions
|
||||
class ExpressionMapping {
|
||||
|
||||
static Border expressionToBorder(List<css.Expression?>? borderWidths, List<css.LiteralTerm?>? borderStyles, List<css.Expression?>? borderColors) {
|
||||
CustomBorderSide left = CustomBorderSide();
|
||||
CustomBorderSide top = CustomBorderSide();
|
||||
CustomBorderSide right = CustomBorderSide();
|
||||
CustomBorderSide bottom = CustomBorderSide();
|
||||
if (borderWidths != null && borderWidths.isNotEmpty) {
|
||||
top.width = expressionToBorderWidth(borderWidths.first);
|
||||
if (borderWidths.length == 4) {
|
||||
right.width = expressionToBorderWidth(borderWidths[1]);
|
||||
bottom.width = expressionToBorderWidth(borderWidths[2]);
|
||||
left.width = expressionToBorderWidth(borderWidths.last);
|
||||
}
|
||||
if (borderWidths.length == 3) {
|
||||
left.width = expressionToBorderWidth(borderWidths[1]);
|
||||
right.width = expressionToBorderWidth(borderWidths[1]);
|
||||
bottom.width = expressionToBorderWidth(borderWidths.last);
|
||||
}
|
||||
if (borderWidths.length == 2) {
|
||||
bottom.width = expressionToBorderWidth(borderWidths.first);
|
||||
left.width = expressionToBorderWidth(borderWidths.last);
|
||||
right.width = expressionToBorderWidth(borderWidths.last);
|
||||
}
|
||||
if (borderWidths.length == 1) {
|
||||
bottom.width = expressionToBorderWidth(borderWidths.first);
|
||||
left.width = expressionToBorderWidth(borderWidths.first);
|
||||
right.width = expressionToBorderWidth(borderWidths.first);
|
||||
}
|
||||
}
|
||||
if (borderStyles != null && borderStyles.isNotEmpty) {
|
||||
top.style = expressionToBorderStyle(borderStyles.first);
|
||||
if (borderStyles.length == 4) {
|
||||
right.style = expressionToBorderStyle(borderStyles[1]);
|
||||
bottom.style = expressionToBorderStyle(borderStyles[2]);
|
||||
left.style = expressionToBorderStyle(borderStyles.last);
|
||||
}
|
||||
if (borderStyles.length == 3) {
|
||||
left.style = expressionToBorderStyle(borderStyles[1]);
|
||||
right.style = expressionToBorderStyle(borderStyles[1]);
|
||||
bottom.style = expressionToBorderStyle(borderStyles.last);
|
||||
}
|
||||
if (borderStyles.length == 2) {
|
||||
bottom.style = expressionToBorderStyle(borderStyles.first);
|
||||
left.style = expressionToBorderStyle(borderStyles.last);
|
||||
right.style = expressionToBorderStyle(borderStyles.last);
|
||||
}
|
||||
if (borderStyles.length == 1) {
|
||||
bottom.style = expressionToBorderStyle(borderStyles.first);
|
||||
left.style = expressionToBorderStyle(borderStyles.first);
|
||||
right.style = expressionToBorderStyle(borderStyles.first);
|
||||
}
|
||||
}
|
||||
if (borderColors != null && borderColors.isNotEmpty) {
|
||||
top.color = expressionToColor(borderColors.first);
|
||||
if (borderColors.length == 4) {
|
||||
right.color = expressionToColor(borderColors[1]);
|
||||
bottom.color = expressionToColor(borderColors[2]);
|
||||
left.color = expressionToColor(borderColors.last);
|
||||
}
|
||||
if (borderColors.length == 3) {
|
||||
left.color = expressionToColor(borderColors[1]);
|
||||
right.color = expressionToColor(borderColors[1]);
|
||||
bottom.color = expressionToColor(borderColors.last);
|
||||
}
|
||||
if (borderColors.length == 2) {
|
||||
bottom.color = expressionToColor(borderColors.first);
|
||||
left.color = expressionToColor(borderColors.last);
|
||||
right.color = expressionToColor(borderColors.last);
|
||||
}
|
||||
if (borderColors.length == 1) {
|
||||
bottom.color = expressionToColor(borderColors.first);
|
||||
left.color = expressionToColor(borderColors.first);
|
||||
right.color = expressionToColor(borderColors.first);
|
||||
}
|
||||
}
|
||||
return Border(
|
||||
top: BorderSide(width: top.width, color: top.color ?? Colors.black, style: top.style),
|
||||
right: BorderSide(width: right.width, color: right.color ?? Colors.black, style: right.style),
|
||||
bottom: BorderSide(width: bottom.width, color: bottom.color ?? Colors.black, style: bottom.style),
|
||||
left: BorderSide(width: left.width, color: left.color ?? Colors.black, style: left.style)
|
||||
);
|
||||
}
|
||||
|
||||
static double expressionToBorderWidth(css.Expression? value) {
|
||||
if (value is css.NumberTerm) {
|
||||
return double.tryParse(value.text) ?? 1.0;
|
||||
} else if (value is css.PercentageTerm) {
|
||||
return (double.tryParse(value.text) ?? 400) / 100;
|
||||
} else if (value is css.EmTerm) {
|
||||
return double.tryParse(value.text) ?? 1.0;
|
||||
} else if (value is css.RemTerm) {
|
||||
return double.tryParse(value.text) ?? 1.0;
|
||||
} else if (value is css.LengthTerm) {
|
||||
return double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), '')) ?? 1.0;
|
||||
} else if (value is css.LiteralTerm) {
|
||||
switch (value.text) {
|
||||
case "thin":
|
||||
return 2.0;
|
||||
case "medium":
|
||||
return 4.0;
|
||||
case "thick":
|
||||
return 6.0;
|
||||
}
|
||||
}
|
||||
return 4.0;
|
||||
}
|
||||
|
||||
static BorderStyle expressionToBorderStyle(css.LiteralTerm? value) {
|
||||
if (value != null && value.text != "none" && value.text != "hidden") {
|
||||
return BorderStyle.solid;
|
||||
}
|
||||
return BorderStyle.none;
|
||||
}
|
||||
|
||||
static Color? expressionToColor(css.Expression? value) {
|
||||
if (value != null) {
|
||||
if (value is css.HexColorTerm) {
|
||||
return stringToColor(value.text);
|
||||
} else if (value is css.FunctionTerm) {
|
||||
if (value.text == 'rgba' || value.text == 'rgb') {
|
||||
return rgbOrRgbaToColor(value.span!.text);
|
||||
} else if (value.text == 'hsla' || value.text == 'hsl') {
|
||||
return hslToRgbToColor(value.span!.text);
|
||||
}
|
||||
} else if (value is css.LiteralTerm) {
|
||||
return namedColorToColor(value.text);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static TextDirection expressionToDirection(css.Expression value) {
|
||||
if (value is css.LiteralTerm) {
|
||||
switch(value.text) {
|
||||
case "ltr":
|
||||
return TextDirection.ltr;
|
||||
case "rtl":
|
||||
return TextDirection.rtl;
|
||||
}
|
||||
}
|
||||
return TextDirection.ltr;
|
||||
}
|
||||
|
||||
static Display expressionToDisplay(css.Expression value) {
|
||||
if (value is css.LiteralTerm) {
|
||||
switch(value.text) {
|
||||
case 'block':
|
||||
return Display.BLOCK;
|
||||
case 'inline-block':
|
||||
return Display.INLINE_BLOCK;
|
||||
case 'inline':
|
||||
return Display.INLINE;
|
||||
case 'list-item':
|
||||
return Display.LIST_ITEM;
|
||||
case 'none':
|
||||
return Display.NONE;
|
||||
}
|
||||
}
|
||||
return Display.INLINE;
|
||||
}
|
||||
|
||||
static List<FontFeature> expressionToFontFeatureSettings(List<css.Expression> value) {
|
||||
List<FontFeature> fontFeatures = [];
|
||||
for (int i = 0; i < value.length; i++) {
|
||||
css.Expression exp = value[i];
|
||||
if (exp is css.LiteralTerm) {
|
||||
if (exp.text != "on" && exp.text != "off" && exp.text != "1" && exp.text != "0") {
|
||||
if (i < value.length - 1) {
|
||||
css.Expression nextExp = value[i+1];
|
||||
if (nextExp is css.LiteralTerm && (nextExp.text == "on" || nextExp.text == "off" || nextExp.text == "1" || nextExp.text == "0")) {
|
||||
fontFeatures.add(FontFeature(exp.text, nextExp.text == "on" || nextExp.text == "1" ? 1 : 0));
|
||||
} else {
|
||||
fontFeatures.add(FontFeature.enable(exp.text));
|
||||
}
|
||||
} else {
|
||||
fontFeatures.add(FontFeature.enable(exp.text));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
List<FontFeature> finalFontFeatures = fontFeatures.toSet().toList();
|
||||
return finalFontFeatures;
|
||||
}
|
||||
|
||||
static FontSize? expressionToFontSize(css.Expression value) {
|
||||
if (value is css.NumberTerm) {
|
||||
return FontSize(double.tryParse(value.text));
|
||||
} else if (value is css.PercentageTerm) {
|
||||
return FontSize.percent(double.tryParse(value.text)!);
|
||||
} else if (value is css.EmTerm) {
|
||||
return FontSize.em(double.tryParse(value.text));
|
||||
} else if (value is css.RemTerm) {
|
||||
return FontSize.rem(double.tryParse(value.text)!);
|
||||
} else if (value is css.LengthTerm) {
|
||||
return FontSize(double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), '')));
|
||||
} else if (value is css.LiteralTerm) {
|
||||
switch (value.text) {
|
||||
case "xx-small":
|
||||
return FontSize.xxSmall;
|
||||
case "x-small":
|
||||
return FontSize.xSmall;
|
||||
case "small":
|
||||
return FontSize.small;
|
||||
case "medium":
|
||||
return FontSize.medium;
|
||||
case "large":
|
||||
return FontSize.large;
|
||||
case "x-large":
|
||||
return FontSize.xLarge;
|
||||
case "xx-large":
|
||||
return FontSize.xxLarge;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static FontStyle expressionToFontStyle(css.Expression value) {
|
||||
if (value is css.LiteralTerm) {
|
||||
switch(value.text) {
|
||||
case "italic":
|
||||
case "oblique":
|
||||
return FontStyle.italic;
|
||||
}
|
||||
return FontStyle.normal;
|
||||
}
|
||||
return FontStyle.normal;
|
||||
}
|
||||
|
||||
static FontWeight expressionToFontWeight(css.Expression value) {
|
||||
if (value is css.NumberTerm) {
|
||||
switch (value.text) {
|
||||
case "100":
|
||||
return FontWeight.w100;
|
||||
case "200":
|
||||
return FontWeight.w200;
|
||||
case "300":
|
||||
return FontWeight.w300;
|
||||
case "400":
|
||||
return FontWeight.w400;
|
||||
case "500":
|
||||
return FontWeight.w500;
|
||||
case "600":
|
||||
return FontWeight.w600;
|
||||
case "700":
|
||||
return FontWeight.w700;
|
||||
case "800":
|
||||
return FontWeight.w800;
|
||||
case "900":
|
||||
return FontWeight.w900;
|
||||
}
|
||||
} else if (value is css.LiteralTerm) {
|
||||
switch(value.text) {
|
||||
case "bold":
|
||||
return FontWeight.bold;
|
||||
case "bolder":
|
||||
return FontWeight.w900;
|
||||
case "lighter":
|
||||
return FontWeight.w200;
|
||||
}
|
||||
return FontWeight.normal;
|
||||
}
|
||||
return FontWeight.normal;
|
||||
}
|
||||
|
||||
static String? expressionToFontFamily(css.Expression value) {
|
||||
if (value is css.LiteralTerm) return value.text;
|
||||
return null;
|
||||
}
|
||||
|
||||
static LineHeight expressionToLineHeight(css.Expression value) {
|
||||
if (value is css.NumberTerm) {
|
||||
return LineHeight.number(double.tryParse(value.text)!);
|
||||
} else if (value is css.PercentageTerm) {
|
||||
return LineHeight.percent(double.tryParse(value.text)!);
|
||||
} else if (value is css.EmTerm) {
|
||||
return LineHeight.em(double.tryParse(value.text)!);
|
||||
} else if (value is css.RemTerm) {
|
||||
return LineHeight.rem(double.tryParse(value.text)!);
|
||||
} else if (value is css.LengthTerm) {
|
||||
return LineHeight(double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), '')), units: "length");
|
||||
}
|
||||
return LineHeight.normal;
|
||||
}
|
||||
|
||||
static ListStyleType? expressionToListStyleType(css.LiteralTerm value) {
|
||||
if (value is css.UriTerm) {
|
||||
return ListStyleType.fromImage(value.text);
|
||||
}
|
||||
switch (value.text) {
|
||||
case 'disc':
|
||||
return ListStyleType.DISC;
|
||||
case 'circle':
|
||||
return ListStyleType.CIRCLE;
|
||||
case 'decimal':
|
||||
return ListStyleType.DECIMAL;
|
||||
case 'lower-alpha':
|
||||
return ListStyleType.LOWER_ALPHA;
|
||||
case 'lower-latin':
|
||||
return ListStyleType.LOWER_LATIN;
|
||||
case 'lower-roman':
|
||||
return ListStyleType.LOWER_ROMAN;
|
||||
case 'square':
|
||||
return ListStyleType.SQUARE;
|
||||
case 'upper-alpha':
|
||||
return ListStyleType.UPPER_ALPHA;
|
||||
case 'upper-latin':
|
||||
return ListStyleType.UPPER_LATIN;
|
||||
case 'upper-roman':
|
||||
return ListStyleType.UPPER_ROMAN;
|
||||
case 'none':
|
||||
return ListStyleType.NONE;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static List<double?> expressionToPadding(List<css.Expression>? lengths) {
|
||||
double? left;
|
||||
double? right;
|
||||
double? top;
|
||||
double? bottom;
|
||||
if (lengths != null && lengths.isNotEmpty) {
|
||||
top = expressionToPaddingLength(lengths.first);
|
||||
if (lengths.length == 4) {
|
||||
right = expressionToPaddingLength(lengths[1]);
|
||||
bottom = expressionToPaddingLength(lengths[2]);
|
||||
left = expressionToPaddingLength(lengths.last);
|
||||
}
|
||||
if (lengths.length == 3) {
|
||||
left = expressionToPaddingLength(lengths[1]);
|
||||
right = expressionToPaddingLength(lengths[1]);
|
||||
bottom = expressionToPaddingLength(lengths.last);
|
||||
}
|
||||
if (lengths.length == 2) {
|
||||
bottom = expressionToPaddingLength(lengths.first);
|
||||
left = expressionToPaddingLength(lengths.last);
|
||||
right = expressionToPaddingLength(lengths.last);
|
||||
}
|
||||
if (lengths.length == 1) {
|
||||
bottom = expressionToPaddingLength(lengths.first);
|
||||
left = expressionToPaddingLength(lengths.first);
|
||||
right = expressionToPaddingLength(lengths.first);
|
||||
}
|
||||
}
|
||||
return [left, right, top, bottom];
|
||||
}
|
||||
|
||||
static double? expressionToPaddingLength(css.Expression value) {
|
||||
if (value is css.NumberTerm) {
|
||||
return double.tryParse(value.text);
|
||||
} else if (value is css.EmTerm) {
|
||||
return double.tryParse(value.text);
|
||||
} else if (value is css.RemTerm) {
|
||||
return double.tryParse(value.text);
|
||||
} else if (value is css.LengthTerm) {
|
||||
return double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), ''));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static TextAlign expressionToTextAlign(css.Expression value) {
|
||||
if (value is css.LiteralTerm) {
|
||||
switch(value.text) {
|
||||
case "center":
|
||||
return TextAlign.center;
|
||||
case "left":
|
||||
return TextAlign.left;
|
||||
case "right":
|
||||
return TextAlign.right;
|
||||
case "justify":
|
||||
return TextAlign.justify;
|
||||
case "end":
|
||||
return TextAlign.end;
|
||||
case "start":
|
||||
return TextAlign.start;
|
||||
}
|
||||
}
|
||||
return TextAlign.start;
|
||||
}
|
||||
|
||||
static TextDecoration expressionToTextDecorationLine(List<css.LiteralTerm?> value) {
|
||||
List<TextDecoration> decorationList = [];
|
||||
for (css.LiteralTerm? term in value) {
|
||||
if (term != null) {
|
||||
switch(term.text) {
|
||||
case "overline":
|
||||
decorationList.add(TextDecoration.overline);
|
||||
break;
|
||||
case "underline":
|
||||
decorationList.add(TextDecoration.underline);
|
||||
break;
|
||||
case "line-through":
|
||||
decorationList.add(TextDecoration.lineThrough);
|
||||
break;
|
||||
default:
|
||||
decorationList.add(TextDecoration.none);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (decorationList.contains(TextDecoration.none)) decorationList = [TextDecoration.none];
|
||||
return TextDecoration.combine(decorationList);
|
||||
}
|
||||
|
||||
static TextDecorationStyle expressionToTextDecorationStyle(css.LiteralTerm value) {
|
||||
switch(value.text) {
|
||||
case "wavy":
|
||||
return TextDecorationStyle.wavy;
|
||||
case "dotted":
|
||||
return TextDecorationStyle.dotted;
|
||||
case "dashed":
|
||||
return TextDecorationStyle.dashed;
|
||||
case "double":
|
||||
return TextDecorationStyle.double;
|
||||
default:
|
||||
return TextDecorationStyle.solid;
|
||||
}
|
||||
}
|
||||
|
||||
static List<Shadow> expressionToTextShadow(List<css.Expression> value) {
|
||||
List<Shadow> shadow = [];
|
||||
List<int> indices = [];
|
||||
List<List<css.Expression>> valueList = [];
|
||||
for (css.Expression e in value) {
|
||||
if (e is css.OperatorComma) {
|
||||
indices.add(value.indexOf(e));
|
||||
}
|
||||
}
|
||||
indices.add(value.length);
|
||||
int previousIndex = 0;
|
||||
for (int i in indices) {
|
||||
valueList.add(value.sublist(previousIndex, i));
|
||||
previousIndex = i + 1;
|
||||
}
|
||||
for (List<css.Expression> list in valueList) {
|
||||
css.Expression? offsetX;
|
||||
css.Expression? offsetY;
|
||||
css.Expression? blurRadius;
|
||||
css.Expression? color;
|
||||
int expressionIndex = 0;
|
||||
list.forEach((element) {
|
||||
if (element is css.HexColorTerm || element is css.FunctionTerm) {
|
||||
color = element;
|
||||
} else if (expressionIndex == 0) {
|
||||
offsetX = element;
|
||||
expressionIndex++;
|
||||
} else if (expressionIndex++ == 1) {
|
||||
offsetY = element;
|
||||
expressionIndex++;
|
||||
} else {
|
||||
blurRadius = element;
|
||||
}
|
||||
});
|
||||
RegExp nonNumberRegex = RegExp(r'\s+(\d+\.\d+)\s+');
|
||||
if (offsetX is css.LiteralTerm && offsetY is css.LiteralTerm) {
|
||||
if (color != null && ExpressionMapping.expressionToColor(color) != null) {
|
||||
shadow.add(Shadow(
|
||||
color: expressionToColor(color)!,
|
||||
offset: Offset(
|
||||
double.tryParse((offsetX as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))!,
|
||||
double.tryParse((offsetY as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))!),
|
||||
blurRadius: (blurRadius is css.LiteralTerm) ? double.tryParse((blurRadius as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))! : 0.0,
|
||||
));
|
||||
} else {
|
||||
shadow.add(Shadow(
|
||||
offset: Offset(
|
||||
double.tryParse((offsetX as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))!,
|
||||
double.tryParse((offsetY as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))!),
|
||||
blurRadius: (blurRadius is css.LiteralTerm) ? double.tryParse((blurRadius as css.LiteralTerm).text.replaceAll(nonNumberRegex, ''))! : 0.0,
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
List<Shadow> finalShadows = shadow.toSet().toList();
|
||||
return finalShadows;
|
||||
}
|
||||
|
||||
static Color stringToColor(String _text) {
|
||||
var text = _text.replaceFirst('#', '');
|
||||
if (text.length == 3)
|
||||
text = text.replaceAllMapped(
|
||||
RegExp(r"[a-f]|\d", caseSensitive: false),
|
||||
(match) => '${match.group(0)}${match.group(0)}'
|
||||
);
|
||||
if (text.length > 6) {
|
||||
text = "0x" + text;
|
||||
} else {
|
||||
text = "0xFF" + text;
|
||||
}
|
||||
return new Color(int.parse(text));
|
||||
}
|
||||
|
||||
static Color? rgbOrRgbaToColor(String text) {
|
||||
final rgbaText = text.replaceAll(')', '').replaceAll(' ', '');
|
||||
try {
|
||||
final rgbaValues =
|
||||
rgbaText.split(',').map((value) => double.parse(value)).toList();
|
||||
if (rgbaValues.length == 4) {
|
||||
return Color.fromRGBO(
|
||||
rgbaValues[0].toInt(),
|
||||
rgbaValues[1].toInt(),
|
||||
rgbaValues[2].toInt(),
|
||||
rgbaValues[3],
|
||||
);
|
||||
} else if (rgbaValues.length == 3) {
|
||||
return Color.fromRGBO(
|
||||
rgbaValues[0].toInt(),
|
||||
rgbaValues[1].toInt(),
|
||||
rgbaValues[2].toInt(),
|
||||
1.0,
|
||||
);
|
||||
}
|
||||
return null;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
static Color hslToRgbToColor(String text) {
|
||||
final hslText = text.replaceAll(')', '').replaceAll(' ', '');
|
||||
final hslValues = hslText.split(',').toList();
|
||||
List<double?> parsedHsl = [];
|
||||
hslValues.forEach((element) {
|
||||
if (element.contains("%") && double.tryParse(element.replaceAll("%", "")) != null) {
|
||||
parsedHsl.add(double.tryParse(element.replaceAll("%", ""))! * 0.01);
|
||||
} else {
|
||||
if (element != hslValues.first && (double.tryParse(element) == null || double.tryParse(element)! > 1)) {
|
||||
parsedHsl.add(null);
|
||||
} else {
|
||||
parsedHsl.add(double.tryParse(element));
|
||||
}
|
||||
}
|
||||
});
|
||||
if (parsedHsl.length == 4 && !parsedHsl.contains(null)) {
|
||||
return HSLColor.fromAHSL(parsedHsl.last!, parsedHsl.first!, parsedHsl[1]!, parsedHsl[2]!).toColor();
|
||||
} else if (parsedHsl.length == 3 && !parsedHsl.contains(null)) {
|
||||
return HSLColor.fromAHSL(1.0, parsedHsl.first!, parsedHsl[1]!, parsedHsl.last!).toColor();
|
||||
} else return Colors.black;
|
||||
}
|
||||
|
||||
static Color? namedColorToColor(String text) {
|
||||
String namedColor = namedColors.keys.firstWhere((element) => element.toLowerCase() == text.toLowerCase(), orElse: () => "");
|
||||
if (namedColor != "") {
|
||||
return stringToColor(namedColors[namedColor]!);
|
||||
} else return null;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,283 @@
|
||||
export 'styled_element.dart';
|
||||
export 'interactable_element.dart';
|
||||
export 'replaced_element.dart';
|
||||
|
||||
const STYLED_ELEMENTS = [
|
||||
"abbr",
|
||||
"acronym",
|
||||
"address",
|
||||
"b",
|
||||
"bdi",
|
||||
"bdo",
|
||||
"big",
|
||||
"cite",
|
||||
"code",
|
||||
"data",
|
||||
"del",
|
||||
"dfn",
|
||||
"em",
|
||||
"font",
|
||||
"i",
|
||||
"ins",
|
||||
"kbd",
|
||||
"mark",
|
||||
"q",
|
||||
"rt",
|
||||
"s",
|
||||
"samp",
|
||||
"small",
|
||||
"span",
|
||||
"strike",
|
||||
"strong",
|
||||
"sub",
|
||||
"sup",
|
||||
"time",
|
||||
"tt",
|
||||
"u",
|
||||
"var",
|
||||
"wbr",
|
||||
|
||||
//BLOCK ELEMENTS
|
||||
"article",
|
||||
"aside",
|
||||
"blockquote",
|
||||
"body",
|
||||
"center",
|
||||
"dd",
|
||||
"div",
|
||||
"dl",
|
||||
"dt",
|
||||
"figcaption",
|
||||
"figure",
|
||||
"footer",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"h5",
|
||||
"h6",
|
||||
"header",
|
||||
"hr",
|
||||
"html",
|
||||
"li",
|
||||
"main",
|
||||
"nav",
|
||||
"noscript",
|
||||
"ol",
|
||||
"p",
|
||||
"pre",
|
||||
"section",
|
||||
"summary",
|
||||
"ul",
|
||||
];
|
||||
|
||||
const BLOCK_ELEMENTS = [
|
||||
"article",
|
||||
"aside",
|
||||
"blockquote",
|
||||
"body",
|
||||
"center",
|
||||
"dd",
|
||||
"div",
|
||||
"dl",
|
||||
"dt",
|
||||
"figcaption",
|
||||
"figure",
|
||||
"footer",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"h5",
|
||||
"h6",
|
||||
"header",
|
||||
"hr",
|
||||
"html",
|
||||
"li",
|
||||
"main",
|
||||
"nav",
|
||||
"noscript",
|
||||
"ol",
|
||||
"p",
|
||||
"pre",
|
||||
"section",
|
||||
"summary",
|
||||
"ul",
|
||||
];
|
||||
|
||||
const INTERACTABLE_ELEMENTS = [
|
||||
"a",
|
||||
];
|
||||
|
||||
const REPLACED_ELEMENTS = [
|
||||
"br",
|
||||
"template",
|
||||
"rp",
|
||||
"rt",
|
||||
"ruby",
|
||||
];
|
||||
|
||||
const LAYOUT_ELEMENTS = [
|
||||
"details",
|
||||
"tr",
|
||||
"tbody",
|
||||
"tfoot",
|
||||
"thead",
|
||||
];
|
||||
|
||||
const TABLE_CELL_ELEMENTS = ["th", "td"];
|
||||
|
||||
const TABLE_DEFINITION_ELEMENTS = ["col", "colgroup"];
|
||||
|
||||
const EXTERNAL_ELEMENTS = ["audio", "iframe", "img", "math", "svg", "table", "video"];
|
||||
|
||||
const SELECTABLE_ELEMENTS = [
|
||||
"br",
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"blockquote",
|
||||
"body",
|
||||
"center",
|
||||
"dd",
|
||||
"div",
|
||||
"dl",
|
||||
"dt",
|
||||
"figcaption",
|
||||
"figure",
|
||||
"footer",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"h5",
|
||||
"h6",
|
||||
"header",
|
||||
"hr",
|
||||
"html",
|
||||
"main",
|
||||
"nav",
|
||||
"noscript",
|
||||
"p",
|
||||
"pre",
|
||||
"section",
|
||||
"summary",
|
||||
"abbr",
|
||||
"acronym",
|
||||
"address",
|
||||
"b",
|
||||
"bdi",
|
||||
"bdo",
|
||||
"big",
|
||||
"cite",
|
||||
"code",
|
||||
"data",
|
||||
"del",
|
||||
"dfn",
|
||||
"em",
|
||||
"font",
|
||||
"i",
|
||||
"ins",
|
||||
"kbd",
|
||||
"mark",
|
||||
"q",
|
||||
"s",
|
||||
"samp",
|
||||
"small",
|
||||
"span",
|
||||
"strike",
|
||||
"strong",
|
||||
"time",
|
||||
"tt",
|
||||
"u",
|
||||
"var",
|
||||
"wbr",
|
||||
];
|
||||
|
||||
/**
|
||||
Here is a list of elements with planned support:
|
||||
a - i [x]
|
||||
abbr - s [x]
|
||||
acronym - s [x]
|
||||
address - s [x]
|
||||
audio - c [x]
|
||||
article - b [x]
|
||||
aside - b [x]
|
||||
b - s [x]
|
||||
bdi - s [x]
|
||||
bdo - s [x]
|
||||
big - s [x]
|
||||
blockquote- b [x]
|
||||
body - b [x]
|
||||
br - b [x]
|
||||
button - i [ ]
|
||||
caption - b [ ]
|
||||
center - b [x]
|
||||
cite - s [x]
|
||||
code - s [x]
|
||||
data - s [x]
|
||||
dd - b [x]
|
||||
del - s [x]
|
||||
dfn - s [x]
|
||||
div - b [x]
|
||||
dl - b [x]
|
||||
dt - b [x]
|
||||
em - s [x]
|
||||
figcaption- b [x]
|
||||
figure - b [x]
|
||||
font - s [x]
|
||||
footer - b [x]
|
||||
h1 - b [x]
|
||||
h2 - b [x]
|
||||
h3 - b [x]
|
||||
h4 - b [x]
|
||||
h5 - b [x]
|
||||
h6 - b [x]
|
||||
head - e [x]
|
||||
header - b [x]
|
||||
hr - b [x]
|
||||
html - b [x]
|
||||
i - s [x]
|
||||
img - c [x]
|
||||
ins - s [x]
|
||||
kbd - s [x]
|
||||
li - b [x]
|
||||
main - b [x]
|
||||
mark - s [x]
|
||||
nav - b [x]
|
||||
noscript - b [x]
|
||||
ol - b [x] post
|
||||
p - b [x]
|
||||
pre - b [x]
|
||||
q - s [x] post
|
||||
rp - s [x]
|
||||
rt - s [x]
|
||||
ruby - s [x]
|
||||
s - s [x]
|
||||
samp - s [x]
|
||||
section - b [x]
|
||||
small - s [x]
|
||||
source - [-] child of content
|
||||
span - s [x]
|
||||
strike - s [x]
|
||||
strong - s [x]
|
||||
sub - s [x]
|
||||
sup - s [x]
|
||||
svg - c [x]
|
||||
table - b [x]
|
||||
tbody - b [x]
|
||||
td - s [ ]
|
||||
template - e [x]
|
||||
tfoot - b [x]
|
||||
th - s [ ]
|
||||
thead - b [x]
|
||||
time - s [x]
|
||||
tr - ? [ ]
|
||||
track - [-] child of content
|
||||
tt - s [x]
|
||||
u - s [x]
|
||||
ul - b [x] post
|
||||
var - s [x]
|
||||
video - c [x]
|
||||
wbr - s [x]
|
||||
*/
|
||||
@ -0,0 +1,61 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import './html_elements.dart';
|
||||
import '../style.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
|
||||
/// An [InteractableElement] is a [StyledElement] that takes user gestures (e.g. tap).
|
||||
class InteractableElement extends StyledElement {
|
||||
String? href;
|
||||
|
||||
InteractableElement({
|
||||
required String name,
|
||||
required List<StyledElement> children,
|
||||
required Style style,
|
||||
required this.href,
|
||||
required dom.Node node,
|
||||
required String elementId,
|
||||
}) : super(name: name, children: children, style: style, node: node as dom.Element?, elementId: elementId);
|
||||
}
|
||||
|
||||
/// A [Gesture] indicates the type of interaction by a user.
|
||||
enum Gesture {
|
||||
TAP,
|
||||
}
|
||||
|
||||
StyledElement parseInteractableElement(
|
||||
dom.Element element, List<StyledElement> children) {
|
||||
switch (element.localName) {
|
||||
case "a":
|
||||
if (element.attributes.containsKey('href')) {
|
||||
return InteractableElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
href: element.attributes['href'],
|
||||
style: Style(
|
||||
color: Colors.blue,
|
||||
textDecoration: TextDecoration.underline,
|
||||
),
|
||||
node: element,
|
||||
elementId: element.id
|
||||
);
|
||||
}
|
||||
// When <a> tag have no href, it must be non clickable and without decoration.
|
||||
return StyledElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
style: Style(),
|
||||
node: element,
|
||||
elementId: element.id,
|
||||
);
|
||||
/// will never be called, just to suppress missing return warning
|
||||
default:
|
||||
return InteractableElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
node: element,
|
||||
href: '',
|
||||
style: Style(),
|
||||
elementId: "[[No ID]]"
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,214 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../html_parser.dart';
|
||||
import './anchor.dart';
|
||||
import './html_elements.dart';
|
||||
import './styled_element.dart';
|
||||
import '../style.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
|
||||
/// A [LayoutElement] is an element that breaks the normal Inline flow of
|
||||
/// an html document with a more complex layout. LayoutElements handle
|
||||
abstract class LayoutElement extends StyledElement {
|
||||
LayoutElement({
|
||||
String name = "[[No Name]]",
|
||||
required List<StyledElement> children,
|
||||
String? elementId,
|
||||
dom.Element? node,
|
||||
}) : super(name: name, children: children, style: Style(), node: node, elementId: elementId ?? "[[No ID]]");
|
||||
|
||||
Widget? toWidget(RenderContext context);
|
||||
}
|
||||
|
||||
class TableSectionLayoutElement extends LayoutElement {
|
||||
TableSectionLayoutElement({
|
||||
required String name,
|
||||
required List<StyledElement> children,
|
||||
}) : super(name: name, children: children);
|
||||
|
||||
@override
|
||||
Widget toWidget(RenderContext context) {
|
||||
// Not rendered; TableLayoutElement will instead consume its children
|
||||
return Container(child: Text("TABLE SECTION"));
|
||||
}
|
||||
}
|
||||
|
||||
class TableRowLayoutElement extends LayoutElement {
|
||||
TableRowLayoutElement({
|
||||
required String name,
|
||||
required List<StyledElement> children,
|
||||
required dom.Element node,
|
||||
}) : super(name: name, children: children, node: node);
|
||||
|
||||
@override
|
||||
Widget toWidget(RenderContext context) {
|
||||
// Not rendered; TableLayoutElement will instead consume its children
|
||||
return Container(child: Text("TABLE ROW"));
|
||||
}
|
||||
}
|
||||
|
||||
class TableCellElement extends StyledElement {
|
||||
int colspan = 1;
|
||||
int rowspan = 1;
|
||||
|
||||
TableCellElement({
|
||||
required String name,
|
||||
required String elementId,
|
||||
required List<String> elementClasses,
|
||||
required List<StyledElement> children,
|
||||
required Style style,
|
||||
required dom.Element node,
|
||||
}) : super(name: name, elementId: elementId, elementClasses: elementClasses, children: children, style: style, node: node) {
|
||||
colspan = _parseSpan(this, "colspan");
|
||||
rowspan = _parseSpan(this, "rowspan");
|
||||
}
|
||||
|
||||
static int _parseSpan(StyledElement element, String attributeName) {
|
||||
final spanValue = element.attributes[attributeName];
|
||||
return spanValue == null ? 1 : int.tryParse(spanValue) ?? 1;
|
||||
}
|
||||
}
|
||||
|
||||
TableCellElement parseTableCellElement(
|
||||
dom.Element element,
|
||||
List<StyledElement> children,
|
||||
) {
|
||||
final cell = TableCellElement(
|
||||
name: element.localName!,
|
||||
elementId: element.id,
|
||||
elementClasses: element.classes.toList(),
|
||||
children: children,
|
||||
node: element,
|
||||
style: Style(),
|
||||
);
|
||||
if (element.localName == "th") {
|
||||
cell.style = Style(
|
||||
fontWeight: FontWeight.bold,
|
||||
);
|
||||
}
|
||||
return cell;
|
||||
}
|
||||
|
||||
class TableStyleElement extends StyledElement {
|
||||
TableStyleElement({
|
||||
required String name,
|
||||
required List<StyledElement> children,
|
||||
required Style style,
|
||||
required dom.Element node,
|
||||
}) : super(name: name, children: children, style: style, node: node);
|
||||
}
|
||||
|
||||
TableStyleElement parseTableDefinitionElement(
|
||||
dom.Element element,
|
||||
List<StyledElement> children,
|
||||
) {
|
||||
switch (element.localName) {
|
||||
case "colgroup":
|
||||
case "col":
|
||||
return TableStyleElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
node: element,
|
||||
style: Style(),
|
||||
);
|
||||
default:
|
||||
return TableStyleElement(
|
||||
name: "[[No Name]]",
|
||||
children: children,
|
||||
node: element,
|
||||
style: Style(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DetailsContentElement extends LayoutElement {
|
||||
List<dom.Element> elementList;
|
||||
|
||||
DetailsContentElement({
|
||||
required String name,
|
||||
required List<StyledElement> children,
|
||||
required dom.Element node,
|
||||
required this.elementList,
|
||||
}) : super(name: name, node: node, children: children, elementId: node.id);
|
||||
|
||||
@override
|
||||
Widget toWidget(RenderContext context) {
|
||||
List<InlineSpan>? childrenList = children.map((tree) => context.parser.parseTree(context, tree)).toList();
|
||||
List<InlineSpan> toRemove = [];
|
||||
for (InlineSpan child in childrenList) {
|
||||
if (child is TextSpan && child.text != null && child.text!.trim().isEmpty) {
|
||||
toRemove.add(child);
|
||||
}
|
||||
}
|
||||
for (InlineSpan child in toRemove) {
|
||||
childrenList.remove(child);
|
||||
}
|
||||
InlineSpan? firstChild = childrenList.isNotEmpty == true ? childrenList.first : null;
|
||||
return ExpansionTile(
|
||||
key: AnchorKey.of(context.parser.key, this),
|
||||
expandedAlignment: Alignment.centerLeft,
|
||||
title: elementList.isNotEmpty == true && elementList.first.localName == "summary" ? StyledText(
|
||||
textSpan: TextSpan(
|
||||
style: style.generateTextStyle(),
|
||||
children: firstChild == null ? [] : [firstChild],
|
||||
),
|
||||
style: style,
|
||||
renderContext: context,
|
||||
) : Text("Details"),
|
||||
children: [
|
||||
StyledText(
|
||||
textSpan: TextSpan(
|
||||
style: style.generateTextStyle(),
|
||||
children: getChildren(childrenList, context, elementList.isNotEmpty == true && elementList.first.localName == "summary" ? firstChild : null)
|
||||
),
|
||||
style: style,
|
||||
renderContext: context,
|
||||
),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
List<InlineSpan> getChildren(List<InlineSpan> children, RenderContext context, InlineSpan? firstChild) {
|
||||
if (firstChild != null) children.removeAt(0);
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
class EmptyLayoutElement extends LayoutElement {
|
||||
EmptyLayoutElement({required String name}) : super(name: name, children: []);
|
||||
|
||||
@override
|
||||
Widget? toWidget(_) => null;
|
||||
}
|
||||
|
||||
LayoutElement parseLayoutElement(
|
||||
dom.Element element,
|
||||
List<StyledElement> children,
|
||||
) {
|
||||
switch (element.localName) {
|
||||
case "details":
|
||||
if (children.isEmpty) {
|
||||
return EmptyLayoutElement(name: "empty");
|
||||
}
|
||||
return DetailsContentElement(
|
||||
node: element,
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
elementList: element.children
|
||||
);
|
||||
case "thead":
|
||||
case "tbody":
|
||||
case "tfoot":
|
||||
return TableSectionLayoutElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
);
|
||||
case "tr":
|
||||
return TableRowLayoutElement(
|
||||
name: element.localName!,
|
||||
children: children,
|
||||
node: element,
|
||||
);
|
||||
default:
|
||||
return EmptyLayoutElement(name: "[[No Name]]");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,166 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import '../html_parser.dart';
|
||||
import './anchor.dart';
|
||||
import './html_elements.dart';
|
||||
import '../style.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
|
||||
/// A [ReplacedElement] is a type of [StyledElement] that does not require its [children] to be rendered.
|
||||
///
|
||||
/// A [ReplacedElement] may use its children nodes to determine relevant information
|
||||
/// (e.g. <video>'s <source> tags), but the children nodes will not be saved as [children].
|
||||
abstract class ReplacedElement extends StyledElement {
|
||||
PlaceholderAlignment alignment;
|
||||
|
||||
ReplacedElement({
|
||||
required String name,
|
||||
required Style style,
|
||||
required String elementId,
|
||||
List<StyledElement>? children,
|
||||
dom.Element? node,
|
||||
this.alignment = PlaceholderAlignment.aboveBaseline,
|
||||
}) : super(name: name, children: children ?? [], style: style, node: node, elementId: elementId);
|
||||
|
||||
static List<String?> parseMediaSources(List<dom.Element> elements) {
|
||||
return elements
|
||||
.where((element) => element.localName == 'source')
|
||||
.map((element) {
|
||||
return element.attributes['src'];
|
||||
}).toList();
|
||||
}
|
||||
|
||||
Widget? toWidget(RenderContext context);
|
||||
}
|
||||
|
||||
/// [TextContentElement] is a [ContentElement] with plaintext as its content.
|
||||
class TextContentElement extends ReplacedElement {
|
||||
String? text;
|
||||
dom.Node? node;
|
||||
|
||||
TextContentElement({
|
||||
required Style style,
|
||||
required this.text,
|
||||
this.node,
|
||||
dom.Element? element,
|
||||
}) : super(name: "[text]", style: style, node: element, elementId: "[[No ID]]");
|
||||
|
||||
@override
|
||||
String toString() {
|
||||
return "\"${text!.replaceAll("\n", "\\n")}\"";
|
||||
}
|
||||
|
||||
@override
|
||||
Widget? toWidget(_) => null;
|
||||
}
|
||||
|
||||
class EmptyContentElement extends ReplacedElement {
|
||||
EmptyContentElement({String name = "empty"}) : super(name: name, style: Style(), elementId: "[[No ID]]");
|
||||
|
||||
@override
|
||||
Widget? toWidget(_) => null;
|
||||
}
|
||||
|
||||
class RubyElement extends ReplacedElement {
|
||||
dom.Element element;
|
||||
|
||||
RubyElement({
|
||||
required this.element,
|
||||
required List<StyledElement> children,
|
||||
String name = "ruby"
|
||||
}) : super(name: name, alignment: PlaceholderAlignment.middle, style: Style(), elementId: element.id, children: children);
|
||||
|
||||
@override
|
||||
Widget toWidget(RenderContext context) {
|
||||
StyledElement? node;
|
||||
List<Widget> widgets = <Widget>[];
|
||||
final rubySize = context.parser.style['rt']?.fontSize?.size ?? max(9.0, context.style.fontSize!.size! / 2);
|
||||
final rubyYPos = rubySize + rubySize / 2;
|
||||
List<StyledElement> children = [];
|
||||
context.tree.children.forEachIndexed((index, element) {
|
||||
if (!((element is TextContentElement)
|
||||
&& (element.text ?? "").trim().isEmpty
|
||||
&& index > 0
|
||||
&& index + 1 < context.tree.children.length
|
||||
&& !(context.tree.children[index - 1] is TextContentElement)
|
||||
&& !(context.tree.children[index + 1] is TextContentElement))) {
|
||||
children.add(element);
|
||||
}
|
||||
});
|
||||
children.forEach((c) {
|
||||
if (c.name == "rt" && node != null) {
|
||||
final widget = Stack(
|
||||
alignment: Alignment.center,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: Center(
|
||||
child: Transform(
|
||||
transform:
|
||||
Matrix4.translationValues(0, -(rubyYPos), 0),
|
||||
child: ContainerSpan(
|
||||
newContext: RenderContext(
|
||||
buildContext: context.buildContext,
|
||||
parser: context.parser,
|
||||
style: c.style,
|
||||
tree: c,
|
||||
),
|
||||
style: c.style,
|
||||
child: Text(c.element!.innerHtml,
|
||||
style: c.style
|
||||
.generateTextStyle()
|
||||
.copyWith(fontSize: rubySize)),
|
||||
)))),
|
||||
ContainerSpan(
|
||||
newContext: context,
|
||||
style: context.style,
|
||||
child: node is TextContentElement ? Text((node as TextContentElement).text?.trim() ?? "",
|
||||
style: context.style.generateTextStyle()) : null,
|
||||
children: node is TextContentElement ? null : [context.parser.parseTree(context, node!)]),
|
||||
],
|
||||
);
|
||||
widgets.add(widget);
|
||||
} else {
|
||||
node = c;
|
||||
}
|
||||
});
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(top: rubySize),
|
||||
child: Wrap(
|
||||
key: AnchorKey.of(context.parser.key, this),
|
||||
runSpacing: rubySize,
|
||||
children: widgets.map((e) => Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
textBaseline: TextBaseline.alphabetic,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [e],
|
||||
)).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReplacedElement parseReplacedElement(
|
||||
dom.Element element,
|
||||
List<StyledElement> children,
|
||||
) {
|
||||
switch (element.localName) {
|
||||
case "br":
|
||||
return TextContentElement(
|
||||
text: "\n",
|
||||
style: Style(whiteSpace: WhiteSpace.PRE),
|
||||
element: element,
|
||||
node: element
|
||||
);
|
||||
case "ruby":
|
||||
return RubyElement(
|
||||
element: element,
|
||||
children: children,
|
||||
);
|
||||
default:
|
||||
return EmptyContentElement(name: element.localName == null ? "[[No Name]]" : element.localName!);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,412 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import './css_parser.dart';
|
||||
import '../style.dart';
|
||||
import 'package:html/dom.dart' as dom;
|
||||
//TODO(Sub6Resources): don't use the internal code of the html package as it may change unexpectedly.
|
||||
//ignore: implementation_imports
|
||||
import 'package:html/src/query_selector.dart';
|
||||
|
||||
/// A [StyledElement] applies a style to all of its children.
|
||||
class StyledElement {
|
||||
final String name;
|
||||
final String elementId;
|
||||
final List<String> elementClasses;
|
||||
List<StyledElement> children;
|
||||
Style style;
|
||||
final dom.Element? _node;
|
||||
|
||||
StyledElement({
|
||||
this.name = "[[No name]]",
|
||||
this.elementId = "[[No ID]]",
|
||||
this.elementClasses = const [],
|
||||
required this.children,
|
||||
required this.style,
|
||||
required dom.Element? node,
|
||||
}) : this._node = node;
|
||||
|
||||
bool matchesSelector(String selector) =>
|
||||
(_node != null && matches(_node!, selector)) || name == selector;
|
||||
|
||||
Map<String, String> get attributes =>
|
||||
_node?.attributes.map((key, value) {
|
||||
return MapEntry(key.toString(), value);
|
||||
}) ??
|
||||
Map<String, String>();
|
||||
|
||||
dom.Element? get element => _node;
|
||||
|
||||
@override
|
||||
String toString() {
|
||||
String selfData =
|
||||
"[$name] ${children.length} ${elementClasses.isNotEmpty == true ? 'C:${elementClasses.toString()}' : ''}${elementId.isNotEmpty == true ? 'ID: $elementId' : ''}";
|
||||
children.forEach((child) {
|
||||
selfData += ("\n${child.toString()}")
|
||||
.replaceAll(RegExp("^", multiLine: true), "-");
|
||||
});
|
||||
return selfData;
|
||||
}
|
||||
}
|
||||
|
||||
StyledElement parseStyledElement(
|
||||
dom.Element element, List<StyledElement> children) {
|
||||
StyledElement styledElement = StyledElement(
|
||||
name: element.localName!,
|
||||
elementId: element.id,
|
||||
elementClasses: element.classes.toList(),
|
||||
children: children,
|
||||
node: element,
|
||||
style: Style(),
|
||||
);
|
||||
|
||||
switch (element.localName) {
|
||||
case "abbr":
|
||||
case "acronym":
|
||||
styledElement.style = Style(
|
||||
textDecoration: TextDecoration.underline,
|
||||
textDecorationStyle: TextDecorationStyle.dotted,
|
||||
);
|
||||
break;
|
||||
case "address":
|
||||
continue italics;
|
||||
case "article":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "aside":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
bold:
|
||||
case "b":
|
||||
styledElement.style = Style(
|
||||
fontWeight: FontWeight.bold,
|
||||
);
|
||||
break;
|
||||
case "bdo":
|
||||
TextDirection textDirection =
|
||||
((element.attributes["dir"] ?? "ltr") == "rtl")
|
||||
? TextDirection.rtl
|
||||
: TextDirection.ltr;
|
||||
styledElement.style = Style(
|
||||
direction: textDirection,
|
||||
);
|
||||
break;
|
||||
case "big":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.larger,
|
||||
);
|
||||
break;
|
||||
case "blockquote":
|
||||
//TODO(Sub6Resources) this is a workaround for collapsing margins. Remove.
|
||||
if (element.parent!.localName == "blockquote") {
|
||||
styledElement.style = Style(
|
||||
margin: const EdgeInsets.only(left: 40.0, right: 40.0, bottom: 14.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
} else {
|
||||
styledElement.style = Style(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 14.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "body":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.all(8.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "center":
|
||||
styledElement.style = Style(
|
||||
alignment: Alignment.center,
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "cite":
|
||||
continue italics;
|
||||
monospace:
|
||||
case "code":
|
||||
styledElement.style = Style(
|
||||
fontFamily: 'Monospace',
|
||||
);
|
||||
break;
|
||||
case "dd":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.only(left: 40.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
strikeThrough:
|
||||
case "del":
|
||||
styledElement.style = Style(
|
||||
textDecoration: TextDecoration.lineThrough,
|
||||
);
|
||||
break;
|
||||
case "dfn":
|
||||
continue italics;
|
||||
case "div":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.all(0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "dl":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.symmetric(vertical: 14.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "dt":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "em":
|
||||
continue italics;
|
||||
case "figcaption":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "figure":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.symmetric(vertical: 14.0, horizontal: 40.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "footer":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "font":
|
||||
styledElement.style = Style(
|
||||
color: element.attributes['color'] != null ?
|
||||
element.attributes['color']!.startsWith("#") ?
|
||||
ExpressionMapping.stringToColor(element.attributes['color']!) :
|
||||
ExpressionMapping.namedColorToColor(element.attributes['color']!) :
|
||||
null,
|
||||
fontFamily: element.attributes['face']?.split(",").first,
|
||||
fontSize: element.attributes['size'] != null ? numberToFontSize(element.attributes['size']!) : null,
|
||||
);
|
||||
break;
|
||||
case "h1":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.xxLarge,
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 18.67),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "h2":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.xLarge,
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 17.5),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "h3":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize(16.38),
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 16.5),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "h4":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.medium,
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 18.5),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "h5":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize(11.62),
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 19.25),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "h6":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize(9.38),
|
||||
fontWeight: FontWeight.bold,
|
||||
margin: EdgeInsets.symmetric(vertical: 22),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "header":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "hr":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.symmetric(vertical: 7.0),
|
||||
width: double.infinity,
|
||||
height: 1,
|
||||
backgroundColor: Colors.black,
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "html":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
italics:
|
||||
case "i":
|
||||
styledElement.style = Style(
|
||||
fontStyle: FontStyle.italic,
|
||||
);
|
||||
break;
|
||||
case "ins":
|
||||
continue underline;
|
||||
case "kbd":
|
||||
continue monospace;
|
||||
case "li":
|
||||
styledElement.style = Style(
|
||||
display: Display.LIST_ITEM,
|
||||
);
|
||||
break;
|
||||
case "main":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "mark":
|
||||
styledElement.style = Style(
|
||||
color: Colors.black,
|
||||
backgroundColor: Colors.yellow,
|
||||
);
|
||||
break;
|
||||
case "nav":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "noscript":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "ol":
|
||||
case "ul":
|
||||
//TODO(Sub6Resources): This is a workaround for collapsed margins. Remove.
|
||||
if (element.parent!.localName == "li") {
|
||||
styledElement.style = Style(
|
||||
// margin: EdgeInsets.only(left: 30.0),
|
||||
display: Display.BLOCK,
|
||||
listStyleType: element.localName == "ol"
|
||||
? ListStyleType.DECIMAL
|
||||
: ListStyleType.DISC,
|
||||
);
|
||||
} else {
|
||||
styledElement.style = Style(
|
||||
// margin: EdgeInsets.only(left: 30.0, top: 14.0, bottom: 14.0),
|
||||
display: Display.BLOCK,
|
||||
listStyleType: element.localName == "ol"
|
||||
? ListStyleType.DECIMAL
|
||||
: ListStyleType.DISC,
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "p":
|
||||
styledElement.style = Style(
|
||||
margin: EdgeInsets.symmetric(vertical: 14.0),
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "pre":
|
||||
styledElement.style = Style(
|
||||
fontFamily: 'monospace',
|
||||
margin: EdgeInsets.symmetric(vertical: 14.0),
|
||||
whiteSpace: WhiteSpace.PRE,
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "q":
|
||||
styledElement.style = Style(
|
||||
before: "\"",
|
||||
after: "\"",
|
||||
);
|
||||
break;
|
||||
case "s":
|
||||
continue strikeThrough;
|
||||
case "samp":
|
||||
continue monospace;
|
||||
case "section":
|
||||
styledElement.style = Style(
|
||||
display: Display.BLOCK,
|
||||
);
|
||||
break;
|
||||
case "small":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.smaller,
|
||||
);
|
||||
break;
|
||||
case "strike":
|
||||
continue strikeThrough;
|
||||
case "strong":
|
||||
continue bold;
|
||||
case "sub":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.smaller,
|
||||
verticalAlign: VerticalAlign.SUB,
|
||||
);
|
||||
break;
|
||||
case "sup":
|
||||
styledElement.style = Style(
|
||||
fontSize: FontSize.smaller,
|
||||
verticalAlign: VerticalAlign.SUPER,
|
||||
);
|
||||
break;
|
||||
case "tt":
|
||||
continue monospace;
|
||||
underline:
|
||||
case "u":
|
||||
styledElement.style = Style(
|
||||
textDecoration: TextDecoration.underline,
|
||||
);
|
||||
break;
|
||||
case "var":
|
||||
continue italics;
|
||||
}
|
||||
|
||||
return styledElement;
|
||||
}
|
||||
|
||||
typedef ListCharacter = String Function(int i);
|
||||
|
||||
FontSize numberToFontSize(String num) {
|
||||
switch (num) {
|
||||
case "1":
|
||||
return FontSize.xxSmall;
|
||||
case "2":
|
||||
return FontSize.xSmall;
|
||||
case "3":
|
||||
return FontSize.small;
|
||||
case "4":
|
||||
return FontSize.medium;
|
||||
case "5":
|
||||
return FontSize.large;
|
||||
case "6":
|
||||
return FontSize.xLarge;
|
||||
case "7":
|
||||
return FontSize.xxLarge;
|
||||
}
|
||||
if (num.startsWith("+")) {
|
||||
final relativeNum = double.tryParse(num.substring(1)) ?? 0;
|
||||
return numberToFontSize((3 + relativeNum).toString());
|
||||
}
|
||||
if (num.startsWith("-")) {
|
||||
final relativeNum = double.tryParse(num.substring(1)) ?? 0;
|
||||
return numberToFontSize((3 - relativeNum).toString());
|
||||
}
|
||||
return FontSize.medium;
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../style.dart';
|
||||
|
||||
Map<String, String> namedColors = {
|
||||
"White": "#FFFFFF",
|
||||
"Silver": "#C0C0C0",
|
||||
"Gray": "#808080",
|
||||
"Black": "#000000",
|
||||
"Red": "#FF0000",
|
||||
"Maroon": "#800000",
|
||||
"Yellow": "#FFFF00",
|
||||
"Olive": "#808000",
|
||||
"Lime": "#00FF00",
|
||||
"Green": "#008000",
|
||||
"Aqua": "#00FFFF",
|
||||
"Teal": "#008080",
|
||||
"Blue": "#0000FF",
|
||||
"Navy": "#000080",
|
||||
"Fuchsia": "#FF00FF",
|
||||
"Purple": "#800080",
|
||||
};
|
||||
|
||||
class Context<T> {
|
||||
T data;
|
||||
|
||||
Context(this.data);
|
||||
}
|
||||
|
||||
// This class is a workaround so that both an image
|
||||
// and a link can detect taps at the same time.
|
||||
class MultipleTapGestureDetector extends InheritedWidget {
|
||||
final void Function()? onTap;
|
||||
|
||||
const MultipleTapGestureDetector({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
required this.onTap,
|
||||
}) : super(key: key, child: child);
|
||||
|
||||
static MultipleTapGestureDetector? of(BuildContext context) {
|
||||
return context.dependOnInheritedWidgetOfExactType<MultipleTapGestureDetector>();
|
||||
}
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(MultipleTapGestureDetector oldWidget) => false;
|
||||
}
|
||||
|
||||
class CustomBorderSide {
|
||||
CustomBorderSide({
|
||||
this.color = const Color(0xFF000000),
|
||||
this.width = 1.0,
|
||||
this.style = BorderStyle.none,
|
||||
}) : assert(width >= 0.0);
|
||||
|
||||
Color? color;
|
||||
double width;
|
||||
BorderStyle style;
|
||||
}
|
||||
|
||||
extension TextTransformUtil on String? {
|
||||
String? transformed(TextTransform? transform) {
|
||||
if (this == null) return null;
|
||||
if (transform == TextTransform.uppercase) {
|
||||
return this!.toUpperCase();
|
||||
} else if (transform == TextTransform.lowercase) {
|
||||
return this!.toLowerCase();
|
||||
} else if (transform == TextTransform.capitalize) {
|
||||
final stringBuffer = StringBuffer();
|
||||
|
||||
var capitalizeNext = true;
|
||||
for (final letter in this!.toLowerCase().codeUnits) {
|
||||
// UTF-16: A-Z => 65-90, a-z => 97-122.
|
||||
if (capitalizeNext && letter >= 97 && letter <= 122) {
|
||||
stringBuffer.writeCharCode(letter - 32);
|
||||
capitalizeNext = false;
|
||||
} else {
|
||||
// UTF-16: 32 == space, 46 == period
|
||||
if (letter == 32 || letter == 46) capitalizeNext = true;
|
||||
stringBuffer.writeCharCode(letter);
|
||||
}
|
||||
}
|
||||
|
||||
return stringBuffer.toString();
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,590 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import './flutter_html.dart';
|
||||
import './src/css_parser.dart';
|
||||
|
||||
///This class represents all the available CSS attributes
|
||||
///for this package.
|
||||
class Style {
|
||||
/// CSS attribute "`background-color`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: Colors.transparent,
|
||||
Color? backgroundColor;
|
||||
|
||||
/// CSS attribute "`color`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: unspecified,
|
||||
Color? color;
|
||||
|
||||
/// CSS attribute "`direction`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: TextDirection.ltr,
|
||||
TextDirection? direction;
|
||||
|
||||
/// CSS attribute "`display`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: unspecified,
|
||||
Display? display;
|
||||
|
||||
/// CSS attribute "`font-family`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: Theme.of(context).style.textTheme.body1.fontFamily
|
||||
String? fontFamily;
|
||||
|
||||
|
||||
/// The list of font families to fall back on when a glyph cannot be found in default font family.
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: null
|
||||
List<String>? fontFamilyFallback;
|
||||
|
||||
|
||||
/// CSS attribute "`font-feature-settings`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: normal
|
||||
List<FontFeature>? fontFeatureSettings;
|
||||
|
||||
/// CSS attribute "`font-size`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: FontSize.medium
|
||||
FontSize? fontSize;
|
||||
|
||||
/// CSS attribute "`font-style`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: FontStyle.normal,
|
||||
FontStyle? fontStyle;
|
||||
|
||||
/// CSS attribute "`font-weight`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: FontWeight.normal,
|
||||
FontWeight? fontWeight;
|
||||
|
||||
/// CSS attribute "`height`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: Unspecified (null),
|
||||
double? height;
|
||||
|
||||
/// CSS attribute "`letter-spacing`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: normal (0),
|
||||
double? letterSpacing;
|
||||
|
||||
/// CSS attribute "`list-style-type`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: ListStyleType.DISC
|
||||
ListStyleType? listStyleType;
|
||||
|
||||
/// CSS attribute "`list-style-position`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: ListStylePosition.OUTSIDE
|
||||
ListStylePosition? listStylePosition;
|
||||
|
||||
/// CSS attribute "`padding`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: EdgeInsets.zero
|
||||
EdgeInsets? padding;
|
||||
|
||||
/// CSS attribute "`margin`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: EdgeInsets.zero
|
||||
EdgeInsets? margin;
|
||||
|
||||
/// CSS attribute "`text-align`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: TextAlign.start,
|
||||
TextAlign? textAlign;
|
||||
|
||||
/// CSS attribute "`text-decoration`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: TextDecoration.none,
|
||||
TextDecoration? textDecoration;
|
||||
|
||||
/// CSS attribute "`text-decoration-color`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: Current color
|
||||
Color? textDecorationColor;
|
||||
|
||||
/// CSS attribute "`text-decoration-style`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: TextDecorationStyle.solid,
|
||||
TextDecorationStyle? textDecorationStyle;
|
||||
|
||||
/// Loosely based on CSS attribute "`text-decoration-thickness`"
|
||||
///
|
||||
/// Uses a percent modifier based on the font size.
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: 1.0 (specified by font size)
|
||||
// TODO(Sub6Resources): Possibly base this more closely on the CSS attribute.
|
||||
double? textDecorationThickness;
|
||||
|
||||
/// CSS attribute "`text-shadow`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: none,
|
||||
List<Shadow>? textShadow;
|
||||
|
||||
/// CSS attribute "`vertical-align`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: VerticalAlign.BASELINE,
|
||||
VerticalAlign? verticalAlign;
|
||||
|
||||
/// CSS attribute "`white-space`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: WhiteSpace.NORMAL,
|
||||
WhiteSpace? whiteSpace;
|
||||
|
||||
/// CSS attribute "`width`"
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: unspecified (null)
|
||||
double? width;
|
||||
|
||||
/// CSS attribute "`word-spacing`"
|
||||
///
|
||||
/// Inherited: yes,
|
||||
/// Default: normal (0)
|
||||
double? wordSpacing;
|
||||
|
||||
/// CSS attribute "`line-height`"
|
||||
///
|
||||
/// Supported values: double values
|
||||
///
|
||||
/// Unsupported values: normal, 80%, ..
|
||||
///
|
||||
/// Inherited: no,
|
||||
/// Default: Unspecified (null),
|
||||
LineHeight? lineHeight;
|
||||
|
||||
//TODO modify these to match CSS styles
|
||||
String? before;
|
||||
String? after;
|
||||
Border? border;
|
||||
Alignment? alignment;
|
||||
Widget? markerContent;
|
||||
|
||||
/// MaxLine
|
||||
///
|
||||
///
|
||||
///
|
||||
///
|
||||
int? maxLines;
|
||||
|
||||
/// TextOverflow
|
||||
///
|
||||
///
|
||||
///
|
||||
///
|
||||
TextOverflow? textOverflow;
|
||||
|
||||
TextTransform? textTransform;
|
||||
|
||||
Style({
|
||||
this.backgroundColor = Colors.transparent,
|
||||
this.color,
|
||||
this.direction,
|
||||
this.display,
|
||||
this.fontFamily,
|
||||
this.fontFamilyFallback,
|
||||
this.fontFeatureSettings,
|
||||
this.fontSize,
|
||||
this.fontStyle,
|
||||
this.fontWeight,
|
||||
this.height,
|
||||
this.lineHeight,
|
||||
this.letterSpacing,
|
||||
this.listStyleType,
|
||||
this.listStylePosition,
|
||||
this.padding,
|
||||
this.margin,
|
||||
this.textAlign,
|
||||
this.textDecoration,
|
||||
this.textDecorationColor,
|
||||
this.textDecorationStyle,
|
||||
this.textDecorationThickness,
|
||||
this.textShadow,
|
||||
this.verticalAlign,
|
||||
this.whiteSpace,
|
||||
this.width,
|
||||
this.wordSpacing,
|
||||
this.before,
|
||||
this.after,
|
||||
this.border,
|
||||
this.alignment,
|
||||
this.markerContent,
|
||||
this.maxLines,
|
||||
this.textOverflow,
|
||||
this.textTransform = TextTransform.none,
|
||||
}) {
|
||||
if (this.alignment == null &&
|
||||
(display == Display.BLOCK || display == Display.LIST_ITEM)) {
|
||||
this.alignment = Alignment.centerLeft;
|
||||
}
|
||||
}
|
||||
|
||||
static Map<String, Style> fromThemeData(ThemeData theme) => {
|
||||
'h1': Style.fromTextStyle(theme.textTheme.headline1!),
|
||||
'h2': Style.fromTextStyle(theme.textTheme.headline2!),
|
||||
'h3': Style.fromTextStyle(theme.textTheme.headline3!),
|
||||
'h4': Style.fromTextStyle(theme.textTheme.headline4!),
|
||||
'h5': Style.fromTextStyle(theme.textTheme.headline5!),
|
||||
'h6': Style.fromTextStyle(theme.textTheme.headline6!),
|
||||
'body': Style.fromTextStyle(theme.textTheme.bodyText2!),
|
||||
};
|
||||
|
||||
static Map<String, Style> fromCss(String css, OnCssParseError? onCssParseError) {
|
||||
final declarations = parseExternalCss(css, onCssParseError);
|
||||
Map<String, Style> styleMap = {};
|
||||
declarations.forEach((key, value) {
|
||||
styleMap[key] = declarationsToStyle(value);
|
||||
});
|
||||
return styleMap;
|
||||
}
|
||||
|
||||
TextStyle generateTextStyle() {
|
||||
return TextStyle(
|
||||
backgroundColor: backgroundColor,
|
||||
color: color,
|
||||
decoration: textDecoration,
|
||||
decorationColor: textDecorationColor,
|
||||
decorationStyle: textDecorationStyle,
|
||||
decorationThickness: textDecorationThickness,
|
||||
fontFamily: fontFamily,
|
||||
fontFamilyFallback: fontFamilyFallback,
|
||||
fontFeatures: fontFeatureSettings,
|
||||
fontSize: fontSize?.size,
|
||||
fontStyle: fontStyle,
|
||||
fontWeight: fontWeight,
|
||||
letterSpacing: letterSpacing,
|
||||
shadows: textShadow,
|
||||
wordSpacing: wordSpacing,
|
||||
height: lineHeight?.size ?? 1.0,
|
||||
//TODO background
|
||||
//TODO textBaseline
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
String toString() {
|
||||
return "Style";
|
||||
}
|
||||
|
||||
Style merge(Style other) {
|
||||
return copyWith(
|
||||
backgroundColor: other.backgroundColor,
|
||||
color: other.color,
|
||||
direction: other.direction,
|
||||
display: other.display,
|
||||
fontFamily: other.fontFamily,
|
||||
fontFamilyFallback: other.fontFamilyFallback,
|
||||
fontFeatureSettings: other.fontFeatureSettings,
|
||||
fontSize: other.fontSize,
|
||||
fontStyle: other.fontStyle,
|
||||
fontWeight: other.fontWeight,
|
||||
height: other.height,
|
||||
lineHeight: other.lineHeight,
|
||||
letterSpacing: other.letterSpacing,
|
||||
listStyleType: other.listStyleType,
|
||||
listStylePosition: other.listStylePosition,
|
||||
padding: other.padding,
|
||||
//TODO merge EdgeInsets
|
||||
margin: other.margin,
|
||||
//TODO merge EdgeInsets
|
||||
textAlign: other.textAlign,
|
||||
textDecoration: other.textDecoration,
|
||||
textDecorationColor: other.textDecorationColor,
|
||||
textDecorationStyle: other.textDecorationStyle,
|
||||
textDecorationThickness: other.textDecorationThickness,
|
||||
textShadow: other.textShadow,
|
||||
verticalAlign: other.verticalAlign,
|
||||
whiteSpace: other.whiteSpace,
|
||||
width: other.width,
|
||||
wordSpacing: other.wordSpacing,
|
||||
|
||||
before: other.before,
|
||||
after: other.after,
|
||||
border: other.border,
|
||||
//TODO merge border
|
||||
alignment: other.alignment,
|
||||
markerContent: other.markerContent,
|
||||
maxLines: other.maxLines,
|
||||
textOverflow: other.textOverflow,
|
||||
textTransform: other.textTransform,
|
||||
);
|
||||
}
|
||||
|
||||
Style copyOnlyInherited(Style child) {
|
||||
FontSize? finalFontSize = child.fontSize != null ?
|
||||
fontSize != null && child.fontSize?.units == "em" ?
|
||||
FontSize(child.fontSize!.size! * fontSize!.size!) : child.fontSize
|
||||
: fontSize != null && fontSize!.size! < 0 ?
|
||||
FontSize.percent(100) : fontSize;
|
||||
LineHeight? finalLineHeight = child.lineHeight != null ?
|
||||
child.lineHeight?.units == "length" ?
|
||||
LineHeight(child.lineHeight!.size! / (finalFontSize == null ? 14 : finalFontSize.size!) * 1.2) : child.lineHeight
|
||||
: lineHeight;
|
||||
return child.copyWith(
|
||||
backgroundColor: child.backgroundColor != Colors.transparent ?
|
||||
child.backgroundColor : backgroundColor,
|
||||
color: child.color ?? color,
|
||||
direction: child.direction ?? direction,
|
||||
display: display == Display.NONE ? display : child.display,
|
||||
fontFamily: child.fontFamily ?? fontFamily,
|
||||
fontFamilyFallback: child.fontFamilyFallback ?? fontFamilyFallback,
|
||||
fontFeatureSettings: child.fontFeatureSettings ?? fontFeatureSettings,
|
||||
fontSize: finalFontSize,
|
||||
fontStyle: child.fontStyle ?? fontStyle,
|
||||
fontWeight: child.fontWeight ?? fontWeight,
|
||||
lineHeight: finalLineHeight,
|
||||
letterSpacing: child.letterSpacing ?? letterSpacing,
|
||||
listStyleType: child.listStyleType ?? listStyleType,
|
||||
listStylePosition: child.listStylePosition ?? listStylePosition,
|
||||
textAlign: child.textAlign ?? textAlign,
|
||||
textDecoration: TextDecoration.combine(
|
||||
[child.textDecoration ?? TextDecoration.none,
|
||||
textDecoration ?? TextDecoration.none]),
|
||||
textShadow: child.textShadow ?? textShadow,
|
||||
whiteSpace: child.whiteSpace ?? whiteSpace,
|
||||
wordSpacing: child.wordSpacing ?? wordSpacing,
|
||||
maxLines: child.maxLines ?? maxLines,
|
||||
textOverflow: child.textOverflow ?? textOverflow,
|
||||
textTransform: child.textTransform ?? textTransform,
|
||||
);
|
||||
}
|
||||
|
||||
Style copyWith({
|
||||
Color? backgroundColor,
|
||||
Color? color,
|
||||
TextDirection? direction,
|
||||
Display? display,
|
||||
String? fontFamily,
|
||||
List<String>? fontFamilyFallback,
|
||||
List<FontFeature>? fontFeatureSettings,
|
||||
FontSize? fontSize,
|
||||
FontStyle? fontStyle,
|
||||
FontWeight? fontWeight,
|
||||
double? height,
|
||||
LineHeight? lineHeight,
|
||||
double? letterSpacing,
|
||||
ListStyleType? listStyleType,
|
||||
ListStylePosition? listStylePosition,
|
||||
EdgeInsets? padding,
|
||||
EdgeInsets? margin,
|
||||
TextAlign? textAlign,
|
||||
TextDecoration? textDecoration,
|
||||
Color? textDecorationColor,
|
||||
TextDecorationStyle? textDecorationStyle,
|
||||
double? textDecorationThickness,
|
||||
List<Shadow>? textShadow,
|
||||
VerticalAlign? verticalAlign,
|
||||
WhiteSpace? whiteSpace,
|
||||
double? width,
|
||||
double? wordSpacing,
|
||||
String? before,
|
||||
String? after,
|
||||
Border? border,
|
||||
Alignment? alignment,
|
||||
Widget? markerContent,
|
||||
int? maxLines,
|
||||
TextOverflow? textOverflow,
|
||||
TextTransform? textTransform,
|
||||
bool? beforeAfterNull,
|
||||
}) {
|
||||
return Style(
|
||||
backgroundColor: backgroundColor ?? this.backgroundColor,
|
||||
color: color ?? this.color,
|
||||
direction: direction ?? this.direction,
|
||||
display: display ?? this.display,
|
||||
fontFamily: fontFamily ?? this.fontFamily,
|
||||
fontFamilyFallback: fontFamilyFallback ?? this.fontFamilyFallback,
|
||||
fontFeatureSettings: fontFeatureSettings ?? this.fontFeatureSettings,
|
||||
fontSize: fontSize ?? this.fontSize,
|
||||
fontStyle: fontStyle ?? this.fontStyle,
|
||||
fontWeight: fontWeight ?? this.fontWeight,
|
||||
height: height ?? this.height,
|
||||
lineHeight: lineHeight ?? this.lineHeight,
|
||||
letterSpacing: letterSpacing ?? this.letterSpacing,
|
||||
listStyleType: listStyleType ?? this.listStyleType,
|
||||
listStylePosition: listStylePosition ?? this.listStylePosition,
|
||||
padding: padding ?? this.padding,
|
||||
margin: margin ?? this.margin,
|
||||
textAlign: textAlign ?? this.textAlign,
|
||||
textDecoration: textDecoration ?? this.textDecoration,
|
||||
textDecorationColor: textDecorationColor ?? this.textDecorationColor,
|
||||
textDecorationStyle: textDecorationStyle ?? this.textDecorationStyle,
|
||||
textDecorationThickness:
|
||||
textDecorationThickness ?? this.textDecorationThickness,
|
||||
textShadow: textShadow ?? this.textShadow,
|
||||
verticalAlign: verticalAlign ?? this.verticalAlign,
|
||||
whiteSpace: whiteSpace ?? this.whiteSpace,
|
||||
width: width ?? this.width,
|
||||
wordSpacing: wordSpacing ?? this.wordSpacing,
|
||||
before: beforeAfterNull == true ? null : before ?? this.before,
|
||||
after: beforeAfterNull == true ? null : after ?? this.after,
|
||||
border: border ?? this.border,
|
||||
alignment: alignment ?? this.alignment,
|
||||
markerContent: markerContent ?? this.markerContent,
|
||||
maxLines: maxLines ?? this.maxLines,
|
||||
textOverflow: textOverflow ?? this.textOverflow,
|
||||
textTransform: textTransform ?? this.textTransform,
|
||||
);
|
||||
}
|
||||
|
||||
Style.fromTextStyle(TextStyle textStyle) {
|
||||
this.backgroundColor = textStyle.backgroundColor;
|
||||
this.color = textStyle.color;
|
||||
this.textDecoration = textStyle.decoration;
|
||||
this.textDecorationColor = textStyle.decorationColor;
|
||||
this.textDecorationStyle = textStyle.decorationStyle;
|
||||
this.textDecorationThickness = textStyle.decorationThickness;
|
||||
this.fontFamily = textStyle.fontFamily;
|
||||
this.fontFamilyFallback = textStyle.fontFamilyFallback;
|
||||
this.fontFeatureSettings = textStyle.fontFeatures;
|
||||
this.fontSize = FontSize(textStyle.fontSize);
|
||||
this.fontStyle = textStyle.fontStyle;
|
||||
this.fontWeight = textStyle.fontWeight;
|
||||
this.letterSpacing = textStyle.letterSpacing;
|
||||
this.textShadow = textStyle.shadows;
|
||||
this.wordSpacing = textStyle.wordSpacing;
|
||||
this.lineHeight = LineHeight(textStyle.height ?? 1.2);
|
||||
this.textTransform = TextTransform.none;
|
||||
}
|
||||
}
|
||||
|
||||
enum Display {
|
||||
BLOCK,
|
||||
INLINE,
|
||||
INLINE_BLOCK,
|
||||
LIST_ITEM,
|
||||
NONE,
|
||||
}
|
||||
|
||||
class FontSize {
|
||||
final double? size;
|
||||
final String units;
|
||||
|
||||
const FontSize(this.size, {this.units = ""});
|
||||
|
||||
/// A percentage of the parent style's font size.
|
||||
factory FontSize.percent(double percent) {
|
||||
return FontSize(percent / -100.0, units: "%");
|
||||
}
|
||||
|
||||
factory FontSize.em(double? em) {
|
||||
return FontSize(em, units: "em");
|
||||
}
|
||||
|
||||
factory FontSize.rem(double rem) {
|
||||
return FontSize(rem * 16 - 2, units: "rem");
|
||||
}
|
||||
// These values are calculated based off of the default (`medium`)
|
||||
// being 14px.
|
||||
//
|
||||
// TODO(Sub6Resources): This seems to override Flutter's accessibility text scaling.
|
||||
//
|
||||
// Negative values are computed during parsing to be a percentage of
|
||||
// the parent style's font size.
|
||||
static const xxSmall = FontSize(7.875);
|
||||
static const xSmall = FontSize(8.75);
|
||||
static const small = FontSize(11.375);
|
||||
static const medium = FontSize(14.0);
|
||||
static const large = FontSize(15.75);
|
||||
static const xLarge = FontSize(21.0);
|
||||
static const xxLarge = FontSize(28.0);
|
||||
static const smaller = FontSize(-0.83);
|
||||
static const larger = FontSize(-1.2);
|
||||
}
|
||||
|
||||
class LineHeight {
|
||||
final double? size;
|
||||
final String units;
|
||||
|
||||
const LineHeight(this.size, {this.units = ""});
|
||||
|
||||
factory LineHeight.percent(double percent) {
|
||||
return LineHeight(percent / 100.0 * 1.2, units: "%");
|
||||
}
|
||||
|
||||
factory LineHeight.em(double em) {
|
||||
return LineHeight(em * 1.2, units: "em");
|
||||
}
|
||||
|
||||
factory LineHeight.rem(double rem) {
|
||||
return LineHeight(rem * 1.2, units: "rem");
|
||||
}
|
||||
|
||||
factory LineHeight.number(double num) {
|
||||
return LineHeight(num * 1.2, units: "number");
|
||||
}
|
||||
|
||||
static const normal = LineHeight(1.2);
|
||||
}
|
||||
|
||||
class ListStyleType {
|
||||
final String text;
|
||||
final String type;
|
||||
final Widget? widget;
|
||||
|
||||
const ListStyleType(this.text, {this.type = "marker", this.widget});
|
||||
|
||||
factory ListStyleType.fromImage(String url) => ListStyleType(url, type: "image");
|
||||
|
||||
factory ListStyleType.fromWidget(Widget widget) => ListStyleType("", widget: widget, type: "widget");
|
||||
|
||||
static const LOWER_ALPHA = ListStyleType("LOWER_ALPHA");
|
||||
static const UPPER_ALPHA = ListStyleType("UPPER_ALPHA");
|
||||
static const LOWER_LATIN = ListStyleType("LOWER_LATIN");
|
||||
static const UPPER_LATIN = ListStyleType("UPPER_LATIN");
|
||||
static const CIRCLE = ListStyleType("CIRCLE");
|
||||
static const DISC = ListStyleType("DISC");
|
||||
static const DECIMAL = ListStyleType("DECIMAL");
|
||||
static const LOWER_ROMAN = ListStyleType("LOWER_ROMAN");
|
||||
static const UPPER_ROMAN = ListStyleType("UPPER_ROMAN");
|
||||
static const SQUARE = ListStyleType("SQUARE");
|
||||
static const NONE = ListStyleType("NONE");
|
||||
}
|
||||
|
||||
enum ListStylePosition {
|
||||
OUTSIDE,
|
||||
INSIDE,
|
||||
}
|
||||
|
||||
enum TextTransform {
|
||||
uppercase,
|
||||
lowercase,
|
||||
capitalize,
|
||||
none,
|
||||
}
|
||||
|
||||
enum VerticalAlign {
|
||||
BASELINE,
|
||||
SUB,
|
||||
SUPER,
|
||||
}
|
||||
|
||||
enum WhiteSpace {
|
||||
NORMAL,
|
||||
PRE,
|
||||
}
|
||||
Loading…
Reference in new issue