From 91a21b5e7626c5b7ed79986658f47e14ff4488c2 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 3 Aug 2023 01:27:46 +0200 Subject: [PATCH] profile, thumbnail croppr size limit --- ui/index.html | 5 +- ui/media/css/croppr.css | 59 +- ui/media/js/auto-save.js | 1 + ui/media/js/croppr.js | 1190 ++++++++++++++++++++++++++++++++++++- ui/media/js/main.js | 92 ++- ui/media/js/parameters.js | 11 + 6 files changed, 1342 insertions(+), 16 deletions(-) diff --git a/ui/index.html b/ui/index.html index 508b4637..2e158780 100644 --- a/ui/index.html +++ b/ui/index.html @@ -698,12 +698,11 @@
- +

Use the thumbnail for …

-
diff --git a/ui/media/css/croppr.css b/ui/media/css/croppr.css index adcbc579..19eb2f7b 100644 --- a/ui/media/css/croppr.css +++ b/ui/media/css/croppr.css @@ -1 +1,58 @@ -.croppr-container *{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.croppr-container img{vertical-align:middle;max-width:100%}.croppr{position:relative;display:inline-block}.croppr-handle,.croppr-imageClipped,.croppr-overlay,.croppr-region{position:absolute;top:0}.croppr-overlay{background:rgba(0,0,0,.5);right:0;bottom:0;left:0;z-index:1;cursor:crosshair}.croppr-region{border:1px dashed rgba(0,0,0,.5);z-index:3;cursor:move}.croppr-imageClipped{right:0;bottom:0;left:0;z-index:2;pointer-events:none}.croppr-handle{border:1px solid #000;background-color:#fff;width:10px;height:10px;z-index:4} \ No newline at end of file +.croppr-container * { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.croppr-container img { + vertical-align: middle; + max-width: 100%; +} + +.croppr { + position: relative; + display: inline-block; +} + +.croppr-overlay { + background: rgba(0,0,0,0.5); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + cursor: crosshair; +} + +.croppr-region { + border: 1px dashed rgba(0, 0, 0, 0.5); + position: absolute; + z-index: 3; + cursor: move; + top: 0; +} + +.croppr-imageClipped { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2; + pointer-events: none; +} + +.croppr-handle { + border: 1px solid black; + background-color: white; + width: 10px; + height: 10px; + position: absolute; + z-index: 4; + top: 0; +} \ No newline at end of file diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js index 670fee0d..ebdf4927 100644 --- a/ui/media/js/auto-save.js +++ b/ui/media/js/auto-save.js @@ -45,6 +45,7 @@ const SETTINGS_IDS_LIST = [ "sound_toggle", "vram_usage_level", "confirm_dangerous_actions", + "profileName", "metadata_output_format", "auto_save_settings", "apply_color_correction", diff --git a/ui/media/js/croppr.js b/ui/media/js/croppr.js index 59eb4439..f5c3f3b8 100755 --- a/ui/media/js/croppr.js +++ b/ui/media/js/croppr.js @@ -1 +1,1189 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Croppr=e()}(this,function(){"use strict";function t(t){t.addEventListener("touchstart",e),t.addEventListener("touchend",e),t.addEventListener("touchmove",e)}function e(t){t.preventDefault();var e=t.changedTouches[0],i={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"};e.target.dispatchEvent(new MouseEvent(i[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}function i(t,e){return Number(Math.round(t+"e"+e)+"e-"+e)}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=this.width()*t,n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],e=this.width()*t[0],i=this.height()*t[1];return[e,i]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],e=this.x1+this.width()*t[0],i=this.y1+this.height()*t[1];return[e,i]}},{key:"constrainToRatio",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height";if(null!==t){this.width(),this.height();switch(i){case"height":this.resize(this.width(),this.width()*t,e);break;case"width":this.resize(1*this.height()/t,this.height(),e);break;default:this.resize(this.width(),this.width()*t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(i),o=h(n,2),s=o[0],r=o[1],a=s,l=r,u=t-s,d=e-r,c=-2*i[0]+1,v=-2*i[1]+1,p=null,m=null;switch(c){case-1:p=a;break;case 0:p=2*Math.min(a,u);break;case 1:p=u}switch(v){case-1:m=l;break;case 0:m=2*Math.min(l,d);break;case 1:m=d}if(this.width()>p){var f=p/this.width();this.scale(f,i)}if(this.height()>m){var g=m/this.height();this.scale(g,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null;if(s&&(s>1?(t=1*e/s,n*=s):s<1&&(e=t*s,i=1*n/s)),t&&this.width()>t){var r=t,a=null===s?this.height():e;this.resize(r,a,o)}if(e&&this.height()>e){var h=null===s?this.width():t,l=e;this.resize(h,l,o)}if(i&&this.width()2&&void 0!==arguments[2]&&arguments[2];if(n(this,e),this.options=e.parseOptions(i||{}),!t.nodeName&&(t=document.querySelector(t),null==t))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._targetEl=t,s||(0===t.width||0===t.height?t.onload=function(){o.initialize()}:this.initialize())}return o(e,[{key:"initialize",value:function(){this.createDOM(this._targetEl),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}},{key:"createDOM",value:function(e){this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,t(this.containerEl),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,u=(h^l)+l+l+4,d=-2*u+8,c=0;co.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,a=this.activeHandle.originY,h=this.activeHandle.handle,l=1===h.constraints[0],d=1===h.constraints[1],c=1===h.constraints[2],v=1===h.constraints[3],p=(v||d)&&(l||c),m=v||d?r:this.box.x1,f=v||d?r:this.box.x2,g=l||c?a:this.box.y1,E=l||c?a:this.box.y2;m=v?i:m,f=d?i:f,g=l?n:g,E=c?n:E;var w=!1,y=!1;if((v||d)&&(w=v?i>r:ia:nC.y1+z*C.width()||na.width&&this.box.move(a.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>a.height&&this.box.move(null,a.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.options.returnMode),"real"==t){var e=this.imageEl.naturalWidth,n=this.imageEl.naturalHeight,o=e/this.imageEl.offsetWidth,s=n/this.imageEl.offsetHeight;return{x:Math.round(this.box.x1*o),y:Math.round(this.box.y1*s),width:Math.round(this.box.width()*o),height:Math.round(this.box.height()*s)}}if("ratio"==t){var r=this.imageEl.offsetWidth,a=this.imageEl.offsetHeight;return{x:i(this.box.x1/r,3),y:i(this.box.y1/a,3),width:i(this.box.width()/r,3),height:i(this.box.height()/a,3)}}if("raw"==t)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}}}],[{key:"parseOptions",value:function(t){var e={aspectRatio:null,maxSize:{width:null,height:null},minSize:{width:null,height:null},startSize:{width:100,height:100,unit:"%"},returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null},i=null;void 0!==t.aspectRatio&&("number"==typeof t.aspectRatio?i=t.aspectRatio:t.aspectRatio instanceof Array&&(i=t.aspectRatio[1]/t.aspectRatio[0]));var n=null;void 0!==t.maxSize&&null!==t.maxSize&&(n={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px"});var o=null;void 0!==t.minSize&&null!==t.minSize&&(o={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px"});var s=null;void 0!==t.startSize&&null!==t.startSize&&(s={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%"});var r=null;"function"==typeof t.onInitialize&&(r=t.onInitialize);var a=null;"function"==typeof t.onCropStart&&(a=t.onCropStart);var h=null;"function"==typeof t.onCropEnd&&(h=t.onCropEnd);var l=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=t.onUpdate),"function"==typeof t.onCropMove&&(l=t.onCropMove);var u=null;if(void 0!==t.returnMode){var d=t.returnMode.toLowerCase();if(["real","ratio","raw"].indexOf(d)===-1)throw"Invalid return mode.";u=d}var c=function(t){for(var e=t.offsetWidth,i=t.offsetHeight,n=["maxSize","minSize","startSize"],o=0;o2&&void 0!==arguments[2]&&arguments[2];return n(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,i,o))}return r(e,t),o(e,[{key:"getValue",value:function(t){return s(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getValue",this).call(this,t)}},{key:"moveTo",value:function(t,e){return this.box.move(t,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[.5,.5];return this.box.resize(t,e,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[.5,.5];return this.box.scale(t,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),e}(c);return v}); +/** + * Croppr.js + * https://github.com/jamesssooi/Croppr.js + * + * A JavaScript image cropper that's lightweight, awesome, and has + * zero dependencies. + * + * (C) 2017 James Ooi. Released under the MIT License. + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.Croppr = factory()); +}(this, (function () { 'use strict'; + +(function () { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; + } + if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function () { + callback(currTime + timeToCall); + }, timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { + clearTimeout(id); + }; +})(); +(function () { + if (typeof window.CustomEvent === "function") return false; + function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); + return evt; + } + CustomEvent.prototype = window.Event.prototype; + window.CustomEvent = CustomEvent; +})(); +(function (window) { + try { + new CustomEvent('test'); + return false; + } catch (e) {} + function MouseEvent(eventType, params) { + params = params || { bubbles: false, cancelable: false }; + var mouseEvent = document.createEvent('MouseEvent'); + mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + return mouseEvent; + } + MouseEvent.prototype = Event.prototype; + window.MouseEvent = MouseEvent; +})(window); + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + + + + + + + +var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } +}; + +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; + + + + + + + + + + + +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; + + + + + +var slicedToArray = function () { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"]) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + return function (arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); + } + }; +}(); + +var Handle = +/** + * Creates a new Handle instance. + * @constructor + * @param {Array} position The x and y ratio position of the handle + * within the crop region. Accepts a value between 0 to 1 in the order + * of [X, Y]. + * @param {Array} constraints Define the side of the crop region that + * is to be affected by this handle. Accepts a value of 0 or 1 in the + * order of [TOP, RIGHT, BOTTOM, LEFT]. + * @param {String} cursor The CSS cursor of this handle. + * @param {Element} eventBus The element to dispatch events to. + */ +function Handle(position, constraints, cursor, eventBus) { + classCallCheck(this, Handle); + var self = this; + this.position = position; + this.constraints = constraints; + this.cursor = cursor; + this.eventBus = eventBus; + this.el = document.createElement('div'); + this.el.className = 'croppr-handle'; + this.el.style.cursor = cursor; + this.el.addEventListener('mousedown', onMouseDown); + function onMouseDown(e) { + e.stopPropagation(); + document.addEventListener('mouseup', onMouseUp); + document.addEventListener('mousemove', onMouseMove); + self.eventBus.dispatchEvent(new CustomEvent('handlestart', { + detail: { handle: self } + })); + } + function onMouseUp(e) { + e.stopPropagation(); + document.removeEventListener('mouseup', onMouseUp); + document.removeEventListener('mousemove', onMouseMove); + self.eventBus.dispatchEvent(new CustomEvent('handleend', { + detail: { handle: self } + })); + } + function onMouseMove(e) { + e.stopPropagation(); + self.eventBus.dispatchEvent(new CustomEvent('handlemove', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } +}; + +var Box = function () { + /** + * Creates a new Box instance. + * @constructor + * @param {Number} x1 + * @param {Number} y1 + * @param {Number} x2 + * @param {Number} y2 + */ + function Box(x1, y1, x2, y2) { + classCallCheck(this, Box); + this.x1 = x1; + this.y1 = y1; + this.x2 = x2; + this.y2 = y2; + } + /** + * Sets the new dimensions of the box. + * @param {Number} x1 + * @param {Number} y1 + * @param {Number} x2 + * @param {Number} y2 + */ + createClass(Box, [{ + key: 'set', + value: function set$$1() { + var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; + var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; + this.x1 = x1 == null ? this.x1 : x1; + this.y1 = y1 == null ? this.y1 : y1; + this.x2 = x2 == null ? this.x2 : x2; + this.y2 = y2 == null ? this.y2 : y2; + return this; + } + /** + * Calculates the width of the box. + * @returns {Number} + */ + }, { + key: 'width', + value: function width() { + return Math.abs(this.x2 - this.x1); + } + /** + * Calculates the height of the box. + * @returns {Number} + */ + }, { + key: 'height', + value: function height() { + return Math.abs(this.y2 - this.y1); + } + /** + * Resizes the box to a new size. + * @param {Number} newWidth + * @param {Number} newHeight + * @param {Array} [origin] The origin point to resize from. + * Defaults to [0, 0] (top left). + */ + }, { + key: 'resize', + value: function resize(newWidth, newHeight) { + var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0]; + var fromX = this.x1 + this.width() * origin[0]; + var fromY = this.y1 + this.height() * origin[1]; + this.x1 = fromX - newWidth * origin[0]; + this.y1 = fromY - newHeight * origin[1]; + this.x2 = this.x1 + newWidth; + this.y2 = this.y1 + newHeight; + return this; + } + /** + * Scale the box by a factor. + * @param {Number} factor + * @param {Array} [origin] The origin point to resize from. + * Defaults to [0, 0] (top left). + */ + }, { + key: 'scale', + value: function scale(factor) { + var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0]; + var newWidth = this.width() * factor; + var newHeight = this.height() * factor; + this.resize(newWidth, newHeight, origin); + return this; + } + }, { + key: 'move', + value: function move() { + var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + var width = this.width(); + var height = this.height(); + x = x === null ? this.x1 : x; + y = y === null ? this.y1 : y; + this.x1 = x; + this.y1 = y; + this.x2 = x + width; + this.y2 = y + height; + return this; + } + /** + * Get relative x and y coordinates of a given point within the box. + * @param {Array} point The x and y ratio position within the box. + * @returns {Array} The x and y coordinates [x, y]. + */ + }, { + key: 'getRelativePoint', + value: function getRelativePoint() { + var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0]; + var x = this.width() * point[0]; + var y = this.height() * point[1]; + return [x, y]; + } + /** + * Get absolute x and y coordinates of a given point within the box. + * @param {Array} point The x and y ratio position within the box. + * @returns {Array} The x and y coordinates [x, y]. + */ + }, { + key: 'getAbsolutePoint', + value: function getAbsolutePoint() { + var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0]; + var x = this.x1 + this.width() * point[0]; + var y = this.y1 + this.height() * point[1]; + return [x, y]; + } + /** + * Constrain the box to a fixed ratio. + * @param {Number} ratio + * @param {Array} [origin] The origin point to resize from. + * Defaults to [0, 0] (top left). + * @param {String} [grow] The axis to grow to maintain the ratio. + * Defaults to 'height'. + */ + }, { + key: 'constrainToRatio', + value: function constrainToRatio(ratio) { + var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0]; + var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height'; + if (ratio === null) { + return; + } + var width = this.width(); + var height = this.height(); + switch (grow) { + case 'height': + this.resize(this.width(), this.width() * ratio, origin); + break; + case 'width': + this.resize(this.height() * 1 / ratio, this.height(), origin); + break; + default: + this.resize(this.width(), this.width() * ratio, origin); + } + return this; + } + /** + * Constrain the box within a boundary. + * @param {Number} boundaryWidth + * @param {Number} boundaryHeight + * @param {Array} [origin] The origin point to resize from. + * Defaults to [0, 0] (top left). + */ + }, { + key: 'constrainToBoundary', + value: function constrainToBoundary(boundaryWidth, boundaryHeight) { + var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0]; + var _getAbsolutePoint = this.getAbsolutePoint(origin), + _getAbsolutePoint2 = slicedToArray(_getAbsolutePoint, 2), + originX = _getAbsolutePoint2[0], + originY = _getAbsolutePoint2[1]; + var maxIfLeft = originX; + var maxIfTop = originY; + var maxIfRight = boundaryWidth - originX; + var maxIfBottom = boundaryHeight - originY; + var directionX = -2 * origin[0] + 1; + var directionY = -2 * origin[1] + 1; + var maxWidth = null, + maxHeight = null; + switch (directionX) { + case -1: + maxWidth = maxIfLeft;break; + case 0: + maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;break; + case +1: + maxWidth = maxIfRight;break; + } + switch (directionY) { + case -1: + maxHeight = maxIfTop;break; + case 0: + maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;break; + case +1: + maxHeight = maxIfBottom;break; + } + if (this.width() > maxWidth) { + var factor = maxWidth / this.width(); + this.scale(factor, origin); + } + if (this.height() > maxHeight) { + var _factor = maxHeight / this.height(); + this.scale(_factor, origin); + } + return this; + } + /** + * Constrain the box to a maximum/minimum size. + * @param {Number} [maxWidth] + * @param {Number} [maxHeight] + * @param {Number} [minWidth] + * @param {Number} [minHeight] + * @param {Array} [origin] The origin point to resize from. + * Defaults to [0, 0] (top left). + * @param {Number} [ratio] Ratio to maintain. + */ + }, { + key: 'constrainToSize', + value: function constrainToSize() { + var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; + var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; + var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0]; + var ratio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null; + if (ratio) { + if (ratio > 1) { + maxWidth = maxHeight * 1 / ratio; + minHeight = minHeight * ratio; + } else if (ratio < 1) { + maxHeight = maxWidth * ratio; + minWidth = minHeight * 1 / ratio; + } + } + if (maxWidth && this.width() > maxWidth) { + var newWidth = maxWidth, + newHeight = ratio === null ? this.height() : maxHeight; + this.resize(newWidth, newHeight, origin); + } + if (maxHeight && this.height() > maxHeight) { + var _newWidth = ratio === null ? this.width() : maxWidth, + _newHeight = maxHeight; + this.resize(_newWidth, _newHeight, origin); + } + if (minWidth && this.width() < minWidth) { + var _newWidth2 = minWidth, + _newHeight2 = ratio === null ? this.height() : minHeight; + this.resize(_newWidth2, _newHeight2, origin); + } + if (minHeight && this.height() < minHeight) { + var _newWidth3 = ratio === null ? this.width() : minWidth, + _newHeight3 = minHeight; + this.resize(_newWidth3, _newHeight3, origin); + } + return this; + } + }]); + return Box; +}(); + +/** + * Binds an element's touch events to be simulated as mouse events. + * @param {Element} element + */ +function enableTouch(element) { + element.addEventListener('touchstart', simulateMouseEvent); + element.addEventListener('touchend', simulateMouseEvent); + element.addEventListener('touchmove', simulateMouseEvent); +} +/** + * Translates a touch event to a mouse event. + * @param {Event} e + */ +function simulateMouseEvent(e) { + e.preventDefault(); + var touch = e.changedTouches[0]; + var eventMap = { + 'touchstart': 'mousedown', + 'touchmove': 'mousemove', + 'touchend': 'mouseup' + }; + touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], { + bubbles: true, + cancelable: true, + view: window, + clientX: touch.clientX, + clientY: touch.clientY, + screenX: touch.screenX, + screenY: touch.screenY + })); +} + +/** + * Define a list of handles to create. + * + * @property {Array} position - The x and y ratio position of the handle within + * the crop region. Accepts a value between 0 to 1 in the order of [X, Y]. + * @property {Array} constraints - Define the side of the crop region that is to + * be affected by this handle. Accepts a value of 0 or 1 in the order of + * [TOP, RIGHT, BOTTOM, LEFT]. + * @property {String} cursor - The CSS cursor of this handle. + */ +var HANDLES = [{ position: [0.0, 0.0], constraints: [1, 0, 0, 1], cursor: 'nw-resize' }, { position: [0.5, 0.0], constraints: [1, 0, 0, 0], cursor: 'n-resize' }, { position: [1.0, 0.0], constraints: [1, 1, 0, 0], cursor: 'ne-resize' }, { position: [1.0, 0.5], constraints: [0, 1, 0, 0], cursor: 'e-resize' }, { position: [1.0, 1.0], constraints: [0, 1, 1, 0], cursor: 'se-resize' }, { position: [0.5, 1.0], constraints: [0, 0, 1, 0], cursor: 's-resize' }, { position: [0.0, 1.0], constraints: [0, 0, 1, 1], cursor: 'sw-resize' }, { position: [0.0, 0.5], constraints: [0, 0, 0, 1], cursor: 'w-resize' }]; +var CropprCore = function () { + function CropprCore(element, options) { + var _this = this; + var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + classCallCheck(this, CropprCore); + this.options = CropprCore.parseOptions(options || {}); + if (!element.nodeName) { + element = document.querySelector(element); + if (element == null) { + throw 'Unable to find element.'; + } + } + if (!element.getAttribute('src')) { + throw 'Image src not provided.'; + } + this._initialized = false; + this._restore = { + parent: element.parentNode, + element: element + }; + if (!deferred) { + if (element.width === 0 || element.height === 0) { + element.onload = function () { + _this.initialize(element); + }; + } else { + this.initialize(element); + } + } + } + createClass(CropprCore, [{ + key: 'initialize', + value: function initialize(element) { + this.createDOM(element); + this.options.convertToPixels(this.cropperEl); + this.attachHandlerEvents(); + this.attachRegionEvents(); + this.attachOverlayEvents(); + this.box = this.initializeBox(this.options); + this.redraw(); + this._initialized = true; + if (this.options.onInitialize !== null) { + this.options.onInitialize(this); + } + } + }, { + key: 'createDOM', + value: function createDOM(targetEl) { + this.containerEl = document.createElement('div'); + this.containerEl.className = 'croppr-container'; + this.eventBus = this.containerEl; + enableTouch(this.containerEl); + this.cropperEl = document.createElement('div'); + this.cropperEl.className = 'croppr'; + this.imageEl = document.createElement('img'); + this.imageEl.setAttribute('src', targetEl.getAttribute('src')); + this.imageEl.setAttribute('alt', targetEl.getAttribute('alt')); + this.imageEl.className = 'croppr-image'; + this.imageClippedEl = this.imageEl.cloneNode(); + this.imageClippedEl.className = 'croppr-imageClipped'; + this.regionEl = document.createElement('div'); + this.regionEl.className = 'croppr-region'; + this.overlayEl = document.createElement('div'); + this.overlayEl.className = 'croppr-overlay'; + var handleContainerEl = document.createElement('div'); + handleContainerEl.className = 'croppr-handleContainer'; + this.handles = []; + for (var i = 0; i < HANDLES.length; i++) { + var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus); + this.handles.push(handle); + handleContainerEl.appendChild(handle.el); + } + this.cropperEl.appendChild(this.imageEl); + this.cropperEl.appendChild(this.imageClippedEl); + this.cropperEl.appendChild(this.regionEl); + this.cropperEl.appendChild(this.overlayEl); + this.cropperEl.appendChild(handleContainerEl); + this.containerEl.appendChild(this.cropperEl); + targetEl.parentElement.replaceChild(this.containerEl, targetEl); + } + /** + * Changes the image src. + * @param {String} src + */ + }, { + key: 'setImage', + value: function setImage(src) { + var _this2 = this; + this.imageEl.onload = function () { + _this2.box = _this2.initializeBox(_this2.options); + _this2.redraw(); + }; + this.imageEl.src = src; + this.imageClippedEl.src = src; + return this; + } + }, { + key: 'destroy', + value: function destroy() { + this._restore.parent.replaceChild(this._restore.element, this.containerEl); + } + /** + * Create a new box region with a set of options. + * @param {Object} opts The options. + * @returns {Box} + */ + }, { + key: 'initializeBox', + value: function initializeBox(opts) { + var width = opts.startSize.width; + var height = opts.startSize.height; + var box = new Box(0, 0, width, height); + box.constrainToRatio(opts.aspectRatio, [0.5, 0.5]); + var min = opts.minSize; + var max = opts.maxSize; + box.constrainToSize(max.width, max.height, min.width, min.height, [0.5, 0.5], opts.aspectRatio); + var parentWidth = this.cropperEl.offsetWidth; + var parentHeight = this.cropperEl.offsetHeight; + box.constrainToBoundary(parentWidth, parentHeight, [0.5, 0.5]); + var x = this.cropperEl.offsetWidth / 2 - box.width() / 2; + var y = this.cropperEl.offsetHeight / 2 - box.height() / 2; + box.move(x, y); + return box; + } + }, { + key: 'redraw', + value: function redraw() { + var _this3 = this; + var width = Math.round(this.box.width()), + height = Math.round(this.box.height()), + x1 = Math.round(this.box.x1), + y1 = Math.round(this.box.y1), + x2 = Math.round(this.box.x2), + y2 = Math.round(this.box.y2); + window.requestAnimationFrame(function () { + _this3.regionEl.style.transform = 'translate(' + x1 + 'px, ' + y1 + 'px)'; + _this3.regionEl.style.width = width + 'px'; + _this3.regionEl.style.height = height + 'px'; + _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)'; + var center = _this3.box.getAbsolutePoint([.5, .5]); + var xSign = center[0] - _this3.cropperEl.offsetWidth / 2 >> 31; + var ySign = center[1] - _this3.cropperEl.offsetHeight / 2 >> 31; + var quadrant = (xSign ^ ySign) + ySign + ySign + 4; + var foregroundHandleIndex = -2 * quadrant + 8; + for (var i = 0; i < _this3.handles.length; i++) { + var handle = _this3.handles[i]; + var handleWidth = handle.el.offsetWidth; + var handleHeight = handle.el.offsetHeight; + var left = x1 + width * handle.position[0] - handleWidth / 2; + var top = y1 + height * handle.position[1] - handleHeight / 2; + handle.el.style.transform = 'translate(' + Math.round(left) + 'px, ' + Math.round(top) + 'px)'; + handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4; + } + }); + } + }, { + key: 'attachHandlerEvents', + value: function attachHandlerEvents() { + var eventBus = this.eventBus; + eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this)); + eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this)); + eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this)); + } + }, { + key: 'attachRegionEvents', + value: function attachRegionEvents() { + var eventBus = this.eventBus; + var self = this; + this.regionEl.addEventListener('mousedown', onMouseDown); + eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this)); + eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this)); + eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this)); + function onMouseDown(e) { + e.stopPropagation(); + document.addEventListener('mouseup', onMouseUp); + document.addEventListener('mousemove', onMouseMove); + eventBus.dispatchEvent(new CustomEvent('regionstart', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } + function onMouseMove(e) { + e.stopPropagation(); + eventBus.dispatchEvent(new CustomEvent('regionmove', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } + function onMouseUp(e) { + e.stopPropagation(); + document.removeEventListener('mouseup', onMouseUp); + document.removeEventListener('mousemove', onMouseMove); + eventBus.dispatchEvent(new CustomEvent('regionend', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } + } + }, { + key: 'attachOverlayEvents', + value: function attachOverlayEvents() { + var SOUTHEAST_HANDLE_IDX = 4; + var self = this; + var tmpBox = null; + this.overlayEl.addEventListener('mousedown', onMouseDown); + function onMouseDown(e) { + e.stopPropagation(); + document.addEventListener('mouseup', onMouseUp); + document.addEventListener('mousemove', onMouseMove); + var container = self.cropperEl.getBoundingClientRect(); + var mouseX = e.clientX - container.left; + var mouseY = e.clientY - container.top; + tmpBox = self.box; + self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1); + self.eventBus.dispatchEvent(new CustomEvent('handlestart', { + detail: { handle: self.handles[SOUTHEAST_HANDLE_IDX] } + })); + } + function onMouseMove(e) { + e.stopPropagation(); + self.eventBus.dispatchEvent(new CustomEvent('handlemove', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } + function onMouseUp(e) { + e.stopPropagation(); + document.removeEventListener('mouseup', onMouseUp); + document.removeEventListener('mousemove', onMouseMove); + if (self.box.width() === 1 && self.box.height() === 1) { + self.box = tmpBox; + return; + } + self.eventBus.dispatchEvent(new CustomEvent('handleend', { + detail: { mouseX: e.clientX, mouseY: e.clientY } + })); + } + } + }, { + key: 'onHandleMoveStart', + value: function onHandleMoveStart(e) { + var handle = e.detail.handle; + var originPoint = [1 - handle.position[0], 1 - handle.position[1]]; + var _box$getAbsolutePoint = this.box.getAbsolutePoint(originPoint), + _box$getAbsolutePoint2 = slicedToArray(_box$getAbsolutePoint, 2), + originX = _box$getAbsolutePoint2[0], + originY = _box$getAbsolutePoint2[1]; + this.activeHandle = { handle: handle, originPoint: originPoint, originX: originX, originY: originY }; + if (this.options.onCropStart !== null) { + this.options.onCropStart(this.getValue()); + } + } + }, { + key: 'onHandleMoveMoving', + value: function onHandleMoveMoving(e) { + var _e$detail = e.detail, + mouseX = _e$detail.mouseX, + mouseY = _e$detail.mouseY; + var container = this.cropperEl.getBoundingClientRect(); + mouseX = mouseX - container.left; + mouseY = mouseY - container.top; + if (mouseX < 0) { + mouseX = 0; + } else if (mouseX > container.width) { + mouseX = container.width; + } + if (mouseY < 0) { + mouseY = 0; + } else if (mouseY > container.height) { + mouseY = container.height; + } + var origin = this.activeHandle.originPoint.slice(); + var originX = this.activeHandle.originX; + var originY = this.activeHandle.originY; + var handle = this.activeHandle.handle; + var TOP_MOVABLE = handle.constraints[0] === 1; + var RIGHT_MOVABLE = handle.constraints[1] === 1; + var BOTTOM_MOVABLE = handle.constraints[2] === 1; + var LEFT_MOVABLE = handle.constraints[3] === 1; + var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE); + var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1; + var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2; + var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1; + var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2; + x1 = LEFT_MOVABLE ? mouseX : x1; + x2 = RIGHT_MOVABLE ? mouseX : x2; + y1 = TOP_MOVABLE ? mouseY : y1; + y2 = BOTTOM_MOVABLE ? mouseY : y2; + var isFlippedX = false, + isFlippedY = false; + if (LEFT_MOVABLE || RIGHT_MOVABLE) { + isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX; + } + if (TOP_MOVABLE || BOTTOM_MOVABLE) { + isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY; + } + if (isFlippedX) { + var tmp = x1;x1 = x2;x2 = tmp; + origin[0] = 1 - origin[0]; + } + if (isFlippedY) { + var _tmp = y1;y1 = y2;y2 = _tmp; + origin[1] = 1 - origin[1]; + } + var box = new Box(x1, y1, x2, y2); + if (this.options.aspectRatio) { + var ratio = this.options.aspectRatio; + var isVerticalMovement = false; + if (MULTI_AXIS) { + isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width(); + } else if (TOP_MOVABLE || BOTTOM_MOVABLE) { + isVerticalMovement = true; + } + var ratioMode = isVerticalMovement ? 'width' : 'height'; + box.constrainToRatio(ratio, origin, ratioMode); + } + var min = this.options.minSize; + var max = this.options.maxSize; + box.constrainToSize(max.width, max.height, min.width, min.height, origin, this.options.aspectRatio); + var parentWidth = this.cropperEl.offsetWidth; + var parentHeight = this.cropperEl.offsetHeight; + box.constrainToBoundary(parentWidth, parentHeight, origin); + this.box = box; + this.redraw(); + if (this.options.onCropMove !== null) { + this.options.onCropMove(this.getValue()); + } + } + }, { + key: 'onHandleMoveEnd', + value: function onHandleMoveEnd(e) { + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + } + }, { + key: 'onRegionMoveStart', + value: function onRegionMoveStart(e) { + var _e$detail2 = e.detail, + mouseX = _e$detail2.mouseX, + mouseY = _e$detail2.mouseY; + var container = this.cropperEl.getBoundingClientRect(); + mouseX = mouseX - container.left; + mouseY = mouseY - container.top; + this.currentMove = { + offsetX: mouseX - this.box.x1, + offsetY: mouseY - this.box.y1 + }; + if (this.options.onCropStart !== null) { + this.options.onCropStart(this.getValue()); + } + } + }, { + key: 'onRegionMoveMoving', + value: function onRegionMoveMoving(e) { + var _e$detail3 = e.detail, + mouseX = _e$detail3.mouseX, + mouseY = _e$detail3.mouseY; + var _currentMove = this.currentMove, + offsetX = _currentMove.offsetX, + offsetY = _currentMove.offsetY; + var container = this.cropperEl.getBoundingClientRect(); + mouseX = mouseX - container.left; + mouseY = mouseY - container.top; + this.box.move(mouseX - offsetX, mouseY - offsetY); + if (this.box.x1 < 0) { + this.box.move(0, null); + } + if (this.box.x2 > container.width) { + this.box.move(container.width - this.box.width(), null); + } + if (this.box.y1 < 0) { + this.box.move(null, 0); + } + if (this.box.y2 > container.height) { + this.box.move(null, container.height - this.box.height()); + } + this.redraw(); + if (this.options.onCropMove !== null) { + this.options.onCropMove(this.getValue()); + } + } + }, { + key: 'onRegionMoveEnd', + value: function onRegionMoveEnd(e) { + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + } + }, { + key: 'getValue', + value: function getValue() { + var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + if (mode === null) { + mode = this.options.returnMode; + } + if (mode == 'real') { + var actualWidth = this.imageEl.naturalWidth; + var actualHeight = this.imageEl.naturalHeight; + var _imageEl$getBoundingC = this.imageEl.getBoundingClientRect(), + elementWidth = _imageEl$getBoundingC.width, + elementHeight = _imageEl$getBoundingC.height; + var factorX = actualWidth / elementWidth; + var factorY = actualHeight / elementHeight; + return { + x: Math.round(this.box.x1 * factorX), + y: Math.round(this.box.y1 * factorY), + width: Math.round(this.box.width() * factorX), + height: Math.round(this.box.height() * factorY) + }; + } else if (mode == 'ratio') { + var _imageEl$getBoundingC2 = this.imageEl.getBoundingClientRect(), + _elementWidth = _imageEl$getBoundingC2.width, + _elementHeight = _imageEl$getBoundingC2.height; + return { + x: round(this.box.x1 / _elementWidth, 3), + y: round(this.box.y1 / _elementHeight, 3), + width: round(this.box.width() / _elementWidth, 3), + height: round(this.box.height() / _elementHeight, 3) + }; + } else if (mode == 'raw') { + return { + x: Math.round(this.box.x1), + y: Math.round(this.box.y1), + width: Math.round(this.box.width()), + height: Math.round(this.box.height()) + }; + } + } + }], [{ + key: 'parseOptions', + value: function parseOptions(opts) { + var defaults$$1 = { + aspectRatio: null, + maxSize: { width: null, height: null }, + minSize: { width: null, height: null }, + startSize: { width: 100, height: 100, unit: '%' }, + returnMode: 'real', + onInitialize: null, + onCropStart: null, + onCropMove: null, + onCropEnd: null + }; + var aspectRatio = null; + if (opts.aspectRatio !== undefined) { + if (typeof opts.aspectRatio === 'number') { + aspectRatio = opts.aspectRatio; + } else if (opts.aspectRatio instanceof Array) { + aspectRatio = opts.aspectRatio[1] / opts.aspectRatio[0]; + } + } + var maxSize = null; + if (opts.maxSize !== undefined && opts.maxSize !== null) { + maxSize = { + width: opts.maxSize[0] || null, + height: opts.maxSize[1] || null, + unit: opts.maxSize[2] || 'px' + }; + } + var minSize = null; + if (opts.minSize !== undefined && opts.minSize !== null) { + minSize = { + width: opts.minSize[0] || null, + height: opts.minSize[1] || null, + unit: opts.minSize[2] || 'px' + }; + } + var startSize = null; + if (opts.startSize !== undefined && opts.startSize !== null) { + startSize = { + width: opts.startSize[0] || null, + height: opts.startSize[1] || null, + unit: opts.startSize[2] || '%' + }; + } + var onInitialize = null; + if (typeof opts.onInitialize === 'function') { + onInitialize = opts.onInitialize; + } + var onCropStart = null; + if (typeof opts.onCropStart === 'function') { + onCropStart = opts.onCropStart; + } + var onCropEnd = null; + if (typeof opts.onCropEnd === 'function') { + onCropEnd = opts.onCropEnd; + } + var onCropMove = null; + if (typeof opts.onUpdate === 'function') { + console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.'); + onCropMove = opts.onUpdate; + } + if (typeof opts.onCropMove === 'function') { + onCropMove = opts.onCropMove; + } + var returnMode = null; + if (opts.returnMode !== undefined) { + var s = opts.returnMode.toLowerCase(); + if (['real', 'ratio', 'raw'].indexOf(s) === -1) { + throw "Invalid return mode."; + } + returnMode = s; + } + var convertToPixels = function convertToPixels(container) { + var width = container.offsetWidth; + var height = container.offsetHeight; + var sizeKeys = ['maxSize', 'minSize', 'startSize']; + for (var i = 0; i < sizeKeys.length; i++) { + var key = sizeKeys[i]; + if (this[key] !== null) { + if (this[key].unit == '%') { + if (this[key].width !== null) { + this[key].width = this[key].width / 100 * width; + } + if (this[key].height !== null) { + this[key].height = this[key].height / 100 * height; + } + } + delete this[key].unit; + } + } + }; + var defaultValue = function defaultValue(v, d) { + return v !== null ? v : d; + }; + return { + aspectRatio: defaultValue(aspectRatio, defaults$$1.aspectRatio), + maxSize: defaultValue(maxSize, defaults$$1.maxSize), + minSize: defaultValue(minSize, defaults$$1.minSize), + startSize: defaultValue(startSize, defaults$$1.startSize), + returnMode: defaultValue(returnMode, defaults$$1.returnMode), + onInitialize: defaultValue(onInitialize, defaults$$1.onInitialize), + onCropStart: defaultValue(onCropStart, defaults$$1.onCropStart), + onCropMove: defaultValue(onCropMove, defaults$$1.onCropMove), + onCropEnd: defaultValue(onCropEnd, defaults$$1.onCropEnd), + convertToPixels: convertToPixels + }; + } + }]); + return CropprCore; +}(); +function round(value, decimals) { + return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals); +} + +var Croppr$1 = function (_CropprCore) { + inherits(Croppr, _CropprCore); + /** + * @constructor + * Calls the CropprCore's constructor. + */ + function Croppr(element, options) { + var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + classCallCheck(this, Croppr); + return possibleConstructorReturn(this, (Croppr.__proto__ || Object.getPrototypeOf(Croppr)).call(this, element, options, _deferred)); + } + /** + * Gets the value of the crop region. + * @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or + * 'raw'. + */ + createClass(Croppr, [{ + key: 'getValue', + value: function getValue(mode) { + return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'getValue', this).call(this, mode); + } + /** + * Changes the image src. + * @param {String} src + */ + }, { + key: 'setImage', + value: function setImage(src) { + return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'setImage', this).call(this, src); + } + }, { + key: 'destroy', + value: function destroy() { + return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'destroy', this).call(this); + } + /** + * Moves the crop region to a specified coordinate. + * @param {Number} x + * @param {Number} y + */ + }, { + key: 'moveTo', + value: function moveTo(x, y) { + this.box.move(x, y); + this.redraw(); + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + return this; + } + /** + * Resizes the crop region to a specified width and height. + * @param {Number} width + * @param {Number} height + * @param {Array} origin The origin point to resize from. + * Defaults to [0.5, 0.5] (center). + */ + }, { + key: 'resizeTo', + value: function resizeTo(width, height) { + var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [.5, .5]; + this.box.resize(width, height, origin); + this.redraw(); + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + return this; + } + /** + * Scale the crop region by a factor. + * @param {Number} factor + * @param {Array} origin The origin point to resize from. + * Defaults to [0.5, 0.5] (center). + */ + }, { + key: 'scaleBy', + value: function scaleBy(factor) { + var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [.5, .5]; + this.box.scale(factor, origin); + this.redraw(); + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + return this; + } + }, { + key: 'reset', + value: function reset() { + this.box = this.initializeBox(this.options); + this.redraw(); + if (this.options.onCropEnd !== null) { + this.options.onCropEnd(this.getValue()); + } + return this; + } + }]); + return Croppr; +}(CropprCore); + +return Croppr$1; + +}))); diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 6a5c92fc..e4461d40 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -171,7 +171,8 @@ let saveAllJSONToggle = document.querySelector("#json_toggle") let saveAllFoldersOption = document.querySelector("#download-add-folders") let splashScreenPopup = document.querySelector("#splash-screen") let useAsThumbDialog = document.querySelector("#use-as-thumb-dialog") -let useAsThumbImage = document.querySelector("#use-as-thumb-image") +let useAsThumbImageContainer = document.querySelector("#use-as-thumb-img-container") +let useAsThumbSelect = document.querySelector("#use-as-thumb-select") let maskSetting = document.querySelector("#enable_mask") @@ -678,20 +679,88 @@ function onMakeSimilarClick(req, img) { createTask(newTaskRequest) } +function getAllModelNames(type) { + function f(tree) { + if (tree == undefined) { + return [] + } + let result=[]; + tree.forEach( e => { + if (typeof(e) == "object") { + result = result.concat( f(e[1])) + } else { + result.push(e) + } + }); + return result + } + return f(modelsOptions[type]) +} + function onUseAsThumbnailClick(req, img) { console.log(req) console.log(img) + let scale = 1 + let targetWidth = img.naturalWidth + let targetHeight = img.naturalHeight + + let resize = false + + if ( typeof(onUseAsThumbnailClick.croppr) == 'undefined' ) { + console.log("INIT CROPPR") + onUseAsThumbnailClick.croppr = new Croppr("#use-as-thumb-image", { aspectRatio: 1, minSize: [384,384,'px'], startSize: [512, 512, 'px'], returnMode:"real" }) + } + + if (img.naturalWidth > img.naturalHeight) { + if (img.naturalWidth > 768) { + scale = 768 / img.naturalWidth + targetWidth = 768 + targetHeight = (img.naturalHeight*scale)>>>0 + resize = true + } + } else { + if (img.naturalHeight > 768) { + scale = 768 / img.naturalHeight + targetHeight = 768 + targetWidth = (img.naturalWidth*scale)>>>0 + resize = true + } + } + if (resize) { + console.log("Resize",targetWidth,targetHeight) + const canvas = document.createElement('canvas') + canvas.width = targetWidth + canvas.height = targetHeight + const ctx = canvas.getContext('2d') + ctx.drawImage(img, 0, 0, targetWidth, targetHeight) + + onUseAsThumbnailClick.croppr.options.minSize = {width: 384*scale>>>0, height: 384*scale>>>0} + onUseAsThumbnailClick.croppr.options.startSize = {width: 512*scale>>>0, height: 512*scale>>>0} + + onUseAsThumbnailClick.croppr.setImage(canvas.toDataURL('image/png')) + } else { + onUseAsThumbnailClick.croppr.setImage(img.src) + } + + let embeddings = getAllModelNames("embeddings").filter( e => req.prompt.includes(e) || req.negative_prompt.includes(e) ) + let LORA = [] + + if ("use_lora_model" in req) { + LORA=req.use_lora_model + } + + let optgroup = document.createElement("optgroup") + optgroup.label = "Embeddings" + optgroup.replaceChildren(...embeddings.map(e => { + let option = document.createElement("option") + option.innerText = e + return option + })) + + console.log("##OptGroup",optgroup) + useAsThumbSelect.replaceChildren(optgroup) useAsThumbDialog.showModal() - useAsThumbImage.src = img.src - img.width = img.height = 512 - - var croppr = new Croppr(useAsThumbImage, { aspectRatio: 1, minSize: [384,384,'px'], startSize: [100, 100, '%'], returnMode:"real" }) - - useAsThumbDialog.addEventListener("blur", () => { - console.log("blur") - croppr.destroy - }) // fetch(img.src) // .then(response => response.blob()) @@ -2522,13 +2591,14 @@ function updateEmbeddingsList(filter = "") { let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x}))) console.log(embIcon) + let profileName = profileNameField.value model?.forEach((m) => { if (typeof m == "string") { let token=m.toLowerCase() if (token.search(filter) != -1) { let img = '/media/images/noimg.png' if (token in embIcon) { - img = `/bucket/embeddings/${embIcon[token]}` + img = `/bucket/${profileName}/embeddings/${embIcon[token]}` } if (iconlist.length==0) { img="" diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js index 19892c94..caab8817 100644 --- a/ui/media/js/parameters.js +++ b/ui/media/js/parameters.js @@ -185,6 +185,16 @@ var PARAMETERS = [ icon: "fa-check-double", default: true, }, + { + id: "profileName", + type: ParameterType.custom, + label: "Profile Name", + note: "Name of the profile for model manager settings, e.g. thumbnails for embeddings. Use this to have different settings for different users.", + render: (parameter) => { + return `` + }, + icon: "fa-user-gear", + }, { id: "listen_to_network", type: ParameterType.checkbox, @@ -389,6 +399,7 @@ let useBetaChannelField = document.querySelector("#use_beta_channel") let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start") let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions") let testDiffusers = document.querySelector("#test_diffusers") +let profileNameField = document.querySelector("#profileName") let saveSettingsBtn = document.querySelector("#save-system-settings-btn")