Add a tool to generate markup for doing a cropped animation.

Author: Sepand Parhami

docs/tools/img-cropper/dragger.js

@@ -0,0 +1,228 @@
+const srcImgContainer = document.querySelector('.src-img-container');
+const selectionContainer = document.querySelector('.selection-container');
+const rect = document.querySelector('.selection-rect');
+const targetImg = document.querySelector('.target');
+const draggers = [0, 0, 0, 0].map(() => {
+  return createDragger(srcImgContainer);
+});
+
+let dragger = draggers[2];
+let mousedown = false;
+let x0 = 0
+let y0 = 0;
+let x1 = x0 + 96;
+let y1 = y0 + 96;
+let lastX = 0;
+let lastY = 0;
+
+/**
+ * @param {number} min 
+ * @param {number} value 
+ * @param {number} max 
+ * @return {number}
+ */
+function bound(min, value, max) {
+  return Math.max(min, Math.min(value, max));
+}
+
+/**
+ * Gets the Rect for the currently selected coordinates.
+ * @return {{
+ *   top: number,
+ *   bottom: number,
+ *   left: number,
+ *   right: number,
+ *   width: number,
+ *   height: number,
+ * }}
+ */
+function getSelectedRect() {
+  return {
+    top: Math.min(y0, y1),
+    bottom: Math.max(y0, y1),
+    left: Math.min(x0, x1),
+    right: Math.max(x0, x1),
+    width: Math.abs(x0 - x1),
+    height: Math.abs(y0 - y1),
+  };
+}
+
+/**
+ * Notifies interested parties that a new area was selected.
+ */
+function notifySelected() {
+  window.dispatchEvent(new CustomEvent('area-selected', {
+    detail: getSelectedRect(),
+  }));
+}
+
+/**
+ * Handles a mousedown on a dragger, setting it as the current dragger.
+ */
+function mousedownDragger() {
+  mousedown = true;
+
+  dragger = event.target;
+  event.stopPropagation();
+}
+
+/**
+ * Creates a dragger and appends it to the container.
+ * @param {!Element} container 
+ */
+function createDragger(container) {
+  const div = document.createElement('div');
+  div.className = 'dragger';
+  div.onmousedown = mousedownDragger;
+  container.appendChild(div);
+  return div;
+}
+
+/**
+ * Updates the UI (the draggers and the highlight rect) for the currently
+ * selected coordinates.
+ */
+function updateSelected() {
+  const {
+    top,
+    left,
+    width,
+    height,
+  } = getSelectedRect();
+  draggers[0].style.transform = `translate(${x0}px, ${y0}px)`;
+  draggers[1].style.transform = `translate(${x1}px, ${y0}px)`;
+  draggers[2].style.transform = `translate(${x1}px, ${y1}px)`;
+  draggers[3].style.transform = `translate(${x0}px, ${y1}px)`;
+  rect.style.left = `${left}px`;
+  rect.style.top = `${top}px`;
+  rect.style.width = `${width}px`;
+  rect.style.height = `${height}px`;
+}
+
+/**
+ * Updates the current coordinates based on the last mouse location and whether
+ * or not the shift key is pressed. When the shift key is pressed, a 1:1 aspect
+ * ration is forced.
+ * @param {boolean} shiftKey 
+ */
+function updateCoordinates(shiftKey) {
+  const draggerIndex = draggers.indexOf(dragger);
+  const initialRect = targetImg.getBoundingClientRect();
+  const startX = draggerIndex == 0 || draggerIndex == 3 ? x1 : x0;
+  const startY = draggerIndex == 0 || draggerIndex == 1 ? y1 : y0;
+  const x = lastX - initialRect.left;
+  const y = lastY - initialRect.top;
+  const targetRect = targetImg.getBoundingClientRect();
+  const boundX = bound(0, x, targetRect.width);
+  const boundY = bound(0, y, targetRect.height);
+
+  let xDelta = startX - boundX;
+  let yDelta = startY - boundY;
+
+  // Lock aspect ratio to 1:1.
+  if (shiftKey) {
+    const smallerSize = Math.min(Math.abs(xDelta), Math.abs(yDelta));
+    xDelta = bound(-smallerSize, xDelta, smallerSize);
+    yDelta = bound(-smallerSize, yDelta, smallerSize);
+  }
+
+  // Based on which dragger is moving, update the correct coordinates.
+  switch(draggerIndex) {
+    case 0:
+      x0 = x1 - xDelta;
+      y0 = y1 - yDelta;
+      break;
+    case 1:
+      x1 = x0 - xDelta;
+      y0 = y1 - yDelta;
+      break;
+    case 2:
+      x1 = x0 - xDelta;
+      y1 = y0 - yDelta;
+      break;
+    case 3:
+      x0 = x1 - xDelta;
+      y1 = y0 - yDelta;
+      break;
+  }
+
+  updateSelected();
+  event.preventDefault();
+}
+
+function resetSelection() {
+  x0 = 0
+  y0 = 0;
+  x1 = x0 + 96;
+  y1 = y0 + 96;
+
+  updateSelected();
+  notifySelected();
+}
+
+targetImg.addEventListener('load', () => {
+  resetSelection();
+});
+
+window.addEventListener('mousedown', event => {
+  const target = event.target.closest('.target');
+
+  if (!target) {
+    return;
+  }
+
+  const initialRect = targetImg.getBoundingClientRect();
+  const x = event.x - initialRect.left;
+  const y = event.y - initialRect.top;
+
+  dragger = draggers[2];
+  mousedown = true;
+  x0 = x;
+  y0 = y;
+  x1 = x0;
+  y1 = y0;
+
+  updateSelected();
+  event.preventDefault();
+});
+
+window.addEventListener('mouseup', event => {
+  if (!mousedown) {
+    return;
+  }
+
+  mousedown = false;
+  notifySelected();
+});
+
+
+window.addEventListener('keydown', event => {
+  if (!mousedown) {
+    return;
+  }
+
+  updateCoordinates(event.shiftKey);
+});
+
+window.addEventListener('keyup', event => {
+  if (!mousedown) {
+    return;
+  }
+
+  updateCoordinates(event.shiftKey);
+});
+
+window.addEventListener('mousemove', event => {
+  if (!mousedown) {
+    return;
+  }
+
+  lastX = event.x;
+  lastY = event.y;
+
+  updateCoordinates(event.shiftKey);
+});
+
+setTimeout(() => {
+  resetSelection();
+});

docs/tools/img-cropper/dropper.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const dropArea = document.querySelector('.drop');
+const imgContainer = document.querySelector('.src-img-container');
+const origImg = document.querySelector('.src-img-container img');
+
+function onDragEnter(e) {
+  dropArea.setAttribute('drag-over', '');
+
+  window.addEventListener('dragend', function onDragEnd(e) {
+    window.removeEventListener('dragend');
+    dropArea.removeAttribute('drag-over');
+  });
+
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function onDragOver(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function onDragLeave(e) {
+  if (e.target == dropArea || !dropArea.contains(e.target)) {
+    dropArea.removeAttribute('drag-over');
+  }
+
+
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+/**
+ * Handles a drop event, which could potentially be an image URL (dragged from
+ * a website) or a File (dragged from a Desktop).
+ * @param {!Event} e 
+ */
+function onDrop(e) {
+  dropArea.removeAttribute('drag-over');
+
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const url = dt.getData('URL');
+  if (url) {
+    updateSrc(url);
+  } else if (dt.files) {
+    [...dt.files]
+      .filter(f => f.type.startsWith('image/'))
+      .filter((f, i) => i == 0)
+      .forEach(f => {
+        readImg(f);
+      });
+  }
+
+  return false;
+}
+
+/**
+ * Updates the src of the image form selection.
+ * @param {string} src The src to use.
+ */
+function updateSrc(src) {
+  origImg.src = src;
+  window.dispatchEvent(new CustomEvent('img-change'));
+}
+
+/**
+ * Reads a file, then sets the src of the image using the contents as a data-url.
+ * @param {!File} file The file to read.
+ */
+function readImg(file) {
+  const reader = new FileReader();
+  reader.onload = function(){
+    const dataUrl = reader.result;
+    updateSrc(dataUrl);
+  };
+  reader.readAsDataURL(file);
+}
+
+dropArea.addEventListener('dragenter', onDragEnter, true);
+dropArea.addEventListener('dragover', onDragOver, true);
+dropArea.addEventListener('dragleave', onDragLeave, true);
+dropArea.addEventListener('drop', onDrop, true);