Skip to content

Commit

Permalink
Merge pull request #719 from jonobr1/text-direction
Browse files Browse the repository at this point in the history 
Add Two.Text.direction property
  • Loading branch information
@jonobr1
jonobr1 authored Feb 22, 2024
2 parents 6fc7745 + 6ae6f5a commit 910f1f1
Show file tree
Hide file tree
Showing 19 changed files with 306 additions and 148 deletions.
39 changes: 34 additions & 5 deletions build/two.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,7 @@ var Two = (() => {
canvas: "CanvasRenderer"
},
Version: "v0.8.13",
PublishDate: "2024-02-22T06:23:43.441Z",
PublishDate: "2024-02-22T06:40:05.376Z",
Identifier: "two-",
Resolution: 12,
AutoCalculateImportedMatrices: true,
Expand Down Expand Up @@ -2727,6 +2727,7 @@ var Two = (() => {
const linewidth = this._linewidth;
const fill = this._fill;
const decoration = this._decoration;
const direction = this._direction;
const defaultMatrix = isDefaultMatrix(matrix);
const isOffset = fill._renderer && fill._renderer.offset && stroke._renderer && stroke._renderer.offset;
const dashes = this.dashes;
Expand All @@ -2745,6 +2746,7 @@ var Two = (() => {
}
ctx.textAlign = alignment;
ctx.textBaseline = baseline;
ctx.direction = direction;
if (fill) {
if (typeof fill === "string") {
ctx.fillStyle = fill;
Expand Down Expand Up @@ -5730,6 +5732,7 @@ var Two = (() => {
_style = "normal";
_weight = 500;
_decoration = "none";
_direction = "ltr";
_fill = "#000";
_stroke = "none";
_linewidth = 1;
Expand Down Expand Up @@ -5895,6 +5898,7 @@ var Two = (() => {
"style",
"weight",
"decoration",
"direction",
"baseline",
"opacity",
"visible",
Expand Down Expand Up @@ -5992,6 +5996,16 @@ var Two = (() => {
this._flagDecoration = true;
}
},
direction: {
enumerable: true,
get: function() {
return this._direction;
},
set: function(v) {
this._direction = v;
this._flagDirection = true;
}
},
baseline: {
enumerable: true,
get: function() {
Expand Down Expand Up @@ -8607,6 +8621,9 @@ var Two = (() => {
if (this._flagDecoration) {
changed["text-decoration"] = this._decoration;
}
if (this._flagDirection) {
changed["direction"] = this._direction;
}
if (this._fill && this._fill._renderer) {
this._renderer.hasFillEffect = true;
this._fill._update();
Expand Down Expand Up @@ -9645,6 +9662,7 @@ var Two = (() => {
const opacity = elem._renderer.opacity || elem._opacity;
const dashes = elem.dashes;
const decoration = elem._decoration;
const direction = elem._direction;
canvas3.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
canvas3.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);
const centroid = elem._renderer.rect.centroid;
Expand All @@ -9658,6 +9676,7 @@ var Two = (() => {
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.textDirection = direction;
if (fill) {
if (typeof fill === "string") {
ctx.fillStyle = fill;
Expand Down Expand Up @@ -9782,12 +9801,22 @@ var Two = (() => {
const h = height / 2;
switch (webgl.alignments[elem._alignment] || elem._alignment) {
case webgl.alignments.left:
rect.left = 0;
rect.right = width;
if (elem.direction === "ltr") {
rect.left = 0;
rect.right = width;
} else {
rect.left = -width;
rect.right = 0;
}
break;
case webgl.alignments.right:
rect.left = -width;
rect.right = 0;
if (elem.direction === "ltr") {
rect.left = -width;
rect.right = 0;
} else {
rect.left = 0;
rect.right = width;
}
break;
default:
rect.left = -w;
Expand Down
4 changes: 2 additions & 2 deletions build/two.min.js
View file

Large diffs are not rendered by default.

39 changes: 34 additions & 5 deletions build/two.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -719,7 +719,7 @@ var Constants = {
canvas: "CanvasRenderer"
},
Version: "v0.8.13",
PublishDate: "2024-02-22T06:23:43.441Z",
PublishDate: "2024-02-22T06:40:05.376Z",
Identifier: "two-",
Resolution: 12,
AutoCalculateImportedMatrices: true,
Expand Down Expand Up @@ -2708,6 +2708,7 @@ var canvas = {
const linewidth = this._linewidth;
const fill = this._fill;
const decoration = this._decoration;
const direction = this._direction;
const defaultMatrix = isDefaultMatrix(matrix);
const isOffset = fill._renderer && fill._renderer.offset && stroke._renderer && stroke._renderer.offset;
const dashes = this.dashes;
Expand All @@ -2726,6 +2727,7 @@ var canvas = {
}
ctx.textAlign = alignment;
ctx.textBaseline = baseline;
ctx.direction = direction;
if (fill) {
if (typeof fill === "string") {
ctx.fillStyle = fill;
Expand Down Expand Up @@ -5713,6 +5715,7 @@ var _Text = class extends Shape {
__publicField(this, "_style", "normal");
__publicField(this, "_weight", 500);
__publicField(this, "_decoration", "none");
__publicField(this, "_direction", "ltr");
__publicField(this, "_fill", "#000");
__publicField(this, "_stroke", "none");
__publicField(this, "_linewidth", 1);
Expand Down Expand Up @@ -5876,6 +5879,7 @@ __publicField(Text, "Properties", [
"style",
"weight",
"decoration",
"direction",
"baseline",
"opacity",
"visible",
Expand Down Expand Up @@ -5973,6 +5977,16 @@ var proto18 = {
this._flagDecoration = true;
}
},
direction: {
enumerable: true,
get: function() {
return this._direction;
},
set: function(v) {
this._direction = v;
this._flagDirection = true;
}
},
baseline: {
enumerable: true,
get: function() {
Expand Down Expand Up @@ -8588,6 +8602,9 @@ var svg = {
if (this._flagDecoration) {
changed["text-decoration"] = this._decoration;
}
if (this._flagDirection) {
changed["direction"] = this._direction;
}
if (this._fill && this._fill._renderer) {
this._renderer.hasFillEffect = true;
this._fill._update();
Expand Down Expand Up @@ -9626,6 +9643,7 @@ var webgl = {
const opacity = elem._renderer.opacity || elem._opacity;
const dashes = elem.dashes;
const decoration = elem._decoration;
const direction = elem._direction;
canvas3.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
canvas3.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);
const centroid = elem._renderer.rect.centroid;
Expand All @@ -9639,6 +9657,7 @@ var webgl = {
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.textDirection = direction;
if (fill) {
if (typeof fill === "string") {
ctx.fillStyle = fill;
Expand Down Expand Up @@ -9763,12 +9782,22 @@ var webgl = {
const h = height / 2;
switch (webgl.alignments[elem._alignment] || elem._alignment) {
case webgl.alignments.left:
rect.left = 0;
rect.right = width;
if (elem.direction === "ltr") {
rect.left = 0;
rect.right = width;
} else {
rect.left = -width;
rect.right = 0;
}
break;
case webgl.alignments.right:
rect.left = -width;
rect.right = 0;
if (elem.direction === "ltr") {
rect.left = -width;
rect.right = 0;
} else {
rect.left = 0;
rect.right = width;
}
break;
default:
rect.left = -w;
Expand Down
2 changes: 2 additions & 0 deletions src/renderers/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,7 @@ const canvas = {
const linewidth = this._linewidth;
const fill = this._fill;
const decoration = this._decoration;
const direction = this._direction;
const defaultMatrix = isDefaultMatrix(matrix);
const isOffset = fill._renderer && fill._renderer.offset
&& stroke._renderer && stroke._renderer.offset;
Expand Down Expand Up @@ -546,6 +547,7 @@ const canvas = {

ctx.textAlign = alignment;
ctx.textBaseline = baseline;
ctx.direction = direction;

// Styles
if (fill) {
Expand Down
3 changes: 3 additions & 0 deletions src/renderers/svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,9 @@ const svg = {
if (this._flagDecoration) {
changed['text-decoration'] = this._decoration;
}
if (this._flagDirection) {
changed['direction'] = this._direction;
}
if (this._fill && this._fill._renderer) {
this._renderer.hasFillEffect = true;
this._fill._update();
Expand Down
20 changes: 16 additions & 4 deletions src/renderers/webgl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -882,6 +882,7 @@ const webgl = {
const opacity = elem._renderer.opacity || elem._opacity;
const dashes = elem.dashes;
const decoration = elem._decoration;
const direction = elem._direction;

canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);
Expand All @@ -903,6 +904,7 @@ const webgl = {

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.textDirection = direction;

// Styles
if (fill) {
Expand Down Expand Up @@ -1056,12 +1058,22 @@ const webgl = {
switch (webgl.alignments[elem._alignment] || elem._alignment) {

case webgl.alignments.left:
rect.left = 0;
rect.right = width;
if (elem.direction === 'ltr') {
rect.left = 0;
rect.right = width;
} else {
rect.left = - width;
rect.right = 0;
}
break;
case webgl.alignments.right:
rect.left = - width;
rect.right = 0;
if (elem.direction === 'ltr') {
rect.left = - width;
rect.right = 0;
} else {
rect.left = 0;
rect.right = width;
}
break;
default:
rect.left = - w;
Expand Down
29 changes: 26 additions & 3 deletions src/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,17 @@ export class Text extends Shape {
/**
* @name Two.Text#_flagClip
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#clip} need updating.
* @property {Boolean} - Determines whether the {@link Two.Text#clip} needs updating.
*/
_flagClip = false;

/**
* @name Two.Text#_flagDirection
* @private
* @property {Boolean} - Determines whether the {@link Two.Text#direction} needs updating.
*/
_flagDirection = false;

// Underlying Properties

/**
Expand Down Expand Up @@ -198,6 +205,12 @@ export class Text extends Shape {
*/
_decoration = 'none';

/**
* @name Two.Text#direction
* @property {String} - String to determine what direction the text should run. Possibly values are `'ltr'` for left-to-right and `'rtl'` for right-to-left. Defaults to `'ltr'`.
*/
_direction = 'ltr';

/**
* @name Two.Text#fill
* @property {(String|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
Expand Down Expand Up @@ -313,7 +326,7 @@ export class Text extends Shape {
*/
static Properties = [
'value', 'family', 'size', 'leading', 'alignment', 'linewidth', 'style',
'weight', 'decoration', 'baseline', 'opacity', 'visible',
'weight', 'decoration', 'direction', 'baseline', 'opacity', 'visible',
'fill', 'stroke'
];

Expand Down Expand Up @@ -508,7 +521,7 @@ export class Text extends Shape {
this._flagStroke = this._flagLinewidth = this._flagOpacity =
this._flagVisible = this._flagClip = this._flagDecoration =
this._flagClassName = this._flagBaseline = this._flagWeight =
this._flagStyle = false;
this._flagStyle = this._flagDirection = false;

return this;

Expand Down Expand Up @@ -607,6 +620,16 @@ const proto = {
this._flagDecoration = true;
}
},
direction: {
enumerable: true,
get: function() {
return this._direction;
},
set: function(v) {
this._direction = v;
this._flagDirection = true;
}
},
baseline: {
enumerable: true,
get: function() {
Expand Down
3 changes: 2 additions & 1 deletion tests/suite/svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@

QUnit.test('Two.makeText', function(assert) {

assert.expect(16);
assert.expect(17);

var two = new Two({
width: 400,
Expand Down Expand Up @@ -438,6 +438,7 @@
assert.equal(elem.getAttribute('opacity'), '1', 'The opacity attribute applied properly.');
assert.equal(elem.getAttribute('visibility'), 'visible', 'The visibility attribute applied properly.');
assert.equal(elem.getAttribute('class'), 'hello world', 'The class attribute applied properly.');
assert.equal(elem.getAttribute('direction', 'ltr'), 'The direction attribute applied properly.');
assert.equal(elem.innerHTML, text.value, 'The value attribute applied properly.');

QUnit.Utils.addInstanceToTest(assert.test, two);
Expand Down
Loading

0 comments on commit 910f1f1

Please sign in to comment.