pa_font 0.3.1 → 0.3.2
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/USAGE.md +0 -24
- package/dist/paFont.cjs +4 -34
- package/dist/paFont.cjs.map +1 -1
- package/dist/paFont.js +4 -34
- package/dist/paFont.js.map +1 -1
- package/paFont.d.ts +0 -4
- package/package.json +1 -1
package/USAGE.md
CHANGED
|
@@ -119,7 +119,6 @@ console.log(metrics.width, metrics.bbox);
|
|
|
119
119
|
- `overflowWrap`: `normal | break-word | anywhere`
|
|
120
120
|
- `wordBreak`: `normal | break-all | keep-all`
|
|
121
121
|
- `overflow`: `visible | hidden`
|
|
122
|
-
- `overflowY`: `visible | hidden | scroll`
|
|
123
122
|
- `textOverflow`: `clip | ellipsis`
|
|
124
123
|
- `fontFamily`, `fontWeight`, `fontStyle`, `font`
|
|
125
124
|
- `engine`: `pretext | native`
|
|
@@ -138,7 +137,6 @@ console.log(metrics.width, metrics.bbox);
|
|
|
138
137
|
- `gap`: 문단 사이 간격. `lineHeight` 배수이며 기본값은 `0.5`
|
|
139
138
|
- `whiteSpace: "normal"`이면 문단 안 단일 줄바꿈은 공백으로 정리
|
|
140
139
|
- `whiteSpace: "pre-wrap"`이면 문단 안 단일 줄바꿈 유지
|
|
141
|
-
- `overflowY: "scroll"`을 쓰려면 `height`가 필요
|
|
142
140
|
|
|
143
141
|
## paParagraph API
|
|
144
142
|
|
|
@@ -184,28 +182,6 @@ paragraph.drawText(ctx, {
|
|
|
184
182
|
- `strokeStyle`
|
|
185
183
|
- `fill`
|
|
186
184
|
- `stroke`
|
|
187
|
-
- `scrollTop`
|
|
188
|
-
|
|
189
|
-
스크롤 가능한 viewport를 만들고 싶다면:
|
|
190
|
-
|
|
191
|
-
```js
|
|
192
|
-
const paragraph = font.paragraph(text, {
|
|
193
|
-
width: 320,
|
|
194
|
-
height: 220,
|
|
195
|
-
overflowY: "scroll",
|
|
196
|
-
lineHeight: 1.5,
|
|
197
|
-
gap: 0.5,
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
paragraph.drawText(ctx, {
|
|
201
|
-
fillStyle: "#111",
|
|
202
|
-
scrollTop: 48,
|
|
203
|
-
});
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
전체 콘텐츠 높이는 `paragraph.metrics.height`,
|
|
207
|
-
현재 viewport 높이는 `paragraph.metrics.viewportHeight`,
|
|
208
|
-
최대 스크롤 값은 `paragraph.metrics.maxScrollTop`에서 확인할 수 있습니다.
|
|
209
185
|
|
|
210
186
|
### `paragraph.toShape(options?)`
|
|
211
187
|
|
package/dist/paFont.cjs
CHANGED
|
@@ -3332,8 +3332,6 @@ function layoutParagraph(fontInstance, text, options = {}, state = {}) {
|
|
|
3332
3332
|
y: finalLayoutBox.contentBox.y,
|
|
3333
3333
|
width: textWidth,
|
|
3334
3334
|
height: textHeight,
|
|
3335
|
-
viewportHeight: finalLayoutBox.contentBox.h,
|
|
3336
|
-
maxScrollTop: Math.max(0, textHeight - finalLayoutBox.contentBox.h),
|
|
3337
3335
|
lineCount: lines.length,
|
|
3338
3336
|
bbox: textBBox,
|
|
3339
3337
|
contentBox: { ...finalLayoutBox.contentBox },
|
|
@@ -3360,12 +3358,9 @@ function normalizeParagraphOptions(fontInstance, options = {}) {
|
|
|
3360
3358
|
const width = normalizeDimension(options.width);
|
|
3361
3359
|
const height = normalizeDimension(options.height);
|
|
3362
3360
|
const gap = normalizeGap(options.gap);
|
|
3363
|
-
const overflow = normalizeEnum(options.overflow, ["visible", "hidden"], "visible");
|
|
3364
|
-
const overflowY = resolveOverflowY(options.overflowY, overflow);
|
|
3365
3361
|
if (options.width != null && width == null) throw new TypeError("font.paragraph() option \"width\" must be a positive number.");
|
|
3366
3362
|
if (options.height != null && height == null) throw new TypeError("font.paragraph() option \"height\" must be a positive number.");
|
|
3367
3363
|
if (options.gap != null && gap == null) throw new TypeError("font.paragraph() option \"gap\" must be a non-negative number.");
|
|
3368
|
-
if (overflowY === "scroll" && height == null) throw new TypeError("font.paragraph() option \"height\" is required when \"overflowY\" is \"scroll\".");
|
|
3369
3364
|
const font = resolveCanvasFont(fontInstance, textOptions.size, options);
|
|
3370
3365
|
return {
|
|
3371
3366
|
...textOptions,
|
|
@@ -3403,8 +3398,7 @@ function normalizeParagraphOptions(fontInstance, options = {}) {
|
|
|
3403
3398
|
"break-all",
|
|
3404
3399
|
"keep-all"
|
|
3405
3400
|
], wrapDefaults.wordBreak),
|
|
3406
|
-
overflow,
|
|
3407
|
-
overflowY,
|
|
3401
|
+
overflow: normalizeEnum(options.overflow, ["visible", "hidden"], "visible"),
|
|
3408
3402
|
textOverflow: normalizeNullableEnum(options.textOverflow, ["clip", "ellipsis"], null),
|
|
3409
3403
|
maxLines: normalizeMaxLines(options.maxLines),
|
|
3410
3404
|
ellipsis: normalizeEllipsis(options.ellipsis),
|
|
@@ -3593,7 +3587,7 @@ function applyOverflowClamping(lines, options, layoutBox, measureWidth) {
|
|
|
3593
3587
|
const contentWidth = layoutBox.contentWidth;
|
|
3594
3588
|
const result = lines.map((line) => ({ ...line }));
|
|
3595
3589
|
let lineLimit = options.maxLines;
|
|
3596
|
-
if (
|
|
3590
|
+
if (options.overflow === "hidden" && layoutBox.clipContentHeight != null) {
|
|
3597
3591
|
const visibleLineCount = countVisibleLinesForHeight(result, options, layoutBox.clipContentHeight);
|
|
3598
3592
|
lineLimit = lineLimit == null ? visibleLineCount : Math.min(lineLimit, visibleLineCount);
|
|
3599
3593
|
}
|
|
@@ -3818,7 +3812,7 @@ function finalizeLayoutBox(layoutBox, options, textHeight) {
|
|
|
3818
3812
|
x: layoutBox.contentX,
|
|
3819
3813
|
y: layoutBox.contentY,
|
|
3820
3814
|
w: layoutBox.contentWidth,
|
|
3821
|
-
h:
|
|
3815
|
+
h: options.overflow === "hidden" ? contentHeight : textHeight
|
|
3822
3816
|
}
|
|
3823
3817
|
};
|
|
3824
3818
|
}
|
|
@@ -3834,19 +3828,6 @@ function normalizeNullableEnum(value, supported, fallback) {
|
|
|
3834
3828
|
if (value == null) return fallback;
|
|
3835
3829
|
return typeof value === "string" && supported.includes(value) ? value : fallback;
|
|
3836
3830
|
}
|
|
3837
|
-
function resolveOverflowY(value, overflow) {
|
|
3838
|
-
return normalizeEnum(value, [
|
|
3839
|
-
"visible",
|
|
3840
|
-
"hidden",
|
|
3841
|
-
"scroll"
|
|
3842
|
-
], overflow === "hidden" ? "hidden" : "visible");
|
|
3843
|
-
}
|
|
3844
|
-
function shouldClampLinesToHeight(options) {
|
|
3845
|
-
return options.overflowY === "hidden";
|
|
3846
|
-
}
|
|
3847
|
-
function shouldClipToContentHeight(options) {
|
|
3848
|
-
return options.overflow === "hidden" || options.overflowY === "hidden" || options.overflowY === "scroll";
|
|
3849
|
-
}
|
|
3850
3831
|
function normalizeEllipsis(value) {
|
|
3851
3832
|
if (value === false) return false;
|
|
3852
3833
|
if (typeof value === "string") return value;
|
|
@@ -4283,7 +4264,6 @@ var paParagraph = class paParagraph {
|
|
|
4283
4264
|
if (!ctx || typeof ctx.fillText !== "function") throw new TypeError("drawText() expects a CanvasRenderingContext2D.");
|
|
4284
4265
|
const fill = options.fill !== false;
|
|
4285
4266
|
const stroke = options.stroke === true;
|
|
4286
|
-
const scrollTop = clampScrollTop(options.scrollTop, this.metrics.maxScrollTop);
|
|
4287
4267
|
if (!fill && !stroke) return;
|
|
4288
4268
|
this._syncLayoutWithContext(ctx);
|
|
4289
4269
|
ctx.save();
|
|
@@ -4292,13 +4272,12 @@ var paParagraph = class paParagraph {
|
|
|
4292
4272
|
ctx.textBaseline = "alphabetic";
|
|
4293
4273
|
if (options.fillStyle != null) ctx.fillStyle = options.fillStyle;
|
|
4294
4274
|
if (options.strokeStyle != null) ctx.strokeStyle = options.strokeStyle;
|
|
4295
|
-
if (
|
|
4275
|
+
if (this.options.overflow === "hidden" && this._state.layoutBox?.clipBox) {
|
|
4296
4276
|
const clipBox = this._state.layoutBox.clipBox;
|
|
4297
4277
|
ctx.beginPath();
|
|
4298
4278
|
ctx.rect(clipBox.x, clipBox.y, clipBox.w, clipBox.h);
|
|
4299
4279
|
ctx.clip();
|
|
4300
4280
|
}
|
|
4301
|
-
if (scrollTop > 0) ctx.translate(0, -scrollTop);
|
|
4302
4281
|
this._state.lines.forEach((line) => {
|
|
4303
4282
|
line.fragments.forEach((fragment) => {
|
|
4304
4283
|
if (fill) ctx.fillText(fragment.text, fragment.x, line.baseline);
|
|
@@ -4349,8 +4328,6 @@ var paParagraph = class paParagraph {
|
|
|
4349
4328
|
this.metrics = {
|
|
4350
4329
|
...state.metrics,
|
|
4351
4330
|
bbox: { ...state.metrics.bbox },
|
|
4352
|
-
viewportHeight: state.metrics.viewportHeight,
|
|
4353
|
-
maxScrollTop: state.metrics.maxScrollTop,
|
|
4354
4331
|
contentBox: state.metrics.contentBox ? { ...state.metrics.contentBox } : void 0,
|
|
4355
4332
|
paddingBox: state.metrics.paddingBox ? { ...state.metrics.paddingBox } : void 0,
|
|
4356
4333
|
marginBox: state.metrics.marginBox ? { ...state.metrics.marginBox } : void 0,
|
|
@@ -4445,13 +4422,6 @@ function normalizeParagraphPointOptions(options = {}) {
|
|
|
4445
4422
|
layout: options.layout ?? "current"
|
|
4446
4423
|
};
|
|
4447
4424
|
}
|
|
4448
|
-
function shouldClipParagraph(options) {
|
|
4449
|
-
return options.overflow === "hidden" || options.overflowY === "hidden" || options.overflowY === "scroll";
|
|
4450
|
-
}
|
|
4451
|
-
function clampScrollTop(value, maxScrollTop) {
|
|
4452
|
-
if (!Number.isFinite(value) || value <= 0) return 0;
|
|
4453
|
-
return Math.min(Number(value), maxScrollTop ?? 0);
|
|
4454
|
-
}
|
|
4455
4425
|
//#endregion
|
|
4456
4426
|
//#region src/paFont/paFont.js
|
|
4457
4427
|
var browserFontRegistrationId = 0;
|