tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Html: Fixed selection and changed demo

pull/136/head
Nikita Tsukanov 11 years ago
parent
59740cdec8
commit
6b5eb0c5de
5 changed files with 107 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 255
      samples/TestApplication/html.htm
  2. 4
      src/Perspex.HtmlRenderer/Adapters/ControlAdapter.cs
  3. 2
      src/Perspex.HtmlRenderer/Adapters/GraphicsAdapter.cs
  4. 2
      src/Perspex.HtmlRenderer/HtmlContainer.cs
  5. 5
      src/Perspex.HtmlRenderer/HtmlControl.cs

255
samples/TestApplication/html.htm
View File

@ -1,170 +1,111 @@
<html>
<head>
<title>Additional features</title>
<link rel="Stylesheet" href="StyleSheet" />
<style>
<!--
.g1, .g2, .g3, .g4, .g5 {
background-color: red;
background-gradient: yellow;
padding: 22px;
}
.g1 { background-gradient-angle: 0; }
.g2 { background-gradient-angle: 45; }
.g3 { background-gradient-angle: 90; }
.g4 { background-gradient-angle: 135; }
.g5 { background-gradient-angle: 180; }
.c1, .c2, .c3, .c4, .c5 {
background-color: olive;
border: 0px;
color: white;
vertical-align: middle;
}
.c1 { corner-radius: 0px; }
.c2 { corner-radius: 10px; }
.c3 { corner-radius: 0px 10px 10px 0px; }
.c4 { corner-radius: 18px; }
.c5 {
corner-radius: 10px;
border: outset #BBBB00 2px;
}
table { border-style: outset; }
td, th { border-style: inset; }
td { text-align: center; }
-->
</style>
<title>Intro</title>
</head>
<body>
<h1>
Additional features
<body style=" margin: 0; background-color: #333; background-gradient: #707; background-gradient-angle: 60; color: white; ">
<h1 align="center">
HTML Renderer Project - Perspex port
<br />
<span style="font-size: x-small;">Beta support</span>
</h1>
<blockquote>
<p>
There are some additional features that you may already discovered about the renderer
core engine.</p>
<h2>
Graphic features</h2>
<p>
I have always wanted the W3C to add this features to the CSS spec (and so far, not
there yet :)</p>
<blockquote class="whitehole">
<p style="margin-top: 0px">
<table border="0" width="100%">
<tr style="vertical-align: top>
<td>
Everything you see on this panel (see samples on the left) is <b>custom-painted</b>
by the <b>HTML Renderer</b>, including tables, images, links and videos.<br />
This project allows you to have the rich format power of HTML on your desktop applications
without <b>WebBrowser</b> control or <b>MSHTML</b>.<br />
The library is <b>100% managed code</b> without any external dependencies, the only
requirement is <b>.NET 2.0 or higher</b>, including support for Client Profile.
</td>
</tr>
</table>
</p>
<h3>
Text selection (copy to clipboard)
</h3>
<div>
The rendered html has full support for <b>text selection</b> including <b>drag-and-drop</b>
and <b>copy</b> to clipboard of rich html and plain text to handle <b>paste</b>
operation to editor that support rich or/and plain text.<br />
Additionally there is a <b>context-menu</b> with select all, copy text, copy image,
save image, open link, copy link url, open video, copy video url.
</div>
<h3>
Cascading Style Sheets (CSS) support
</h3>
<div>
The core layout engine of the renderer was builded according to <b>CSS Level 2 specification</b>,
so you can use Cascading Style Sheets to format your html documents.<br />
Additionally there are a couple extensions: <b>Gradients</b> on backgrounds and
<b>rounded corners</b>.
</div>
<h3>
Benefits
</h3>
<ul>
<li><b>Gradients on backgrounds</b></li>
<li><b>Rounded corners</b></li>
<li>100% managed code and no external dependencies.</li>
<li>Supports .NET 2.0 or higher including Client Profile.</li>
<li>Handles "real world" malformed HTML, it doesn't have to be XHTML.</li>
<li>Lightweight (~300K).</li>
<li>High performance and low memory footprint.</li>
<li>Extendable and configurable.</li>
</ul>
<p>
And I think many many web designers would agree. Is it so hard or what?.</p>
<h3>
Background Gradients</h3>
<p>
It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
<ol>
<li><code>background-gradient: (#Color)</code> - Second color of the gradient background,
the first one is given by <code>background-color</code>. Not inherited.</li>
<li><code>background-gradient-angle: (number)</code> - Angle (in degrees, clockwise) of
the gradient. Not inherited. Initial value:90</li>
</ol>
<b>Some examples</b>
<!-- Gradients table -->
<table width="300px">
<tr>
<td class="g1">
</td>
<td class="g2">
</td>
<td class="g3">
</td>
<td class="g4">
</td>
<td class="g5">
</td>
</tr>
<tr>
<td>
0 degrees
</td>
<td>
45 degrees
</td>
<td>
90 degrees
</td>
<td>
135 degrees
</td>
<td>
180 degrees
</td>
</tr>
</table>
Limitations
</h3>
<ul>
<li>All HTML <b>end tags</b> marked as <a href="http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html">
optional</a> should be there. No problem with tags marked as forbidden.</li>
</ul>
<hr />
<h3>
Rounded corners</h3>
<p>
As you may already know, CSS is based on a <a href="http://www.w3.org/TR/CSS21/box.html">
Box Model</a>, where every box has it's own set of properties. Since we are
talking abound <b>boxes</b>, why not to make them with rounded corners, almost every
website you visit nowadays makes use of rounded corners, where a not very nice trick
with images and tables must be used.</p>
<p>
In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
On the roadmap</h3>
Of course it's not quite finished yet. Here are some of the important things to
do.
<ul>
<li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner.
Not ineritted</li>
<li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner.
Not ineritted</li>
<li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner.
Not ineritted</li>
<li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner.
Not ineritted</li>
<li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties.
Not ineritted</li>
<li>Better performance</li>
<li>Support of position CSS property</li>
<li>Support of height and min-height CSS property</li>
<li>Better tables support, especially layouts</li>
<li>Support image align</li>
<li>Handle :hover selector</li>
<li>Selection by shift+arrows</li>
<li>Better HTML tag parsing (optional closing tags)</li>
<li>More styles support</li>
</ul>
<!-- Corners table -->
<b>Some examples</b>
<table width="320px" cellspacing="10">
<tr>
<td width="1" style="border: 0px">
<p>
</p>
<p>
</p>
</td>
<td class="c1">
c1
</td>
<td class="c2">
c2
</td>
<td class="c3">
c3
</td>
<td class="c4">
c4
</td>
<td class="c5">
c5
</td>
</tr>
</table>
<pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
.c1 { corner-radius: 0px }
.c2 { corner-radius: 10px }
.c3 { corner-radius: 0px 10px 10px 0px }
.c4 { corner-radius: 18px }
.c5 { corner-radius: 10px; border: outset #bb0 2px; }</pre>
<h3>
Vision
</h3>
<ul>
<li>Most complete static HTML Renderer (no java script).</li>
<li>Commercial web browser performance level.</li>
</ul>
<hr />
<h3>
2015 - Nikita Tsukanov (Perspex Port)
</h3>
<blockquote>
<a href="https://perspex.github.io/">https://perspex.github.io/</a>
</blockquote>
<h3>
2012 - Arthur Teplitzki
</h3>
<blockquote>
<a href="http://theartofdev.com/">http://TheArtOfDev.com</a>
</blockquote>
<h3>
2009 - Jose Manuel Menendez Poo
</h3>
<blockquote>
<a href="http://www.menendezpoo.com">www.menendezpoo.com</a>
</blockquote>
</blockquote>
</body>
</html>

4
src/Perspex.HtmlRenderer/Adapters/ControlAdapter.cs
View File

@ -39,8 +39,6 @@ namespace TheArtOfDev.HtmlRenderer.Perspex.Adapters
ArgChecker.AssertArgNotNull(control, "control");
_control = control;
_control.PointerPressed += delegate { _leftMouseButton = true; };
_control.PointerPressed += delegate { _leftMouseButton = false; };
}
/// <summary>
@ -60,7 +58,7 @@ namespace TheArtOfDev.HtmlRenderer.Perspex.Adapters
}
private bool _leftMouseButton;
public override bool LeftMouseButton => _leftMouseButton;
public override bool LeftMouseButton => (_control as HtmlControl)?.LeftMouseButton ?? false;
public override bool RightMouseButton
{

2
src/Perspex.HtmlRenderer/Adapters/GraphicsAdapter.cs
View File

@ -205,6 +205,8 @@ namespace TheArtOfDev.HtmlRenderer.Perspex.Adapters
public override void Dispose()
{
while (_clipStack.Count != 0)
PopClip();
if (_releaseGraphics)
_g.Dispose();
}

2
src/Perspex.HtmlRenderer/HtmlContainer.cs
View File

@ -376,7 +376,7 @@ namespace Perspex.Controls
{
ArgChecker.AssertArgNotNull(parent, "parent");
ArgChecker.AssertArgNotNull(e, "e");
_htmlContainerInt.HandleMouseDown(new ControlAdapter(parent), Util.Convert(e.GetPosition(parent)));
}

5
src/Perspex.HtmlRenderer/HtmlControl.cs
View File

@ -127,6 +127,9 @@ namespace Perspex.Controls
_htmlContainer.ImageLoad += (_, e) => OnImageLoad(e);
}
//Hack for adapter
internal bool LeftMouseButton { get; private set; }
/// <summary>
/// Raised when the set html document has been fully loaded.<br/>
/// Allows manipulation of the html dom, scroll position, etc.
@ -397,6 +400,7 @@ namespace Perspex.Controls
protected override void OnPointerPressed(PointerPressEventArgs e)
{
base.OnPointerPressed(e);
LeftMouseButton = true;
_htmlContainer?.HandleLeftMouseDown(this, e);
}
@ -408,6 +412,7 @@ namespace Perspex.Controls
protected override void OnPointerReleased(PointerEventArgs e)
{
base.OnPointerReleased(e);
LeftMouseButton = false;
if (_htmlContainer != null)
_htmlContainer.HandleLeftMouseUp(this, e);
}

Write Preview
Loading…
Cancel
Save