images to svg
This commit is contained in:
Ilya Kantor
parent
a31e881856
commit
3ba28aa104
734 changed files with 11682 additions and 245 deletions
|
|
@ -74,7 +74,7 @@ drawHtmlTree(selectPDomtree, 'div.select-p-domtree', 690, 320);
|
|||
|
||||
Let's select `"Example: <i>italic</i>"`. That's two first children of `<p>` (counting text nodes):
|
||||
|
||||
|
||||
|
||||
|
||||
```html run
|
||||
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
|
||||
|
|
@ -123,7 +123,7 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe
|
|||
|
||||
E.g. selecting from `1` to `4` gives range `<i>italic</i> and <b>bold</b>`.
|
||||
|
||||
|
||||
|
||||
|
||||
We don't have to use the same node in `setStart` and `setEnd`. A range may span across many unrelated nodes. It's only important that the end is after the start.
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ We don't have to use the same node in `setStart` and `setEnd`. A range may span
|
|||
|
||||
Let's select the text partially, like this:
|
||||
|
||||
|
||||
|
||||
|
||||
That's also possible, we just need to set the start and the end as a relative offset in text nodes.
|
||||
|
||||
|
|
@ -157,7 +157,7 @@ We need to create a range, that:
|
|||
|
||||
The range object has following properties:
|
||||
|
||||
|
||||
|
||||
|
||||
- `startContainer`, `startOffset` -- node and offset of the start,
|
||||
- in the example above: first text node inside `<p>` and `2`.
|
||||
|
|
@ -272,7 +272,7 @@ A selection may include zero or more ranges. At least, the [Selection API specif
|
|||
|
||||
Here's a screenshot of a selection with 3 ranges, made in Firefox:
|
||||
|
||||
|
||||
|
||||
|
||||
Other browsers support at maximum 1 range. As we'll see, some of `Selection` methods imply that there may be many ranges, but again, in all browsers except Firefox, there's at maximum 1.
|
||||
|
||||
|
|
@ -298,11 +298,11 @@ If the start (anchor) of the selection goes in the document before the end (focu
|
|||
|
||||
E.g. if the user starts selecting with mouse and goes from "Example" to "italic":
|
||||
|
||||
|
||||
|
||||
|
||||
Otherwise, if they go from the end of "italic" to "Example", the selection is directed "backward", its focus will be before the anchor:
|
||||
|
||||
|
||||
|
||||
|
||||
That's different from `Range` objects that are always directed forward: the range start can't be after its end.
|
||||
````
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
36
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
Normal file
36
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>range-example-p-0-1.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="47" y="35" width="262" height="21"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="range-example-p-0-1.svg">
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="13" y="51"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
|
||||
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
|
||||
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="93" y="84">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="226" y="84">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="334" y="84">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="428" y="84">3</tspan>
|
||||
</text>
|
||||
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
|
||||
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
36
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
Normal file
36
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>range-example-p-1-3.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="153" y="35" width="345" height="21"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="345" height="21" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="range-example-p-1-3.svg">
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="13" y="51"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
|
||||
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
|
||||
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="93" y="84">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="226" y="84">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="334" y="84">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="428" y="84">3</tspan>
|
||||
</text>
|
||||
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
|
||||
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="683px" height="229px" viewBox="0 0 683 229" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>range-example-p-2-b-3-range.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="183" y="54" width="368" height="21"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="368" height="21" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="range-example-p-2-b-3-range.svg">
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="126" y="70"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<polyline id="Path" stroke="#EE6B47" stroke-width="2" transform="translate(213.000000, 73.000000) scale(1, -1) translate(-213.000000, -73.000000) " points="160 78 160 68 160 68 266 68 266 78"></polyline>
|
||||
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(392.000000, 152.500000) scale(1, -1) translate(-392.000000, -152.500000) " points="126 162 126 143 126 143 658 143 658 162"></polyline>
|
||||
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(539.000000, 75.000000) scale(1, -1) translate(-539.000000, -75.000000) " points="514 80 514 70 514 70 564 70 564 80"></polyline>
|
||||
<path id="Line" d="M141.805422,96.0335122 L125.588919,81.8440721 L126.905928,80.3389187 L143.122431,94.5283588 L147.073459,90.0128986 L153,104.5 L137.854394,100.548972 L141.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Line-Copy-3" d="M484.805422,96.0335122 L468.588919,81.8440721 L469.905928,80.3389187 L486.122431,94.5283588 L490.073459,90.0128986 L496,104.5 L480.854394,100.548972 L484.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
|
||||
<text id="startContainer-(<p>." font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="10.3" y="118">startContainer</tspan>
|
||||
<tspan x="0.7" y="136">(<p>.firstChild)</tspan>
|
||||
</text>
|
||||
<path id="Line-Copy" d="M184,88 L184,104 L182,104 L182,88 L176,88 L183,74 L190,88 L184,88 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Line-Copy-2" d="M552,87 L552,103 L550,103 L550,87 L544,87 L551,73 L558,87 L552,87 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="startOffset-(=2)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="170.2" y="118">startOffset</tspan>
|
||||
<tspan x="203.8" y="136">(=2)</tspan>
|
||||
</text>
|
||||
<text id="commonAncestorContai" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="316.1" y="181">commonAncestorContainer</tspan>
|
||||
<tspan x="402.5" y="199">(<p>)</tspan>
|
||||
</text>
|
||||
<text id="endContainer-(<b>.fi" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="388.9" y="117">endContainer</tspan>
|
||||
<tspan x="369.7" y="135">(<b>.firstChild)</tspan>
|
||||
</text>
|
||||
<text id="endOffset-(=3)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="537.3" y="118">endOffset</tspan>
|
||||
<tspan x="561.3" y="136">(=3)</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
36
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
Normal file
36
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>range-example-p-2-b-3.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="71" y="35" width="367" height="21"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="367" height="21" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="range-example-p-2-b-3.svg">
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="13" y="51"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
|
||||
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
|
||||
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="93" y="84">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="226" y="84">1</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="334" y="84">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
|
||||
<tspan x="428" y="84">3</tspan>
|
||||
</text>
|
||||
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
|
||||
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="559px" height="128px" viewBox="0 0 559 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>selection-direction-backward.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<rect id="path-1" x="47" y="62" width="262" height="21"></rect>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-3">
|
||||
<stop stop-color="#F2F2F2" offset="0%"></stop>
|
||||
<stop stop-color="#808080" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
|
||||
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="selection-direction-backward.svg">
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="13" y="79"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<path id="Line-Copy-3" d="M308.675044,49.162478 L308.675044,49.5 L308,49.5 L296,55.5 L296,49.5 L47,49.5 L47,47.5 L296,47.5 L296,41.5 L308,47.5 L308.675044,47.5 L308.675044,47.837522 L310,48.5 L308.675044,49.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="25" y="32">focus</tspan>
|
||||
</text>
|
||||
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="277.2" y="32">anchor</tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
|
||||
<rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.200000003" transform="translate(184.000000, 102.000000) scale(-1, 1) translate(-184.000000, -102.000000) " x="53" y="94" width="262" height="16"></rect>
|
||||
<g id="Cursor-/-Default-White" transform="translate(49.000000, 94.000000)">
|
||||
<g id="Rectangle-237">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
|
||||
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="563px" height="128px" viewBox="0 0 563 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>selection-direction-forward.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#F2F2F2" offset="0%"></stop>
|
||||
<stop stop-color="#808080" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<rect id="path-2" x="47" y="72" width="262" height="21"></rect>
|
||||
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
|
||||
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="selection-direction-forward.svg">
|
||||
<rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.200000003" x="47" y="100" width="262" height="16"></rect>
|
||||
<text id="<p>Example:-<i>itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
|
||||
<tspan x="13" y="89"><p>Example: <i>italic</i> and <b>bold</b></p></tspan>
|
||||
</text>
|
||||
<path id="Line-Copy-3" d="M308.675044,59.162478 L308.675044,59.5 L308,59.5 L296,65.5 L296,59.5 L47,59.5 L47,57.5 L296,57.5 L296,51.5 L308,57.5 L308.675044,57.5 L308.675044,57.837522 L310,58.5 L308.675044,59.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="18.2" y="42">anchor</tspan>
|
||||
</text>
|
||||
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="283" y="42">focus</tspan>
|
||||
</text>
|
||||
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-3)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-2"></use>
|
||||
<g id="Cursor-/-Default-White" transform="translate(306.000000, 100.000000)">
|
||||
<g id="Rectangle-237">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
|
||||
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
23
2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
Normal file
23
2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
|
|
@ -30,7 +30,7 @@ It may happen that a task comes while the engine is busy, then it's enqueued.
|
|||
|
||||
The tasks form a queue, so-called "macrotask queue" (v8 term):
|
||||
|
||||
|
||||
|
||||
|
||||
For instance, while the engine is busy executing a `script`, a user may move their mouse causing `mousemove`, and `setTimeout` may be due and so on, these tasks form a queue, as illustrated on the picture above.
|
||||
|
||||
|
|
@ -309,7 +309,7 @@ So, microtasks are asynchronous from the point of code execution, but they don't
|
|||
|
||||
The richer event loop picture may look like this:
|
||||
|
||||
|
||||
|
||||
|
||||
The more detailed algorithm of the event loop (though still simplified compare to the [specification](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)):
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
58
2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
Normal file
58
2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="350px" height="391px" viewBox="0 0 350 391" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>eventLoop-full.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="eventLoop-full.svg">
|
||||
<text id="..." font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#000000">
|
||||
<tspan x="200.4" y="71">...</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="159" y="86" width="108" height="28"></rect>
|
||||
<text id="setTimeout" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="171.5" y="105">setTimeout</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="159" y="195" width="108" height="28"></rect>
|
||||
<text id="mousemove" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="175.2" y="214">mousemove</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="159" y="302" width="108" height="28"></rect>
|
||||
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="188.3" y="321">script</tspan>
|
||||
</text>
|
||||
<text id="event-loop" font-family="PTSans-Regular, PT Sans" font-size="24" font-weight="normal" fill="#000000">
|
||||
<tspan x="19.288" y="189">event</tspan>
|
||||
<tspan x="24.64" y="218">loop</tspan>
|
||||
</text>
|
||||
<g id="Group-Copy" transform="translate(198.000000, 267.000000)" fill="#EE6B47">
|
||||
<path d="M23.1454405,0.978488667 C21.7366033,0.348781349 20.1862777,-0.000633284678 18.5591614,8.61663483e-07 C15.9694405,-0.000633284678 13.5756265,0.885269154 11.6377196,2.37931793 L10.4743707,0.618927691 C10.4060451,0.515561837 10.2863242,0.466732569 10.1690219,0.494000862 C10.0523242,0.521269154 9.96404514,0.618927691 9.94288235,0.742586228 L8.7970684,7.77907403 C8.78195212,7.87229354 8.80734747,7.96678135 8.86781259,8.03717159 C8.92404514,8.10312281 9.0038591,8.13926915 9.08669631,8.13926915 C9.09274282,8.13926915 9.09939398,8.13863501 9.10544049,8.13863501 L12.2169754,7.93253745 L15.7209289,7.70043989 C15.8382312,7.69219598 15.9398126,7.61229354 15.9791149,7.49561062 C16.0184172,7.37892769 15.9887893,7.24956184 15.9011149,7.16648867 L14.4408824,5.75107403 C15.6217661,4.92922037 17.0354405,4.45043989 18.5591614,4.44980574 C19.6281847,4.44980574 20.6421847,4.68761062 21.5618591,5.11185452 C21.6344172,5.14546428 21.7178591,5.14609842 21.7916265,5.11502525 C21.8647893,5.08331793 21.9240451,5.02117159 21.9536731,4.94380574 L23.3032544,1.37609842 C23.3619056,1.22009842 23.2923707,1.04507403 23.1454405,0.978488667" id="Fill-52" transform="translate(16.058418, 4.069635) scale(-1, 1) translate(-16.058418, -4.069635) "></path>
|
||||
<path d="M12.7869128,13.3145374 C12.923564,14.9144887 13.36375,16.5119033 14.133471,18.0148301 C15.3584942,20.4080984 17.2341221,22.2014643 19.4066338,23.2858545 L18.4784942,25.1933667 C18.423471,25.3056106 18.4391919,25.4394155 18.5171919,25.5345374 C18.5951919,25.6290253 18.7191454,25.6651716 18.8334244,25.6252204 L25.2868663,23.3562448 C25.3721221,23.3258057 25.4398431,23.2579521 25.4700756,23.1691716 C25.4984942,23.0860984 25.4918431,22.9947813 25.4519361,22.9180496 C25.4489128,22.9123423 25.4464942,22.906635 25.4428663,22.9015618 L23.7982151,20.1233667 L21.945564,16.995757 C21.8826803,16.8911228 21.7677965,16.8353179 21.6510989,16.8537082 C21.5350058,16.8727326 21.4406803,16.9615131 21.411657,17.0820009 L20.9134244,19.1004887 C19.6642151,18.3984887 18.5927733,17.3179033 17.8720291,15.9100984 C17.3665407,14.9227326 17.0859826,13.8732204 17.0073779,12.823074 C17.0019361,12.7400009 16.9626338,12.6620009 16.901564,12.6087326 C16.8404942,12.5560984 16.7600756,12.5313667 16.681471,12.5408789 L13.0457035,12.9809765 C12.8872849,13.000635 12.7724012,13.1483911 12.7869128,13.3145374" id="Fill-54" transform="translate(19.136573, 19.090084) scale(-1, 1) translate(-19.136573, -19.090084) "></path>
|
||||
<path d="M2.64553278,22.3327326 C3.89716069,21.4081472 4.99581185,20.2089765 5.85139324,18.7574155 C7.21427696,16.4484887 7.75664906,13.8472204 7.56436999,11.3328301 L9.60325371,11.2212204 C9.72357929,11.2148789 9.82697464,11.1337082 9.86567231,11.0144887 C9.90497464,10.8965374 9.87292813,10.7659033 9.78223045,10.682196 L4.68078859,5.95780574 C4.61246301,5.89502525 4.52297464,5.86839111 4.43409092,5.8861472 C4.35125371,5.90073257 4.27990487,5.95273257 4.23576534,6.02692769 C4.23274208,6.03263501 4.22971882,6.03834233 4.22669557,6.04404964 L2.75618394,8.92687891 L1.10185836,12.1743423 C1.04623045,12.2840496 1.05771882,12.4159521 1.13209092,12.5129765 C1.20585836,12.6093667 1.32618394,12.6499521 1.43925371,12.6169765 L3.35539324,12.0589277 C3.40074208,13.5440984 3.0452072,15.0571716 2.24404441,16.4167813 C1.68171882,17.3699033 0.955532778,18.1492692 0.127160685,18.746635 C0.0618583596,18.7935618 0.0171141736,18.8671228 0.00381184799,18.9495618 C-0.00888582643,19.0313667 0.0104630108,19.1169765 0.0570211503,19.1835618 L2.2404165,22.2648789 C2.33595138,22.3993179 2.51492813,22.4284887 2.64553278,22.3327326" id="Fill-56" transform="translate(4.941093, 14.134846) scale(-1, 1) translate(-4.941093, -14.134846) "></path>
|
||||
</g>
|
||||
<text id="microtasks-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="240.5" y="279">microtasks</tspan>
|
||||
</text>
|
||||
<text id="render-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="240.3" y="251">render</tspan>
|
||||
</text>
|
||||
<text id="microtasks-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="240.5" y="174">microtasks</tspan>
|
||||
</text>
|
||||
<text id="render-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="240.3" y="142">render</tspan>
|
||||
</text>
|
||||
<g id="np_paint_2296353_000000-copy" transform="translate(198.000000, 233.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<path d="M3.07894737,0 C1.39113684,0 0,1.39113684 0,3.07894737 L0,22.9210526 C0,24.6088632 1.39113684,26 3.07894737,26 L22.9210526,26 C24.6088632,26 26,24.6088632 26,22.9210526 L26,3.07894737 C26,1.39113684 24.6088632,0 22.9210526,0 L3.07894737,0 Z M3.07894737,2.05252895 L22.9210526,2.05252895 C23.5076947,2.05252895 23.9473684,2.49230526 23.9473684,3.07894737 L23.9473684,16.1217105 L21.0608553,13.4383053 C20.8590679,13.2485429 20.5891263,13.1483163 20.3125,13.1603447 C20.0492397,13.1710355 19.8006763,13.2819529 19.6176158,13.4703776 L13.8979579,19.4250618 L8.86251053,15.2770355 C8.64735711,15.1006392 8.3694,15.0191189 8.09277368,15.0525289 C7.86158579,15.0805922 7.64642895,15.1848279 7.48341579,15.3518711 L2.05249474,20.7827921 L2.05249474,3.07884474 C2.05249474,2.49220263 2.49216842,2.05252895 3.07881053,2.05252895 L3.07894737,2.05252895 Z M6.15789474,3.42105263 C4.47008421,3.42105263 3.07894737,4.81218947 3.07894737,6.5 C3.07894737,8.18781053 4.47008421,9.57894737 6.15789474,9.57894737 C7.84570526,9.57894737 9.23684211,8.18781053 9.23684211,6.5 C9.23684211,4.81218947 7.84570526,3.42105263 6.15789474,3.42105263 Z M6.15789474,5.47368421 C6.73653158,5.47368421 7.18421053,5.92136316 7.18421053,6.5 C7.18421053,7.07863684 6.73653158,7.52631579 6.15789474,7.52631579 C5.57925789,7.52631579 5.13157895,7.07863684 5.13157895,6.5 C5.13157895,5.92136316 5.57925789,5.47368421 6.15789474,5.47368421 Z M20.3340526,6.04027895 C19.9571895,6.04027895 19.5749895,6.76191579 19.5749895,7.12003158 C19.1152684,7.23228316 18.8266342,7.47818158 18.8266342,7.83633158 C18.8266342,8.19448158 19.1981263,8.55263158 19.5749895,8.55263158 L22.2369789,8.55263158 C22.9666211,8.55263158 23.3461526,7.12006579 22.2155974,7.12006579 C22.1942158,6.44252632 21.7705868,6.2608 21.0823737,6.40376579 C20.8992926,6.12046158 20.7068447,6.01756316 20.3340184,6.04027895 L20.3340526,6.04027895 Z M16.7097895,9.23684211 C16.3957471,9.23684211 16.0790158,9.82081579 16.0790158,10.1134868 C15.6968158,10.2056945 15.4482421,10.4088195 15.4482421,10.7014974 C15.4482421,10.9941753 15.7649563,11.2895079 16.0790158,11.2895079 L18.2920263,11.2895079 C18.90005,11.2895079 19.2234763,10.1135211 18.2813355,10.1135211 C18.2639631,9.55893421 17.9031382,9.40792895 17.3298724,9.52551053 C17.1775295,9.29432263 17.0198395,9.21814947 16.7098066,9.23685921 L16.7097895,9.23684211 Z M20.3980263,15.6191579 L23.9473684,18.9119211 L23.9473684,22.9210526 C23.9473684,23.5076947 23.5076947,23.9473684 22.9210526,23.9473684 L3.07894737,23.9473684 C2.71279211,23.9473684 2.40407632,23.7709721 2.22368421,23.4983553 L8.27484211,17.4581447 L12.4762368,20.9113553 L11.2361053,22.2049237 L12.7114342,23.6267816 L20.3980263,15.6191579 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="np_paint_2296353_000000-copy-2" transform="translate(198.000000, 124.000000)" fill="#EE6B47" fill-rule="nonzero">
|
||||
<path d="M3.07894737,0 C1.39113684,0 0,1.39113684 0,3.07894737 L0,22.9210526 C0,24.6088632 1.39113684,26 3.07894737,26 L22.9210526,26 C24.6088632,26 26,24.6088632 26,22.9210526 L26,3.07894737 C26,1.39113684 24.6088632,0 22.9210526,0 L3.07894737,0 Z M3.07894737,2.05252895 L22.9210526,2.05252895 C23.5076947,2.05252895 23.9473684,2.49230526 23.9473684,3.07894737 L23.9473684,16.1217105 L21.0608553,13.4383053 C20.8590679,13.2485429 20.5891263,13.1483163 20.3125,13.1603447 C20.0492397,13.1710355 19.8006763,13.2819529 19.6176158,13.4703776 L13.8979579,19.4250618 L8.86251053,15.2770355 C8.64735711,15.1006392 8.3694,15.0191189 8.09277368,15.0525289 C7.86158579,15.0805922 7.64642895,15.1848279 7.48341579,15.3518711 L2.05249474,20.7827921 L2.05249474,3.07884474 C2.05249474,2.49220263 2.49216842,2.05252895 3.07881053,2.05252895 L3.07894737,2.05252895 Z M6.15789474,3.42105263 C4.47008421,3.42105263 3.07894737,4.81218947 3.07894737,6.5 C3.07894737,8.18781053 4.47008421,9.57894737 6.15789474,9.57894737 C7.84570526,9.57894737 9.23684211,8.18781053 9.23684211,6.5 C9.23684211,4.81218947 7.84570526,3.42105263 6.15789474,3.42105263 Z M6.15789474,5.47368421 C6.73653158,5.47368421 7.18421053,5.92136316 7.18421053,6.5 C7.18421053,7.07863684 6.73653158,7.52631579 6.15789474,7.52631579 C5.57925789,7.52631579 5.13157895,7.07863684 5.13157895,6.5 C5.13157895,5.92136316 5.57925789,5.47368421 6.15789474,5.47368421 Z M20.3340526,6.04027895 C19.9571895,6.04027895 19.5749895,6.76191579 19.5749895,7.12003158 C19.1152684,7.23228316 18.8266342,7.47818158 18.8266342,7.83633158 C18.8266342,8.19448158 19.1981263,8.55263158 19.5749895,8.55263158 L22.2369789,8.55263158 C22.9666211,8.55263158 23.3461526,7.12006579 22.2155974,7.12006579 C22.1942158,6.44252632 21.7705868,6.2608 21.0823737,6.40376579 C20.8992926,6.12046158 20.7068447,6.01756316 20.3340184,6.04027895 L20.3340526,6.04027895 Z M16.7097895,9.23684211 C16.3957471,9.23684211 16.0790158,9.82081579 16.0790158,10.1134868 C15.6968158,10.2056945 15.4482421,10.4088195 15.4482421,10.7014974 C15.4482421,10.9941753 15.7649563,11.2895079 16.0790158,11.2895079 L18.2920263,11.2895079 C18.90005,11.2895079 19.2234763,10.1135211 18.2813355,10.1135211 C18.2639631,9.55893421 17.9031382,9.40792895 17.3298724,9.52551053 C17.1775295,9.29432263 17.0198395,9.21814947 16.7098066,9.23685921 L16.7097895,9.23684211 Z M20.3980263,15.6191579 L23.9473684,18.9119211 L23.9473684,22.9210526 C23.9473684,23.5076947 23.5076947,23.9473684 22.9210526,23.9473684 L3.07894737,23.9473684 C2.71279211,23.9473684 2.40407632,23.7709721 2.22368421,23.4983553 L8.27484211,17.4581447 L12.4762368,20.9113553 L11.2361053,22.2049237 L12.7114342,23.6267816 L20.3980263,15.6191579 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Group-Copy-2" transform="translate(196.000000, 159.000000)" fill="#EE6B47">
|
||||
<path d="M26.7062775,1.12902538 C25.0806961,0.402440019 23.2918589,-0.00073071309 21.414417,9.94227133e-07 C18.4262775,-0.00073071309 15.6641845,1.02146441 13.428138,2.74536685 L12.0858124,0.714147336 C12.0069752,0.594879043 11.8688356,0.53853758 11.7334868,0.570000994 C11.5988356,0.601464409 11.4969752,0.714147336 11.4725566,0.856830263 L10.1504635,8.97585465 C10.1330217,9.08341563 10.162324,9.19244002 10.2320914,9.27365953 C10.2969752,9.34975709 10.3890682,9.39146441 10.4846496,9.39146441 C10.4916263,9.39146441 10.4993007,9.3907327 10.5062775,9.3907327 L14.0965101,9.15292782 L18.1395333,8.88512295 C18.2748821,8.87561075 18.3920914,8.78341563 18.4374403,8.64878148 C18.4827891,8.51414734 18.4486031,8.36487904 18.3474403,8.26902538 L16.6625566,6.63585465 C18.0251147,5.68756197 19.6562775,5.13512295 21.414417,5.13439124 C22.6479054,5.13439124 23.8179054,5.40878148 24.8790682,5.89829368 C24.9627891,5.93707416 25.0590682,5.93780587 25.1441845,5.90195221 C25.2286031,5.86536685 25.2969752,5.79365953 25.3311612,5.70439124 L26.8883705,1.58780587 C26.9560449,1.40780587 26.8758124,1.20585465 26.7062775,1.12902538" id="Fill-52" transform="translate(18.528944, 4.695732) scale(-1, 1) translate(-18.528944, -4.695732) "></path>
|
||||
<path d="M14.7541302,15.3629278 C14.9118046,17.2090254 15.4197116,19.0521961 16.3078511,20.7863425 C17.7213395,23.5478059 19.8855255,25.6170742 22.3922697,26.8682937 L21.3213395,29.0692693 C21.2578511,29.1987815 21.2759906,29.3531717 21.3659906,29.4629278 C21.4559906,29.5719522 21.5990139,29.6136595 21.7308744,29.567562 L29.1771534,26.9495132 C29.2755255,26.9143912 29.3536651,26.8360986 29.3885488,26.7336595 C29.4213395,26.6378059 29.4136651,26.53244 29.3676186,26.4439034 C29.3641302,26.4373181 29.3613395,26.4307327 29.3571534,26.424879 L27.459479,23.2192693 L25.3218046,19.6104888 C25.2492465,19.4897571 25.1166883,19.4253668 24.9820372,19.4465864 C24.8480837,19.4685376 24.7392465,19.5709766 24.7057581,19.710001 L24.1308744,22.0390254 C22.689479,21.2290254 21.4531999,19.9821961 20.621572,18.3578059 C20.0383162,17.2185376 19.7145953,16.007562 19.6238976,14.7958547 C19.6176186,14.700001 19.5722697,14.610001 19.5018046,14.5485376 C19.4313395,14.4878059 19.3385488,14.4592693 19.2478511,14.4702449 L15.0527348,14.9780498 C14.8699441,15.0007327 14.737386,15.1712205 14.7541302,15.3629278" id="Fill-54" transform="translate(22.080661, 22.027020) scale(-1, 1) translate(-22.080661, -22.027020) "></path>
|
||||
<path d="M3.05253782,25.7685376 C4.49672387,24.7017083 5.76439829,23.3180498 6.75160759,21.6431717 C8.32416573,18.9790254 8.94997968,15.977562 8.72811922,13.0763425 L11.0806774,12.947562 C11.2195146,12.9402449 11.3388169,12.8465864 11.3834681,12.7090254 C11.4288169,12.5729278 11.3918401,12.4221961 11.287189,12.3256108 L5.40090991,6.87439124 C5.3220727,6.80195221 5.21881689,6.77122051 5.11625875,6.79170831 C5.02067736,6.80853758 4.93835177,6.86853758 4.88742154,6.95414734 C4.88393317,6.9607327 4.8804448,6.96731807 4.87695643,6.97390343 L3.18021224,10.3002449 L1.27137503,14.0473181 C1.20718898,14.1739034 1.2204448,14.3260986 1.30625875,14.4380498 C1.39137503,14.5492693 1.53021224,14.5960986 1.66067736,14.5580498 L3.87160759,13.9141473 C3.92393317,15.6278059 3.51370061,17.3736595 2.58928201,18.94244 C1.9404448,20.0421961 1.10253782,20.9414644 0.146723868,21.6307327 C0.0713750303,21.684879 0.0197471233,21.7697571 0.00439828614,21.864879 C-0.0102528767,21.9592693 0.0120727047,22.0580498 0.065793635,22.134879 L2.58509596,25.6902449 C2.69532852,25.8453668 2.90184015,25.8790254 3.05253782,25.7685376" id="Fill-56" transform="translate(5.701261, 16.309438) scale(-1, 1) translate(-5.701261, -16.309438) "></path>
|
||||
</g>
|
||||
<path id="Path" d="M214.37688,54.2091068 L220.281818,43.0430224 L222.933822,44.4454762 L213.10532,63.030918 L202.326034,44.9802923 L204.901723,43.4421687 L211.37789,54.2869371 L211.114902,44.1533849 C209.186912,31.2365743 200.43807,26.5 183.535714,26.5 L132.464286,26.5 C113.419705,26.5 104.5,32.5455101 104.5,49.720739 L104.5,344.396487 C104.5,353.579279 107.161121,359.079115 112.381009,362.098821 C116.770528,364.638159 122.668177,365.5 132.464286,365.5 L183.535714,365.5 C193.331823,365.5 199.229472,364.638159 203.618991,362.098821 C208.838879,359.079115 211.5,353.579279 211.5,344.396487 L211.5,337.923831 L214.5,337.923831 L214.5,344.396487 C214.5,354.57926 211.348133,361.093339 205.12123,364.695603 C200.137794,367.578522 193.832047,368.5 183.535714,368.5 L132.464286,368.5 C122.167953,368.5 115.862206,367.578522 110.87877,364.695603 C104.651867,361.093339 101.5,354.57926 101.5,344.396487 L101.5,49.720739 C101.5,30.5855262 111.954172,23.5 132.464286,23.5 L183.535714,23.5 C201.785035,23.5 211.930165,29.0165608 214.096211,43.8064028 L214.111539,43.9848515 L214.37688,54.2091068 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
36
2-ui/99-ui-misc/03-event-loop/eventLoop.svg
Normal file
36
2-ui/99-ui-misc/03-event-loop/eventLoop.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="479px" height="279px" viewBox="0 0 479 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>eventLoop.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="eventLoop.svg">
|
||||
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="91" width="108" height="28"></rect>
|
||||
<text id="..." font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="258.9" y="110">...</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="118" width="108" height="28"></rect>
|
||||
<text id="setTimeout" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="230" y="137">setTimeout</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="145" width="108" height="28"></rect>
|
||||
<text id="mousemove" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="233.7" y="164">mousemove</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-1-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="173" width="108" height="28"></rect>
|
||||
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
|
||||
<tspan x="246.8" y="192">script</tspan>
|
||||
</text>
|
||||
<text id="event-loop" font-family="PTSans-Regular, PT Sans" font-size="24" font-weight="normal" fill="#000000">
|
||||
<tspan x="72.288" y="134">event</tspan>
|
||||
<tspan x="77.64" y="163">loop</tspan>
|
||||
</text>
|
||||
<text id="macrotask-queue" font-family="PTSans-Regular, PT Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
|
||||
<tspan x="341.06" y="136">macrotask</tspan>
|
||||
<tspan x="361.928" y="165">queue</tspan>
|
||||
</text>
|
||||
<path id="Path" d="M263.010725,69.7351956 L258.427178,55.1253877 L262.243758,53.9280087 L270.177144,79.2152421 L244.446978,72.8637563 L245.405602,68.9803249 L260.271316,72.6499231 L251.379057,64.2925256 C234.508006,51.2131452 213.805751,44 192,44 C160.941365,44 132.332745,58.6951996 114.136419,83.1428166 L110.927659,80.7545412 C129.87093,55.303369 159.663534,40 192,40 C214.734181,40 236.326559,47.5348634 253.906792,61.1909666 L254.049591,61.3130651 L263.010725,69.7351956 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Path-Copy-2" d="M120.724894,221.828651 L125.083129,236.507247 L121.248579,237.645767 L113.705173,212.239473 L139.334576,218.986062 L138.316319,222.854285 L123.508821,218.956414 L132.2805,227.4584 C148.5538,239.990276 169.796977,246.679687 194.412852,246.679687 C211.208683,246.679687 229.275076,241.15794 243.817212,231.644681 C250.728173,227.123628 255.441499,222.839019 265.167458,212.919811 L265.501312,212.579321 C267.561111,210.478661 268.636053,209.389458 269.882343,208.148251 L272.704986,210.98245 C271.473253,212.20916 270.406519,213.290045 268.357381,215.379834 L268.02357,215.72028 C258.101872,225.839116 253.233892,230.264312 246.007006,234.992038 C230.82183,244.925965 211.996447,250.679687 194.412852,250.679687 C168.89777,250.679687 146.759649,243.69382 129.747255,230.556099 L129.658358,230.487449 L120.724894,221.828651 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
43
2-ui/99-ui-misc/03-event-loop/promiseQueue.svg
Normal file
43
2-ui/99-ui-misc/03-event-loop/promiseQueue.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Loading…
Add table
Add a link
Reference in a new issue