@react-x11/components 0.13.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html/controls.d.ts +29 -2
- package/dist/html/controls.d.ts.map +1 -1
- package/dist/html/controls.js +70 -2
- package/dist/html/controls.js.map +1 -1
- package/dist/html/css/cascade.d.ts +42 -1
- package/dist/html/css/cascade.d.ts.map +1 -1
- package/dist/html/css/cascade.js +336 -16
- package/dist/html/css/cascade.js.map +1 -1
- package/dist/html/css/color.d.ts +18 -0
- package/dist/html/css/color.d.ts.map +1 -1
- package/dist/html/css/color.js +27 -0
- package/dist/html/css/color.js.map +1 -1
- package/dist/html/css/parse.d.ts +18 -4
- package/dist/html/css/parse.d.ts.map +1 -1
- package/dist/html/css/parse.js +66 -28
- package/dist/html/css/parse.js.map +1 -1
- package/dist/html/css/shapes.d.ts +44 -0
- package/dist/html/css/shapes.d.ts.map +1 -0
- package/dist/html/css/shapes.js +194 -0
- package/dist/html/css/shapes.js.map +1 -0
- package/dist/html/css/style.d.ts +128 -15
- package/dist/html/css/style.d.ts.map +1 -1
- package/dist/html/css/style.js +547 -144
- package/dist/html/css/style.js.map +1 -1
- package/dist/html/css/transform.d.ts +85 -0
- package/dist/html/css/transform.d.ts.map +1 -0
- package/dist/html/css/transform.js +425 -0
- package/dist/html/css/transform.js.map +1 -0
- package/dist/html/css/ua.d.ts.map +1 -1
- package/dist/html/css/ua.js +14 -2
- package/dist/html/css/ua.js.map +1 -1
- package/dist/html/css/values.d.ts +4 -0
- package/dist/html/css/values.d.ts.map +1 -1
- package/dist/html/css/values.js.map +1 -1
- package/dist/html/fonts.d.ts +55 -5
- package/dist/html/fonts.d.ts.map +1 -1
- package/dist/html/fonts.js +284 -23
- package/dist/html/fonts.js.map +1 -1
- package/dist/html/layout/axes.d.ts +14 -0
- package/dist/html/layout/axes.d.ts.map +1 -0
- package/dist/html/layout/axes.js +28 -0
- package/dist/html/layout/axes.js.map +1 -0
- package/dist/html/layout/block.d.ts +104 -12
- package/dist/html/layout/block.d.ts.map +1 -1
- package/dist/html/layout/block.js +410 -39
- package/dist/html/layout/block.js.map +1 -1
- package/dist/html/layout/boxes.d.ts +72 -1
- package/dist/html/layout/boxes.d.ts.map +1 -1
- package/dist/html/layout/boxes.js +40 -2
- package/dist/html/layout/boxes.js.map +1 -1
- package/dist/html/layout/cache.d.ts +1 -1
- package/dist/html/layout/cache.d.ts.map +1 -1
- package/dist/html/layout/cache.js +6 -0
- package/dist/html/layout/cache.js.map +1 -1
- package/dist/html/layout/css-grid.d.ts.map +1 -1
- package/dist/html/layout/css-grid.js +144 -24
- package/dist/html/layout/css-grid.js.map +1 -1
- package/dist/html/layout/flex.d.ts.map +1 -1
- package/dist/html/layout/flex.js +585 -85
- package/dist/html/layout/flex.js.map +1 -1
- package/dist/html/layout/inline.d.ts +3 -0
- package/dist/html/layout/inline.d.ts.map +1 -1
- package/dist/html/layout/inline.js +144 -54
- package/dist/html/layout/inline.js.map +1 -1
- package/dist/html/layout/multicol.d.ts +42 -0
- package/dist/html/layout/multicol.d.ts.map +1 -0
- package/dist/html/layout/multicol.js +897 -0
- package/dist/html/layout/multicol.js.map +1 -0
- package/dist/html/layout/shaping.d.ts +7 -0
- package/dist/html/layout/shaping.d.ts.map +1 -1
- package/dist/html/layout/shaping.js +25 -20
- package/dist/html/layout/shaping.js.map +1 -1
- package/dist/html/layout/table.d.ts.map +1 -1
- package/dist/html/layout/table.js +97 -31
- package/dist/html/layout/table.js.map +1 -1
- package/dist/html/node.d.ts +4 -0
- package/dist/html/node.d.ts.map +1 -1
- package/dist/html/node.js +319 -47
- package/dist/html/node.js.map +1 -1
- package/dist/html/paint.d.ts +83 -5
- package/dist/html/paint.d.ts.map +1 -1
- package/dist/html/paint.js +1474 -217
- package/dist/html/paint.js.map +1 -1
- package/dist/html/svg.d.ts +39 -9
- package/dist/html/svg.d.ts.map +1 -1
- package/dist/html/svg.js +482 -37
- package/dist/html/svg.js.map +1 -1
- package/dist/html/widgets.js +87 -7
- package/dist/html/widgets.js.map +1 -1
- package/dist/html/woff2.d.ts +14 -0
- package/dist/html/woff2.d.ts.map +1 -0
- package/dist/html/woff2.js +608 -0
- package/dist/html/woff2.js.map +1 -0
- package/dist/maps/controller.d.ts +17 -1
- package/dist/maps/controller.d.ts.map +1 -1
- package/dist/maps/controller.js +27 -7
- package/dist/maps/controller.js.map +1 -1
- package/dist/richtext/node.d.ts +8 -1
- package/dist/richtext/node.d.ts.map +1 -1
- package/dist/richtext/node.js +5 -1
- package/dist/richtext/node.js.map +1 -1
- package/dist/richtext/runs.d.ts +25 -6
- package/dist/richtext/runs.d.ts.map +1 -1
- package/dist/richtext/runs.js +240 -24
- package/dist/richtext/runs.js.map +1 -1
- package/package.json +1 -1
- package/src/html/controls.ts +85 -2
- package/src/html/css/cascade.ts +366 -8
- package/src/html/css/color.ts +29 -0
- package/src/html/css/parse.ts +71 -31
- package/src/html/css/shapes.ts +239 -0
- package/src/html/css/style.ts +652 -147
- package/src/html/css/transform.ts +459 -0
- package/src/html/css/ua.ts +15 -2
- package/src/html/css/values.ts +4 -0
- package/src/html/fonts.ts +312 -29
- package/src/html/layout/axes.ts +62 -0
- package/src/html/layout/block.ts +466 -37
- package/src/html/layout/boxes.ts +95 -3
- package/src/html/layout/cache.ts +6 -0
- package/src/html/layout/css-grid.ts +169 -32
- package/src/html/layout/flex.ts +686 -79
- package/src/html/layout/inline.ts +149 -55
- package/src/html/layout/multicol.ts +977 -0
- package/src/html/layout/shaping.ts +27 -18
- package/src/html/layout/table.ts +105 -35
- package/src/html/node.ts +354 -48
- package/src/html/paint.ts +1804 -315
- package/src/html/svg.ts +573 -36
- package/src/html/widgets.ts +95 -9
- package/src/html/woff2.ts +612 -0
- package/src/maps/controller.ts +28 -7
- package/src/richtext/node.ts +13 -2
- package/src/richtext/runs.ts +313 -35
package/dist/html/node.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/html/node.ts"],"names":[],"mappings":"AAuCA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,YAAY,EACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,IAAI,aAAa,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAI1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/html/node.ts"],"names":[],"mappings":"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"}
|
package/dist/html/node.js
CHANGED
|
@@ -43,9 +43,11 @@ import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
|
|
|
43
43
|
import { Cascade, HOVER_FOLLOWED, HOVER_PSEUDO_NONE, HOVER_PSEUDO_OTHER, HOVER_UNTOUCHED, } from './css/cascade.js';
|
|
44
44
|
import { mediaMatches, parseStylesheet } from './css/parse.js';
|
|
45
45
|
import { uaStylesheet } from './css/ua.js';
|
|
46
|
-
import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, } from './layout/boxes.js';
|
|
47
|
-
import { layoutDocument,
|
|
46
|
+
import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHAPE_STYLES, SHIFTED_LINES, TEXT_SHIFTS, columned, } from './layout/boxes.js';
|
|
47
|
+
import { layoutDocument, placedMatrix, retranslate } from './layout/block.js';
|
|
48
|
+
import { invert, mapPoint, mapRect, transformed } from './css/transform.js';
|
|
48
49
|
import { TextLayoutCache } from './layout/cache.js';
|
|
50
|
+
import { weightAxes } from './layout/axes.js';
|
|
49
51
|
import { shapingSafe } from './layout/shaping.js';
|
|
50
52
|
import { SurfaceCache, newSurface } from './surfaces.js';
|
|
51
53
|
import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
|
|
@@ -53,7 +55,7 @@ import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
|
|
|
53
55
|
// a layout is built once, on the first selection that needs it.
|
|
54
56
|
import { documentOffsetOf, layoutOffsetOf, layoutOffsets as layoutOffsetsOf, } from './layout/inline.js';
|
|
55
57
|
import { lineBands as bandsFor } from '../richtext/runs.js';
|
|
56
|
-
import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, paintDocument, queryChildIndex, selectionRows, stackLayers, } from './paint.js';
|
|
58
|
+
import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, inClip, inClipPath, onLine, ownBounds, paintDocument, pathClips, queryChildIndex, selectionRows, stackLayers, stacksLayers, } from './paint.js';
|
|
57
59
|
import { controlRectsOf, measureControl } from './controls.js';
|
|
58
60
|
import { ResourceStore } from './resources.js';
|
|
59
61
|
import { WebFonts } from './fonts.js';
|
|
@@ -545,8 +547,16 @@ export class HtmlViewNode extends Node {
|
|
|
545
547
|
* next restyle whether the sheets read the same (`_sameSheets`). A sheet
|
|
546
548
|
* that imports itself, or one of the sheets importing it, is read once.
|
|
547
549
|
*/
|
|
548
|
-
_placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set()
|
|
549
|
-
|
|
550
|
+
_placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set(),
|
|
551
|
+
/** The media queries `sheet` is itself under, where it was imported
|
|
552
|
+
* under some. */
|
|
553
|
+
under = null) {
|
|
554
|
+
for (let i = 0; i < sheet.imports.length; i += 1) {
|
|
555
|
+
const url = sheet.imports[i];
|
|
556
|
+
// what it imports is under its import's media queries, and under
|
|
557
|
+
// the ones the sheet importing it is under
|
|
558
|
+
const conditions = sheet.importConditions[i];
|
|
559
|
+
const media = conditions ? [...(under ?? []), conditions] : under;
|
|
550
560
|
this._resources.request({ url, kind: 'stylesheet', element });
|
|
551
561
|
const fetched = this._resources.stylesheet(url, [encoding]);
|
|
552
562
|
const base = this._resources.sheetBase(url);
|
|
@@ -554,9 +564,9 @@ export class HtmlViewNode extends Node {
|
|
|
554
564
|
const key = base ?? url;
|
|
555
565
|
if (!fetched || depth >= MAX_IMPORT_DEPTH || chain.has(key))
|
|
556
566
|
continue;
|
|
557
|
-
const imported = parseStylesheet(fetched.text, 0, layers, base);
|
|
567
|
+
const imported = parseStylesheet(fetched.text, 0, layers, base, media);
|
|
558
568
|
chain.add(key);
|
|
559
|
-
this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain);
|
|
569
|
+
this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain, media);
|
|
560
570
|
chain.delete(key);
|
|
561
571
|
place(imported, element);
|
|
562
572
|
}
|
|
@@ -671,11 +681,22 @@ export class HtmlViewNode extends Node {
|
|
|
671
681
|
const height = root?.abs?.height;
|
|
672
682
|
return height && height > 0 ? height : 600;
|
|
673
683
|
}
|
|
684
|
+
/** The engine this document lays text out with, and the one it is over:
|
|
685
|
+
* one object while the engine is, since caches are kept by it. */
|
|
686
|
+
_engine = null;
|
|
674
687
|
_fonts() {
|
|
675
688
|
const fonts = this.app?.fonts;
|
|
689
|
+
if (!fonts)
|
|
690
|
+
return null;
|
|
676
691
|
// a face the engine cannot shape from costs its characters, not the
|
|
677
692
|
// document (`shaping.ts`)
|
|
678
|
-
|
|
693
|
+
const safe = shapingSafe(fonts);
|
|
694
|
+
if (this._engine?.over !== safe) {
|
|
695
|
+
// and a variable face of the document's is set at the weight its
|
|
696
|
+
// rule has for a style's (`axes.ts`)
|
|
697
|
+
this._engine = { over: safe, fonts: weightAxes(safe, this._webFonts) };
|
|
698
|
+
}
|
|
699
|
+
return this._engine.fonts;
|
|
679
700
|
}
|
|
680
701
|
/** The text layouts the last pass made, for this one to reuse. */
|
|
681
702
|
_layouts = null;
|
|
@@ -869,7 +890,7 @@ export class HtmlViewNode extends Node {
|
|
|
869
890
|
// The boxes are device pixels; each rect becomes the style of a widget
|
|
870
891
|
// mounted beside this element, and a style is logical.
|
|
871
892
|
const s = this._scale;
|
|
872
|
-
const rects = controlRectsOf(tree).map((r) => s === 1
|
|
893
|
+
const rects = controlRectsOf(tree, s).map((r) => s === 1
|
|
873
894
|
? r
|
|
874
895
|
: {
|
|
875
896
|
...r,
|
|
@@ -878,6 +899,14 @@ export class HtmlViewNode extends Node {
|
|
|
878
899
|
width: r.width / s,
|
|
879
900
|
height: r.height / s,
|
|
880
901
|
fontSize: r.fontSize / s,
|
|
902
|
+
...(r.clip && {
|
|
903
|
+
clip: {
|
|
904
|
+
x: r.clip.x / s,
|
|
905
|
+
y: r.clip.y / s,
|
|
906
|
+
width: r.clip.width / s,
|
|
907
|
+
height: r.clip.height / s,
|
|
908
|
+
},
|
|
909
|
+
}),
|
|
881
910
|
...(r.bare && {
|
|
882
911
|
bare: {
|
|
883
912
|
...r.bare,
|
|
@@ -1184,6 +1213,9 @@ export class HtmlViewNode extends Node {
|
|
|
1184
1213
|
rect = { x: caret.x, y: caret.y, width: 0, height: caret.height };
|
|
1185
1214
|
}
|
|
1186
1215
|
}
|
|
1216
|
+
// where it is drawn: the rectangle around it, turned and scaled as the
|
|
1217
|
+
// boxes it is in are, and itself (`getBoundingClientRect`, CSSOM View)
|
|
1218
|
+
rect = throughTransforms(rect, box);
|
|
1187
1219
|
const s = this._scale;
|
|
1188
1220
|
return {
|
|
1189
1221
|
x: rect.x / s,
|
|
@@ -1465,8 +1497,45 @@ export class HtmlViewNode extends Node {
|
|
|
1465
1497
|
if (refused)
|
|
1466
1498
|
return false;
|
|
1467
1499
|
}
|
|
1468
|
-
|
|
1500
|
+
// The drawings the move reached. What the rules give the shapes in one
|
|
1501
|
+
// is no box's style (`BoxTree.shapeStyler`), so it is asked for again:
|
|
1502
|
+
// of a drawing whose own style changed — its colour, a custom property
|
|
1503
|
+
// — and of each where a rule that reaches into a drawing tests the
|
|
1504
|
+
// pointer, `a:hover svg path`. One with another answer is painted
|
|
1505
|
+
// again; one never painted has none yet, and asks when it is.
|
|
1506
|
+
const redrawn = [];
|
|
1507
|
+
if (tree.shapeStyler) {
|
|
1508
|
+
for (const el of reach) {
|
|
1509
|
+
if (tagOf(el) !== 'svg')
|
|
1510
|
+
continue;
|
|
1511
|
+
const style = fresh.get(el);
|
|
1512
|
+
if (!style)
|
|
1513
|
+
continue;
|
|
1514
|
+
if (!changed.has(el) && !cascade.shapesFollowPointer)
|
|
1515
|
+
continue;
|
|
1516
|
+
const box = this._firstBoxesOf(tree).get(el);
|
|
1517
|
+
const was = box && SHAPE_STYLES.get(box);
|
|
1518
|
+
if (!box || was === undefined)
|
|
1519
|
+
continue;
|
|
1520
|
+
const shapes = cascade.shapeStyles(el, style);
|
|
1521
|
+
if (shapes?.key !== was?.key)
|
|
1522
|
+
redrawn.push([box, shapes]);
|
|
1523
|
+
}
|
|
1524
|
+
}
|
|
1525
|
+
const redraw = () => {
|
|
1526
|
+
const inks = [];
|
|
1527
|
+
for (const [box, shapes] of redrawn) {
|
|
1528
|
+
SHAPE_STYLES.set(box, shapes);
|
|
1529
|
+
const ink = inkOf(box);
|
|
1530
|
+
if (ink)
|
|
1531
|
+
inks.push(ink);
|
|
1532
|
+
}
|
|
1533
|
+
return inks;
|
|
1534
|
+
};
|
|
1535
|
+
if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) {
|
|
1536
|
+
this._repaintInk(redraw());
|
|
1469
1537
|
return true;
|
|
1538
|
+
}
|
|
1470
1539
|
for (const el of changed.keys()) {
|
|
1471
1540
|
const tag = tagOf(el);
|
|
1472
1541
|
// their backgrounds are the canvas's
|
|
@@ -1611,8 +1680,10 @@ export class HtmlViewNode extends Node {
|
|
|
1611
1680
|
}
|
|
1612
1681
|
}
|
|
1613
1682
|
}
|
|
1614
|
-
if (!restyled.length)
|
|
1683
|
+
if (!restyled.length) {
|
|
1684
|
+
this._repaintInk(redraw());
|
|
1615
1685
|
return true;
|
|
1686
|
+
}
|
|
1616
1687
|
// the text: each layout holding a run of a restyled box's, made again
|
|
1617
1688
|
// with its new ink, where it comes out the same shape
|
|
1618
1689
|
const relaid = new Map();
|
|
@@ -1670,6 +1741,8 @@ export class HtmlViewNode extends Node {
|
|
|
1670
1741
|
for (const [el, style] of changed) {
|
|
1671
1742
|
tree.styles.set(el, { style, inFlex: tree.styles.get(el).inFlex });
|
|
1672
1743
|
}
|
|
1744
|
+
for (const ink of redraw())
|
|
1745
|
+
inks.push(ink);
|
|
1673
1746
|
// A box that moved moves what is in it, as layout moved it the first
|
|
1674
1747
|
// time (`applyRelativeOffsets`), and a later layout moves it the same
|
|
1675
1748
|
// way; where it reached the document's end, before or after, the
|
|
@@ -1712,14 +1785,7 @@ export class HtmlViewNode extends Node {
|
|
|
1712
1785
|
/** An element's first box in document order, for the tree it was asked
|
|
1713
1786
|
* of: made on the first move over a tree, which is one walk of it. */
|
|
1714
1787
|
_firstBoxes = null;
|
|
1715
|
-
|
|
1716
|
-
* The blocks a restyle of `changed` has to look in: for each element, the
|
|
1717
|
-
* box its text is set in the lines of — the nearest box around its first
|
|
1718
|
-
* that is not an inline one — which holds every box that takes its style
|
|
1719
|
-
* from it, the pieces a block in it broke it into among them
|
|
1720
|
-
* (`breakAround`). One that is inside another is left to it.
|
|
1721
|
-
*/
|
|
1722
|
-
_blocksOf(tree, changed) {
|
|
1788
|
+
_firstBoxesOf(tree) {
|
|
1723
1789
|
let index = this._firstBoxes;
|
|
1724
1790
|
if (index?.tree !== tree) {
|
|
1725
1791
|
const of = new Map();
|
|
@@ -1734,9 +1800,20 @@ export class HtmlViewNode extends Node {
|
|
|
1734
1800
|
}
|
|
1735
1801
|
index = this._firstBoxes = { tree, of };
|
|
1736
1802
|
}
|
|
1803
|
+
return index.of;
|
|
1804
|
+
}
|
|
1805
|
+
/**
|
|
1806
|
+
* The blocks a restyle of `changed` has to look in: for each element, the
|
|
1807
|
+
* box its text is set in the lines of — the nearest box around its first
|
|
1808
|
+
* that is not an inline one — which holds every box that takes its style
|
|
1809
|
+
* from it, the pieces a block in it broke it into among them
|
|
1810
|
+
* (`breakAround`). One that is inside another is left to it.
|
|
1811
|
+
*/
|
|
1812
|
+
_blocksOf(tree, changed) {
|
|
1813
|
+
const first = this._firstBoxesOf(tree);
|
|
1737
1814
|
const blocks = new Set();
|
|
1738
1815
|
for (const el of changed) {
|
|
1739
|
-
let box =
|
|
1816
|
+
let box = first.get(el) ?? null;
|
|
1740
1817
|
while (box?.parent &&
|
|
1741
1818
|
(box.kind === 'inline' || box.kind === 'text' || box.kind === 'break')) {
|
|
1742
1819
|
box = box.parent;
|
|
@@ -2114,12 +2191,18 @@ function sameRects(a, b) {
|
|
|
2114
2191
|
p.fontFamily !== q.fontFamily ||
|
|
2115
2192
|
p.fontSize !== q.fontSize ||
|
|
2116
2193
|
p.opacity !== q.opacity ||
|
|
2194
|
+
!sameClip(p.clip, q.clip) ||
|
|
2117
2195
|
!sameBare(p.bare, q.bare)) {
|
|
2118
2196
|
return false;
|
|
2119
2197
|
}
|
|
2120
2198
|
}
|
|
2121
2199
|
return true;
|
|
2122
2200
|
}
|
|
2201
|
+
function sameClip(a, b) {
|
|
2202
|
+
if (!a || !b)
|
|
2203
|
+
return a === b;
|
|
2204
|
+
return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
|
|
2205
|
+
}
|
|
2123
2206
|
function sameBare(a, b) {
|
|
2124
2207
|
if (!a || !b)
|
|
2125
2208
|
return a === b;
|
|
@@ -2166,7 +2249,13 @@ function nearestText(box, x, y) {
|
|
|
2166
2249
|
if (distance >= bestDistance)
|
|
2167
2250
|
continue;
|
|
2168
2251
|
bestDistance = distance;
|
|
2169
|
-
|
|
2252
|
+
// in the row that is this line's, where the layout's other lines are
|
|
2253
|
+
// in another column and a point past this one is not over them
|
|
2254
|
+
let row = y - text.drawY;
|
|
2255
|
+
if (columned.any && COLUMN_ROWS.has(text)) {
|
|
2256
|
+
row = Math.max(natural.y, Math.min(row, natural.y + natural.height - 0.01));
|
|
2257
|
+
}
|
|
2258
|
+
const local = text.layout.indexAt(x - text.drawX, row);
|
|
2170
2259
|
const offsets = layoutOffsetsOf(text.layout);
|
|
2171
2260
|
const units = offsets.length
|
|
2172
2261
|
? offsets[Math.max(0, Math.min(local, offsets.length - 1))]
|
|
@@ -2179,13 +2268,38 @@ function nearestText(box, x, y) {
|
|
|
2179
2268
|
axisDistance(x, node.boundsX, node.boundsWidth);
|
|
2180
2269
|
if (boundsDistance >= bestDistance)
|
|
2181
2270
|
return;
|
|
2271
|
+
// in a box painted through a matrix, the point taken back through it
|
|
2272
|
+
// (`deepestAt`): the text is where it was laid out
|
|
2273
|
+
const matrix = placedMatrix(node);
|
|
2274
|
+
if (!matrix) {
|
|
2275
|
+
visitIn(node);
|
|
2276
|
+
return;
|
|
2277
|
+
}
|
|
2278
|
+
const back = invert(matrix);
|
|
2279
|
+
if (!back)
|
|
2280
|
+
return;
|
|
2281
|
+
const px = x;
|
|
2282
|
+
const py = y;
|
|
2283
|
+
[x, y] = mapPoint(back, px, py);
|
|
2284
|
+
try {
|
|
2285
|
+
visitIn(node);
|
|
2286
|
+
}
|
|
2287
|
+
finally {
|
|
2288
|
+
x = px;
|
|
2289
|
+
y = py;
|
|
2290
|
+
}
|
|
2291
|
+
};
|
|
2292
|
+
const visitIn = (node) => {
|
|
2182
2293
|
const lines = node.lines;
|
|
2183
2294
|
if (lines?.length) {
|
|
2184
2295
|
// The line nearest in y, by binary search; then outward both ways
|
|
2185
2296
|
// while vertical distance alone could still beat the best.
|
|
2186
2297
|
let lo = 0;
|
|
2187
2298
|
let hi = lines.length;
|
|
2188
|
-
|
|
2299
|
+
// the lines columns took apart are in no order down the page: each
|
|
2300
|
+
// is tried
|
|
2301
|
+
const apart = columned.any && COLUMN_LINES.has(lines);
|
|
2302
|
+
while (!apart && lo < hi) {
|
|
2189
2303
|
const mid = (lo + hi) >> 1;
|
|
2190
2304
|
if (lines[mid].y > y)
|
|
2191
2305
|
hi = mid;
|
|
@@ -2198,8 +2312,11 @@ function nearestText(box, x, y) {
|
|
|
2198
2312
|
tryLine(lines[i]);
|
|
2199
2313
|
}
|
|
2200
2314
|
for (let i = lo; i < lines.length; i += 1) {
|
|
2201
|
-
if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance)
|
|
2315
|
+
if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance) {
|
|
2316
|
+
if (apart)
|
|
2317
|
+
continue;
|
|
2202
2318
|
break;
|
|
2319
|
+
}
|
|
2203
2320
|
tryLine(lines[i]);
|
|
2204
2321
|
}
|
|
2205
2322
|
}
|
|
@@ -2287,7 +2404,13 @@ function caretAt(box, units) {
|
|
|
2287
2404
|
const offsets = layoutOffsetsOf(text.layout);
|
|
2288
2405
|
const layoutUnits = layoutOffsetOf(text, units);
|
|
2289
2406
|
const caret = text.layout.caretPosition(codePointAtOffset(offsets, layoutUnits));
|
|
2290
|
-
|
|
2407
|
+
const at = throughTransforms({
|
|
2408
|
+
x: text.drawX + caret.x,
|
|
2409
|
+
y: line.y,
|
|
2410
|
+
width: 0,
|
|
2411
|
+
height: line.height,
|
|
2412
|
+
}, node);
|
|
2413
|
+
found = { x: at.x, y: at.y, height: at.height };
|
|
2291
2414
|
return;
|
|
2292
2415
|
}
|
|
2293
2416
|
}
|
|
@@ -2303,6 +2426,21 @@ function caretAt(box, units) {
|
|
|
2303
2426
|
visit(box);
|
|
2304
2427
|
return found;
|
|
2305
2428
|
}
|
|
2429
|
+
/**
|
|
2430
|
+
* A rectangle in a box's own coordinates — the ones it and what it holds
|
|
2431
|
+
* were laid out in — as the rectangle around where it is drawn: through
|
|
2432
|
+
* the matrix of each box from `from` up that is painted through one
|
|
2433
|
+
* (`placedMatrix`). The rectangle itself, in a document that transforms
|
|
2434
|
+
* nothing but by moving it.
|
|
2435
|
+
*/
|
|
2436
|
+
function throughTransforms(rect, from) {
|
|
2437
|
+
for (let at = from; at; at = at.parent) {
|
|
2438
|
+
const matrix = placedMatrix(at);
|
|
2439
|
+
if (matrix)
|
|
2440
|
+
rect = mapRect(matrix, rect.x, rect.y, rect.width, rect.height);
|
|
2441
|
+
}
|
|
2442
|
+
return rect;
|
|
2443
|
+
}
|
|
2306
2444
|
/** Every band a document range covers, in window coordinates. The subtree
|
|
2307
2445
|
* text ranges prune the walk to the boxes the range actually crosses, so a
|
|
2308
2446
|
* drag's small range costs its own paragraphs; only Ctrl+A pays for all. */
|
|
@@ -2451,6 +2589,19 @@ ink = false) {
|
|
|
2451
2589
|
height: rows.height,
|
|
2452
2590
|
});
|
|
2453
2591
|
}
|
|
2592
|
+
// The spaces a piece of a line ends on, where the line goes on
|
|
2593
|
+
// after them: the engine stripped them from the piece it laid out
|
|
2594
|
+
// as a line, and they are the text's all the same, in the elements
|
|
2595
|
+
// that hold its end — a link whose text ends in a space, before
|
|
2596
|
+
// the next link, is that space wider than its letters
|
|
2597
|
+
if (text.trail && b >= text.textEnd && !rtlLine(natural)) {
|
|
2598
|
+
out.push({
|
|
2599
|
+
x: dx + natural.x + natural.width + text.drawX - moved,
|
|
2600
|
+
y: dy + rows.y,
|
|
2601
|
+
width: text.trail,
|
|
2602
|
+
height: rows.height,
|
|
2603
|
+
});
|
|
2604
|
+
}
|
|
2454
2605
|
// the spaces `pre-wrap` keeps that the line ends on, which have no
|
|
2455
2606
|
// run: the engine hung them past the line (`LineText.hung`)
|
|
2456
2607
|
for (const space of text.hung ?? []) {
|
|
@@ -2468,6 +2619,11 @@ ink = false) {
|
|
|
2468
2619
|
}
|
|
2469
2620
|
}
|
|
2470
2621
|
}
|
|
2622
|
+
/** Whether a laid-out line's last run reads right to left, its end at its
|
|
2623
|
+
* left. */
|
|
2624
|
+
function rtlLine(natural) {
|
|
2625
|
+
return natural.runs[natural.runs.length - 1]?.run?.direction === 'rtl';
|
|
2626
|
+
}
|
|
2471
2627
|
/** Whether a line's text is where the line ends: its last, with nothing
|
|
2472
2628
|
* placed after it — an inline-block or an image past its content. */
|
|
2473
2629
|
function endsLine(line, text, natural) {
|
|
@@ -2485,6 +2641,7 @@ function collectBands(box, from, to, dx, dy, out, ink = false) {
|
|
|
2485
2641
|
return;
|
|
2486
2642
|
if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to)
|
|
2487
2643
|
return;
|
|
2644
|
+
const first = out.length;
|
|
2488
2645
|
if (box.lines)
|
|
2489
2646
|
lineBands(box.lines, from, to, dx, dy, out, false, ink);
|
|
2490
2647
|
// Atomics are ordinary children, reached below.
|
|
@@ -2493,6 +2650,15 @@ function collectBands(box, from, to, dx, dy, out, ink = false) {
|
|
|
2493
2650
|
continue;
|
|
2494
2651
|
collectBands(child, from, to, dx, dy, out, ink);
|
|
2495
2652
|
}
|
|
2653
|
+
// where a box painted through a matrix draws them
|
|
2654
|
+
const matrix = out.length > first ? placedMatrix(box) : null;
|
|
2655
|
+
if (!matrix)
|
|
2656
|
+
return;
|
|
2657
|
+
for (let i = first; i < out.length; i += 1) {
|
|
2658
|
+
const band = out[i];
|
|
2659
|
+
const to = mapRect(matrix, band.x - dx, band.y - dy, band.width, band.height);
|
|
2660
|
+
out[i] = { ...band, ...to, x: to.x + dx, y: to.y + dy };
|
|
2661
|
+
}
|
|
2496
2662
|
}
|
|
2497
2663
|
/** The layers of a hit test, in the order CSS paints them within a
|
|
2498
2664
|
* context (`deepestAt`). */
|
|
@@ -2526,7 +2692,17 @@ fixedShift = null) {
|
|
|
2526
2692
|
// are painted in `z-index` order and then the document's (`byZIndex`),
|
|
2527
2693
|
// the negative ones under the flow: the Zen Garden's `›` has
|
|
2528
2694
|
// `z-index: 3` over the bar the "View All Designs" link fills after it.
|
|
2529
|
-
|
|
2695
|
+
// Nor is a box the pointer passes through under it: one that is not
|
|
2696
|
+
// visible, which is no target for the pointer in any browser (CSS 2.1
|
|
2697
|
+
// 11.2 has it invisible, and a hit test finds what is seen), or one with
|
|
2698
|
+
// `pointer-events: none` (CSS UI 4, 5.2). Both are inherited, and what is
|
|
2699
|
+
// in such a box may say otherwise, so the walk goes on through it. A
|
|
2700
|
+
// site's closed menu is laid out over its page, hidden: GitHub's covered
|
|
2701
|
+
// its repository's tabs, and the pointer over a tab was over the menu.
|
|
2702
|
+
const take = (el, style, key, text) => {
|
|
2703
|
+
if (style.visibility !== 'visible' || style.pointerEvents === 'none') {
|
|
2704
|
+
return;
|
|
2705
|
+
}
|
|
2530
2706
|
if (compareKeys(key, foundKey) < 0)
|
|
2531
2707
|
return;
|
|
2532
2708
|
found = el;
|
|
@@ -2568,14 +2744,79 @@ fixedShift = null) {
|
|
|
2568
2744
|
atViewport = false;
|
|
2569
2745
|
}
|
|
2570
2746
|
};
|
|
2747
|
+
// A box painted through a matrix (`placedMatrix`) is under the point
|
|
2748
|
+
// where the matrix puts it: inside the rectangle around what it draws
|
|
2749
|
+
// there, the point is taken back through the matrix, into the
|
|
2750
|
+
// coordinates the box and all it holds were laid out in, and the walk
|
|
2751
|
+
// goes on with that. An icon turned a quarter is pressed where it is
|
|
2752
|
+
// drawn; a box flattened to nothing is nowhere.
|
|
2571
2753
|
const enterAt = (child, context, clipped) => {
|
|
2754
|
+
const matrix = placedMatrix(child);
|
|
2755
|
+
if (!matrix) {
|
|
2756
|
+
enterIn(child, context, clipped, null);
|
|
2757
|
+
return;
|
|
2758
|
+
}
|
|
2759
|
+
if (x < child.boundsX ||
|
|
2760
|
+
x >= child.boundsX + child.boundsWidth ||
|
|
2761
|
+
y < child.boundsY ||
|
|
2762
|
+
y >= child.boundsY + child.boundsHeight) {
|
|
2763
|
+
return;
|
|
2764
|
+
}
|
|
2765
|
+
const back = invert(matrix);
|
|
2766
|
+
if (!back)
|
|
2767
|
+
return;
|
|
2768
|
+
const px = x;
|
|
2769
|
+
const py = y;
|
|
2770
|
+
[x, y] = mapPoint(back, px, py);
|
|
2771
|
+
try {
|
|
2772
|
+
enterIn(child, context, clipped, ownBounds(child));
|
|
2773
|
+
}
|
|
2774
|
+
finally {
|
|
2775
|
+
x = px;
|
|
2776
|
+
y = py;
|
|
2777
|
+
}
|
|
2778
|
+
};
|
|
2779
|
+
const enterIn = (child, context, clipped,
|
|
2780
|
+
/** What the box draws in its own coordinates, where those are not the
|
|
2781
|
+
* ones its bounds are in: a box painted through a matrix. */
|
|
2782
|
+
bounds) => {
|
|
2572
2783
|
const style = child.style;
|
|
2784
|
+
// What a `clip-path` cuts away of a box it cuts away of all the box
|
|
2785
|
+
// holds, whatever that is positioned from (CSS Masking 1, 5.1), and
|
|
2786
|
+
// nothing not drawn is under a pointer: a label a page hides for a
|
|
2787
|
+
// screen reader alone under `clip-path: inset(50%)` took the hover and
|
|
2788
|
+
// the press of what was drawn where it lay.
|
|
2789
|
+
if (pathClips(child) && !inClipPath(child, x, y))
|
|
2790
|
+
return;
|
|
2791
|
+
// `clip` is not that rule as paint has it. It shows the part of an
|
|
2792
|
+
// absolute box it names (CSS 2.1 11.1.2), and past that part nothing is
|
|
2793
|
+
// drawn of the box, nor of what is painted with it. A stacking context
|
|
2794
|
+
// paints all it holds, inside its clip. A box that is none leaves its
|
|
2795
|
+
// positioned boxes to the context around it, which cuts each to the
|
|
2796
|
+
// clips its containing block is under (`clipsFor`): this one for all
|
|
2797
|
+
// but a fixed box, which is under none and is drawn past it. So past
|
|
2798
|
+
// its clip the first is left, and the second is walked as a box that
|
|
2799
|
+
// clips its overflow is past its edge — whether or not the point is in
|
|
2800
|
+
// its own rectangle, which a clip may show only a part of. Both were
|
|
2801
|
+
// walked as if they showed whole: a label hidden for a screen reader
|
|
2802
|
+
// alone under `clip: rect(0, 0, 0, 0)` took the hover and the press of
|
|
2803
|
+
// the link drawn where it lay.
|
|
2804
|
+
let cut = !inClip(child, x, y);
|
|
2805
|
+
if (cut && stacksLayers(child))
|
|
2806
|
+
return;
|
|
2573
2807
|
if (style.position !== 'static' ||
|
|
2574
2808
|
(child.parent?.kind === 'flex' && typeof style.zIndex === 'number')) {
|
|
2575
2809
|
// a flex item with a `z-index` is layered unpositioned (`layered`)
|
|
2576
2810
|
const z = style.zIndex === 'auto' ? 0 : style.zIndex;
|
|
2577
2811
|
context = [...context, z < 0 ? HIT_NEGATIVE : HIT_POSITIONED, z];
|
|
2578
2812
|
}
|
|
2813
|
+
else if (transformed(style) &&
|
|
2814
|
+
child.kind !== 'inline' &&
|
|
2815
|
+
child.parent &&
|
|
2816
|
+
!onLine(child.parent, child)) {
|
|
2817
|
+
// a transformed box is painted with the positioned ones (`layered`)
|
|
2818
|
+
context = [...context, HIT_POSITIONED, 0];
|
|
2819
|
+
}
|
|
2579
2820
|
else if (style.float !== 'none')
|
|
2580
2821
|
context = [...context, HIT_FLOAT];
|
|
2581
2822
|
if (clipped.length !== 0 && child.outOfFlow) {
|
|
@@ -2584,33 +2825,45 @@ fixedShift = null) {
|
|
|
2584
2825
|
? clipped.filter((clip) => holds(clip, containing))
|
|
2585
2826
|
: [];
|
|
2586
2827
|
}
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2828
|
+
// in one of its pieces, where columns broke it: its rect takes in the
|
|
2829
|
+
// columns between them, which are other boxes'
|
|
2830
|
+
const pieces = columned.any ? COLUMN_PIECES.get(child) : undefined;
|
|
2831
|
+
const inside = pieces
|
|
2832
|
+
? pieces.some((piece) => x >= piece.x &&
|
|
2833
|
+
x < piece.x + piece.width &&
|
|
2834
|
+
y >= piece.y &&
|
|
2835
|
+
y < piece.y + piece.height)
|
|
2836
|
+
: x >= child.x &&
|
|
2837
|
+
x < child.x + child.width &&
|
|
2838
|
+
y >= child.y &&
|
|
2839
|
+
y < child.y + child.height;
|
|
2591
2840
|
const own = inside && hasRect(child);
|
|
2592
2841
|
if (!own) {
|
|
2593
|
-
const
|
|
2594
|
-
const
|
|
2595
|
-
|
|
2842
|
+
const left = bounds ? bounds.x : child.boundsX;
|
|
2843
|
+
const reach = bounds ? bounds.y : child.boundsY;
|
|
2844
|
+
const across = bounds ? bounds.width : child.boundsWidth;
|
|
2845
|
+
const down = bounds ? bounds.height : child.boundsHeight;
|
|
2846
|
+
const known = Number.isFinite(reach) && (across > 0 || down > 0);
|
|
2596
2847
|
if (!known) {
|
|
2597
2848
|
if (!inside)
|
|
2598
2849
|
return;
|
|
2599
2850
|
}
|
|
2600
|
-
else if (x <
|
|
2601
|
-
x >=
|
|
2851
|
+
else if (x < left ||
|
|
2852
|
+
x >= left + across ||
|
|
2602
2853
|
y < reach ||
|
|
2603
|
-
y >= reach +
|
|
2854
|
+
y >= reach + down) {
|
|
2604
2855
|
return;
|
|
2605
2856
|
}
|
|
2606
|
-
if (clipsOverflow(child))
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2857
|
+
if (clipsOverflow(child))
|
|
2858
|
+
cut = true;
|
|
2859
|
+
}
|
|
2860
|
+
if (cut) {
|
|
2861
|
+
if (!holdsAbsolute(child))
|
|
2862
|
+
return;
|
|
2863
|
+
clipped = [...clipped, child];
|
|
2611
2864
|
}
|
|
2612
2865
|
if (own && child.el && clipped.length === 0) {
|
|
2613
|
-
take(child.el, [...context, HIT_BLOCK], false);
|
|
2866
|
+
take(child.el, style, [...context, HIT_BLOCK], false);
|
|
2614
2867
|
}
|
|
2615
2868
|
visit(child, context, clipped);
|
|
2616
2869
|
};
|
|
@@ -2652,8 +2905,9 @@ fixedShift = null) {
|
|
|
2652
2905
|
const left = text.drawX + natural.x + run.x;
|
|
2653
2906
|
if (x >= left && x < left + run.width) {
|
|
2654
2907
|
const owner = ownerOf(tree.textBoxes, text.spans.documentAt(run.start));
|
|
2655
|
-
|
|
2656
|
-
|
|
2908
|
+
const style = owner && tree.styles.get(owner)?.style;
|
|
2909
|
+
if (style)
|
|
2910
|
+
take(owner, style, [...context, HIT_INLINE], true);
|
|
2657
2911
|
}
|
|
2658
2912
|
}
|
|
2659
2913
|
}
|
|
@@ -2717,6 +2971,9 @@ const PAINT_ONLY = new Set([
|
|
|
2717
2971
|
'color',
|
|
2718
2972
|
'textFillColor',
|
|
2719
2973
|
'cursor',
|
|
2974
|
+
'pointerEvents',
|
|
2975
|
+
'fill',
|
|
2976
|
+
'stroke',
|
|
2720
2977
|
'backgroundColor',
|
|
2721
2978
|
'borderTopColor',
|
|
2722
2979
|
'borderRightColor',
|
|
@@ -2733,6 +2990,8 @@ const PAINT_ONLY = new Set([
|
|
|
2733
2990
|
'underlineThickness',
|
|
2734
2991
|
'underlineOffset',
|
|
2735
2992
|
'lineThrough',
|
|
2993
|
+
'lineThroughStyle',
|
|
2994
|
+
'lineThroughThickness',
|
|
2736
2995
|
]);
|
|
2737
2996
|
/** The fields of a run its ink is: what `runFor` takes from `PAINT_ONLY`. */
|
|
2738
2997
|
const INK_FIELDS = [
|
|
@@ -2742,6 +3001,8 @@ const INK_FIELDS = [
|
|
|
2742
3001
|
'underlineOffset',
|
|
2743
3002
|
'underlineThickness',
|
|
2744
3003
|
'strike',
|
|
3004
|
+
'strikeStyle',
|
|
3005
|
+
'strikeThickness',
|
|
2745
3006
|
];
|
|
2746
3007
|
/** The fields of a run its shape is, which ink never changes. */
|
|
2747
3008
|
const FACE_FIELDS = [
|
|
@@ -2776,10 +3037,19 @@ const INK_REACH = new Set([
|
|
|
2776
3037
|
'outlineWidth',
|
|
2777
3038
|
'outlineOffset',
|
|
2778
3039
|
]);
|
|
3040
|
+
/** What transforms a box: it moves, turns or scales where it is, and
|
|
3041
|
+
* nothing around it does (CSS Transforms 1, 3). */
|
|
3042
|
+
const TRANSFORM_FIELDS = new Set([
|
|
3043
|
+
'translate',
|
|
3044
|
+
'rotate',
|
|
3045
|
+
'scale',
|
|
3046
|
+
'transform',
|
|
3047
|
+
'transformOrigin',
|
|
3048
|
+
]);
|
|
2779
3049
|
/**
|
|
2780
3050
|
* How two styles of one element differ, for a restyle in place: null where
|
|
2781
3051
|
* they do not, a `HoverChange` where every difference is ink, how far ink
|
|
2782
|
-
* reaches, a `z-index` that stays a stacking context's, or a
|
|
3052
|
+
* reaches, a `z-index` that stays a stacking context's, or a transform —
|
|
2783
3053
|
* none of which moves anything but the box and what it holds (CSS
|
|
2784
3054
|
* Transforms 1: a transform does not affect layout) — and false where
|
|
2785
3055
|
* anything else differs.
|
|
@@ -2819,7 +3089,7 @@ function hoverChange(was, now) {
|
|
|
2819
3089
|
change.order = true;
|
|
2820
3090
|
continue;
|
|
2821
3091
|
}
|
|
2822
|
-
if (key
|
|
3092
|
+
if (TRANSFORM_FIELDS.has(key)) {
|
|
2823
3093
|
change.move = true;
|
|
2824
3094
|
continue;
|
|
2825
3095
|
}
|
|
@@ -2867,12 +3137,14 @@ function inkOf(box) {
|
|
|
2867
3137
|
return null;
|
|
2868
3138
|
if (!(at.boundsWidth > 0 && at.boundsHeight > 0))
|
|
2869
3139
|
return null;
|
|
2870
|
-
|
|
3140
|
+
// its bounds are in the coordinates of the box it is in, which a box
|
|
3141
|
+
// around it painted through a matrix draws somewhere else
|
|
3142
|
+
return throughTransforms({
|
|
2871
3143
|
x: at.boundsX,
|
|
2872
3144
|
y: at.boundsY,
|
|
2873
3145
|
width: at.boundsWidth,
|
|
2874
3146
|
height: at.boundsHeight,
|
|
2875
|
-
};
|
|
3147
|
+
}, at.parent);
|
|
2876
3148
|
}
|
|
2877
3149
|
/** Structural equality for a computed value: a number, a string, or the
|
|
2878
3150
|
* plain objects and arrays a length or a shadow list is. */
|