feat(text): Makes it possible to use offset X / Y to move Text around (…

…#529)

implements #528

package.json

@@ -27,7 +27,7 @@
  "animated-gif-detector": "^1.2.0",
  "animejs": "3.2.0",
  "aws-sdk": "^2.580.0",
- "canvas-text-wrapper": "^0.10.2",
+ "canvas-text-wrapper": "github:cyberj/canvas-text-wrapper#master",
  "color": "^3.1.2",
  "core-js": "^2.6.10",
  "dotenv": "^8.2.0",

src/application/sample-modules/Text.js

@@ -27,20 +27,26 @@ export default {
  }
  },
 
- positionX: {
+ offsetX: {
  type: "float",
- default: 0.5,
- max: 1,
- min: 0,
- strict: true
+ default: 0,
+ max: 100,
+ min: -100,
+ step: 1,
+ set(args) {
+ this.drawText(args);
+ }
  },
 
- positionY: {
+ offsetY: {
  type: "float",
- default: 0.5,
- max: 1,
- min: 0,
- strict: true
+ default: 0,
+ max: 100,
+ min: -100,
+ step: 1,
+ set(args) {
+ this.drawText(args);
+ }
  },
 
  strokeSize: {
@@ -132,7 +138,9 @@ export default {
  stroke,
  strokeColor,
  fillColor,
- fill
+ fill,
+ offsetX,
+ offsetY
  } = props;
 
  const {
@@ -150,11 +158,16 @@ export default {
  context.lineWidth = strokeSize;
  context.clearRect(0, 0, width, height);
 
+ const calculatedOffsetX = (width / 100) * offsetX;
+ const calculatedOffsetY = (height / 100) * offsetY;
+
  CanvasTextWrapper(canvas, text, {
  font: `${weight} ${size}px ${font}`,
  verticalAlign: "middle",
  textAlign: "center",
- strokeText: stroke
+ strokeText: stroke,
+ offsetX: calculatedOffsetX,
+ offsetY: calculatedOffsetY
  });
  }
 };

yarn.lock

@@ -2632,10 +2632,9 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz#00e471931eaefbeef54f46aa2203914d3c165669"
  integrity sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==
 
-canvas-text-wrapper@^0.10.2:
- version "0.10.2"
- resolved "https://registry.yarnpkg.com/canvas-text-wrapper/-/canvas-text-wrapper-0.10.2.tgz#cf00996c131c0eac3de25cbf4a56d07d1da2b0c3"
- integrity sha512-nFnN8q8ydtkBUWVn/dAdetpwNOkz3KtyD6jTI2HGD43ant2FQcnLugAVaGLJloyRTNK/exn7efpYy2zPV5bHiQ==
+"canvas-text-wrapper@github:cyberj/canvas-text-wrapper#master":
+ version "0.11.0"
+ resolved "https://codeload.github.com/cyberj/canvas-text-wrapper/tar.gz/5335c7bd6ecadc32756c66137dba6360f67dcffd"
 
 capture-stack-trace@^1.0.0:
  version "1.0.1"