luna-dom-highlighter
Version:
Highlighter for html elements
262 lines (261 loc) • 10.3 kB
JavaScript
;
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawPath = exports.formatColor = exports.formatRgba = exports.parseHexa = exports.createPathForQuad = exports.hatchFillPath = exports.applyMatrixToPoint = exports.emptyBounds = exports.buildPath = exports.fillPathWithBoxStyle = exports.drawPathWithLineStyle = void 0;
var endWith_1 = __importDefault(require("licia/endWith"));
var ColorUtils_1 = require("./ColorUtils");
function drawPathWithLineStyle(context, path, lineStyle, lineWidth) {
if (lineWidth === void 0) { lineWidth = 1; }
if (lineStyle && lineStyle.color) {
context.save();
context.translate(0.5, 0.5);
context.lineWidth = lineWidth;
if (lineStyle.pattern === "dashed") {
context.setLineDash([3, 3]);
}
if (lineStyle.pattern === "dotted") {
context.setLineDash([2, 2]);
}
context.strokeStyle = lineStyle.color;
context.stroke(path);
context.restore();
}
}
exports.drawPathWithLineStyle = drawPathWithLineStyle;
function fillPathWithBoxStyle(context, path, bounds, angle, boxStyle) {
if (!boxStyle) {
return;
}
context.save();
if (boxStyle.fillColor) {
context.fillStyle = boxStyle.fillColor;
context.fill(path);
}
if (boxStyle.hatchColor) {
hatchFillPath(context, path, bounds, 10, boxStyle.hatchColor, angle, false);
}
context.restore();
}
exports.fillPathWithBoxStyle = fillPathWithBoxStyle;
function buildPath(commands, bounds, emulationScaleFactor) {
var commandsIndex = 0;
function extractPoints(count) {
var points = [];
for (var i = 0; i < count; ++i) {
var x = Math.round(commands[commandsIndex++] * emulationScaleFactor);
bounds.maxX = Math.max(bounds.maxX, x);
bounds.minX = Math.min(bounds.minX, x);
var y = Math.round(commands[commandsIndex++] * emulationScaleFactor);
bounds.maxY = Math.max(bounds.maxY, y);
bounds.minY = Math.min(bounds.minY, y);
bounds.leftmostXForY[y] = Math.min(bounds.leftmostXForY[y] || Number.MAX_VALUE, x);
bounds.rightmostXForY[y] = Math.max(bounds.rightmostXForY[y] || Number.MIN_VALUE, x);
bounds.topmostYForX[x] = Math.min(bounds.topmostYForX[x] || Number.MAX_VALUE, y);
bounds.bottommostYForX[x] = Math.max(bounds.bottommostYForX[x] || Number.MIN_VALUE, y);
bounds.allPoints.push({ x: x, y: y });
points.push(x, y);
}
return points;
}
var commandsLength = commands.length;
var path = new Path2D();
while (commandsIndex < commandsLength) {
switch (commands[commandsIndex++]) {
case 'M':
path.moveTo.apply(path, extractPoints(1));
break;
case 'L':
path.lineTo.apply(path, extractPoints(1));
break;
case 'C':
path.bezierCurveTo.apply(path, extractPoints(3));
break;
case 'Q':
path.quadraticCurveTo.apply(path, extractPoints(2));
break;
case 'Z':
path.closePath();
break;
}
}
return path;
}
exports.buildPath = buildPath;
function emptyBounds() {
var bounds = {
minX: Number.MAX_VALUE,
minY: Number.MAX_VALUE,
maxX: -Number.MAX_VALUE,
maxY: -Number.MAX_VALUE,
leftmostXForY: {},
rightmostXForY: {},
topmostYForX: {},
bottommostYForX: {},
allPoints: [],
};
return bounds;
}
exports.emptyBounds = emptyBounds;
function applyMatrixToPoint(point, matrix) {
var domPoint = new DOMPoint(point.x, point.y);
domPoint = domPoint.matrixTransform(matrix);
return { x: domPoint.x, y: domPoint.y };
}
exports.applyMatrixToPoint = applyMatrixToPoint;
var HATCH_LINE_LENGTH = 5;
var HATCH_LINE_GAP = 3;
var hatchLinePattern;
var hatchLineColor = '';
function hatchFillPath(context, path, bounds, delta, color, rotationAngle, flipDirection) {
if (context.canvas.width < bounds.maxX - bounds.minX || context.canvas.height < bounds.maxY - bounds.minY) {
bounds = {
minX: 0,
maxX: context.canvas.width,
minY: 0,
maxY: context.canvas.height,
allPoints: [],
};
}
if (!hatchLinePattern || color !== hatchLineColor) {
hatchLineColor = color;
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = delta;
offscreenCanvas.height = HATCH_LINE_LENGTH + HATCH_LINE_GAP;
var offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
offscreenCtx.rect(0, 0, 1, HATCH_LINE_LENGTH);
offscreenCtx.fillStyle = color;
offscreenCtx.fill();
hatchLinePattern = context.createPattern(offscreenCanvas, 'repeat');
}
context.save();
var matrix = new DOMMatrix();
hatchLinePattern.setTransform(matrix.scale(flipDirection ? -1 : 1, 1).rotate(0, 0, -45 + rotationAngle));
context.fillStyle = hatchLinePattern;
context.fill(path);
context.restore();
}
exports.hatchFillPath = hatchFillPath;
function createPathForQuad(outerQuad, quadsToClip, bounds, emulationScaleFactor) {
var e_1, _a;
var commands = [
'M',
outerQuad.p1.x,
outerQuad.p1.y,
'L',
outerQuad.p2.x,
outerQuad.p2.y,
'L',
outerQuad.p3.x,
outerQuad.p3.y,
'L',
outerQuad.p4.x,
outerQuad.p4.y,
];
try {
for (var quadsToClip_1 = __values(quadsToClip), quadsToClip_1_1 = quadsToClip_1.next(); !quadsToClip_1_1.done; quadsToClip_1_1 = quadsToClip_1.next()) {
var quad = quadsToClip_1_1.value;
commands = __spreadArray(__spreadArray([], __read(commands), false), [
'L', quad.p4.x, quad.p4.y, 'L', quad.p3.x, quad.p3.y, 'L', quad.p2.x,
quad.p2.y, 'L', quad.p1.x, quad.p1.y, 'L', quad.p4.x, quad.p4.y, 'L', outerQuad.p4.x,
outerQuad.p4.y,
], false);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (quadsToClip_1_1 && !quadsToClip_1_1.done && (_a = quadsToClip_1.return)) _a.call(quadsToClip_1);
}
finally { if (e_1) throw e_1.error; }
}
commands.push('Z');
return buildPath(commands, bounds, emulationScaleFactor);
}
exports.createPathForQuad = createPathForQuad;
function parseHexa(hexa) {
return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(function (c) { return parseInt(c, 16) / 255; });
}
exports.parseHexa = parseHexa;
function formatRgba(rgba, colorFormat) {
if (colorFormat === 'rgb') {
var _a = __read(rgba, 4), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
return "rgb(".concat((r * 255).toFixed(), " ").concat((g * 255).toFixed(), " ").concat((b * 255).toFixed()).concat(a === 1 ? '' : ' / ' + Math.round(a * 100) / 100, ")");
}
if (colorFormat === 'hsl') {
var _b = __read((0, ColorUtils_1.rgbaToHsla)(rgba), 4), h = _b[0], s = _b[1], l = _b[2], a = _b[3];
return "hsl(".concat(Math.round(h * 360), "deg ").concat(Math.round(s * 100), " ").concat(Math.round(l * 100)).concat(a === 1 ? '' : ' / ' + Math.round(a * 100) / 100, ")");
}
throw new Error('NOT_REACHED');
}
exports.formatRgba = formatRgba;
function formatColor(hexa, colorFormat) {
if (colorFormat === 'rgb' || colorFormat === 'hsl') {
return formatRgba(parseHexa(hexa), colorFormat);
}
if ((0, endWith_1.default)(hexa, 'FF')) {
return hexa.substr(0, 7);
}
return hexa;
}
exports.formatColor = formatColor;
function drawPath(context, commands, fillColor, outlineColor, outlinePattern, bounds, emulationScaleFactor) {
context.save();
var path = buildPath(commands, bounds, emulationScaleFactor);
if (fillColor) {
context.fillStyle = fillColor;
context.fill(path);
}
if (outlineColor) {
if (outlinePattern === "dashed") {
context.setLineDash([3, 3]);
}
if (outlinePattern === "dotted") {
context.setLineDash([2, 2]);
}
context.lineWidth = 2;
context.strokeStyle = outlineColor;
context.stroke(path);
}
context.restore();
return path;
}
exports.drawPath = drawPath;