Skip to content

Commit d33d627

Browse files
nswamy14nswamy14
committed
textWrap Enabled
1 parent b027632 commit d33d627

File tree

5 files changed

+262
-32
lines changed

5 files changed

+262
-32
lines changed

‎dist/node-i2d.js‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* node-i2djs v1.0.0
2+
* node-i2djs v1.0.1
33
* (c) 2022 Narayana swamy ([email protected])
44
* @license BSD-3-Clause
55
*/
@@ -5081,13 +5081,44 @@ function RenderText(ctx, props, stylesProps) {
50815081
self.style = stylesProps;
50825082
self.nodeName = "text";
50835083
self.stack = [self];
5084+
if (self.attr.width) {
5085+
this.fitWidth();
5086+
}
50845087
}
50855088

50865089
RenderText.prototype = new CanvasDom();
50875090
RenderText.prototype.constructor = RenderText;
5091+
RenderText.prototype.fitWidth = function () {
5092+
if (this.style.font) {
5093+
this.ctx.font = this.style.font;
5094+
}
5095+
var width = this.attr.width;
5096+
var textLits = this.attr.text.split(" ");
5097+
var textSubStrs = [];
5098+
var strLit = "";
5099+
var i = 0;
5100+
while(i < textLits.length) {
5101+
if (this.ctx.measureText(strLit + " " + textLits[i]).width < width) {
5102+
strLit = strLit + textLits[i];
5103+
} else {
5104+
textSubStrs.push(strLit);
5105+
strLit = textLits[i];
5106+
}
5107+
if (i !== 0) {
5108+
strLit += " ";
5109+
}
5110+
i++;
5111+
}
5112+
textSubStrs.push(strLit);
5113+
5114+
this.textLits = textSubStrs;
5115+
};
50885116

50895117
RenderText.prototype.text = function RTtext(value) {
50905118
this.attr.text = value;
5119+
if (this.attr.width) {
5120+
this.fitWidth();
5121+
}
50915122
};
50925123

50935124
RenderText.prototype.updateBBox = function RTupdateBBox() {
@@ -5107,9 +5138,14 @@ RenderText.prototype.updateBBox = function RTupdateBBox() {
51075138
if (this.style.font) {
51085139
this.ctx.font = this.style.font;
51095140
height = parseInt(this.style.font.replace(/[^\d.]/g, ""), 10) || 1;
5141+
self.textHeight = height + 3;
5142+
}
5143+
if (this.attr.width && this.textLits && this.textLits.length > 0) {
5144+
width = this.attr.width;
5145+
height = height * this.textLits.length;
5146+
} else {
5147+
width = this.ctx.measureText(this.attr.text).width;
51105148
}
5111-
5112-
width = this.ctx.measureText(this.attr.text).width;
51135149

51145150
if (this.style.textAlign === "center") {
51155151
x -= width / 2;
@@ -5138,13 +5174,25 @@ RenderText.prototype.updateBBox = function RTupdateBBox() {
51385174

51395175
RenderText.prototype.execute = function RTexecute() {
51405176
if (this.attr.text !== undefined && this.attr.text !== null) {
5141-
if (this.ctx.fillStyle !== "#000000") {
5142-
this.ctx.fillText(this.attr.text, this.attr.x, this.attr.y + this.height);
5143-
}
5177+
if (this.textLits && this.textLits.length > 0) {
5178+
for (var i = 0; i < this.textLits.length; i++) {
5179+
if (this.ctx.fillStyle !== "#000000") {
5180+
this.ctx.fillText(this.textLits[i], this.attr.x, this.attr.y + this.textHeight * (i + 1) );
5181+
}
51445182

5145-
if (this.ctx.strokeStyle !== "#000000") {
5146-
this.ctx.strokeText(this.attr.text, this.attr.x, this.attr.y + this.height);
5147-
}
5183+
if (this.ctx.strokeStyle !== "#000000") {
5184+
this.ctx.strokeText(this.textLits[i], this.attr.x, this.attr.y + this.textHeight * (i + 1));
5185+
}
5186+
}
5187+
} else {
5188+
if (this.ctx.fillStyle !== "#000000") {
5189+
this.ctx.fillText(this.attr.text, this.attr.x, this.attr.y + this.height);
5190+
}
5191+
5192+
if (this.ctx.strokeStyle !== "#000000") {
5193+
this.ctx.strokeText(this.attr.text, this.attr.x, this.attr.y + this.height);
5194+
}
5195+
}
51485196
}
51495197
};
51505198

‎examples/Example1.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,20 @@
2121
});
2222

2323
page1.exec(renderRemplate);
24-
page1.createEl({
25-
el: "image",
26-
attr: {
27-
x: (210 * 3 * 0.5) - 75,
28-
y: 50,
29-
src: (process.cwd() + "/examples/images/nodeI2djsLogo.svg"),
30-
onload: function () {
31-
let width = this.getAttr("width");
32-
let height = this.getAttr("height");
33-
this.setAttr("width", 150);
34-
this.setAttr("height", (height / width) * 150);
35-
}
36-
}
37-
});
24+
// page1.createEl({
25+
// el: "image",
26+
// attr: {
27+
// x: (210 * 3 * 0.5) - 75,
28+
// y: 50,
29+
// src: (process.cwd() + "/examples/images/nodeI2djsLogo.svg"),
30+
// onload: function () {
31+
// let width = this.getAttr("width");
32+
// let height = this.getAttr("height");
33+
// this.setAttr("width", 150);
34+
// this.setAttr("height", (height / width) * 150);
35+
// }
36+
// }
37+
// });
3838

3939
page1.createEl({
4040
el: "text",
@@ -99,7 +99,7 @@
9999

100100
PDFInstance.execute();
101101

102-
fs.writeFileSync((process.cwd() + "/examples/sample.pdf"), PDFInstance.exportPdf(), err => {
102+
fs.writeFileSync((process.cwd() + "/examples/example1.pdf"), PDFInstance.exportPdf(), err => {
103103
if (err) {
104104
console.error(err)
105105
return

‎examples/Example2.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
#!/usr/bin/env node
2+
3+
let { canvasPdfLayer } = require("./../dist/node-i2d.js");
4+
const fs = require('fs');
5+
var path = require('path');
6+
7+
let PDFInstance = canvasPdfLayer({}, 297 * 3, 210 * 3);
8+
9+
let page1 = PDFInstance.addPage();
10+
11+
var linearGradiant = page1.createLinearGradient({
12+
x1: 0,
13+
y1: 0,
14+
x2: 100,
15+
y2: 100,
16+
id: "11",
17+
colorStops: [
18+
{ color: "#FF7C80", value: 0 },
19+
{ color: "#0075F3", value: 100 },
20+
],
21+
});
22+
23+
page1.exec(renderRemplate);
24+
25+
page1.createEl({
26+
el: "text",
27+
attr: {
28+
x: (210 * 3 * 0.5),
29+
y: 100,
30+
text: "My First Report"
31+
},
32+
style: {
33+
strokeStyle: linearGradiant,
34+
font: "30px Arial",
35+
textAlign: "center"
36+
}
37+
});
38+
39+
page1.createEl({
40+
el: "rect",
41+
attr: {
42+
x: 30,
43+
y: 200,
44+
width: (210 * 3 - 80) * 0.5,
45+
height: 100,
46+
rx: 10,
47+
ry: 10
48+
},
49+
style: {
50+
strokeStyle: "#FF7C80",
51+
lineWidth: 2,
52+
fillStyle: "none"
53+
}
54+
});
55+
56+
page1.createEl({
57+
el: "text",
58+
attr: {
59+
x: 40,
60+
y: 210,
61+
text: "The post added that it is a challenging time for their family. Bruce Willis' daughter, Rumer, shared a joint statement on her Instagram handle that read, To Bruce's amazing supporters, as a family, we wanted to share that our beloved Bruce has been experiencing some health issues and has recently been diagnosed with aphasia, which is impacting his cognitive abilities. As a result of this and with much consideration Bruce is stepping away from the career that has meant so much to him.",
62+
width: (210 * 3 - 80) * 0.48
63+
},
64+
style: {
65+
strokeStyle: "#000000",
66+
font: "8px Arial",
67+
textAlign: "left",
68+
"word-wrap": "break-word",
69+
}
70+
});
71+
72+
page1.createEl({
73+
el: "rect",
74+
attr: {
75+
x: 40 + (210 * 3 - 80) / 2,
76+
y: 200,
77+
width: (210 * 3 - 80) * 0.5,
78+
height: 100,
79+
rx: 10,
80+
ry: 10
81+
},
82+
style: {
83+
strokeStyle: "#0075F3",
84+
lineWidth: 2,
85+
fillStyle: "none"
86+
}
87+
});
88+
89+
90+
page1.createEl({
91+
el: "text",
92+
attr: {
93+
x: 50 + (210 * 3 - 80) / 2,
94+
y: 210,
95+
text: "The post added that it is a challenging time for their family. Bruce Willis' daughter, Rumer, shared a joint statement on her Instagram handle that read, To Bruce's amazing supporters, as a family, we wanted to share that our beloved Bruce has been experiencing some health issues and has recently been diagnosed with aphasia, which is impacting his cognitive abilities. As a result of this and with much consideration Bruce is stepping away from the career that has meant so much to him.",
96+
width: (210 * 3 - 80) * 0.48
97+
},
98+
style: {
99+
strokeStyle: "#000000",
100+
font: "8px Arial",
101+
textAlign: "left",
102+
"word-wrap": "break-word",
103+
}
104+
});
105+
106+
PDFInstance.execute();
107+
108+
fs.writeFileSync((process.cwd() + "/examples/example2.pdf"), PDFInstance.exportPdf(), err => {
109+
if (err) {
110+
console.error(err)
111+
return
112+
}
113+
console.log("file written successfully");
114+
});
115+
116+
117+
function renderRemplate () {
118+
this.createEl({
119+
el: "rect",
120+
attr: {
121+
x: 20,
122+
y: 20,
123+
width: (210 * 3) - 40,
124+
height: (297 * 3) - 40,
125+
rx: 10,
126+
ry: 10
127+
},
128+
style: {
129+
strokeStyle: linearGradiant,
130+
lineWidth: 5,
131+
fillStyle: "none"
132+
}
133+
});
134+
}

‎examples/sample.pdf‎

-60.3 KB
Binary file not shown.

‎src/modules/canvas.js‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -527,13 +527,44 @@ function RenderText(ctx, props, stylesProps) {
527527
self.style = stylesProps;
528528
self.nodeName = "text";
529529
self.stack = [self];
530+
if (self.attr.width) {
531+
this.fitWidth();
532+
}
530533
}
531534

532535
RenderText.prototype = new CanvasDom();
533536
RenderText.prototype.constructor = RenderText;
537+
RenderText.prototype.fitWidth = function () {
538+
if (this.style.font) {
539+
this.ctx.font = this.style.font;
540+
}
541+
let width = this.attr.width;
542+
let textLits = this.attr.text.split(" ");
543+
let textSubStrs = [];
544+
let strLit = "";
545+
let i = 0;
546+
while(i < textLits.length) {
547+
if (this.ctx.measureText(strLit + " " + textLits[i]).width < width) {
548+
strLit = strLit + textLits[i];
549+
} else {
550+
textSubStrs.push(strLit);
551+
strLit = textLits[i];
552+
}
553+
if (i !== 0) {
554+
strLit += " "
555+
}
556+
i++;
557+
}
558+
textSubStrs.push(strLit);
559+
560+
this.textLits = textSubStrs;
561+
}
534562

535563
RenderText.prototype.text = function RTtext(value) {
536564
this.attr.text = value;
565+
if (this.attr.width) {
566+
this.fitWidth();
567+
}
537568
};
538569

539570
RenderText.prototype.updateBBox = function RTupdateBBox() {
@@ -546,9 +577,14 @@ RenderText.prototype.updateBBox = function RTupdateBBox() {
546577
if (this.style.font) {
547578
this.ctx.font = this.style.font;
548579
height = parseInt(this.style.font.replace(/[^\d.]/g, ""), 10) || 1;
580+
self.textHeight = height + 3;
581+
}
582+
if (this.attr.width && this.textLits && this.textLits.length > 0) {
583+
width = this.attr.width;
584+
height = height * this.textLits.length;
585+
} else {
586+
width = this.ctx.measureText(this.attr.text).width;
549587
}
550-
551-
width = this.ctx.measureText(this.attr.text).width;
552588

553589
if (this.style.textAlign === "center") {
554590
x -= width / 2;
@@ -577,13 +613,25 @@ RenderText.prototype.updateBBox = function RTupdateBBox() {
577613

578614
RenderText.prototype.execute = function RTexecute() {
579615
if (this.attr.text !== undefined && this.attr.text !== null) {
580-
if (this.ctx.fillStyle !== "#000000") {
581-
this.ctx.fillText(this.attr.text, this.attr.x, this.attr.y + this.height);
582-
}
616+
if (this.textLits && this.textLits.length > 0) {
617+
for (var i = 0; i < this.textLits.length; i++) {
618+
if (this.ctx.fillStyle !== "#000000") {
619+
this.ctx.fillText(this.textLits[i], this.attr.x, this.attr.y + this.textHeight * (i + 1) );
620+
}
583621

584-
if (this.ctx.strokeStyle !== "#000000") {
585-
this.ctx.strokeText(this.attr.text, this.attr.x, this.attr.y + this.height);
586-
}
622+
if (this.ctx.strokeStyle !== "#000000") {
623+
this.ctx.strokeText(this.textLits[i], this.attr.x, this.attr.y + this.textHeight * (i + 1));
624+
}
625+
}
626+
} else {
627+
if (this.ctx.fillStyle !== "#000000") {
628+
this.ctx.fillText(this.attr.text, this.attr.x, this.attr.y + this.height);
629+
}
630+
631+
if (this.ctx.strokeStyle !== "#000000") {
632+
this.ctx.strokeText(this.attr.text, this.attr.x, this.attr.y + this.height);
633+
}
634+
}
587635
}
588636
};
589637

0 commit comments

Comments
 (0)