view/paper-ext/Paper.SelectionGUI.js

  1. /*
  2.  * Copyright 2020 WICKLETS LLC
  3.  *
  4.  * This file is part of Wick Engine.
  5.  *
  6.  * Wick Engine is free software: you can redistribute it and/or modify
  7.  * it under the terms of the GNU General Public License as published by
  8.  * the Free Software Foundation, either version 3 of the License, or
  9.  * (at your option) any later version.
  10.  *
  11.  * Wick Engine is distributed in the hope that it will be useful,
  12.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14.  * GNU General Public License for more details.
  15.  *
  16.  * You should have received a copy of the GNU General Public License
  17.  * along with Wick Engine.  If not, see <https://www.gnu.org/licenses/>.
  18.  */
  20.  /**
  21.   * This is a utility class for creating a selection box GUI. this will give you:
  22.   *  - a bounding box
  23.   *  - handles for scaling
  24.   *  - hotspots for rotating
  25.   *  - ...and much more!
  26.   */
  28.  paper.SelectionGUI = class {
  29.     static get BOX_STROKE_WIDTH () {
  30.         return 1;
  31.     }
  33.     static get BOX_STROKE_COLOR () {
  34.         return 'rgba(100,150,255,1.0)';
  35.     }
  37.     static get HANDLE_RADIUS () {
  38.         return 5;
  39.     }
  41.     static get HANDLE_STROKE_WIDTH () {
  42.         return paper.SelectionGUI.BOX_STROKE_WIDTH;
  43.     }
  45.     static get HANDLE_STROKE_COLOR () {
  46.         return paper.SelectionGUI.BOX_STROKE_COLOR;
  47.     }
  49.     static get HANDLE_FILL_COLOR () {
  50.         return 'rgba(255,255,255,0.3)';
  51.     }
  53.     static get PIVOT_STROKE_WIDTH () {
  54.         return paper.SelectionGUI.BOX_STROKE_WIDTH;
  55.     }
  57.     static get PIVOT_FILL_COLOR () {
  58.         return 'rgba(255,255,255,0.5)';
  59.     }
  61.     static get PIVOT_STROKE_COLOR () {
  62.         return 'rgba(0,0,0,1)';
  63.     }
  65.     static get PIVOT_RADIUS () {
  66.         return paper.SelectionGUI.HANDLE_RADIUS;
  67.     }
  69.     static get ROTATION_HOTSPOT_RADIUS () {
  70.         return 20;
  71.     }
  73.     static get ROTATION_HOTSPOT_FILLCOLOR () {
  74.         return 'rgba(100,150,255,0.5)';
  76.         // don't show rotation hotspots:
  77.         //return 'rgba(255,0,0,0.0001)';
  78.     }
  80.     /**
  81.      * Create a selection GUI.
  82.      * @param {paper.Item[]} items - (required) the items to create a GUI around.
  83.      */
  84.     constructor (args) {
  85.         if(!args) args = {};
  86.         if(!args.items) args.items = [];
  87.         if(!args.rotation) args.rotation = 0;
  88.         if(!args.originX) args.originX = 0;
  89.         if(!args.originY) args.originY = 0;
  90.         if(!args.layer) args.layer = paper.project.activeLayer;
  92.         this.items = args.items;
  93.         this.rotation = args.rotation;
  94.         this.originX = args.originX;
  95.         this.originY = args.originY;
  97.         this.matrix = new paper.Matrix();
  98.         this.bounds = this._getBoundsOfItems(this.items);
  99.         this.matrix.translate(this.bounds.center.x, this.bounds.center.y);
  100.         this.matrix.rotate(this.rotation);
  101.         this.matrix.translate(new paper.Point(0,0).subtract(new paper.Point(this.bounds.center.x, this.bounds.center.y)));
  102.         this.bounds = this._getBoundsOfItems(this.items);
  104.         this.item = new paper.Group({
  105.             applyMatrix: true,
  106.         });
  107.         args.layer.addChild(this.item);
  109.         this.item.addChild(this._createBorder());
  111.         if(this.items.length > 1) {
  112.             this.item.addChildren(this._createItemOutlines());
  113.         }
  115.         this.item.addChild(this._createRotationHotspot('topLeft'));
  116.         this.item.addChild(this._createRotationHotspot('topRight'));
  117.         this.item.addChild(this._createRotationHotspot('bottomLeft'));
  118.         this.item.addChild(this._createRotationHotspot('bottomRight'));
  120.         this.item.addChild(this._createScalingHandle('topLeft'));
  121.         this.item.addChild(this._createScalingHandle('topRight'));
  122.         this.item.addChild(this._createScalingHandle('bottomLeft'));
  123.         this.item.addChild(this._createScalingHandle('bottomRight'));
  124.         this.item.addChild(this._createScalingHandle('topCenter'));
  125.         this.item.addChild(this._createScalingHandle('bottomCenter'));
  126.         this.item.addChild(this._createScalingHandle('leftCenter'));
  127.         this.item.addChild(this._createScalingHandle('rightCenter'));
  129.         this.item.addChild(this._createOriginPointHandle());
  131.         // Set a flag just so we don't accidentily treat these GUI elements as actual paths...
  132.         this.item.children.forEach(child => {
  133.             child.data.isSelectionBoxGUI = true;
  134.         });
  136.         this.item.transform(this.matrix);
  137.     }
  139.     /**
  140.      * Destroy the GUI.
  141.      */
  142.     destroy () {
  143.         this.item.remove();
  144.     }
  146.     /**
  147.      * Move a handle and use the new handle position to scale the selection.
  148.      * @param {string} handleName - the name of the handle to move
  149.      * @param {paper.Point} position - the position to move the handle to
  150.      */
  151.     moveHandleAndScale (handleName, position) {
  153.     }
  155.     /**
  156.      * Move a handle and use the new position of the handle to rotate the selection.
  157.      * @param {string} handleName - the name of the handle to move
  158.      * @param {paper.Point} position - the position to move the handle to
  159.      */
  160.     moveHandleAndRotate (handleName, position) {
  162.     }
  164.     _createBorder () {
  165.         var border = new paper.Path.Rectangle({
  166.             name: 'border',
  167.             from: this.bounds.topLeft,
  168.             to: this.bounds.bottomRight,
  169.             strokeWidth: paper.SelectionGUI.BOX_STROKE_WIDTH,
  170.             strokeColor: paper.SelectionGUI.BOX_STROKE_COLOR,
  171.             insert: false,
  172.         });
  173.         border.data.isBorder = true;
  174.         return border;
  175.     }
  177.     _createItemOutlines () {
  178.         return [];//TODO replace
  179.         return this.items.map(item => {
  180.             var outline = new paper.Path.Rectangle(item.bounds);
  181.             outline.fillColor = 'rgba(0,0,0,0)';
  182.             outline.strokeColor = paper.SelectionGUI.BOX_STROKE_COLOR;
  183.             outline.strokeWidth = paper.SelectionGUI.BOX_STROKE_WIDTH;
  184.             outline.data.isBorder = true;
  185.             return outline;
  186.         });
  187.     }
  189.     _createScalingHandle (edge) {
  190.         return this._createHandle({
  191.             name: edge,
  192.             type: 'scale',
  193.             center: this.bounds[edge],
  194.             fillColor: paper.SelectionGUI.HANDLE_FILL_COLOR,
  195.             strokeColor: paper.SelectionGUI.HANDLE_STROKE_COLOR,
  196.         });
  197.     }
  199.     _createOriginPointHandle () {
  200.         return this._createHandle({
  201.             name: 'pivot',
  202.             type: 'pivot',
  203.             center: new paper.Point(this.originX, this.originY),
  204.             fillColor: paper.SelectionGUI.PIVOT_FILL_COLOR,
  205.             strokeColor: paper.SelectionGUI.PIVOT_STROKE_COLOR,
  206.         });
  207.     }
  209.     _createHandle (args) {
  210.         if(!args) console.error('_createHandle: args is required');
  211.         if(!args.name) console.error('_createHandle: args.name is required');
  212.         if(!args.type) console.error('_createHandle: args.type is required');
  213.         if(!args.center) console.error('_createHandle: args.center is required');
  214.         if(!args.fillColor) console.error('_createHandle: args.fillColor is required');
  215.         if(!args.strokeColor) console.error('_createHandle: args.strokeColor is required');
  217.         var circle = new paper.Path.Circle({
  218.             center: args.center,
  219.             radius: paper.SelectionGUI.HANDLE_RADIUS / paper.view.zoom,
  220.             strokeWidth: paper.SelectionGUI.HANDLE_STROKE_WIDTH / paper.view.zoom,
  221.             strokeColor: args.strokeColor,
  222.             fillColor: args.fillColor,
  223.             insert: false,
  224.         });
  226.         // Transform the handle a bit so it doesn't get squished when the selection box is scaled.
  227.         circle.applyMatrix = false;
  228.         circle.data.handleType = args.type;
  229.         circle.data.handleEdge = args.name;
  231.         return circle;
  232.     }
  234.     _createRotationHotspot (cornerName) {
  235.         // Build the not-yet-rotated hotspot, which starts out like this:
  237.         //       |
  238.         //       +---+
  239.         //       |   |
  240.         // ---+--+   |---
  241.         //    |      |
  242.         //    +------+
  243.         //       |
  245.         var r = paper.SelectionGUI.ROTATION_HOTSPOT_RADIUS / paper.view.zoom;
  246.         var hotspot = new paper.Path([
  247.             new paper.Point(0,0),
  248.             new paper.Point(0, r),
  249.             new paper.Point(r, r),
  250.             new paper.Point(r, -r),
  251.             new paper.Point(-r, -r),
  252.             new paper.Point(-r, 0),
  253.         ]);
  254.         hotspot.fillColor = paper.SelectionGUI.ROTATION_HOTSPOT_FILLCOLOR;
  255.         hotspot.position.x = this.bounds[cornerName].x;
  256.         hotspot.position.y = this.bounds[cornerName].y;
  258.         // Orient the rotation handles in the correct direction, even if the selection is flipped
  259.         hotspot.rotate({
  260.             'topRight': 0,
  261.             'bottomRight': 90,
  262.             'bottomLeft': 180,
  263.             'topLeft': 270,
  264.         }[cornerName]);
  266.         // Some metadata.
  267.         hotspot.data.handleType = 'rotation';
  268.         hotspot.data.handleEdge = cornerName;
  270.         return hotspot;
  271.     }
  273.     /* helper function: calculate the bounds of the smallest rectangle that contains all given items. */
  274.     _getBoundsOfItems () {
  275.         if(this.items.length === 0)
  276.             return new paper.Rectangle();
  278.         var itemsForBoundsCalc = this.items.map(item => {
  279.             var clone = item.clone();
  280.             clone.transform(this.matrix);
  281.             clone.remove();
  282.             return clone;
  283.         });
  285.         var bounds = null;
  286.         itemsForBoundsCalc.forEach(item => {
  287.             bounds = bounds ? bounds.unite(item.bounds) : item.bounds;
  288.         });
  290.         return bounds;
  291.     }
  292. }
  294. paper.PaperScope.inject({
  295.     SelectionGUI: paper.SelectionGUI,
  296. });