fix(cropper): fix image loader

* Fix the image loader
* Add the `loadImage` method
* Fix `ImgCropperEvent.left` and `ImgCropperEvent.top` (previously the value was not scaled)
* Fix missing properties (`type`, `scale`, `size` & `name`) when cropped
* Fix `ImgCropperEvent.rotation` when cropped

fixes: #102, fixes #138

src/api/docs/components/image-cropper.html

@@ -92,12 +92,22 @@ <h2 id="cropper-with-dialog-and-resizable-area">Cropper with Dialog and resizabl
   <aui-cropper-with-dialog></aui-cropper-with-dialog>
 </demo-view>
 <h2 id="cropper-image-from-url">Cropper image from URL</h2>
-<p>You can use the <code class="ttm ttx"><span class="tt18 tta3">setImageUrl</span><span class="tt18 ttae">(</span>src<span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttcj">string</span><span class="tt18 ttae">,</span> fn<span class="tt18 ttb0">?</span><span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttae">(</span><span class="tt18 ttae">)</span>&nbsp;<span class="tt18 ttb0">=></span>&nbsp;<span class="tt18 tt1j">void</span><span class="tt18 ttae">)</span></code> method.</p>
+<p>You can use the <code class="ttm ttx"><span class="tt18 tta3">loadImage</span><span class="tt18 ttae">(</span>config<span class="tt18 ttb0">:</span> ImgCropperLoaderConfig<span class="tt18 ttae">)</span></code> method.</p>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> config <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
+  scale<span class="tt18 ttb0">:</span> <span class="tt18 ttap">0.745864772531767</span><span class="tt18 ttae">,</span>
+  xOrigin<span class="tt18 ttb0">:</span> <span class="tt18 ttap">642.380608078103</span><span class="tt18 ttae">,</span>
+  yOrigin<span class="tt18 ttb0">:</span> <span class="tt18 ttap">236.26357452128866</span><span class="tt18 ttae">,</span>
+  <span class="tt18 tt3o">// areaWidth: 100, // Use when cropper area is not fixed</span>
+  <span class="tt18 tt3o">// areaHeight: 100,</span>
+  rotation<span class="tt18 ttb0">:</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span>
+  originalDataURL<span class="tt18 ttb0">:</span> <span class="tt18 tt3z">'https://...'</span>
+<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>cropper<span class="tt18 ttae">.</span><span class="tt18 tta3">loadImage</span><span class="tt18 ttae">(</span>config<span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
+</code></pre>
 <demo-view path="docs/components/image-cropper-demo/image-cropper-example-01">
   <image-cropper-example-01></image-cropper-example-01>
 </demo-view>
 <h2 id="crop-circle">Crop Circle</h2>
-<p><del>For this just add the <code class="ttm ttx">border-radius: 50%</code> styles to the cropper area.</del></p>
 <p>You can add <code class="ttm ttx">round</code> to the cropper config. If set to true, <code class="ttm ttx">keepAspectRatio</code> will also be true (since an oval image would not make sense).</p>
 <pre class="ttb"><code prsm class="ttm">myConfig<span class="tt18 ttb0">:</span> ImgCropperConfig <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
   width<span class="tt18 ttb0">:</span> <span class="tt18 ttap">150</span><span class="tt18 ttae">,</span>

src/api/docs/customization/color.html

@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._6w19x0y2{background:rgb(255,255,0);opacity:1;}._6w19x0y2 *{color:#202020 !important;}</style><span class="_6w19x0y2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._24mwne3b{background:rgb(0,0,0);opacity:1;}._24mwne3b *{color:white !important;}</style><span class="_24mwne3b"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._4bctla2v{background:rgb(255,255,255);opacity:1;}._4bctla2v *{color:#202020 !important;}</style><span class="_4bctla2v"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._36xyjtq3{background:rgba(0,0,0,0.87);opacity:0.87;}._36xyjtq3 *{color:white !important;}</style><span class="_36xyjtq3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._6z108jbg{background:rgb(255,255,0);opacity:1;}._6z108jbg *{color:#202020 !important;}</style><span class="_6z108jbg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._2n2til1y{background:rgb(0,0,0);opacity:1;}._2n2til1y *{color:white !important;}</style><span class="_2n2til1y"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._eajqwtk9{background:rgb(255,255,255);opacity:1;}._eajqwtk9 *{color:#202020 !important;}</style><span class="_eajqwtk9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._b8w7emjk{background:rgba(0,0,0,0.87);opacity:0.87;}._b8w7emjk *{color:white !important;}</style><span class="_b8w7emjk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._h46h0w84{background:rgb(255,255,255);opacity:1;}._h46h0w84 *{color:#202020 !important;}</style><span class="_h46h0w84"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._2aud0q6i{background:rgb(0,15,255);opacity:1;}._2aud0q6i *{color:white !important;}</style><span class="_2aud0q6i"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._jxz51dve{background:rgb(255,255,255);opacity:1;}._jxz51dve *{color:#202020 !important;}</style><span class="_jxz51dve"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._fngkpis3{background:rgb(0,15,255);opacity:1;}._fngkpis3 *{color:white !important;}</style><span class="_fngkpis3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._hdzttpke{background:rgb(255,255,0);opacity:1;}._hdzttpke *{color:#202020 !important;}</style><span class="_hdzttpke"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._74ijizfu{background:rgb(255,255,0);opacity:1;}._74ijizfu *{color:#202020 !important;}</style><span class="_74ijizfu"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._54sjlzg1{background:rgb(255,255,0);opacity:1;}._54sjlzg1 *{color:#202020 !important;}</style><span class="_54sjlzg1"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._8tlhzmf3{background:rgb(255,255,0);opacity:1;}._8tlhzmf3 *{color:#202020 !important;}</style><span class="_8tlhzmf3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._cw22cil7{background:rgb(255,255,255);opacity:1;}._cw22cil7 *{color:#202020 !important;}</style><span class="_cw22cil7"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._8a1vi0z3{background:rgb(255,255,255);opacity:1;}._8a1vi0z3 *{color:#202020 !important;}</style><span class="_8a1vi0z3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._ak0n2qv7{background:rgb(255,255,255);opacity:1;}._ak0n2qv7 *{color:#202020 !important;}</style><span class="_ak0n2qv7"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._4l17gplk{background:rgb(255,255,255);opacity:1;}._4l17gplk *{color:#202020 !important;}</style><span class="_4l17gplk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>