add position parameter to slide-in-text too

also add more position convenience strings

README.md

@@ -258,12 +258,9 @@ Title with background
 #### Layer type 'slide-in-text'
 - `fontPath` - See `defaults.layer.fontPath`
 - `text`
-- `top`
-- `left`
-- `originX`
-- `originY`
 - `fontSize`
 - `color`
+- `position` - See [Position parameter](#position-parameter)
 
 #### Layer type 'fill-color', 'pause'
 - `color` - Color to fill background, default: randomize
@@ -302,8 +299,10 @@ Loads a GLSL shader. See [gl.json5](https://github.com/mifi/editly/blob/master/e
 Certain layers support the position parameter
 
 `position` can be one of either:
-  - `top`, `bottom` or `center` - vertical position (horizontally centered)
-  - An object `{ x, y, originX = 'left', originY = 'top' }`, where `{ x: 0, y: 0 }` is the upper left corner of the screen, and `{ x: 1, y: 1 }` is the lower right corner, `x` is relative to video width, `y` to height. `originX` and `originY` are optional, and specify the position's origin (anchor position) of the object.
+  - `top`, `bottom` `center`, `top-left`, `top-right`, `center-left`, `center-right`, `bottom-left`, `bottom-right`
+  - An object `{ x, y, originX = 'left', originY = 'top' }`, where `{ x: 0, y: 0 }` is the upper left corner of the screen, and `{ x: 1, y: 1 }` is the lower right corner, `x` is relative to video width, `y` to video height. `originX` and `originY` are optional, and specify the position's origin (anchor position) of the object.
+
+See [position.json5](https://github.com/mifi/editly/blob/master/examples/position.json5)
 
 ### Ken Burns parameters
 

examples/position.json5

@@ -0,0 +1,23 @@
+{
+  outPath: './position.mp4',
+  defaults: {
+    layerType: {
+      'image-overlay': { width: 0.1 },
+    },
+  },
+  clips: [
+    { layers: [
+      { type: 'rainbow-colors' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top-left' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top-right' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center-left' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center-right' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom-left' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom-right' },
+      { type: 'image-overlay', path: './assets/emoji.png', width: 0.06, position: { originX: 'center', originY: 'center', x: 0.75, y: 0.75 } },
+    ] },
+  ],
+}

examples/slideInText.json5

@@ -3,7 +3,7 @@
   clips: [
     { duration: 3, layers: [
       { type: 'image', path: 'assets/img2.jpg' },
-      { type: 'slide-in-text', text: 'Text that slides in', top: 0.93, left: 0.04, color: '#fff', originY: 'bottom', fontSize: 0.05 },
+      { type: 'slide-in-text', text: 'Text that slides in', color: '#fff', position: { x: 0.04, y: 0.93, originY: 'bottom', originX: 'left' }, fontSize: 0.05 },
     ] },
   ],
 }

sources/fabric/fabricFrameSources.js

@@ -344,10 +344,12 @@ async function getFadedObject({ object, progress }) {
   return fadedImage;
 }
 
-async function slideInTextFrameSource({ width, height, params: { text, top = 0.05, left = 0.05, originX = 'left', originY = 'top', fontSize = 0.05, color = '#ffffff', fontFamily = defaultFontFamily } = {} }) {
+async function slideInTextFrameSource({ width, height, params: { position, text, fontSize = 0.05, color = '#ffffff', fontFamily = defaultFontFamily } = {} }) {
   async function onRender(progress, canvas) {
     const fontSizeAbs = Math.round(width * fontSize);
 
+    const { left, top, originX, originY } = getPositionProps({ position, width, height });
+
     const textBox = new fabric.Text(text, {
       fill: color,
       fontFamily,
@@ -366,8 +368,8 @@ async function slideInTextFrameSource({ width, height, params: { text, top = 0.0
     fadedObject.setOptions({
       originX,
       originY,
-      top: top * height,
-      left: left * width,
+      top,
+      left,
       opacity,
     });
 

util.js

@@ -80,6 +80,36 @@ function getPositionProps({ position, width, height }) {
   } else if (position === 'center') {
     originY = 'center';
     top = height / 2;
+  } else if (position === 'top-left') {
+    originX = 'left';
+    originY = 'top';
+    left = width * margin;
+    top = height * margin;
+  } else if (position === 'top-right') {
+    originX = 'right';
+    originY = 'top';
+    left = width * (1 - margin);
+    top = height * margin;
+  } else if (position === 'center-left') {
+    originX = 'left';
+    originY = 'center';
+    left = width * margin;
+    top = height / 2;
+  } else if (position === 'center-right') {
+    originX = 'right';
+    originY = 'center';
+    left = width * (1 - margin);
+    top = height / 2;
+  } else if (position === 'bottom-left') {
+    originX = 'left';
+    originY = 'bottom';
+    left = width * margin;
+    top = height * (1 - margin);
+  } else if (position === 'bottom-right') {
+    originX = 'right';
+    originY = 'bottom';
+    left = width * (1 - margin);
+    top = height * (1 - margin);
   }
 
   if (position && position.x != null) {