feat: svgs working in webview

This commit is contained in:
Jonathan Kelley 2021-07-15 12:18:11 -04:00
parent f14d4ef7c2
commit 3bedcb93ca
5 changed files with 307 additions and 33 deletions

View File

@ -22,8 +22,8 @@ default = [
"core",
"macro",
"hooks",
"html",
"ssr",
"html",
"web",
"desktop",
# "atoms",

View File

@ -29,7 +29,7 @@ macro_rules! no_namespace_trait_methods {
$(
$(#[$attr])*
fn $name<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
cx.attr(stringify!(name), val, None, false)
cx.attr(stringify!($name), val, None, false)
}
)*
};
@ -701,7 +701,9 @@ macro_rules! builder_constructors {
( $(
$(#[$attr:meta])*
$name:ident <> $namespace:tt;
$name:ident <> $namespace:tt {
$($fil:ident: $vil:ident,)*
};
)* ) => {
$(
#[allow(non_camel_case_types)]
@ -710,7 +712,17 @@ macro_rules! builder_constructors {
impl DioxusElement for $name {
const TAG_NAME: &'static str = stringify!($name);
const NAME_SPACE: Option<&'static str> = Some(stringify!($namespace));
const NAME_SPACE: Option<&'static str> = Some($namespace);
}
impl SvgAttributes for $name {}
impl $name {
$(
pub fn $fil<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
cx.attr(stringify!($fil), val, Some(stringify!($namespace)), false)
}
)*
}
)*
};
@ -1622,52 +1634,321 @@ builder_constructors! {
template {};
}
pub trait SvgAttributes {
aria_trait_methods! {
accent_height: "accent-height",
accumulate: "accumulate",
additive: "additive",
alignment_baseline: "alignment-baseline",
alphabetic: "alphabetic",
amplitude: "amplitude",
arabic_form: "arabic-form",
ascent: "ascent",
attributeName: "attributeName",
attributeType: "attributeType",
azimuth: "azimuth",
baseFrequency: "baseFrequency",
baseline_shift: "baseline-shift",
baseProfile: "baseProfile",
bbox: "bbox",
begin: "begin",
bias: "bias",
by: "by",
calcMode: "calcMode",
cap_height: "cap-height",
class: "class",
clip: "clip",
clipPathUnits: "clipPathUnits",
clip_path: "clip-path",
clip_rule: "clip-rule",
color: "color",
color_interpolation: "color-interpolation",
color_interpolation_filters: "color-interpolation-filters",
color_profile: "color-profile",
color_rendering: "color-rendering",
contentScriptType: "contentScriptType",
contentStyleType: "contentStyleType",
crossorigin: "crossorigin",
cursor: "cursor",
cx: "cx",
cy: "cy",
d: "d",
decelerate: "decelerate",
descent: "descent",
diffuseConstant: "diffuseConstant",
direction: "direction",
display: "display",
divisor: "divisor",
dominant_baseline: "dominant-baseline",
dur: "dur",
dx: "dx",
dy: "dy",
edgeMode: "edgeMode",
elevation: "elevation",
enable_background: "enable-background",
end: "end",
exponent: "exponent",
fill: "fill",
fill_opacity: "fill-opacity",
fill_rule: "fill-rule",
filter: "filter",
filterRes: "filterRes",
filterUnits: "filterUnits",
flood_color: "flood-color",
flood_opacity: "flood-opacity",
font_family: "font-family",
font_size: "font-size",
font_size_adjust: "font-size-adjust",
font_stretch: "font-stretch",
font_style: "font-style",
font_variant: "font-variant",
font_weight: "font-weight",
format: "format",
from: "from",
fr: "fr",
fx: "fx",
fy: "fy",
g1: "g1",
g2: "g2",
glyph_name: "glyph-name",
glyph_orientation_horizontal: "glyph-orientation-horizontal",
glyph_orientation_vertical: "glyph-orientation-vertical",
glyphRef: "glyphRef",
gradientTransform: "gradientTransform",
gradientUnits: "gradientUnits",
hanging: "hanging",
height: "height",
href: "href",
hreflang: "hreflang",
horiz_adv_x: "horiz-adv-x",
horiz_origin_x: "horiz-origin-x",
id: "id",
ideographic: "ideographic",
image_rendering: "image-rendering",
_in: "_in",
in2: "in2",
intercept: "intercept",
k: "k",
k1: "k1",
k2: "k2",
k3: "k3",
k4: "k4",
kernelMatrix: "kernelMatrix",
kernelUnitLength: "kernelUnitLength",
kerning: "kerning",
keyPoints: "keyPoints",
keySplines: "keySplines",
keyTimes: "keyTimes",
lang: "lang",
lengthAdjust: "lengthAdjust",
letter_spacing: "letter-spacing",
lighting_color: "lighting-color",
limitingConeAngle: "limitingConeAngle",
local: "local",
marker_end: "marker-end",
marker_mid: "marker-mid",
marker_start: "marker_start",
markerHeight: "markerHeight",
markerUnits: "markerUnits",
markerWidth: "markerWidth",
mask: "mask",
maskContentUnits: "maskContentUnits",
maskUnits: "maskUnits",
mathematical: "mathematical",
max: "max",
media: "media",
method: "method",
min: "min",
mode: "mode",
name: "name",
numOctaves: "numOctaves",
offset: "offset",
opacity: "opacity",
operator: "operator",
order: "order",
orient: "orient",
orientation: "orientation",
origin: "origin",
overflow: "overflow",
overline_position: "overline-position",
overline_thickness: "overline-thickness",
panose_1: "panose-1",
paint_order: "paint-order",
path: "path",
pathLength: "pathLength",
patternContentUnits: "patternContentUnits",
patternTransform: "patternTransform",
patternUnits: "patternUnits",
ping: "ping",
pointer_events: "pointer-events",
points: "points",
pointsAtX: "pointsAtX",
pointsAtY: "pointsAtY",
pointsAtZ: "pointsAtZ",
preserveAlpha: "preserveAlpha",
preserveAspectRatio: "preserveAspectRatio",
primitiveUnits: "primitiveUnits",
r: "r",
radius: "radius",
referrerPolicy: "referrerPolicy",
refX: "refX",
refY: "refY",
rel: "rel",
rendering_intent: "rendering-intent",
repeatCount: "repeatCount",
repeatDur: "repeatDur",
requiredExtensions: "requiredExtensions",
requiredFeatures: "requiredFeatures",
restart: "restart",
result: "result",
rotate: "rotate",
rx: "rx",
ry: "ry",
scale: "scale",
seed: "seed",
shape_rendering: "shape-rendering",
slope: "slope",
spacing: "spacing",
specularConstant: "specularConstant",
specularExponent: "specularExponent",
speed: "speed",
spreadMethod: "spreadMethod",
startOffset: "startOffset",
stdDeviation: "stdDeviation",
stemh: "stemh",
stemv: "stemv",
stitchTiles: "stitchTiles",
stop_color: "stop_color",
stop_opacity: "stop_opacity",
strikethrough_position: "strikethrough-position",
strikethrough_thickness: "strikethrough-thickness",
string: "string",
stroke: "stroke",
stroke_dasharray: "stroke-dasharray",
stroke_dashoffset: "stroke-dashoffset",
stroke_linecap: "stroke-linecap",
stroke_linejoin: "stroke-linejoin",
stroke_miterlimit: "stroke-miterlimit",
stroke_opacity: "stroke-opacity",
stroke_width: "stroke-width",
style: "style",
surfaceScale: "surfaceScale",
systemLanguage: "systemLanguage",
tabindex: "tabindex",
tableValues: "tableValues",
target: "target",
targetX: "targetX",
targetY: "targetY",
text_anchor: "text-anchor",
text_decoration: "text-decoration",
text_rendering: "text-rendering",
textLength: "textLength",
to: "to",
transform: "transform",
transform_origin: "transform-origin",
_type: "_type",
u1: "u1",
u2: "u2",
underline_position: "underline-position",
underline_thickness: "underline-thickness",
unicode: "unicode",
unicode_bidi: "unicode-bidi",
unicode_range: "unicode-range",
units_per_em: "units-per-em",
v_alphabetic: "v-alphabetic",
v_hanging: "v-hanging",
v_ideographic: "v-ideographic",
v_mathematical: "v-mathematical",
values: "values",
vector_effect: "vector-effect",
version: "version",
vert_adv_y: "vert-adv-y",
vert_origin_x: "vert-origin-x",
vert_origin_y: "vert-origin-y",
viewBox: "viewBox",
viewTarget: "viewTarget",
visibility: "visibility",
width: "width",
widths: "widths",
word_spacing: "word-spacing",
writing_mode: "writing-mode",
x: "x",
x_height: "x-height",
x1: "x1",
x2: "x2",
xmlns: "xmlns",
xChannelSelector: "xChannelSelector",
y: "y",
y1: "y1",
y2: "y2",
yChannelSelector: "yChannelSelector",
z: "z",
zoomAndPan: "zoomAndPan",
}
}
builder_constructors! {
// SVG components
/// Build a
/// [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
/// element.
svg <> "http://www.w3.org/2000/svg" ;
svg <> "http://www.w3.org/2000/svg" { };
/// Build a
/// [`<path>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)
/// element.
path <> "http://www.w3.org/2000/svg";
path <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<circle>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
/// element.
circle <> "http://www.w3.org/2000/svg";
circle <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<ellipse>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)
/// element.
ellipse <> "http://www.w3.org/2000/svg";
ellipse <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<line>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)
/// element.
line <> "http://www.w3.org/2000/svg";
line <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<polygon>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon)
/// element.
polygon <> "http://www.w3.org/2000/svg";
polygon <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<polyline>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline)
/// element.
polyline <> "http://www.w3.org/2000/svg";
polyline <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<rect>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)
/// element.
rect <> "http://www.w3.org/2000/svg";
rect <> "http://www.w3.org/2000/svg" {
};
/// Build a
/// [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)
/// element.
image <> "http://www.w3.org/2000/svg";
image <> "http://www.w3.org/2000/svg" {
};
}

View File

@ -10,19 +10,22 @@ license = "MIT/Apache-2.0"
[dependencies]
# web-view = { git = "https://github.com/Boscop/web-view" }
dioxus-core = { path="../core", version="0.1.2", features=["serialize"] }
dioxus-core = { path = "../core", version = "0.1.2", features = ["serialize"] }
anyhow = "1.0.38"
argh = "0.1.4"
serde = "1.0.120"
serde_json = "1.0.61"
async-std = { version="1.9.0", features=["attributes"] }
thiserror = "1.0.23"
log = "0.4.13"
fern = { version="0.6.0", features=["colored"] }
fern = { version = "0.6.0", features = ["colored"] }
html-escape = "0.2.9"
wry = "0.11.0"
[dev-dependencies]
tide = "0.15.0"
tide-websockets = "0.3.0"
html-escape = "0.2.9"
async-std = { version = "1.9.0", features = ["attributes"] }
# thiserror = "1.0.23"
# log = "0.4.13"
@ -30,10 +33,9 @@ html-escape = "0.2.9"
# wasm-bindgen-cli-support = "0.2.71"
# anyhow = "1.0.38"
# argh = "0.1.4"
# async-std = { version = "1.9.0", features = ["attributes"] }
# serde = "1.0.120"
# serde_json = "1.0.61"
# async-std = { version = "1.9.0", features = ["attributes"] }
wry = "0.10.3"
[build-dependencies]

View File

@ -2,8 +2,6 @@
<html>
<head>
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> -->
<script>
class Interpreter {
constructor(root) {
@ -110,20 +108,11 @@
}
}
function EditListReceived(rawEditList) {
let editList = JSON.parse(rawEditList);
console.warn("hnelllo");
editList.forEach(function (edit, index) {
console.log(edit);
op_table[edit.type](interpreter, edit);
});
}
const op_table = new OPTABLE();
async function initialize() {
const reply = await rpc.call('initiate');
const interpreter = new Interpreter(window.document.getElementById("_dioxusroot").firstChild);
const interpreter = new Interpreter(window.document.getElementById("_dioxusroot"));
console.log(reply);
for (let x = 0; x < reply.length; x++) {
@ -143,7 +132,9 @@
<body>
<div id="_dioxusroot">
_
<div>
</div>
</div>
</body>

View File

@ -188,7 +188,7 @@ pub use dioxus_webview as desktop;
pub mod prelude {
//! A glob import that includes helper types like FC, rsx!, html!, and required traits
pub use dioxus_core::prelude::*;
pub use dioxus_elements::GlobalAttributes;
pub use dioxus_elements::{GlobalAttributes, SvgAttributes};
pub use dioxus_hooks::*;
pub use dioxus_html as dioxus_elements;
}