1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
/*
* Copyright (C) 2023 Yomitan Authors
* Copyright (C) 2022 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {DocumentUtil} from '../dom/document-util.js';
import {TextSourceElement} from '../dom/text-source-element.js';
import {TextSourceRange} from '../dom/text-source-range.js';
/**
* This class is a helper for handling Google Docs content in content scripts.
*/
export class GoogleDocsUtil {
/**
* Scans the document for text or elements with text information at the given coordinate.
* Coordinates are provided in [client space](https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems).
* @param {number} x The x coordinate to search at.
* @param {number} y The y coordinate to search at.
* @param {GetRangeFromPointOptions} options Options to configure how element detection is performed.
* @returns {?TextSourceRange|TextSourceElement} A range for the hovered text or element, or `null` if no applicable content was found.
*/
static getRangeFromPoint(x, y, {normalizeCssZoom}) {
const styleNode = this._getStyleNode();
styleNode.disabled = false;
const element = document.elementFromPoint(x, y);
styleNode.disabled = true;
if (element !== null && element.matches('.kix-canvas-tile-content svg>g>rect')) {
const ariaLabel = element.getAttribute('aria-label');
if (typeof ariaLabel === 'string' && ariaLabel.length > 0) {
return this._createRange(element, ariaLabel, x, y, normalizeCssZoom);
}
}
return null;
}
static _getStyleNode() {
// This <style> node is necessary to force the SVG <rect> elements to have a fill,
// which allows them to be included in document.elementsFromPoint's return value.
if (this._styleNode === null) {
const style = document.createElement('style');
style.textContent = [
'.kix-canvas-tile-content{pointer-events:none!important;}',
'.kix-canvas-tile-content svg>g>rect{pointer-events:all!important;}'
].join('\n');
const parent = document.head || document.documentElement;
if (parent !== null) {
parent.appendChild(style);
}
this._styleNode = style;
}
return this._styleNode;
}
static _createRange(element, text, x, y, normalizeCssZoom) {
// Create imposter
const content = document.createTextNode(text);
const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
const transform = element.getAttribute('transform') || '';
const font = element.getAttribute('data-font-css') || '';
svgText.setAttribute('x', element.getAttribute('x'));
svgText.setAttribute('y', element.getAttribute('y'));
svgText.appendChild(content);
const textStyle = svgText.style;
this._setImportantStyle(textStyle, 'all', 'initial');
this._setImportantStyle(textStyle, 'transform', transform);
this._setImportantStyle(textStyle, 'font', font);
this._setImportantStyle(textStyle, 'text-anchor', 'start');
element.parentNode.appendChild(svgText);
// Adjust offset
const elementRect = element.getBoundingClientRect();
const textRect = svgText.getBoundingClientRect();
const yOffset = ((elementRect.top - textRect.top) + (elementRect.bottom - textRect.bottom)) * 0.5;
this._setImportantStyle(textStyle, 'transform', `translate(0px,${yOffset}px) ${transform}`);
// Create range
const range = this._getRangeWithPoint(content, x, y, normalizeCssZoom);
this._setImportantStyle(textStyle, 'pointer-events', 'none');
this._setImportantStyle(textStyle, 'opacity', '0');
return TextSourceRange.createFromImposter(range, svgText, element);
}
static _getRangeWithPoint(textNode, x, y, normalizeCssZoom) {
if (normalizeCssZoom) {
const scale = DocumentUtil.computeZoomScale(textNode);
x /= scale;
y /= scale;
}
const range = document.createRange();
let start = 0;
let end = textNode.nodeValue.length;
while (end - start > 1) {
const mid = Math.floor((start + end) / 2);
range.setStart(textNode, mid);
range.setEnd(textNode, end);
if (DocumentUtil.isPointInAnyRect(x, y, range.getClientRects())) {
start = mid;
} else {
end = mid;
}
}
range.setStart(textNode, start);
range.setEnd(textNode, start);
return range;
}
static _setImportantStyle(style, propertyName, value) {
style.setProperty(propertyName, value, 'important');
}
}
// eslint-disable-next-line no-underscore-dangle
GoogleDocsUtil._styleNode = null;
|