@cntrl-site/sdk 1.25.0 → 1.25.1-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/lib/Rect/Rect.d.ts +34 -0
- package/lib/Rect/Rect.js +207 -0
- package/lib/index.d.ts +3 -1
- package/lib/index.js +4 -1
- package/lib/schemas/article/Article.schema.d.ts +84 -7
- package/lib/schemas/article/Interaction.schema.d.ts +60 -5
- package/lib/schemas/article/Interaction.schema.js +14 -2
- package/lib/types/article/Interaction.d.ts +15 -2
- package/lib/types/article/Rect.d.ts +34 -0
- package/lib/types/article/Rect.js +25 -0
- package/lib/utils.d.ts +12 -0
- package/lib/utils.js +48 -0
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Left, RectCoordinates, RectObject, ScaleOrigin, Sides, Top } from "../types/article/Rect";
|
|
2
|
+
export declare class Rect {
|
|
3
|
+
x: number;
|
|
4
|
+
y: number;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
static fromObject({ x, y, width, height }: RectObject): Rect;
|
|
8
|
+
static intersection(rect1: Rect, rect2: Rect): Rect;
|
|
9
|
+
static isSideBySide(rect1: Rect, rect2: Rect): boolean;
|
|
10
|
+
static isContained(rect1: Rect, rect2: Rect): boolean;
|
|
11
|
+
static isEqual(rect1: Rect, rect2: Rect): boolean;
|
|
12
|
+
static scale(rect: Rect, factor: number, origin: ScaleOrigin): Rect;
|
|
13
|
+
static scaleWithOrigin(rect: Rect, factor: number, kt: number, kl: number): Rect;
|
|
14
|
+
static getChildScaleOrigin(parentRect: Rect, childRect: Rect, parentOrigin: ScaleOrigin): Sides;
|
|
15
|
+
static getUnrotatedChildRect(parentRect: Rect, childRect: Rect, rotationAngle: number): Rect;
|
|
16
|
+
static getRotatedRectCoordinates(originalRect: Rect, newRect: Rect, angle: number): RectCoordinates;
|
|
17
|
+
static getUnRotatedPosition(coords: RectCoordinates, angle: number): [Top, Left];
|
|
18
|
+
static getOriginRectFromBoundary: (boundary: DOMRect, angle: number, ratio: number) => Rect;
|
|
19
|
+
static getRotatedBoundingBox(boundary: Rect, angle: number): Rect;
|
|
20
|
+
static getRelativeRect(src: Rect, origin: Rect): Rect;
|
|
21
|
+
static getDefault(): Rect;
|
|
22
|
+
static getHorizontallyIntersectingRects(selectedRect: Rect, unselectedRects: Rect[]): Rect[];
|
|
23
|
+
static getVerticallyIntersectingRects(selectedRect: Rect, unselectedRects: Rect[]): Rect[];
|
|
24
|
+
static roundRect(rect: Rect): Rect;
|
|
25
|
+
static roundRects(rects: Rect[]): Rect[];
|
|
26
|
+
constructor(x: number, y: number, width: number, height: number);
|
|
27
|
+
get left(): number;
|
|
28
|
+
get top(): number;
|
|
29
|
+
get right(): number;
|
|
30
|
+
get bottom(): number;
|
|
31
|
+
getScaled(xRatio: number, yRatio?: number): Rect;
|
|
32
|
+
getRelative(source: Rect): Rect;
|
|
33
|
+
private static getNewPosition;
|
|
34
|
+
}
|
package/lib/Rect/Rect.js
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var _a;
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Rect = void 0;
|
|
5
|
+
const Rect_1 = require("../types/article/Rect");
|
|
6
|
+
class Rect {
|
|
7
|
+
static fromObject({ x, y, width, height }) {
|
|
8
|
+
return new _a(x, y, width, height);
|
|
9
|
+
}
|
|
10
|
+
static intersection(rect1, rect2) {
|
|
11
|
+
const left = Math.max(rect1.left, rect2.left);
|
|
12
|
+
const top = Math.max(rect1.top, rect2.top);
|
|
13
|
+
const width = Math.min(rect1.right, rect2.right) - left;
|
|
14
|
+
const height = Math.min(rect1.bottom, rect2.bottom) - top;
|
|
15
|
+
return new _a(left, top, Math.max(width, 0), Math.max(height, 0));
|
|
16
|
+
}
|
|
17
|
+
static isSideBySide(rect1, rect2) {
|
|
18
|
+
return Math.round(rect1.left) === Math.round(rect2.left)
|
|
19
|
+
|| Math.round(rect1.top) === Math.round(rect2.top)
|
|
20
|
+
|| Math.round(rect1.right) === Math.round(rect2.right)
|
|
21
|
+
|| Math.round(rect1.bottom) === Math.round(rect2.bottom);
|
|
22
|
+
}
|
|
23
|
+
static isContained(rect1, rect2) {
|
|
24
|
+
return rect1.left <= rect2.left && rect1.top <= rect2.top && rect1.right >= rect2.right && rect1.bottom >= rect2.bottom;
|
|
25
|
+
}
|
|
26
|
+
static isEqual(rect1, rect2) {
|
|
27
|
+
return Math.round(rect1.left) === Math.round(rect2.left)
|
|
28
|
+
&& Math.round(rect1.top) === Math.round(rect2.top)
|
|
29
|
+
&& Math.round(rect1.right) === Math.round(rect2.right)
|
|
30
|
+
&& Math.round(rect1.bottom) === Math.round(rect2.bottom);
|
|
31
|
+
}
|
|
32
|
+
static scale(rect, factor, origin) {
|
|
33
|
+
const width = rect.width * factor;
|
|
34
|
+
const height = rect.height * factor;
|
|
35
|
+
const dw = rect.width - width;
|
|
36
|
+
const dh = rect.height - height;
|
|
37
|
+
const [kt, kl] = Rect_1.scaleMatrix[origin];
|
|
38
|
+
const x = rect.left + (kl * dw);
|
|
39
|
+
const y = rect.top + (kt * dh);
|
|
40
|
+
return new _a(x, y, width, height);
|
|
41
|
+
}
|
|
42
|
+
static scaleWithOrigin(rect, factor, kt, kl) {
|
|
43
|
+
const width = rect.width * factor;
|
|
44
|
+
const height = rect.height * factor;
|
|
45
|
+
const dw = rect.width - width;
|
|
46
|
+
const dh = rect.height - height;
|
|
47
|
+
const x = rect.left + (kl * dw);
|
|
48
|
+
const y = rect.top + (kt * dh);
|
|
49
|
+
return new _a(x, y, width, height);
|
|
50
|
+
}
|
|
51
|
+
static getChildScaleOrigin(parentRect, childRect, parentOrigin) {
|
|
52
|
+
if (childRect.width === 0 || childRect.height === 0 || parentRect.width === 0 || parentRect.height === 0) {
|
|
53
|
+
return [0, 0]; // Default or fallback value
|
|
54
|
+
}
|
|
55
|
+
const [kt, kl] = Rect_1.scaleMatrix[parentOrigin];
|
|
56
|
+
const dw = childRect.width / parentRect.width;
|
|
57
|
+
const dh = childRect.height / parentRect.height;
|
|
58
|
+
const clNormalized = childRect.left / childRect.width;
|
|
59
|
+
const ctNormalized = childRect.top / childRect.height;
|
|
60
|
+
const pw = 1 / dw;
|
|
61
|
+
const ph = 1 / dh;
|
|
62
|
+
const pl = kl * pw;
|
|
63
|
+
const pt = kt * ph;
|
|
64
|
+
const originLeft = pl - clNormalized;
|
|
65
|
+
const originTop = pt - ctNormalized;
|
|
66
|
+
return [originTop, originLeft];
|
|
67
|
+
}
|
|
68
|
+
static getUnrotatedChildRect(parentRect, childRect, rotationAngle) {
|
|
69
|
+
const radians = -1 * rotationAngle * (Math.PI / 180);
|
|
70
|
+
const parentCenterX = parentRect.left + parentRect.width / 2;
|
|
71
|
+
const parentCenterY = parentRect.top + parentRect.height / 2;
|
|
72
|
+
const relativeX = childRect.left + childRect.width / 2 - parentCenterX;
|
|
73
|
+
const relativeY = childRect.top + childRect.height / 2 - parentCenterY;
|
|
74
|
+
const unrotatedX = relativeX * Math.cos(radians) - relativeY * Math.sin(radians);
|
|
75
|
+
const unrotatedY = relativeX * Math.sin(radians) + relativeY * Math.cos(radians);
|
|
76
|
+
const finalX = unrotatedX + parentCenterX;
|
|
77
|
+
const finalY = unrotatedY + parentCenterY;
|
|
78
|
+
const unrotatedWidth = childRect.width;
|
|
79
|
+
const unrotatedHeight = childRect.height;
|
|
80
|
+
return new _a(finalX - unrotatedWidth / 2, finalY - unrotatedHeight / 2, unrotatedWidth, unrotatedHeight);
|
|
81
|
+
}
|
|
82
|
+
static getRotatedRectCoordinates(originalRect, newRect, angle) {
|
|
83
|
+
if (angle === 0)
|
|
84
|
+
return [newRect.left, newRect.top, newRect.right, newRect.bottom];
|
|
85
|
+
const radians = (Math.PI * angle) / 180;
|
|
86
|
+
const cos = Math.cos(radians);
|
|
87
|
+
const sin = Math.sin(radians);
|
|
88
|
+
const centerX = originalRect.left + originalRect.width / 2;
|
|
89
|
+
const centerY = originalRect.top + originalRect.height / 2;
|
|
90
|
+
const { left, top, right, bottom } = newRect;
|
|
91
|
+
const rotatedLeft = left * cos - top * sin - centerX * cos + centerY * sin + centerX;
|
|
92
|
+
const rotatedTop = left * sin + top * cos - centerX * sin - centerY * cos + centerY;
|
|
93
|
+
const rotatedRight = right * cos - bottom * sin - centerX * cos + centerY * sin + centerX;
|
|
94
|
+
const rotatedBottom = right * sin + bottom * cos - centerX * sin - centerY * cos + centerY;
|
|
95
|
+
return [rotatedLeft, rotatedTop, rotatedRight, rotatedBottom];
|
|
96
|
+
}
|
|
97
|
+
static getUnRotatedPosition(coords, angle) {
|
|
98
|
+
const [left, top, right, bottom] = coords;
|
|
99
|
+
const centerX = (right + left) / 2;
|
|
100
|
+
const centerY = (bottom + top) / 2;
|
|
101
|
+
const radians = -1 * (Math.PI * angle) / 180;
|
|
102
|
+
const cos = Math.cos(radians);
|
|
103
|
+
const sin = Math.sin(radians);
|
|
104
|
+
const newLeft = left * cos - top * sin - cos * centerX + sin * centerY + centerX;
|
|
105
|
+
const newTop = left * sin + top * cos - sin * centerX - cos * centerY + centerY;
|
|
106
|
+
return [newLeft, newTop];
|
|
107
|
+
}
|
|
108
|
+
static getRotatedBoundingBox(boundary, angle) {
|
|
109
|
+
if (angle === 0)
|
|
110
|
+
return _a.fromObject(boundary);
|
|
111
|
+
const { x, y, width, height } = boundary;
|
|
112
|
+
const radian = (angle * Math.PI) / 180;
|
|
113
|
+
const cx = x + width / 2;
|
|
114
|
+
const cy = y + height / 2;
|
|
115
|
+
const corners = [
|
|
116
|
+
{ x, y },
|
|
117
|
+
{ x: x + width, y },
|
|
118
|
+
{ x, y: y + height },
|
|
119
|
+
{ x: x + width, y: y + height }
|
|
120
|
+
];
|
|
121
|
+
const rotatedCorners = corners.map((corner) => {
|
|
122
|
+
const dx = corner.x - cx;
|
|
123
|
+
const dy = corner.y - cy;
|
|
124
|
+
return {
|
|
125
|
+
x: cx + (dx * Math.cos(radian) - dy * Math.sin(radian)),
|
|
126
|
+
y: cy + (dx * Math.sin(radian) + dy * Math.cos(radian))
|
|
127
|
+
};
|
|
128
|
+
});
|
|
129
|
+
const xValues = rotatedCorners.map(point => point.x);
|
|
130
|
+
const yValues = rotatedCorners.map(point => point.y);
|
|
131
|
+
const minX = Math.min(...xValues);
|
|
132
|
+
const maxX = Math.max(...xValues);
|
|
133
|
+
const minY = Math.min(...yValues);
|
|
134
|
+
const maxY = Math.max(...yValues);
|
|
135
|
+
return new _a(minX, minY, maxX - minX, maxY - minY);
|
|
136
|
+
}
|
|
137
|
+
static getRelativeRect(src, origin) {
|
|
138
|
+
return new _a(src.left - origin.left, src.top - origin.top, src.width, src.height);
|
|
139
|
+
}
|
|
140
|
+
static getDefault() {
|
|
141
|
+
return new _a(0, 0, 0, 0);
|
|
142
|
+
}
|
|
143
|
+
static getHorizontallyIntersectingRects(selectedRect, unselectedRects) {
|
|
144
|
+
return unselectedRects.filter(rect => selectedRect.bottom >= rect.top && selectedRect.top <= rect.bottom);
|
|
145
|
+
}
|
|
146
|
+
static getVerticallyIntersectingRects(selectedRect, unselectedRects) {
|
|
147
|
+
return unselectedRects.filter(rect => selectedRect.right >= rect.left && selectedRect.left <= rect.right);
|
|
148
|
+
}
|
|
149
|
+
static roundRect(rect) {
|
|
150
|
+
return new _a(Math.round(rect.x), Math.round(rect.y), Math.round(rect.width), Math.round(rect.height));
|
|
151
|
+
}
|
|
152
|
+
static roundRects(rects) {
|
|
153
|
+
return rects.map(r => _a.roundRect(r));
|
|
154
|
+
}
|
|
155
|
+
constructor(x, y, width, height) {
|
|
156
|
+
this.x = x;
|
|
157
|
+
this.y = y;
|
|
158
|
+
this.width = width;
|
|
159
|
+
this.height = height;
|
|
160
|
+
}
|
|
161
|
+
get left() {
|
|
162
|
+
return this.width >= 0 ? this.x : this.x + this.width;
|
|
163
|
+
}
|
|
164
|
+
get top() {
|
|
165
|
+
return this.height >= 0 ? this.y : this.y + this.height;
|
|
166
|
+
}
|
|
167
|
+
get right() {
|
|
168
|
+
return this.width >= 0 ? this.x + this.width : this.x;
|
|
169
|
+
}
|
|
170
|
+
get bottom() {
|
|
171
|
+
return this.height >= 0 ? this.y + this.height : this.y;
|
|
172
|
+
}
|
|
173
|
+
getScaled(xRatio, yRatio = xRatio) {
|
|
174
|
+
return new _a(this.x * xRatio, this.y * yRatio, this.width * xRatio, this.height * yRatio);
|
|
175
|
+
}
|
|
176
|
+
getRelative(source) {
|
|
177
|
+
return new _a(this.left - source.left, this.top - source.top, this.width, this.height);
|
|
178
|
+
}
|
|
179
|
+
static getNewPosition(rect, newDimensions) {
|
|
180
|
+
const x = rect.left + (rect.width - newDimensions.width) / 2;
|
|
181
|
+
const y = rect.top + (rect.height - newDimensions.height) / 2;
|
|
182
|
+
return { x, y };
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
exports.Rect = Rect;
|
|
186
|
+
_a = Rect;
|
|
187
|
+
Rect.getOriginRectFromBoundary = (boundary, angle, ratio) => {
|
|
188
|
+
const radians = angle * (Math.PI / 180);
|
|
189
|
+
const cos = Math.abs(Math.cos(radians));
|
|
190
|
+
const sin = Math.abs(Math.sin(radians));
|
|
191
|
+
const W = boundary.width;
|
|
192
|
+
const H = boundary.height;
|
|
193
|
+
if (Math.abs(angle % 180) === 90) {
|
|
194
|
+
const { x, y } = _a.getNewPosition(boundary, { width: H, height: W });
|
|
195
|
+
return new _a(x, y, H, W);
|
|
196
|
+
}
|
|
197
|
+
if (Math.abs(angle % 45) === 0) {
|
|
198
|
+
const w = W / (cos + sin / ratio);
|
|
199
|
+
const h = H / (cos + sin * ratio);
|
|
200
|
+
const { x, y } = _a.getNewPosition(boundary, { width: w, height: h });
|
|
201
|
+
return new _a(x, y, w, h);
|
|
202
|
+
}
|
|
203
|
+
const w = (W * cos - H * sin) / (cos * cos - sin * sin);
|
|
204
|
+
const h = (H - w * sin) / cos;
|
|
205
|
+
const { x, y } = _a.getNewPosition(boundary, { width: w, height: h });
|
|
206
|
+
return new _a(x, y, w, h);
|
|
207
|
+
};
|
package/lib/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export { Client as CntrlClient } from './Client/Client';
|
|
2
2
|
export { FontFaceGenerator } from './FontFaceGenerator/FontFaceGenerator';
|
|
3
|
-
export { getLayoutStyles, getLayoutMediaQuery } from './utils';
|
|
3
|
+
export { getLayoutStyles, getLayoutMediaQuery, measureFont } from './utils';
|
|
4
4
|
export { ScrollPlaybackVideoManager } from './ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
|
|
5
|
+
export { Rect } from './Rect/Rect';
|
|
5
6
|
export { SectionHeightMode } from './types/article/Section';
|
|
6
7
|
export { TextAlign, TextDecoration, TextTransform, VerticalAlign } from './types/article/RichText';
|
|
7
8
|
export { ArticleItemType } from './types/article/ArticleItemType';
|
|
@@ -19,3 +20,4 @@ export type { Project } from './types/project/Project';
|
|
|
19
20
|
export type { Meta } from './types/project/Meta';
|
|
20
21
|
export type { KeyframeValueMap, KeyframeAny } from './types/keyframe/Keyframe';
|
|
21
22
|
export type { CompoundSettings } from './types/article/CompoundSettings';
|
|
23
|
+
export type { Dimensions, Left, Position, RectCoordinates, RectObject, ScaleOrigin, Sides, Top } from './types/article/Rect';
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
|
|
3
|
+
exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.Rect = exports.ScrollPlaybackVideoManager = exports.measureFont = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
|
|
4
4
|
// logic
|
|
5
5
|
var Client_1 = require("./Client/Client");
|
|
6
6
|
Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
|
|
@@ -9,8 +9,11 @@ Object.defineProperty(exports, "FontFaceGenerator", { enumerable: true, get: fun
|
|
|
9
9
|
var utils_1 = require("./utils");
|
|
10
10
|
Object.defineProperty(exports, "getLayoutStyles", { enumerable: true, get: function () { return utils_1.getLayoutStyles; } });
|
|
11
11
|
Object.defineProperty(exports, "getLayoutMediaQuery", { enumerable: true, get: function () { return utils_1.getLayoutMediaQuery; } });
|
|
12
|
+
Object.defineProperty(exports, "measureFont", { enumerable: true, get: function () { return utils_1.measureFont; } });
|
|
12
13
|
var ScrollPlaybackVideoManager_1 = require("./ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
|
|
13
14
|
Object.defineProperty(exports, "ScrollPlaybackVideoManager", { enumerable: true, get: function () { return ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager; } });
|
|
15
|
+
var Rect_1 = require("./Rect/Rect");
|
|
16
|
+
Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return Rect_1.Rect; } });
|
|
14
17
|
// enums
|
|
15
18
|
var Section_1 = require("./types/article/Section");
|
|
16
19
|
Object.defineProperty(exports, "SectionHeightMode", { enumerable: true, get: function () { return Section_1.SectionHeightMode; } });
|
|
@@ -123,34 +123,67 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
123
123
|
id: z.ZodString;
|
|
124
124
|
triggers: z.ZodArray<z.ZodUnion<[z.ZodObject<{
|
|
125
125
|
itemId: z.ZodString;
|
|
126
|
-
type: z.
|
|
126
|
+
type: z.ZodLiteral<"item">;
|
|
127
|
+
triggerEvent: z.ZodEnum<["hover-in", "hover-out", "click"]>;
|
|
127
128
|
from: z.ZodString;
|
|
128
129
|
to: z.ZodString;
|
|
129
130
|
}, "strip", z.ZodTypeAny, {
|
|
130
|
-
type: "
|
|
131
|
+
type: "item";
|
|
131
132
|
from: string;
|
|
132
133
|
to: string;
|
|
133
134
|
itemId: string;
|
|
135
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
134
136
|
}, {
|
|
135
|
-
type: "
|
|
137
|
+
type: "item";
|
|
136
138
|
from: string;
|
|
137
139
|
to: string;
|
|
138
140
|
itemId: string;
|
|
141
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
139
142
|
}>, z.ZodObject<{
|
|
143
|
+
type: z.ZodLiteral<"scroll-position">;
|
|
140
144
|
position: z.ZodNumber;
|
|
141
145
|
from: z.ZodString;
|
|
142
146
|
to: z.ZodString;
|
|
143
147
|
isReverse: z.ZodBoolean;
|
|
144
148
|
}, "strip", z.ZodTypeAny, {
|
|
145
149
|
position: number;
|
|
150
|
+
type: "scroll-position";
|
|
146
151
|
from: string;
|
|
147
152
|
to: string;
|
|
148
153
|
isReverse: boolean;
|
|
149
154
|
}, {
|
|
150
155
|
position: number;
|
|
156
|
+
type: "scroll-position";
|
|
151
157
|
from: string;
|
|
152
158
|
to: string;
|
|
153
159
|
isReverse: boolean;
|
|
160
|
+
}>, z.ZodObject<{
|
|
161
|
+
itemId: z.ZodString;
|
|
162
|
+
type: z.ZodLiteral<"item-scroll-position">;
|
|
163
|
+
itemPosition: z.ZodEnum<["bottom", "center", "top"]>;
|
|
164
|
+
screenPosition: z.ZodEnum<["bottom", "center", "top"]>;
|
|
165
|
+
offset: z.ZodNumber;
|
|
166
|
+
from: z.ZodString;
|
|
167
|
+
to: z.ZodString;
|
|
168
|
+
isReverse: z.ZodBoolean;
|
|
169
|
+
}, "strip", z.ZodTypeAny, {
|
|
170
|
+
type: "item-scroll-position";
|
|
171
|
+
from: string;
|
|
172
|
+
to: string;
|
|
173
|
+
itemId: string;
|
|
174
|
+
isReverse: boolean;
|
|
175
|
+
itemPosition: "center" | "top" | "bottom";
|
|
176
|
+
screenPosition: "center" | "top" | "bottom";
|
|
177
|
+
offset: number;
|
|
178
|
+
}, {
|
|
179
|
+
type: "item-scroll-position";
|
|
180
|
+
from: string;
|
|
181
|
+
to: string;
|
|
182
|
+
itemId: string;
|
|
183
|
+
isReverse: boolean;
|
|
184
|
+
itemPosition: "center" | "top" | "bottom";
|
|
185
|
+
screenPosition: "center" | "top" | "bottom";
|
|
186
|
+
offset: number;
|
|
154
187
|
}>]>, "many">;
|
|
155
188
|
states: z.ZodArray<z.ZodObject<{
|
|
156
189
|
id: z.ZodString;
|
|
@@ -181,15 +214,26 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
181
214
|
}, "strip", z.ZodTypeAny, {
|
|
182
215
|
id: string;
|
|
183
216
|
triggers: ({
|
|
184
|
-
type: "
|
|
217
|
+
type: "item";
|
|
185
218
|
from: string;
|
|
186
219
|
to: string;
|
|
187
220
|
itemId: string;
|
|
221
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
188
222
|
} | {
|
|
189
223
|
position: number;
|
|
224
|
+
type: "scroll-position";
|
|
190
225
|
from: string;
|
|
191
226
|
to: string;
|
|
192
227
|
isReverse: boolean;
|
|
228
|
+
} | {
|
|
229
|
+
type: "item-scroll-position";
|
|
230
|
+
from: string;
|
|
231
|
+
to: string;
|
|
232
|
+
itemId: string;
|
|
233
|
+
isReverse: boolean;
|
|
234
|
+
itemPosition: "center" | "top" | "bottom";
|
|
235
|
+
screenPosition: "center" | "top" | "bottom";
|
|
236
|
+
offset: number;
|
|
193
237
|
})[];
|
|
194
238
|
states: {
|
|
195
239
|
id: string;
|
|
@@ -202,15 +246,26 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
202
246
|
}, {
|
|
203
247
|
id: string;
|
|
204
248
|
triggers: ({
|
|
205
|
-
type: "
|
|
249
|
+
type: "item";
|
|
206
250
|
from: string;
|
|
207
251
|
to: string;
|
|
208
252
|
itemId: string;
|
|
253
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
209
254
|
} | {
|
|
210
255
|
position: number;
|
|
256
|
+
type: "scroll-position";
|
|
211
257
|
from: string;
|
|
212
258
|
to: string;
|
|
213
259
|
isReverse: boolean;
|
|
260
|
+
} | {
|
|
261
|
+
type: "item-scroll-position";
|
|
262
|
+
from: string;
|
|
263
|
+
to: string;
|
|
264
|
+
itemId: string;
|
|
265
|
+
isReverse: boolean;
|
|
266
|
+
itemPosition: "center" | "top" | "bottom";
|
|
267
|
+
screenPosition: "center" | "top" | "bottom";
|
|
268
|
+
offset: number;
|
|
214
269
|
})[];
|
|
215
270
|
states: {
|
|
216
271
|
id: string;
|
|
@@ -254,15 +309,26 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
254
309
|
interactions: Record<string, {
|
|
255
310
|
id: string;
|
|
256
311
|
triggers: ({
|
|
257
|
-
type: "
|
|
312
|
+
type: "item";
|
|
258
313
|
from: string;
|
|
259
314
|
to: string;
|
|
260
315
|
itemId: string;
|
|
316
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
261
317
|
} | {
|
|
262
318
|
position: number;
|
|
319
|
+
type: "scroll-position";
|
|
263
320
|
from: string;
|
|
264
321
|
to: string;
|
|
265
322
|
isReverse: boolean;
|
|
323
|
+
} | {
|
|
324
|
+
type: "item-scroll-position";
|
|
325
|
+
from: string;
|
|
326
|
+
to: string;
|
|
327
|
+
itemId: string;
|
|
328
|
+
isReverse: boolean;
|
|
329
|
+
itemPosition: "center" | "top" | "bottom";
|
|
330
|
+
screenPosition: "center" | "top" | "bottom";
|
|
331
|
+
offset: number;
|
|
266
332
|
})[];
|
|
267
333
|
states: {
|
|
268
334
|
id: string;
|
|
@@ -306,15 +372,26 @@ export declare const ArticleSchema: z.ZodObject<{
|
|
|
306
372
|
interactions: Record<string, {
|
|
307
373
|
id: string;
|
|
308
374
|
triggers: ({
|
|
309
|
-
type: "
|
|
375
|
+
type: "item";
|
|
310
376
|
from: string;
|
|
311
377
|
to: string;
|
|
312
378
|
itemId: string;
|
|
379
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
313
380
|
} | {
|
|
314
381
|
position: number;
|
|
382
|
+
type: "scroll-position";
|
|
383
|
+
from: string;
|
|
384
|
+
to: string;
|
|
385
|
+
isReverse: boolean;
|
|
386
|
+
} | {
|
|
387
|
+
type: "item-scroll-position";
|
|
315
388
|
from: string;
|
|
316
389
|
to: string;
|
|
390
|
+
itemId: string;
|
|
317
391
|
isReverse: boolean;
|
|
392
|
+
itemPosition: "center" | "top" | "bottom";
|
|
393
|
+
screenPosition: "center" | "top" | "bottom";
|
|
394
|
+
offset: number;
|
|
318
395
|
})[];
|
|
319
396
|
states: {
|
|
320
397
|
id: string;
|
|
@@ -3,34 +3,67 @@ export declare const InteractionSchema: z.ZodObject<{
|
|
|
3
3
|
id: z.ZodString;
|
|
4
4
|
triggers: z.ZodArray<z.ZodUnion<[z.ZodObject<{
|
|
5
5
|
itemId: z.ZodString;
|
|
6
|
-
type: z.
|
|
6
|
+
type: z.ZodLiteral<"item">;
|
|
7
|
+
triggerEvent: z.ZodEnum<["hover-in", "hover-out", "click"]>;
|
|
7
8
|
from: z.ZodString;
|
|
8
9
|
to: z.ZodString;
|
|
9
10
|
}, "strip", z.ZodTypeAny, {
|
|
10
|
-
type: "
|
|
11
|
+
type: "item";
|
|
11
12
|
from: string;
|
|
12
13
|
to: string;
|
|
13
14
|
itemId: string;
|
|
15
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
14
16
|
}, {
|
|
15
|
-
type: "
|
|
17
|
+
type: "item";
|
|
16
18
|
from: string;
|
|
17
19
|
to: string;
|
|
18
20
|
itemId: string;
|
|
21
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
19
22
|
}>, z.ZodObject<{
|
|
23
|
+
type: z.ZodLiteral<"scroll-position">;
|
|
20
24
|
position: z.ZodNumber;
|
|
21
25
|
from: z.ZodString;
|
|
22
26
|
to: z.ZodString;
|
|
23
27
|
isReverse: z.ZodBoolean;
|
|
24
28
|
}, "strip", z.ZodTypeAny, {
|
|
25
29
|
position: number;
|
|
30
|
+
type: "scroll-position";
|
|
26
31
|
from: string;
|
|
27
32
|
to: string;
|
|
28
33
|
isReverse: boolean;
|
|
29
34
|
}, {
|
|
30
35
|
position: number;
|
|
36
|
+
type: "scroll-position";
|
|
31
37
|
from: string;
|
|
32
38
|
to: string;
|
|
33
39
|
isReverse: boolean;
|
|
40
|
+
}>, z.ZodObject<{
|
|
41
|
+
itemId: z.ZodString;
|
|
42
|
+
type: z.ZodLiteral<"item-scroll-position">;
|
|
43
|
+
itemPosition: z.ZodEnum<["bottom", "center", "top"]>;
|
|
44
|
+
screenPosition: z.ZodEnum<["bottom", "center", "top"]>;
|
|
45
|
+
offset: z.ZodNumber;
|
|
46
|
+
from: z.ZodString;
|
|
47
|
+
to: z.ZodString;
|
|
48
|
+
isReverse: z.ZodBoolean;
|
|
49
|
+
}, "strip", z.ZodTypeAny, {
|
|
50
|
+
type: "item-scroll-position";
|
|
51
|
+
from: string;
|
|
52
|
+
to: string;
|
|
53
|
+
itemId: string;
|
|
54
|
+
isReverse: boolean;
|
|
55
|
+
itemPosition: "center" | "top" | "bottom";
|
|
56
|
+
screenPosition: "center" | "top" | "bottom";
|
|
57
|
+
offset: number;
|
|
58
|
+
}, {
|
|
59
|
+
type: "item-scroll-position";
|
|
60
|
+
from: string;
|
|
61
|
+
to: string;
|
|
62
|
+
itemId: string;
|
|
63
|
+
isReverse: boolean;
|
|
64
|
+
itemPosition: "center" | "top" | "bottom";
|
|
65
|
+
screenPosition: "center" | "top" | "bottom";
|
|
66
|
+
offset: number;
|
|
34
67
|
}>]>, "many">;
|
|
35
68
|
states: z.ZodArray<z.ZodObject<{
|
|
36
69
|
id: z.ZodString;
|
|
@@ -61,15 +94,26 @@ export declare const InteractionSchema: z.ZodObject<{
|
|
|
61
94
|
}, "strip", z.ZodTypeAny, {
|
|
62
95
|
id: string;
|
|
63
96
|
triggers: ({
|
|
64
|
-
type: "
|
|
97
|
+
type: "item";
|
|
65
98
|
from: string;
|
|
66
99
|
to: string;
|
|
67
100
|
itemId: string;
|
|
101
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
68
102
|
} | {
|
|
69
103
|
position: number;
|
|
104
|
+
type: "scroll-position";
|
|
105
|
+
from: string;
|
|
106
|
+
to: string;
|
|
107
|
+
isReverse: boolean;
|
|
108
|
+
} | {
|
|
109
|
+
type: "item-scroll-position";
|
|
70
110
|
from: string;
|
|
71
111
|
to: string;
|
|
112
|
+
itemId: string;
|
|
72
113
|
isReverse: boolean;
|
|
114
|
+
itemPosition: "center" | "top" | "bottom";
|
|
115
|
+
screenPosition: "center" | "top" | "bottom";
|
|
116
|
+
offset: number;
|
|
73
117
|
})[];
|
|
74
118
|
states: {
|
|
75
119
|
id: string;
|
|
@@ -82,15 +126,26 @@ export declare const InteractionSchema: z.ZodObject<{
|
|
|
82
126
|
}, {
|
|
83
127
|
id: string;
|
|
84
128
|
triggers: ({
|
|
85
|
-
type: "
|
|
129
|
+
type: "item";
|
|
86
130
|
from: string;
|
|
87
131
|
to: string;
|
|
88
132
|
itemId: string;
|
|
133
|
+
triggerEvent: "hover-in" | "hover-out" | "click";
|
|
89
134
|
} | {
|
|
90
135
|
position: number;
|
|
136
|
+
type: "scroll-position";
|
|
137
|
+
from: string;
|
|
138
|
+
to: string;
|
|
139
|
+
isReverse: boolean;
|
|
140
|
+
} | {
|
|
141
|
+
type: "item-scroll-position";
|
|
91
142
|
from: string;
|
|
92
143
|
to: string;
|
|
144
|
+
itemId: string;
|
|
93
145
|
isReverse: boolean;
|
|
146
|
+
itemPosition: "center" | "top" | "bottom";
|
|
147
|
+
screenPosition: "center" | "top" | "bottom";
|
|
148
|
+
offset: number;
|
|
94
149
|
})[];
|
|
95
150
|
states: {
|
|
96
151
|
id: string;
|
|
@@ -4,16 +4,28 @@ exports.InteractionSchema = void 0;
|
|
|
4
4
|
const zod_1 = require("zod");
|
|
5
5
|
const ItemTriggerSchema = zod_1.z.object({
|
|
6
6
|
itemId: zod_1.z.string(),
|
|
7
|
-
type: zod_1.z.
|
|
7
|
+
type: zod_1.z.literal('item'),
|
|
8
|
+
triggerEvent: zod_1.z.enum(['hover-in', 'hover-out', 'click']),
|
|
8
9
|
from: zod_1.z.string(),
|
|
9
10
|
to: zod_1.z.string()
|
|
10
11
|
});
|
|
11
12
|
const ScrollTriggerSchema = zod_1.z.object({
|
|
13
|
+
type: zod_1.z.literal('scroll-position'),
|
|
12
14
|
position: zod_1.z.number(),
|
|
13
15
|
from: zod_1.z.string(),
|
|
14
16
|
to: zod_1.z.string(),
|
|
15
17
|
isReverse: zod_1.z.boolean()
|
|
16
18
|
});
|
|
19
|
+
const ItemScrollTriggerSchema = zod_1.z.object({
|
|
20
|
+
itemId: zod_1.z.string(),
|
|
21
|
+
type: zod_1.z.literal('item-scroll-position'),
|
|
22
|
+
itemPosition: zod_1.z.enum(['bottom', 'center', 'top']),
|
|
23
|
+
screenPosition: zod_1.z.enum(['bottom', 'center', 'top']),
|
|
24
|
+
offset: zod_1.z.number(),
|
|
25
|
+
from: zod_1.z.string(),
|
|
26
|
+
to: zod_1.z.string(),
|
|
27
|
+
isReverse: zod_1.z.boolean()
|
|
28
|
+
});
|
|
17
29
|
const VideoInteractionActionSchema = zod_1.z.object({
|
|
18
30
|
type: zod_1.z.enum(['play', 'pause']),
|
|
19
31
|
itemId: zod_1.z.string()
|
|
@@ -24,7 +36,7 @@ const StateSchema = zod_1.z.object({
|
|
|
24
36
|
});
|
|
25
37
|
exports.InteractionSchema = zod_1.z.object({
|
|
26
38
|
id: zod_1.z.string(),
|
|
27
|
-
triggers: zod_1.z.array(zod_1.z.union([ItemTriggerSchema, ScrollTriggerSchema])),
|
|
39
|
+
triggers: zod_1.z.array(zod_1.z.union([ItemTriggerSchema, ScrollTriggerSchema, ItemScrollTriggerSchema])),
|
|
28
40
|
states: zod_1.z.array(StateSchema),
|
|
29
41
|
startStateId: zod_1.z.string(),
|
|
30
42
|
});
|
|
@@ -1,21 +1,33 @@
|
|
|
1
1
|
export interface Interaction {
|
|
2
2
|
id: string;
|
|
3
|
-
triggers:
|
|
3
|
+
triggers: InteractionTrigger[];
|
|
4
4
|
states: InteractionState[];
|
|
5
5
|
startStateId: string;
|
|
6
6
|
}
|
|
7
7
|
export interface InteractionItemTrigger {
|
|
8
8
|
itemId: string;
|
|
9
|
-
type: '
|
|
9
|
+
type: 'item';
|
|
10
|
+
triggerEvent: 'hover-in' | 'hover-out' | 'click';
|
|
10
11
|
from: StateId;
|
|
11
12
|
to: StateId;
|
|
12
13
|
}
|
|
13
14
|
export interface InteractionScrollTrigger {
|
|
15
|
+
type: 'scroll-position';
|
|
14
16
|
position: number;
|
|
15
17
|
from: StateId;
|
|
16
18
|
to: StateId;
|
|
17
19
|
isReverse: boolean;
|
|
18
20
|
}
|
|
21
|
+
export interface InteractionItemScrollTrigger {
|
|
22
|
+
itemId: string;
|
|
23
|
+
type: 'item-scroll-position';
|
|
24
|
+
itemPosition: 'bottom' | 'center' | 'top';
|
|
25
|
+
screenPosition: 'bottom' | 'center' | 'top';
|
|
26
|
+
offset: number;
|
|
27
|
+
from: StateId;
|
|
28
|
+
to: StateId;
|
|
29
|
+
isReverse: boolean;
|
|
30
|
+
}
|
|
19
31
|
export type VideoInteractionAction = {
|
|
20
32
|
type: 'play' | 'pause';
|
|
21
33
|
itemId: string;
|
|
@@ -25,4 +37,5 @@ export interface InteractionState {
|
|
|
25
37
|
actions?: VideoInteractionAction[];
|
|
26
38
|
}
|
|
27
39
|
type StateId = string;
|
|
40
|
+
export type InteractionTrigger = InteractionItemTrigger | InteractionScrollTrigger | InteractionItemScrollTrigger;
|
|
28
41
|
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
export interface RectObject {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
}
|
|
7
|
+
export interface Position {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
}
|
|
11
|
+
export interface Dimensions {
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
}
|
|
15
|
+
export type Left = number;
|
|
16
|
+
export type Top = number;
|
|
17
|
+
export type Right = number;
|
|
18
|
+
export type Bottom = number;
|
|
19
|
+
export type RectCoordinates = [Left, Top, Right, Bottom];
|
|
20
|
+
declare const ScaleOrigins: {
|
|
21
|
+
readonly TopLeft: "top-left";
|
|
22
|
+
readonly TopCenter: "top-center";
|
|
23
|
+
readonly TopRight: "top-right";
|
|
24
|
+
readonly MiddleLeft: "middle-left";
|
|
25
|
+
readonly MiddleCenter: "middle-center";
|
|
26
|
+
readonly MiddleRight: "middle-right";
|
|
27
|
+
readonly BottomLeft: "bottom-left";
|
|
28
|
+
readonly BottomCenter: "bottom-center";
|
|
29
|
+
readonly BottomRight: "bottom-right";
|
|
30
|
+
};
|
|
31
|
+
export type Sides = [top: number, left: number];
|
|
32
|
+
export declare const scaleMatrix: Record<ScaleOrigin, Sides>;
|
|
33
|
+
export type ScaleOrigin = typeof ScaleOrigins[keyof typeof ScaleOrigins];
|
|
34
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.scaleMatrix = void 0;
|
|
4
|
+
const ScaleOrigins = {
|
|
5
|
+
TopLeft: 'top-left',
|
|
6
|
+
TopCenter: 'top-center',
|
|
7
|
+
TopRight: 'top-right',
|
|
8
|
+
MiddleLeft: 'middle-left',
|
|
9
|
+
MiddleCenter: 'middle-center',
|
|
10
|
+
MiddleRight: 'middle-right',
|
|
11
|
+
BottomLeft: 'bottom-left',
|
|
12
|
+
BottomCenter: 'bottom-center',
|
|
13
|
+
BottomRight: 'bottom-right'
|
|
14
|
+
};
|
|
15
|
+
exports.scaleMatrix = {
|
|
16
|
+
[ScaleOrigins.TopLeft]: [0, 0],
|
|
17
|
+
[ScaleOrigins.TopCenter]: [0, 0.5],
|
|
18
|
+
[ScaleOrigins.TopRight]: [0, 1],
|
|
19
|
+
[ScaleOrigins.MiddleLeft]: [0.5, 0],
|
|
20
|
+
[ScaleOrigins.MiddleCenter]: [0.5, 0.5],
|
|
21
|
+
[ScaleOrigins.MiddleRight]: [0.5, 1],
|
|
22
|
+
[ScaleOrigins.BottomLeft]: [1, 0],
|
|
23
|
+
[ScaleOrigins.BottomCenter]: [1, 0.5],
|
|
24
|
+
[ScaleOrigins.BottomRight]: [1, 1]
|
|
25
|
+
};
|
package/lib/utils.d.ts
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
import { Layout } from './types/project/Layout';
|
|
2
2
|
export declare function getLayoutStyles<V, M>(layouts: Layout[], layoutValues: Record<string, V>[], mapToStyles: (values: V[], exemplary: number) => M): string;
|
|
3
3
|
export declare function getLayoutMediaQuery(layoutId: string, layouts: Layout[]): string;
|
|
4
|
+
export declare function measureFont(font: string, text: string, win?: Window): FontMetrics;
|
|
5
|
+
interface FontMetrics {
|
|
6
|
+
capHeight: number;
|
|
7
|
+
baseline: number;
|
|
8
|
+
fontBoxHeight: number;
|
|
9
|
+
xHeight: number;
|
|
10
|
+
leftMargin: number;
|
|
11
|
+
topMargin: number;
|
|
12
|
+
rightMargin: number;
|
|
13
|
+
bottomMargin: number;
|
|
14
|
+
}
|
|
15
|
+
export {};
|
package/lib/utils.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getLayoutStyles = getLayoutStyles;
|
|
4
4
|
exports.getLayoutMediaQuery = getLayoutMediaQuery;
|
|
5
|
+
exports.measureFont = measureFont;
|
|
5
6
|
function getLayoutStyles(layouts, layoutValues, mapToStyles) {
|
|
6
7
|
const mediaQueries = layouts
|
|
7
8
|
.sort((a, b) => a.startsWith - b.startsWith)
|
|
@@ -28,3 +29,50 @@ function getLayoutMediaQuery(layoutId, layouts) {
|
|
|
28
29
|
}
|
|
29
30
|
return `@media (min-width: ${current.startsWith}px) and (max-width: ${next.startsWith - 1}px)`;
|
|
30
31
|
}
|
|
32
|
+
const canvases = new WeakMap();
|
|
33
|
+
if (typeof window !== 'undefined') {
|
|
34
|
+
canvases.set(window, window.document.createElement('canvas'));
|
|
35
|
+
}
|
|
36
|
+
function measureFont(font, text, win = window) {
|
|
37
|
+
const canvas = resolveCanvas(win);
|
|
38
|
+
const context = canvas.getContext('2d');
|
|
39
|
+
if (!context) {
|
|
40
|
+
throw new ReferenceError('Canvas context is not available');
|
|
41
|
+
}
|
|
42
|
+
context.textBaseline = 'top';
|
|
43
|
+
context.font = font;
|
|
44
|
+
// measure "H" for basic font metrics
|
|
45
|
+
const hMetrics = context.measureText('H');
|
|
46
|
+
const capHeight = hMetrics.actualBoundingBoxDescent + hMetrics.actualBoundingBoxAscent;
|
|
47
|
+
const baseline = hMetrics.actualBoundingBoxDescent;
|
|
48
|
+
const topMargin = hMetrics.actualBoundingBoxAscent - hMetrics.fontBoundingBoxAscent;
|
|
49
|
+
// measure "x" for small letters metrics
|
|
50
|
+
const xMetrics = context.measureText('x');
|
|
51
|
+
const xHeight = xMetrics.actualBoundingBoxDescent + xMetrics.actualBoundingBoxAscent;
|
|
52
|
+
// measure "p" for descendants
|
|
53
|
+
const pMetrics = context.measureText('Hp');
|
|
54
|
+
const bottomMargin = pMetrics.actualBoundingBoxDescent - pMetrics.fontBoundingBoxDescent;
|
|
55
|
+
// measure first and last letter to get horizontal margins
|
|
56
|
+
const horMetrics = context.measureText(`${text.charAt(0)}${text.charAt(text.length - 1)}`);
|
|
57
|
+
const leftMargin = -horMetrics.actualBoundingBoxLeft;
|
|
58
|
+
const rightMargin = horMetrics.width - horMetrics.actualBoundingBoxRight;
|
|
59
|
+
return {
|
|
60
|
+
capHeight,
|
|
61
|
+
baseline,
|
|
62
|
+
fontBoxHeight: hMetrics.fontBoundingBoxDescent - hMetrics.fontBoundingBoxAscent,
|
|
63
|
+
xHeight,
|
|
64
|
+
leftMargin,
|
|
65
|
+
topMargin,
|
|
66
|
+
rightMargin,
|
|
67
|
+
bottomMargin
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
function resolveCanvas(win) {
|
|
71
|
+
if (typeof window === 'undefined') {
|
|
72
|
+
throw new TypeError('resolveCanvas() called on server');
|
|
73
|
+
}
|
|
74
|
+
if (!canvases.has(win)) {
|
|
75
|
+
canvases.set(win, win.document.createElement('canvas'));
|
|
76
|
+
}
|
|
77
|
+
return canvases.get(win);
|
|
78
|
+
}
|