BookStack Code Mirror - bookstack/blob - resources/js/editor/node-views/ImageView.js

   1 import {positionHandlesAtCorners, removeHandles, renderHandlesAtCorners} from "./node-view-utils";
   2 import {NodeSelection} from "prosemirror-state";
   3
   4 class ImageView {
   5     /**
   6      * @param {PmNode} node
   7      * @param {PmView} view
   8      * @param {(function(): number)} getPos
   9      */
  10     constructor(node, view, getPos) {
  11         this.dom = document.createElement('div');
  12         this.dom.classList.add('ProseMirror-imagewrap');
  13
  14         this.image = document.createElement("img");
  15         this.image.src = node.attrs.src;
  16         this.image.alt = node.attrs.alt;
  17         if (node.attrs.width) {
  18             this.image.width = node.attrs.width;
  19         }
  20         if (node.attrs.height) {
  21             this.image.height = node.attrs.height;
  22         }
  23
  24         this.dom.appendChild(this.image);
  25
  26         this.handles = [];
  27         this.handleDragStartInfo = null;
  28         this.handleDragMoveDimensions = null;
  29         this.removeHandlesListener = this.removeHandlesListener.bind(this);
  30         this.handleMouseMove = this.handleMouseMove.bind(this);
  31         this.handleMouseUp = this.handleMouseUp.bind(this);
  32         this.handleMouseDown = this.handleMouseDown.bind(this);
  33
  34         this.dom.addEventListener("click", event => {
  35             this.showHandles();
  36         });
  37
  38         // Show handles if selected
  39         if (view.state.selection.node === node) {
  40             window.setTimeout(() => {
  41                 this.showHandles();
  42             }, 10);
  43         }
  44
  45         this.updateImageDimensions = function (width, height) {
  46             const attrs = Object.assign({}, node.attrs, {width, height});
  47             let tr = view.state.tr;
  48             const position = getPos();
  49             tr = tr.setNodeMarkup(position, null, attrs)
  50             tr = tr.setSelection(NodeSelection.create(tr.doc, position));
  51             view.dispatch(tr);
  52         };
  53
  54     }
  55
  56     showHandles() {
  57         if (this.handles.length === 0) {
  58             this.image.dataset.showHandles = 'true';
  59             window.addEventListener('click', this.removeHandlesListener);
  60             this.handles = renderHandlesAtCorners(this.image);
  61             for (const handle of this.handles) {
  62                 handle.addEventListener('mousedown', this.handleMouseDown);
  63             }
  64         }
  65     }
  66
  67     removeHandlesListener(event) {
  68         if (!this.dom.contains(event.target)) {
  69             this.removeHandles();
  70             this.handles = [];
  71         }
  72     }
  73
  74     removeHandles() {
  75         removeHandles(this.handles);
  76         window.removeEventListener('click', this.removeHandlesListener);
  77         delete this.image.dataset.showHandles;
  78     }
  79
  80     stopEvent() {
  81         return false;
  82     }
  83
  84     /**
  85      * @param {MouseEvent} event
  86      */
  87     handleMouseDown(event) {
  88         event.preventDefault();
  89
  90         const imageBounds = this.image.getBoundingClientRect();
  91         const handle = event.target;
  92         this.handleDragStartInfo = {
  93             x: event.screenX,
  94             y: event.screenY,
  95             ratio: imageBounds.width / imageBounds.height,
  96             bounds: imageBounds,
  97             handleX: handle.dataset.x,
  98             handleY: handle.dataset.y,
  99         };
 100
 101         this.createDragDummy(imageBounds);
 102         this.dom.appendChild(this.dragDummy);
 103
 104         window.addEventListener('mousemove', this.handleMouseMove);
 105         window.addEventListener('mouseup', this.handleMouseUp);
 106     }
 107
 108     /**
 109      * @param {DOMRect} bounds
 110      */
 111     createDragDummy(bounds) {
 112         this.dragDummy = this.image.cloneNode();
 113         this.dragDummy.style.opacity = '0.5';
 114         this.dragDummy.classList.add('ProseMirror-dragdummy');
 115         this.dragDummy.style.width = bounds.width + 'px';
 116         this.dragDummy.style.height = bounds.height + 'px';
 117     }
 118
 119     /**
 120      * @param {MouseEvent} event
 121      */
 122     handleMouseUp(event) {
 123         if (this.handleDragMoveDimensions) {
 124             const {width, height} = this.handleDragMoveDimensions;
 125             this.updateImageDimensions(String(width), String(height));
 126         }
 127
 128         window.removeEventListener('mousemove', this.handleMouseMove);
 129         window.removeEventListener('mouseup', this.handleMouseUp);
 130         this.handleDragStartInfo = null;
 131         this.handleDragMoveDimensions = null;
 132         this.dragDummy.remove();
 133         positionHandlesAtCorners(this.image, this.handles);
 134     }
 135
 136     /**
 137      * @param {MouseEvent} event
 138      */
 139     handleMouseMove(event) {
 140         const originalBounds = this.handleDragStartInfo.bounds;
 141
 142         // Calculate change in x & y, flip amounts depending on handle
 143         let xChange = event.screenX - this.handleDragStartInfo.x;
 144         if (this.handleDragStartInfo.handleX === 'left') {
 145             xChange = -xChange;
 146         }
 147         let yChange = event.screenY - this.handleDragStartInfo.y;
 148         if (this.handleDragStartInfo.handleY === 'top') {
 149             yChange = -yChange;
 150         }
 151
 152         // Prevent images going too small or into negative bounds
 153         if (originalBounds.width + xChange < 10) {
 154             xChange = -originalBounds.width + 10;
 155         }
 156         if (originalBounds.height + yChange < 10) {
 157             yChange = -originalBounds.height + 10;
 158         }
 159
 160         // Choose the larger dimension change and align the other to keep
 161         // image aspect ratio, aligning growth/reduction direction
 162         if (Math.abs(xChange) > Math.abs(yChange)) {
 163             yChange = Math.floor(xChange * this.handleDragStartInfo.ratio);
 164             if (yChange * xChange < 0) {
 165                 yChange = -yChange;
 166             }
 167         } else {
 168             xChange = Math.floor(yChange / this.handleDragStartInfo.ratio);
 169             if (xChange * yChange < 0) {
 170                 xChange = -xChange;
 171             }
 172         }
 173
 174         // Calculate our new sizes
 175         const newWidth = originalBounds.width + xChange;
 176         const newHeight = originalBounds.height + yChange;
 177
 178         // Apply the sizes and positioning to our ghost dummy
 179         this.dragDummy.style.width = `${newWidth}px`;
 180         if (this.handleDragStartInfo.handleX === 'left') {
 181             this.dragDummy.style.left = `${-xChange}px`;
 182         }
 183         this.dragDummy.style.height = `${newHeight}px`;
 184         if (this.handleDragStartInfo.handleY === 'top') {
 185             this.dragDummy.style.top = `${-yChange}px`;
 186         }
 187
 188         // Update corners and track dimension changes for later application
 189         positionHandlesAtCorners(this.dragDummy, this.handles);
 190         this.handleDragMoveDimensions = {
 191             width: newWidth,
 192             height: newHeight,
 193         }
 194     }
 195 }
 196
 197 export default ImageView;