579 lines
16 KiB
JavaScript
579 lines
16 KiB
JavaScript
/**
|
|
* @licstart The following is the entire license notice for the
|
|
* JavaScript code in this page
|
|
*
|
|
* Copyright 2022 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* @licend The above is the entire license notice for the
|
|
* JavaScript code in this page
|
|
*/
|
|
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.TilingPattern = exports.PathType = void 0;
|
|
exports.getShadingPattern = getShadingPattern;
|
|
|
|
var _util = require("../shared/util.js");
|
|
|
|
var _display_utils = require("./display_utils.js");
|
|
|
|
var _is_node = require("../shared/is_node.js");
|
|
|
|
const PathType = {
|
|
FILL: "Fill",
|
|
STROKE: "Stroke",
|
|
SHADING: "Shading"
|
|
};
|
|
exports.PathType = PathType;
|
|
|
|
function applyBoundingBox(ctx, bbox) {
|
|
if (!bbox || _is_node.isNodeJS) {
|
|
return;
|
|
}
|
|
|
|
const width = bbox[2] - bbox[0];
|
|
const height = bbox[3] - bbox[1];
|
|
const region = new Path2D();
|
|
region.rect(bbox[0], bbox[1], width, height);
|
|
ctx.clip(region);
|
|
}
|
|
|
|
class BaseShadingPattern {
|
|
constructor() {
|
|
if (this.constructor === BaseShadingPattern) {
|
|
(0, _util.unreachable)("Cannot initialize BaseShadingPattern.");
|
|
}
|
|
}
|
|
|
|
getPattern() {
|
|
(0, _util.unreachable)("Abstract method `getPattern` called.");
|
|
}
|
|
|
|
}
|
|
|
|
class RadialAxialShadingPattern extends BaseShadingPattern {
|
|
constructor(IR) {
|
|
super();
|
|
this._type = IR[1];
|
|
this._bbox = IR[2];
|
|
this._colorStops = IR[3];
|
|
this._p0 = IR[4];
|
|
this._p1 = IR[5];
|
|
this._r0 = IR[6];
|
|
this._r1 = IR[7];
|
|
this.matrix = null;
|
|
}
|
|
|
|
_createGradient(ctx) {
|
|
let grad;
|
|
|
|
if (this._type === "axial") {
|
|
grad = ctx.createLinearGradient(this._p0[0], this._p0[1], this._p1[0], this._p1[1]);
|
|
} else if (this._type === "radial") {
|
|
grad = ctx.createRadialGradient(this._p0[0], this._p0[1], this._r0, this._p1[0], this._p1[1], this._r1);
|
|
}
|
|
|
|
for (const colorStop of this._colorStops) {
|
|
grad.addColorStop(colorStop[0], colorStop[1]);
|
|
}
|
|
|
|
return grad;
|
|
}
|
|
|
|
getPattern(ctx, owner, inverse, pathType) {
|
|
let pattern;
|
|
|
|
if (pathType === PathType.STROKE || pathType === PathType.FILL) {
|
|
const ownerBBox = owner.current.getClippedPathBoundingBox(pathType, (0, _display_utils.getCurrentTransform)(ctx)) || [0, 0, 0, 0];
|
|
const width = Math.ceil(ownerBBox[2] - ownerBBox[0]) || 1;
|
|
const height = Math.ceil(ownerBBox[3] - ownerBBox[1]) || 1;
|
|
const tmpCanvas = owner.cachedCanvases.getCanvas("pattern", width, height, true);
|
|
const tmpCtx = tmpCanvas.context;
|
|
tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
|
|
tmpCtx.beginPath();
|
|
tmpCtx.rect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
|
|
tmpCtx.translate(-ownerBBox[0], -ownerBBox[1]);
|
|
inverse = _util.Util.transform(inverse, [1, 0, 0, 1, ownerBBox[0], ownerBBox[1]]);
|
|
tmpCtx.transform(...owner.baseTransform);
|
|
|
|
if (this.matrix) {
|
|
tmpCtx.transform(...this.matrix);
|
|
}
|
|
|
|
applyBoundingBox(tmpCtx, this._bbox);
|
|
tmpCtx.fillStyle = this._createGradient(tmpCtx);
|
|
tmpCtx.fill();
|
|
pattern = ctx.createPattern(tmpCanvas.canvas, "no-repeat");
|
|
const domMatrix = new DOMMatrix(inverse);
|
|
|
|
try {
|
|
pattern.setTransform(domMatrix);
|
|
} catch (ex) {
|
|
(0, _util.warn)(`RadialAxialShadingPattern.getPattern: "${ex?.message}".`);
|
|
}
|
|
} else {
|
|
applyBoundingBox(ctx, this._bbox);
|
|
pattern = this._createGradient(ctx);
|
|
}
|
|
|
|
return pattern;
|
|
}
|
|
|
|
}
|
|
|
|
function drawTriangle(data, context, p1, p2, p3, c1, c2, c3) {
|
|
const coords = context.coords,
|
|
colors = context.colors;
|
|
const bytes = data.data,
|
|
rowSize = data.width * 4;
|
|
let tmp;
|
|
|
|
if (coords[p1 + 1] > coords[p2 + 1]) {
|
|
tmp = p1;
|
|
p1 = p2;
|
|
p2 = tmp;
|
|
tmp = c1;
|
|
c1 = c2;
|
|
c2 = tmp;
|
|
}
|
|
|
|
if (coords[p2 + 1] > coords[p3 + 1]) {
|
|
tmp = p2;
|
|
p2 = p3;
|
|
p3 = tmp;
|
|
tmp = c2;
|
|
c2 = c3;
|
|
c3 = tmp;
|
|
}
|
|
|
|
if (coords[p1 + 1] > coords[p2 + 1]) {
|
|
tmp = p1;
|
|
p1 = p2;
|
|
p2 = tmp;
|
|
tmp = c1;
|
|
c1 = c2;
|
|
c2 = tmp;
|
|
}
|
|
|
|
const x1 = (coords[p1] + context.offsetX) * context.scaleX;
|
|
const y1 = (coords[p1 + 1] + context.offsetY) * context.scaleY;
|
|
const x2 = (coords[p2] + context.offsetX) * context.scaleX;
|
|
const y2 = (coords[p2 + 1] + context.offsetY) * context.scaleY;
|
|
const x3 = (coords[p3] + context.offsetX) * context.scaleX;
|
|
const y3 = (coords[p3 + 1] + context.offsetY) * context.scaleY;
|
|
|
|
if (y1 >= y3) {
|
|
return;
|
|
}
|
|
|
|
const c1r = colors[c1],
|
|
c1g = colors[c1 + 1],
|
|
c1b = colors[c1 + 2];
|
|
const c2r = colors[c2],
|
|
c2g = colors[c2 + 1],
|
|
c2b = colors[c2 + 2];
|
|
const c3r = colors[c3],
|
|
c3g = colors[c3 + 1],
|
|
c3b = colors[c3 + 2];
|
|
const minY = Math.round(y1),
|
|
maxY = Math.round(y3);
|
|
let xa, car, cag, cab;
|
|
let xb, cbr, cbg, cbb;
|
|
|
|
for (let y = minY; y <= maxY; y++) {
|
|
if (y < y2) {
|
|
let k;
|
|
|
|
if (y < y1) {
|
|
k = 0;
|
|
} else {
|
|
k = (y1 - y) / (y1 - y2);
|
|
}
|
|
|
|
xa = x1 - (x1 - x2) * k;
|
|
car = c1r - (c1r - c2r) * k;
|
|
cag = c1g - (c1g - c2g) * k;
|
|
cab = c1b - (c1b - c2b) * k;
|
|
} else {
|
|
let k;
|
|
|
|
if (y > y3) {
|
|
k = 1;
|
|
} else if (y2 === y3) {
|
|
k = 0;
|
|
} else {
|
|
k = (y2 - y) / (y2 - y3);
|
|
}
|
|
|
|
xa = x2 - (x2 - x3) * k;
|
|
car = c2r - (c2r - c3r) * k;
|
|
cag = c2g - (c2g - c3g) * k;
|
|
cab = c2b - (c2b - c3b) * k;
|
|
}
|
|
|
|
let k;
|
|
|
|
if (y < y1) {
|
|
k = 0;
|
|
} else if (y > y3) {
|
|
k = 1;
|
|
} else {
|
|
k = (y1 - y) / (y1 - y3);
|
|
}
|
|
|
|
xb = x1 - (x1 - x3) * k;
|
|
cbr = c1r - (c1r - c3r) * k;
|
|
cbg = c1g - (c1g - c3g) * k;
|
|
cbb = c1b - (c1b - c3b) * k;
|
|
const x1_ = Math.round(Math.min(xa, xb));
|
|
const x2_ = Math.round(Math.max(xa, xb));
|
|
let j = rowSize * y + x1_ * 4;
|
|
|
|
for (let x = x1_; x <= x2_; x++) {
|
|
k = (xa - x) / (xa - xb);
|
|
|
|
if (k < 0) {
|
|
k = 0;
|
|
} else if (k > 1) {
|
|
k = 1;
|
|
}
|
|
|
|
bytes[j++] = car - (car - cbr) * k | 0;
|
|
bytes[j++] = cag - (cag - cbg) * k | 0;
|
|
bytes[j++] = cab - (cab - cbb) * k | 0;
|
|
bytes[j++] = 255;
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawFigure(data, figure, context) {
|
|
const ps = figure.coords;
|
|
const cs = figure.colors;
|
|
let i, ii;
|
|
|
|
switch (figure.type) {
|
|
case "lattice":
|
|
const verticesPerRow = figure.verticesPerRow;
|
|
const rows = Math.floor(ps.length / verticesPerRow) - 1;
|
|
const cols = verticesPerRow - 1;
|
|
|
|
for (i = 0; i < rows; i++) {
|
|
let q = i * verticesPerRow;
|
|
|
|
for (let j = 0; j < cols; j++, q++) {
|
|
drawTriangle(data, context, ps[q], ps[q + 1], ps[q + verticesPerRow], cs[q], cs[q + 1], cs[q + verticesPerRow]);
|
|
drawTriangle(data, context, ps[q + verticesPerRow + 1], ps[q + 1], ps[q + verticesPerRow], cs[q + verticesPerRow + 1], cs[q + 1], cs[q + verticesPerRow]);
|
|
}
|
|
}
|
|
|
|
break;
|
|
|
|
case "triangles":
|
|
for (i = 0, ii = ps.length; i < ii; i += 3) {
|
|
drawTriangle(data, context, ps[i], ps[i + 1], ps[i + 2], cs[i], cs[i + 1], cs[i + 2]);
|
|
}
|
|
|
|
break;
|
|
|
|
default:
|
|
throw new Error("illegal figure");
|
|
}
|
|
}
|
|
|
|
class MeshShadingPattern extends BaseShadingPattern {
|
|
constructor(IR) {
|
|
super();
|
|
this._coords = IR[2];
|
|
this._colors = IR[3];
|
|
this._figures = IR[4];
|
|
this._bounds = IR[5];
|
|
this._bbox = IR[7];
|
|
this._background = IR[8];
|
|
this.matrix = null;
|
|
}
|
|
|
|
_createMeshCanvas(combinedScale, backgroundColor, cachedCanvases) {
|
|
const EXPECTED_SCALE = 1.1;
|
|
const MAX_PATTERN_SIZE = 3000;
|
|
const BORDER_SIZE = 2;
|
|
const offsetX = Math.floor(this._bounds[0]);
|
|
const offsetY = Math.floor(this._bounds[1]);
|
|
const boundsWidth = Math.ceil(this._bounds[2]) - offsetX;
|
|
const boundsHeight = Math.ceil(this._bounds[3]) - offsetY;
|
|
const width = Math.min(Math.ceil(Math.abs(boundsWidth * combinedScale[0] * EXPECTED_SCALE)), MAX_PATTERN_SIZE);
|
|
const height = Math.min(Math.ceil(Math.abs(boundsHeight * combinedScale[1] * EXPECTED_SCALE)), MAX_PATTERN_SIZE);
|
|
const scaleX = boundsWidth / width;
|
|
const scaleY = boundsHeight / height;
|
|
const context = {
|
|
coords: this._coords,
|
|
colors: this._colors,
|
|
offsetX: -offsetX,
|
|
offsetY: -offsetY,
|
|
scaleX: 1 / scaleX,
|
|
scaleY: 1 / scaleY
|
|
};
|
|
const paddedWidth = width + BORDER_SIZE * 2;
|
|
const paddedHeight = height + BORDER_SIZE * 2;
|
|
const tmpCanvas = cachedCanvases.getCanvas("mesh", paddedWidth, paddedHeight, false);
|
|
const tmpCtx = tmpCanvas.context;
|
|
const data = tmpCtx.createImageData(width, height);
|
|
|
|
if (backgroundColor) {
|
|
const bytes = data.data;
|
|
|
|
for (let i = 0, ii = bytes.length; i < ii; i += 4) {
|
|
bytes[i] = backgroundColor[0];
|
|
bytes[i + 1] = backgroundColor[1];
|
|
bytes[i + 2] = backgroundColor[2];
|
|
bytes[i + 3] = 255;
|
|
}
|
|
}
|
|
|
|
for (const figure of this._figures) {
|
|
drawFigure(data, figure, context);
|
|
}
|
|
|
|
tmpCtx.putImageData(data, BORDER_SIZE, BORDER_SIZE);
|
|
const canvas = tmpCanvas.canvas;
|
|
return {
|
|
canvas,
|
|
offsetX: offsetX - BORDER_SIZE * scaleX,
|
|
offsetY: offsetY - BORDER_SIZE * scaleY,
|
|
scaleX,
|
|
scaleY
|
|
};
|
|
}
|
|
|
|
getPattern(ctx, owner, inverse, pathType) {
|
|
applyBoundingBox(ctx, this._bbox);
|
|
let scale;
|
|
|
|
if (pathType === PathType.SHADING) {
|
|
scale = _util.Util.singularValueDecompose2dScale((0, _display_utils.getCurrentTransform)(ctx));
|
|
} else {
|
|
scale = _util.Util.singularValueDecompose2dScale(owner.baseTransform);
|
|
|
|
if (this.matrix) {
|
|
const matrixScale = _util.Util.singularValueDecompose2dScale(this.matrix);
|
|
|
|
scale = [scale[0] * matrixScale[0], scale[1] * matrixScale[1]];
|
|
}
|
|
}
|
|
|
|
const temporaryPatternCanvas = this._createMeshCanvas(scale, pathType === PathType.SHADING ? null : this._background, owner.cachedCanvases);
|
|
|
|
if (pathType !== PathType.SHADING) {
|
|
ctx.setTransform(...owner.baseTransform);
|
|
|
|
if (this.matrix) {
|
|
ctx.transform(...this.matrix);
|
|
}
|
|
}
|
|
|
|
ctx.translate(temporaryPatternCanvas.offsetX, temporaryPatternCanvas.offsetY);
|
|
ctx.scale(temporaryPatternCanvas.scaleX, temporaryPatternCanvas.scaleY);
|
|
return ctx.createPattern(temporaryPatternCanvas.canvas, "no-repeat");
|
|
}
|
|
|
|
}
|
|
|
|
class DummyShadingPattern extends BaseShadingPattern {
|
|
getPattern() {
|
|
return "hotpink";
|
|
}
|
|
|
|
}
|
|
|
|
function getShadingPattern(IR) {
|
|
switch (IR[0]) {
|
|
case "RadialAxial":
|
|
return new RadialAxialShadingPattern(IR);
|
|
|
|
case "Mesh":
|
|
return new MeshShadingPattern(IR);
|
|
|
|
case "Dummy":
|
|
return new DummyShadingPattern();
|
|
}
|
|
|
|
throw new Error(`Unknown IR type: ${IR[0]}`);
|
|
}
|
|
|
|
const PaintType = {
|
|
COLORED: 1,
|
|
UNCOLORED: 2
|
|
};
|
|
|
|
class TilingPattern {
|
|
static get MAX_PATTERN_SIZE() {
|
|
return (0, _util.shadow)(this, "MAX_PATTERN_SIZE", 3000);
|
|
}
|
|
|
|
constructor(IR, color, ctx, canvasGraphicsFactory, baseTransform) {
|
|
this.operatorList = IR[2];
|
|
this.matrix = IR[3] || [1, 0, 0, 1, 0, 0];
|
|
this.bbox = IR[4];
|
|
this.xstep = IR[5];
|
|
this.ystep = IR[6];
|
|
this.paintType = IR[7];
|
|
this.tilingType = IR[8];
|
|
this.color = color;
|
|
this.ctx = ctx;
|
|
this.canvasGraphicsFactory = canvasGraphicsFactory;
|
|
this.baseTransform = baseTransform;
|
|
}
|
|
|
|
createPatternCanvas(owner) {
|
|
const operatorList = this.operatorList;
|
|
const bbox = this.bbox;
|
|
const xstep = this.xstep;
|
|
const ystep = this.ystep;
|
|
const paintType = this.paintType;
|
|
const tilingType = this.tilingType;
|
|
const color = this.color;
|
|
const canvasGraphicsFactory = this.canvasGraphicsFactory;
|
|
(0, _util.info)("TilingType: " + tilingType);
|
|
const x0 = bbox[0],
|
|
y0 = bbox[1],
|
|
x1 = bbox[2],
|
|
y1 = bbox[3];
|
|
|
|
const matrixScale = _util.Util.singularValueDecompose2dScale(this.matrix);
|
|
|
|
const curMatrixScale = _util.Util.singularValueDecompose2dScale(this.baseTransform);
|
|
|
|
const combinedScale = [matrixScale[0] * curMatrixScale[0], matrixScale[1] * curMatrixScale[1]];
|
|
const dimx = this.getSizeAndScale(xstep, this.ctx.canvas.width, combinedScale[0]);
|
|
const dimy = this.getSizeAndScale(ystep, this.ctx.canvas.height, combinedScale[1]);
|
|
const tmpCanvas = owner.cachedCanvases.getCanvas("pattern", dimx.size, dimy.size, true);
|
|
const tmpCtx = tmpCanvas.context;
|
|
const graphics = canvasGraphicsFactory.createCanvasGraphics(tmpCtx);
|
|
graphics.groupLevel = owner.groupLevel;
|
|
this.setFillAndStrokeStyleToContext(graphics, paintType, color);
|
|
let adjustedX0 = x0;
|
|
let adjustedY0 = y0;
|
|
let adjustedX1 = x1;
|
|
let adjustedY1 = y1;
|
|
|
|
if (x0 < 0) {
|
|
adjustedX0 = 0;
|
|
adjustedX1 += Math.abs(x0);
|
|
}
|
|
|
|
if (y0 < 0) {
|
|
adjustedY0 = 0;
|
|
adjustedY1 += Math.abs(y0);
|
|
}
|
|
|
|
tmpCtx.translate(-(dimx.scale * adjustedX0), -(dimy.scale * adjustedY0));
|
|
graphics.transform(dimx.scale, 0, 0, dimy.scale, 0, 0);
|
|
tmpCtx.save();
|
|
this.clipBbox(graphics, adjustedX0, adjustedY0, adjustedX1, adjustedY1);
|
|
graphics.baseTransform = (0, _display_utils.getCurrentTransform)(graphics.ctx);
|
|
graphics.executeOperatorList(operatorList);
|
|
graphics.endDrawing();
|
|
return {
|
|
canvas: tmpCanvas.canvas,
|
|
scaleX: dimx.scale,
|
|
scaleY: dimy.scale,
|
|
offsetX: adjustedX0,
|
|
offsetY: adjustedY0
|
|
};
|
|
}
|
|
|
|
getSizeAndScale(step, realOutputSize, scale) {
|
|
step = Math.abs(step);
|
|
const maxSize = Math.max(TilingPattern.MAX_PATTERN_SIZE, realOutputSize);
|
|
let size = Math.ceil(step * scale);
|
|
|
|
if (size >= maxSize) {
|
|
size = maxSize;
|
|
} else {
|
|
scale = size / step;
|
|
}
|
|
|
|
return {
|
|
scale,
|
|
size
|
|
};
|
|
}
|
|
|
|
clipBbox(graphics, x0, y0, x1, y1) {
|
|
const bboxWidth = x1 - x0;
|
|
const bboxHeight = y1 - y0;
|
|
graphics.ctx.rect(x0, y0, bboxWidth, bboxHeight);
|
|
graphics.current.updateRectMinMax((0, _display_utils.getCurrentTransform)(graphics.ctx), [x0, y0, x1, y1]);
|
|
graphics.clip();
|
|
graphics.endPath();
|
|
}
|
|
|
|
setFillAndStrokeStyleToContext(graphics, paintType, color) {
|
|
const context = graphics.ctx,
|
|
current = graphics.current;
|
|
|
|
switch (paintType) {
|
|
case PaintType.COLORED:
|
|
const ctx = this.ctx;
|
|
context.fillStyle = ctx.fillStyle;
|
|
context.strokeStyle = ctx.strokeStyle;
|
|
current.fillColor = ctx.fillStyle;
|
|
current.strokeColor = ctx.strokeStyle;
|
|
break;
|
|
|
|
case PaintType.UNCOLORED:
|
|
const cssColor = _util.Util.makeHexColor(color[0], color[1], color[2]);
|
|
|
|
context.fillStyle = cssColor;
|
|
context.strokeStyle = cssColor;
|
|
current.fillColor = cssColor;
|
|
current.strokeColor = cssColor;
|
|
break;
|
|
|
|
default:
|
|
throw new _util.FormatError(`Unsupported paint type: ${paintType}`);
|
|
}
|
|
}
|
|
|
|
getPattern(ctx, owner, inverse, pathType) {
|
|
let matrix = inverse;
|
|
|
|
if (pathType !== PathType.SHADING) {
|
|
matrix = _util.Util.transform(matrix, owner.baseTransform);
|
|
|
|
if (this.matrix) {
|
|
matrix = _util.Util.transform(matrix, this.matrix);
|
|
}
|
|
}
|
|
|
|
const temporaryPatternCanvas = this.createPatternCanvas(owner);
|
|
let domMatrix = new DOMMatrix(matrix);
|
|
domMatrix = domMatrix.translate(temporaryPatternCanvas.offsetX, temporaryPatternCanvas.offsetY);
|
|
domMatrix = domMatrix.scale(1 / temporaryPatternCanvas.scaleX, 1 / temporaryPatternCanvas.scaleY);
|
|
const pattern = ctx.createPattern(temporaryPatternCanvas.canvas, "repeat");
|
|
|
|
try {
|
|
pattern.setTransform(domMatrix);
|
|
} catch (ex) {
|
|
(0, _util.warn)(`TilingPattern.getPattern: "${ex?.message}".`);
|
|
}
|
|
|
|
return pattern;
|
|
}
|
|
|
|
}
|
|
|
|
exports.TilingPattern = TilingPattern; |