window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 20000;
/* global html2canvas */
const FONT_SIZE = parseInt(getComputedStyle(document.documentElement)
.getPropertyValue('--fontSize')
.replace('px', '')
.replace("\n", ''), 10);
const COLOR_TO_AVOID = 'rgb(255, 255, 255)';
const TYPOGRAPHY_TEST_AREA_CAP_DESC = document.getElementById('test');
const TYPOGRAPHY_TEST_AREA_X_BASELINE = document.getElementById('test1');
const FIRST_SCREENSHOT_CANVAS_HOLDER = document.getElementById('screenshot');
const SECOND_SCREENSHOT_CANVAS_HOLDER = document.getElementById('cropped-screenshot');
const CAP_HEIGHT_VALUE_ELEMENT = document.getElementById('cap-height');
const BASELINE_VALUE_ELEMENT = document.getElementById('baseline');
const DESCENDER_HEIGHT_VALUE_ELEMENT = document.getElementById('descender-height');
const X_HEIGHT_VALUE_ELEMENT = document.getElementById('x-height');
let START_CAP_HEIGHT_VALUE;
let STOP_CAP_HEIGHT_VALUE;
let STOP_DESCENDER_HEIGHT_VALUE;
let START_DESCENDER_HEIGHT_VALUE;
let START_X_HEIGHT_VALUE;
let STOP_X_HEIGHT_VALUE;
let BASELINE_VALUE;
const takeScreenshot = (el, target) =>
html2canvas(el, {
scale: 1
})
.then(canvas => {
target.appendChild(canvas);
});
const getCoordsFromCanvasIndex = (i, canvasWidth) => ({
x: (i / 4) % canvasWidth,
y: Math.floor(i / 4 / canvasWidth)
});
const getFirstAndLastYOfColor = (canvasHolder, avoidColor) => {
const canvas = canvasHolder.querySelector('canvas');
const canvasRect = canvas.getBoundingClientRect();
const ctx = canvas.getContext('2d');
const canvasHeight = ctx.canvas.height;
const canvasWidth = ctx.canvas.width;
console.log(canvasHeight, canvasWidth)
const pixelData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
console.log('pixelData', pixelData.height, pixelData.width)
const pixels = pixelData.data;
const numPixels = pixelData.data.length; //pixelData.width * pixelData.height;
let firstColoredY = false;
let lastColoredY = false;
let firstY = false;
let lastY = false;
let lastIndex = 0;
for (let i = 0; i < numPixels; i += 4) {
const currentColor = getRGBStringFromCanvasIndex(pixels, i);
let {
x,
y
} = getCoordsFromCanvasIndex(i, canvasWidth);
if (firstY === false) {
firstY = y;
} else {
lastY = y;
}
if (currentColor !== avoidColor) {
if (firstColoredY === false) {
firstColoredY = y;
// test by drawing the pixel into the image
drawPixel(canvas, i);
} else {
lastColoredY = y;
lastIndex = i;
}
}
}
drawPixel(canvas, lastIndex);
return {
firstColoredY,
lastColoredY,
firstY,
lastY
};
};
const r = i => i;
const g = i => i + 1;
const b = i => i + 2;
const a = i => i + 3;
const getRGBStringFromCanvasIndex = (pixels, i) => `rgb(${pixels[r(i)]}, ${pixels[g(i)]}, ${pixels[b(i)]})`;
const getRGBfromCanvasIndex = i => ({
r: r(i),
g: g(i),
b: b(i)
});
const setColorOnIndex = (pixelData, i, rgb) => {
const {
r: red,
g: green,
b: blue
} = rgb;
const pixels = pixelData.data;
pixels[r(i)] = red;
pixels[g(i)] = green;
pixels[b(i)] = blue;
return pixels;
};
const drawPixel = (canvas, index) => {
const ctx = canvas.getContext('2d');
const canvasHeight = ctx.canvas.height;
const canvasWidth = ctx.canvas.width;
const pixelData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
const rgb = {
r: 0,
g: 255,
b: 0
};
pixelData.data = setColorOnIndex(pixelData, index, rgb);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.putImageData(pixelData, 0, 0);
};
const init = () => {
const firstCanvases = FIRST_SCREENSHOT_CANVAS_HOLDER.querySelectorAll('canvas');
firstCanvases.forEach(canvas => {
canvas.parentNode.removeChild(canvas);
})
const secondCanvases = SECOND_SCREENSHOT_CANVAS_HOLDER.querySelectorAll('canvas');
secondCanvases.forEach(canvas => {
canvas.parentNode.removeChild(canvas);
})
takeScreenshot(TYPOGRAPHY_TEST_AREA_CAP_DESC, FIRST_SCREENSHOT_CANVAS_HOLDER)
.then(() => {
const {
firstColoredY,
lastColoredY,
firstY,
lastY
} = getFirstAndLastYOfColor(FIRST_SCREENSHOT_CANVAS_HOLDER, COLOR_TO_AVOID);
console.log({
firstY,
lastY
})
START_CAP_HEIGHT_VALUE = firstColoredY;
STOP_DESCENDER_HEIGHT_VALUE = lastColoredY;
});
takeScreenshot(TYPOGRAPHY_TEST_AREA_X_BASELINE, SECOND_SCREENSHOT_CANVAS_HOLDER)
.then(() => {
const {
firstColoredY,
lastColoredY
} = getFirstAndLastYOfColor(SECOND_SCREENSHOT_CANVAS_HOLDER, COLOR_TO_AVOID);
START_X_HEIGHT_VALUE = firstColoredY;
START_DESCENDER_HEIGHT_VALUE = lastColoredY;
STOP_X_HEIGHT_VALUE = lastColoredY;
BASELINE_VALUE = lastColoredY;
STOP_CAP_HEIGHT_VALUE = lastColoredY;
DESCENDER_HEIGHT_VALUE_ELEMENT.value = (STOP_DESCENDER_HEIGHT_VALUE - BASELINE_VALUE) / FONT_SIZE;
X_HEIGHT_VALUE_ELEMENT.value = (BASELINE_VALUE - START_X_HEIGHT_VALUE) / FONT_SIZE;
CAP_HEIGHT_VALUE_ELEMENT.value = (BASELINE_VALUE - START_CAP_HEIGHT_VALUE) / FONT_SIZE;
BASELINE_VALUE_ELEMENT.value = BASELINE_VALUE;
console.log({
FONT_SIZE,
START_CAP_HEIGHT_VALUE,
STOP_DESCENDER_HEIGHT_VALUE,
START_X_HEIGHT_VALUE,
START_DESCENDER_HEIGHT_VALUE,
STOP_X_HEIGHT_VALUE,
BASELINE_VALUE,
STOP_CAP_HEIGHT_VALUE
})
});
};
init();
document.getElementById('fonts')
.addEventListener('change', function (e) {
try {
const gfontlink = document.getElementById('gfontlink');
gfontlink.parentNode.removeChild(gfontlink);
} catch (e) {}
document.getElementById('test')
.style.fontFamily = e.target.value;
document.getElementById('test1')
.style.fontFamily = e.target.value;
init();
})
$('#gfont')
.change(function (e) {
$('#gfontlink')
.remove();
$('head')
.append("<link href='https://fonts.googleapis.com/css?family=" + $(this)
.val() + "' rel='stylesheet' type='text/css' id='gfontlink'>");
$('#test')
.css('font-family', $(this)
.val())
$('#test1')
.css('font-family', $(this)
.val())
init();
});
$('#cfont')
.change(function (e) {
$('#gfontlink')
.remove();
if($(this)
.val().length > 4)
$('#test')
.css('font-family', $(this)
.val())
$('#test1')
.css('font-family', $(this)
.val())
init();
});
!
