Skip to content

Commit

Permalink
Vertical Align Y Print Bug (#595)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hipstersmoothie @edi9999
hipstersmoothie authored and edi9999 committed Sep 3, 2018
1 parent 94373d2 commit d45c79d
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 75 deletions.
Binary file added packages/plugin-print/middle-aligned.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 7 additions & 3 deletions packages/plugin-print/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,11 @@ export default () => ({
let alignmentX;
let alignmentY;

if (typeof text === 'object' && text.text !== null && text.text !== undefined) {
if (
typeof text === 'object' &&
text.text !== null &&
text.text !== undefined
) {
alignmentX = text.alignmentX || this.constructor.HORIZONTAL_ALIGN_LEFT;
alignmentY = text.alignmentY || this.constructor.VERTICAL_ALIGN_TOP;
({ text } = text);
Expand All @@ -273,12 +277,12 @@ export default () => ({
maxHeight !== Infinity &&
alignmentY === this.constructor.VERTICAL_ALIGN_BOTTOM
) {
y = maxHeight - measureTextHeight(font, text, maxWidth);
y += maxHeight - measureTextHeight(font, text, maxWidth);
} else if (
maxHeight !== Infinity &&
alignmentY === this.constructor.VERTICAL_ALIGN_MIDDLE
) {
y = maxHeight / 2 - measureTextHeight(font, text, maxWidth) / 2;
y += maxHeight / 2 - measureTextHeight(font, text, maxWidth) / 2;
}

const defaultCharWidth = Object.entries(font.chars)[0][1].xadvance;
Expand Down
Binary file added packages/plugin-print/test/images/bottom-aligned-y.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/plugin-print/test/images/middle-aligned-y.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 73 additions & 72 deletions packages/plugin-print/test/print.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,12 @@ async function createTextImage(
width,
height,
font,
options,
maxWidth,
maxHeight
{ x = 0, y = 0, text, maxWidth, maxHeight }
) {
const loadedFont = await jimp.loadFont(font);
const image = await Jimp.create(width, height, 0xffffffff);

return image.print(loadedFont, 0, 0, options, maxWidth, maxHeight);
return image.print(loadedFont, x, y, text, maxWidth, maxHeight);
}

describe('Write text over image', function() {
Expand Down Expand Up @@ -110,141 +108,144 @@ describe('Write text over image', function() {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/left-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
'This is only a test.',
100
);

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: 'This is only a test.',
maxWidth: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('left-align text by default when passing object', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/left-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{ text: 'This is only a test.' },
100
);

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: { text: 'This is only a test.' },
maxWidth: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('left-align text when passing object with alignmentX', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/left-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: {
text: 'This is only a test.',

alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT
},
100
);

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
maxWidth: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('center-align text when passing object with alignmentX', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/center-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: {
text: 'This is only a test.',

alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER
},
100
);

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
maxWidth: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('right-align text when passing object with alignmentX', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/right-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: {
text: 'This is only a test.',

alignmentX: Jimp.HORIZONTAL_ALIGN_RIGHT
},
100
);

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
maxWidth: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('middle-align text when passing object with alignmentY', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/middle-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: {
text: 'This is only a test.',

alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
},
100,
240
maxWidth: 100,
maxHeight: 240
});

textImage.writeAsync('middle-aligned.png');

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('middle-align text when passing object with alignmentY can offset y', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/middle-aligned-y.png'
);
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
y: 50,
text: {
text: 'This is only a test.',

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
},
maxWidth: 100,
maxHeight: 240
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('bottom-align text when passing object with alignmentY', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/bottom-aligned.png'
);
const textImage = createTextImage(
320,
240,
Jimp.FONT_SANS_16_BLACK,
{
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
text: {
text: 'This is only a test.',

alignmentY: Jimp.VERTICAL_ALIGN_BOTTOM
},
100,
240
maxWidth: 100,
maxHeight: 240
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('bottom-align text when passing object with alignmentY offset y', async () => {
const expectedImage = await Jimp.read(
getTestDir(__dirname) + '/images/bottom-aligned-y.png'
);
const textImage = await createTextImage(320, 240, Jimp.FONT_SANS_16_BLACK, {
y: 100,
text: {
text: 'This is only a test.',

return Promise.all([expectedImage, textImage]).then(results => {
results[0].bitmap.data.should.be.deepEqual(results[1].bitmap.data);
alignmentY: Jimp.VERTICAL_ALIGN_BOTTOM
},
maxWidth: 100,
maxHeight: 100
});

expectedImage.bitmap.data.should.be.deepEqual(textImage.bitmap.data);
});

it('exposes print y position in cb', async () => {
Expand Down

0 comments on commit d45c79d

Please sign in to comment.