mirror of https://github.com/OCA/web.git
web_widget_darkroom: Add o2m DarkroomJS widget
Dave Lasley
parent
97b6b48a69
commit
112eba3e12
|
|
@ -0,0 +1,95 @@
|
||||||
|
.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
|
||||||
|
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
|
||||||
|
:alt: License: LGPL-3
|
||||||
|
|
||||||
|
======================
|
||||||
|
Odoo DarkroomJS Widget
|
||||||
|
======================
|
||||||
|
|
||||||
|
This module provides a `DarkroomJS`_ web widget for use with images fields.
|
||||||
|
|
||||||
|
.. _DarkroomJS: https://github.com/MattKetmo/darkroomjs
|
||||||
|
|
||||||
|
This widget will allow you to perform the following actions on images:
|
||||||
|
|
||||||
|
* Zoom
|
||||||
|
* Rotate
|
||||||
|
* Crop
|
||||||
|
* Step back in history client-side (before save)
|
||||||
|
|
||||||
|
|
||||||
|
Usage
|
||||||
|
=====
|
||||||
|
|
||||||
|
To use this module, you need to:
|
||||||
|
|
||||||
|
* Install web_widget_darkroom
|
||||||
|
* Add the to any One2many image relation by using the `darkroom` widget. Options can be passed through to Darkroom using the `options` key::
|
||||||
|
|
||||||
|
<field name="image_id" widget="darkroom"
|
||||||
|
options="{'minWidth': 100}" />
|
||||||
|
|
||||||
|
The Odoo DarkroomJS widget passes options directly through to Darkroom, which are copied from the source below::
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
defaults: {
|
||||||
|
// Canvas properties (dimension, ratio, color)
|
||||||
|
minWidth: null,
|
||||||
|
minHeight: null,
|
||||||
|
maxWidth: null,
|
||||||
|
maxHeight: null,
|
||||||
|
ratio: null,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
|
||||||
|
// Plugins options
|
||||||
|
plugins: {},
|
||||||
|
|
||||||
|
// Post-initialisation callback
|
||||||
|
initialize: function() { /* noop */ }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Known Issues/Roadmap
|
||||||
|
====================
|
||||||
|
|
||||||
|
* Plugins are not able to be added without inheriting, then redefining the widget in the registry due to JS inheritance.
|
||||||
|
** This is not scalable because there would need to be an explicit dependency chain in order to avoid registry overwrite.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Bug Tracker
|
||||||
|
===========
|
||||||
|
|
||||||
|
Bugs are tracked on `GitHub Issues
|
||||||
|
<https://github.com/OCA/{project_repo}/issues>`_. In case of trouble, please
|
||||||
|
check there if your issue has already been reported. If you spotted it first,
|
||||||
|
help us smashing it by providing a detailed and welcomed feedback.
|
||||||
|
|
||||||
|
Credits
|
||||||
|
=======
|
||||||
|
|
||||||
|
Images
|
||||||
|
------
|
||||||
|
|
||||||
|
* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
|
||||||
|
|
||||||
|
Contributors
|
||||||
|
------------
|
||||||
|
|
||||||
|
* Dave Lasley <dave@laslabs.com>
|
||||||
|
|
||||||
|
Maintainer
|
||||||
|
----------
|
||||||
|
|
||||||
|
.. image:: https://odoo-community.org/logo.png
|
||||||
|
:alt: Odoo Community Association
|
||||||
|
:target: https://odoo-community.org
|
||||||
|
|
||||||
|
This module is maintained by the OCA.
|
||||||
|
|
||||||
|
OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||||
|
mission is to support the collaborative development of Odoo features and
|
||||||
|
promote its widespread use.
|
||||||
|
|
||||||
|
To contribute to this module, please visit https://odoo-community.org.
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
# Copyright 2016 LasLabs Inc.
|
||||||
|
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
# -*- coding: utf-8 -*-
|
||||||
|
# Copyright 2016 LasLabs Inc.
|
||||||
|
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
|
||||||
|
{
|
||||||
|
"name": "Web Darkroom Image Widget",
|
||||||
|
"summary": "Widget provides a dynamic, editable canvas for use on any"
|
||||||
|
" One2many image field in backend form views.",
|
||||||
|
"version": "9.0.1.0.1",
|
||||||
|
"category": "Web",
|
||||||
|
"website": "https://laslabs.com/",
|
||||||
|
"author": "LasLabs, Odoo Community Association (OCA)",
|
||||||
|
"license": "LGPL-3",
|
||||||
|
"application": False,
|
||||||
|
"installable": True,
|
||||||
|
"depends": [
|
||||||
|
"web",
|
||||||
|
],
|
||||||
|
"data": [
|
||||||
|
'views/assets.xml',
|
||||||
|
],
|
||||||
|
'qweb': [
|
||||||
|
"static/src/xml/field_templates.xml",
|
||||||
|
],
|
||||||
|
'demo': [
|
||||||
|
'demo/res_users.xml',
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Copyright 2016 LasLabs Inc.
|
||||||
|
License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
-->
|
||||||
|
|
||||||
|
<openerp>
|
||||||
|
<data>
|
||||||
|
<record id="view_users_form" model="ir.ui.view">
|
||||||
|
<field name="name">res.users.form.darkroom</field>
|
||||||
|
<field name="model">res.users</field>
|
||||||
|
<field name="inherit_id" ref="base.view_users_form" />
|
||||||
|
<field name="arch" type="xml">
|
||||||
|
<xpath expr="//notebook" position="inside">
|
||||||
|
<page string="Darkroom">
|
||||||
|
<field name="image" widget="darkroom" />
|
||||||
|
</page>
|
||||||
|
</xpath>
|
||||||
|
</field>
|
||||||
|
</record>
|
||||||
|
</data>
|
||||||
|
</openerp>
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,9 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = LF
|
||||||
|
indent_style = space
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
/.sass-cache/
|
||||||
|
/bower_components/
|
||||||
|
/build/
|
||||||
|
/node_modules/
|
||||||
|
/docs/
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
# Change Log
|
||||||
|
|
||||||
|
All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
|
## Unreleased
|
||||||
|
|
||||||
|
- Add type "button" to avoid html5 submit validation (#24)
|
||||||
|
|
||||||
|
## 2.0.0 (2015-08-01)
|
||||||
|
|
||||||
|
- Use of **Gulp** for the build process
|
||||||
|
- Replace the webfont by **SVG symbols** (which are direclty included in the compiled javascript)
|
||||||
|
- Ability to change **canvas ratio**
|
||||||
|
- Original image is kept and changes are done on a clone
|
||||||
|
|
||||||
|
## 1.0.x (2014)
|
||||||
|
|
||||||
|
Initial release.
|
||||||
|
|
||||||
|
- Create canvas with FabricJS from an image element
|
||||||
|
- Plugins: Crop, History, Rotate, Save
|
||||||
|
- Build process via Grunt
|
||||||
|
- Build webfont from SVG files to display the icons
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
Copyright (c) 2013 Matthieu Moquet
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||||
|
subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
# DarkroomJS
|
||||||
|
|
||||||
|
DarkroomJS is a JavaScript library which provides basic image editing tools in
|
||||||
|
your browser, such as **rotation** or **cropping**. It is based on the awesome
|
||||||
|
[FabricJS](http://fabricjs.com/) library to handle images in HTML5 canvas.
|
||||||
|
|
||||||
|
## Demo
|
||||||
|
|
||||||
|
Try the online demo at [http://mattketmo.github.io/darkroomjs](http://mattketmo.github.io/darkroomjs/)
|
||||||
|
|
||||||
|
The library is currently *work in progress*.
|
||||||
|
I know there is some bug especially when resizing the crop zone.
|
||||||
|
Feel free to fork the project or report issues on GitHub.
|
||||||
|
All ideas are also welcome.
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
- Install [Node](http://nodejs.org/) & `npm`.
|
||||||
|
- Run `npm install` to build dependencies.
|
||||||
|
- Run `npm start` to build the assets and start the demo webserver.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Simply instanciate a new Darkroom object with a reference to the image element:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="some-image.jpg" id="target">
|
||||||
|
<script>
|
||||||
|
new Darkroom('#target');
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also pass some options:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
new Darkroom('#target', {
|
||||||
|
// Canvas initialization size
|
||||||
|
minWidth: 100,
|
||||||
|
minHeight: 100,
|
||||||
|
maxWidth: 500,
|
||||||
|
maxHeight: 500,
|
||||||
|
|
||||||
|
// Plugins options
|
||||||
|
plugins: {
|
||||||
|
crop: {
|
||||||
|
minHeight: 50,
|
||||||
|
minWidth: 50,
|
||||||
|
ratio: 1
|
||||||
|
},
|
||||||
|
save: false // disable plugin
|
||||||
|
},
|
||||||
|
|
||||||
|
// Post initialization method
|
||||||
|
initialize: function() {
|
||||||
|
// Active crop selection
|
||||||
|
this.plugins['crop'].requireFocus();
|
||||||
|
|
||||||
|
// Add custom listener
|
||||||
|
this.addEventListener('core:transformation', function() { /* ... */ });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Why?
|
||||||
|
|
||||||
|
It's easy to get a javascript script to crop an image in a web page.
|
||||||
|
But if your want more features like rotation or brightness adjustment, then you
|
||||||
|
will have to do it yourself. No more jQuery plugins here.
|
||||||
|
It only uses the power of HTML5 canvas to make what ever you want with your image.
|
||||||
|
|
||||||
|
## The concept
|
||||||
|
|
||||||
|
The library is designed to be easily extendable. The core script only transforms
|
||||||
|
the target image to a canvas with a FabricJS instance, and creates an empty toolbar.
|
||||||
|
All the features are then implemented in separate plugins.
|
||||||
|
|
||||||
|
Each plugin is responsible for creating its own functionality.
|
||||||
|
Buttons can easily be added to the toolbar and binded with those features.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Run `npm develop` to build and watch the files while developing.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
DarkroomJS is released under the MIT License. See the [bundled LICENSE file](LICENSE)
|
||||||
|
for details.
|
||||||
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "darkroom",
|
||||||
|
"description": "Extensible image editing tool via HTML canvas",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"homepage": "http://mattketmo.github.io/darkroomjs/",
|
||||||
|
"authors": [
|
||||||
|
"Matthieu Moquet <matthieu@moquet.net>"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"fabric": "~1.4.*"
|
||||||
|
},
|
||||||
|
"main": [
|
||||||
|
"build/darkroom.css",
|
||||||
|
"build/darkroom.js"
|
||||||
|
],
|
||||||
|
"moduleType": [
|
||||||
|
"globals"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"image",
|
||||||
|
"canvas",
|
||||||
|
"crop"
|
||||||
|
],
|
||||||
|
"ignore": [
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Update gh-pages branch
|
||||||
|
git branch -D gh-pages
|
||||||
|
git checkout -b gh-pages HEAD
|
||||||
|
|
||||||
|
# Build assets
|
||||||
|
rm -rf build
|
||||||
|
gulp build --prod
|
||||||
|
|
||||||
|
# Put build into demo folder
|
||||||
|
rm demo/build
|
||||||
|
cp -r build demo/build
|
||||||
|
|
||||||
|
# Commit
|
||||||
|
git add -f demo
|
||||||
|
git commit -m "Build GH pages"
|
||||||
|
|
||||||
|
# Push & reset
|
||||||
|
git push origin `git subtree split --prefix demo HEAD`:gh-pages --force
|
||||||
|
git checkout -
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
var concat = require('gulp-concat')
|
||||||
|
var connect = require('gulp-connect')
|
||||||
|
var gulp = require('gulp')
|
||||||
|
var gutil = require('gulp-util')
|
||||||
|
var htmlJsStr = require('js-string-escape')
|
||||||
|
var inject = require('gulp-inject')
|
||||||
|
var plumber = require('gulp-plumber')
|
||||||
|
var rimraf = require('rimraf')
|
||||||
|
var sass = require('gulp-sass')
|
||||||
|
var sourcemaps = require('gulp-sourcemaps')
|
||||||
|
var spawn = require("child_process").spawn
|
||||||
|
var streamqueue = require('streamqueue')
|
||||||
|
var svgmin = require('gulp-svgmin')
|
||||||
|
var svgstore = require('gulp-svgstore')
|
||||||
|
var uglify = require('gulp-uglify')
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
//
|
||||||
|
var srcDir = './lib';
|
||||||
|
var distDir = './build';
|
||||||
|
var isDebug = !gutil.env.prod;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Default
|
||||||
|
//
|
||||||
|
gulp.task('default', ['build'], function() {
|
||||||
|
gulp.start('watch');
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Clean
|
||||||
|
//
|
||||||
|
gulp.task('clean', function(cb) {
|
||||||
|
rimraf(distDir, cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Build
|
||||||
|
//
|
||||||
|
gulp.task('build', ['clean'], function() {
|
||||||
|
gulp.start('scripts', 'styles');
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Watch
|
||||||
|
//
|
||||||
|
gulp.task('watch', ['server'], function() {
|
||||||
|
gulp.watch(srcDir + '/js/**/*.js', ['scripts']);
|
||||||
|
|
||||||
|
gulp.watch(srcDir + '/css/**/*.scss', ['styles']);
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Server
|
||||||
|
//
|
||||||
|
gulp.task('server', function() {
|
||||||
|
connect.server({
|
||||||
|
root: './demo',
|
||||||
|
port: 2222,
|
||||||
|
livereload: false
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Javascript
|
||||||
|
//
|
||||||
|
gulp.task('scripts', function () {
|
||||||
|
var svgs = gulp.src(srcDir + '/icons/*.svg')
|
||||||
|
.pipe(svgmin())
|
||||||
|
.pipe(svgstore({inlineSvg: true}))
|
||||||
|
// .pipe(gulp.dest(distDir));
|
||||||
|
|
||||||
|
function fileContents (filePath, file) {
|
||||||
|
return file.contents.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
var files = [
|
||||||
|
srcDir + '/js/core/bootstrap.js',
|
||||||
|
srcDir + '/js/core/darkroom.js',
|
||||||
|
srcDir + '/js/core/*.js',
|
||||||
|
// srcDir + '/js/plugins/*.js',
|
||||||
|
srcDir + '/js/plugins/darkroom.history.js',
|
||||||
|
srcDir + '/js/plugins/darkroom.rotate.js',
|
||||||
|
srcDir + '/js/plugins/darkroom.crop.js',
|
||||||
|
srcDir + '/js/plugins/darkroom.save.js',
|
||||||
|
];
|
||||||
|
|
||||||
|
gulp.src(files)
|
||||||
|
.pipe(plumber())
|
||||||
|
.pipe(isDebug ? sourcemaps.init() : gutil.noop())
|
||||||
|
.pipe(concat('darkroom.js', {newLine: ';'}))
|
||||||
|
.pipe(inject(svgs, { transform: fileContents }))
|
||||||
|
.pipe(isDebug ? gutil.noop() : uglify({mangle: false}))
|
||||||
|
.pipe(isDebug ? sourcemaps.write() : gutil.noop())
|
||||||
|
.pipe(gulp.dest(distDir))
|
||||||
|
})
|
||||||
|
|
||||||
|
//
|
||||||
|
// Stylesheet
|
||||||
|
//
|
||||||
|
gulp.task('styles', function () {
|
||||||
|
gulp.src(srcDir + '/css/darkroom.scss')
|
||||||
|
.pipe(plumber())
|
||||||
|
.pipe(isDebug ? sourcemaps.init() : gutil.noop())
|
||||||
|
.pipe(sass({
|
||||||
|
outputStyle: isDebug ? 'nested' : 'compressed'
|
||||||
|
}))
|
||||||
|
.pipe(isDebug ? sourcemaps.write() : gutil.noop())
|
||||||
|
.pipe(gulp.dest(distDir))
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
.darkroom-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkroom-image-container {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.darkroom-image-container img {
|
||||||
|
// display: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
//
|
||||||
|
// Toolbar
|
||||||
|
//
|
||||||
|
.darkroom-toolbar {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -45px;
|
||||||
|
left: 0;
|
||||||
|
background: #444;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
z-index: 99;
|
||||||
|
border-radius: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 5px;
|
||||||
|
|
||||||
|
// Triangle
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -7px;
|
||||||
|
left: 20px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-top: 7px solid #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button Group
|
||||||
|
//
|
||||||
|
.darkroom-button-group {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
// border-right: 1px solid #777;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Button
|
||||||
|
//
|
||||||
|
.darkroom-button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
padding: 2px 0 0 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled .darkroom-icon {
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
&:disabled:hover {
|
||||||
|
cursor: default;
|
||||||
|
/*cursor: not-allowed;*/
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
&.darkroom-button-active .darkroom-icon {
|
||||||
|
fill: #33b5e5;
|
||||||
|
}
|
||||||
|
&.darkroom-button-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.darkroom-button-success .darkroom-icon {
|
||||||
|
fill: #99cc00;
|
||||||
|
}
|
||||||
|
&.darkroom-button-warning .darkroom-icon {
|
||||||
|
fill: #FFBB33;
|
||||||
|
}
|
||||||
|
&.darkroom-button-danger .darkroom-icon {
|
||||||
|
fill: #FF4444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Icon
|
||||||
|
//
|
||||||
|
.darkroom-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'layout';
|
||||||
|
@import 'toolbar';
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 272 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M17 15h2v-8c0-1.1-.9-2-2-2h-8v2h8v8zm-10 2v-16h-2v4h-4v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2h-16z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 247 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 208 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M18.4 10.6c-1.85-1.61-4.25-2.6-6.9-2.6-4.65 0-8.58 3.03-9.96 7.22l2.36.78c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88l-3.62 3.62h9v-9l-3.6 3.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 303 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M7.11 8.53l-1.41-1.42c-.9 1.16-1.46 2.5-1.63 3.89h2.02c.14-.87.49-1.72 1.02-2.47zm-1.02 4.47h-2.02c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61v-2.03c-.87-.15-1.71-.49-2.46-1.03l-1.44 1.45zm5.9-14.25v-3.07l-4.55 4.55 4.55 4.45v-3.91c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 528 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M15.55 5.55l-4.55-4.55v3.07c-3.94.49-7 3.85-7 7.93s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91v3.91l4.55-4.45zm4.38 5.45c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zm-6.93 6.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 523 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M17 3h-12c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-12l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10h-10v-4h10v4z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path d="M0 0h24v24h-24z" fill="none"/>
|
||||||
|
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6l-3.6-3.6v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78c-1.39-4.19-5.32-7.22-9.97-7.22z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 303 B |
|
|
@ -0,0 +1,14 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Inject SVG icons into the DOM
|
||||||
|
var element = document.createElement('div');
|
||||||
|
element.id = 'darkroom-icons';
|
||||||
|
element.style.height = 0;
|
||||||
|
element.style.width = 0;
|
||||||
|
element.style.position = 'absolute';
|
||||||
|
element.style.visibility = 'hidden';
|
||||||
|
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||||
|
document.body.appendChild(element);
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,354 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
window.Darkroom = Darkroom;
|
||||||
|
|
||||||
|
// Core object of DarkroomJS.
|
||||||
|
// Basically it's a single object, instanciable via an element
|
||||||
|
// (it could be a CSS selector or a DOM element), some custom options,
|
||||||
|
// and a list of plugin objects (or none to use default ones).
|
||||||
|
function Darkroom(element, options, plugins) {
|
||||||
|
return this.constructor(element, options, plugins);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create an empty list of plugin objects, which will be filled by
|
||||||
|
// other plugin scripts. This is the default plugin list if none is
|
||||||
|
// specified in Darkroom'ss constructor.
|
||||||
|
Darkroom.plugins = [];
|
||||||
|
|
||||||
|
Darkroom.prototype = {
|
||||||
|
// Refenrece to the main container element
|
||||||
|
containerElement: null,
|
||||||
|
|
||||||
|
// Reference to the Fabric canvas object
|
||||||
|
canvas: null,
|
||||||
|
|
||||||
|
// Reference to the Fabric image object
|
||||||
|
image: null,
|
||||||
|
|
||||||
|
// Reference to the Fabric source canvas object
|
||||||
|
sourceCanvas: null,
|
||||||
|
|
||||||
|
// Reference to the Fabric source image object
|
||||||
|
sourceImage: null,
|
||||||
|
|
||||||
|
// Track of the original image element
|
||||||
|
originalImageElement: null,
|
||||||
|
|
||||||
|
// Stack of transformations to apply to the image source
|
||||||
|
transformations: [],
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
defaults: {
|
||||||
|
// Canvas properties (dimension, ratio, color)
|
||||||
|
minWidth: null,
|
||||||
|
minHeight: null,
|
||||||
|
maxWidth: null,
|
||||||
|
maxHeight: null,
|
||||||
|
ratio: null,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
|
||||||
|
// Plugins options
|
||||||
|
plugins: {},
|
||||||
|
|
||||||
|
// Post-initialisation callback
|
||||||
|
initialize: function() { /* noop */ }
|
||||||
|
},
|
||||||
|
|
||||||
|
// List of the instancied plugins
|
||||||
|
plugins: {},
|
||||||
|
|
||||||
|
// This options are a merge between `defaults` and the options passed
|
||||||
|
// through the constructor
|
||||||
|
options: {},
|
||||||
|
|
||||||
|
constructor: function(element, options, plugins) {
|
||||||
|
this.options = Darkroom.Utils.extend(options, this.defaults);
|
||||||
|
|
||||||
|
if (typeof element === 'string')
|
||||||
|
element = document.querySelector(element);
|
||||||
|
if (null === element)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var image = new Image();
|
||||||
|
var parent = element.parentElement;
|
||||||
|
image.onload = function() {
|
||||||
|
// Initialize the DOM/Fabric elements
|
||||||
|
this._initializeDOM(element, parent);
|
||||||
|
this._initializeImage();
|
||||||
|
|
||||||
|
// Then initialize the plugins
|
||||||
|
this._initializePlugins(Darkroom.plugins);
|
||||||
|
|
||||||
|
// Public method to adjust image according to the canvas
|
||||||
|
this.refresh(function() {
|
||||||
|
// Execute a custom callback after initialization
|
||||||
|
this.options.initialize.bind(this).call();
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
}.bind(this)
|
||||||
|
|
||||||
|
//image.crossOrigin = 'anonymous';
|
||||||
|
image.src = element.src;
|
||||||
|
},
|
||||||
|
|
||||||
|
selfDestroy: function() {
|
||||||
|
var container = this.containerElement;
|
||||||
|
var image = new Image();
|
||||||
|
image.onload = function() {
|
||||||
|
container.parentNode.replaceChild(image, container);
|
||||||
|
}
|
||||||
|
|
||||||
|
image.src = this.sourceImage.toDataURL();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Add ability to attach event listener on the core object.
|
||||||
|
// It uses the canvas element to process events.
|
||||||
|
addEventListener: function(eventName, callback) {
|
||||||
|
var el = this.canvas.getElement();
|
||||||
|
if (el.addEventListener){
|
||||||
|
el.addEventListener(eventName, callback);
|
||||||
|
} else if (el.attachEvent) {
|
||||||
|
el.attachEvent('on' + eventName, callback);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatchEvent: function(eventName) {
|
||||||
|
// Use the old way of creating event to be IE compatible
|
||||||
|
// See https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
|
||||||
|
var event = document.createEvent('Event');
|
||||||
|
event.initEvent(eventName, true, true);
|
||||||
|
|
||||||
|
this.canvas.getElement().dispatchEvent(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Adjust image & canvas dimension according to min/max width/height
|
||||||
|
// and ratio specified in the options.
|
||||||
|
// This method should be called after each image transformation.
|
||||||
|
refresh: function(next) {
|
||||||
|
var clone = new Image();
|
||||||
|
clone.onload = function() {
|
||||||
|
this._replaceCurrentImage(new fabric.Image(clone));
|
||||||
|
|
||||||
|
if (next) next();
|
||||||
|
}.bind(this);
|
||||||
|
clone.src = this.sourceImage.toDataURL();
|
||||||
|
},
|
||||||
|
|
||||||
|
_replaceCurrentImage: function(newImage) {
|
||||||
|
if (this.image) {
|
||||||
|
this.image.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.image = newImage;
|
||||||
|
this.image.selectable = false;
|
||||||
|
|
||||||
|
// Adjust width or height according to specified ratio
|
||||||
|
var viewport = Darkroom.Utils.computeImageViewPort(this.image);
|
||||||
|
var canvasWidth = viewport.width;
|
||||||
|
var canvasHeight = viewport.height;
|
||||||
|
|
||||||
|
if (null !== this.options.ratio) {
|
||||||
|
var canvasRatio = +this.options.ratio;
|
||||||
|
var currentRatio = canvasWidth / canvasHeight;
|
||||||
|
|
||||||
|
if (currentRatio > canvasRatio) {
|
||||||
|
canvasHeight = canvasWidth / canvasRatio;
|
||||||
|
} else if (currentRatio < canvasRatio) {
|
||||||
|
canvasWidth = canvasHeight * canvasRatio;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Then scale the image to fit into dimension limits
|
||||||
|
var scaleMin = 1;
|
||||||
|
var scaleMax = 1;
|
||||||
|
var scaleX = 1;
|
||||||
|
var scaleY = 1;
|
||||||
|
|
||||||
|
if (null !== this.options.maxWidth && this.options.maxWidth < canvasWidth) {
|
||||||
|
scaleX = this.options.maxWidth / canvasWidth;
|
||||||
|
}
|
||||||
|
if (null !== this.options.maxHeight && this.options.maxHeight < canvasHeight) {
|
||||||
|
scaleY = this.options.maxHeight / canvasHeight;
|
||||||
|
}
|
||||||
|
scaleMin = Math.min(scaleX, scaleY);
|
||||||
|
|
||||||
|
scaleX = 1;
|
||||||
|
scaleY = 1;
|
||||||
|
if (null !== this.options.minWidth && this.options.minWidth > canvasWidth) {
|
||||||
|
scaleX = this.options.minWidth / canvasWidth;
|
||||||
|
}
|
||||||
|
if (null !== this.options.minHeight && this.options.minHeight > canvasHeight) {
|
||||||
|
scaleY = this.options.minHeight / canvasHeight;
|
||||||
|
}
|
||||||
|
scaleMax = Math.max(scaleX, scaleY);
|
||||||
|
|
||||||
|
var scale = scaleMax * scaleMin; // one should be equals to 1
|
||||||
|
|
||||||
|
canvasWidth *= scale;
|
||||||
|
canvasHeight *= scale;
|
||||||
|
|
||||||
|
// Finally place the image in the center of the canvas
|
||||||
|
this.image.setScaleX(1 * scale);
|
||||||
|
this.image.setScaleY(1 * scale);
|
||||||
|
this.canvas.add(this.image);
|
||||||
|
this.canvas.setWidth(canvasWidth);
|
||||||
|
this.canvas.setHeight(canvasHeight);
|
||||||
|
this.canvas.centerObject(this.image);
|
||||||
|
this.image.setCoords();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Apply the transformation on the current image and save it in the
|
||||||
|
// transformations stack (in order to reconstitute the previous states
|
||||||
|
// of the image).
|
||||||
|
applyTransformation: function(transformation) {
|
||||||
|
this.transformations.push(transformation);
|
||||||
|
|
||||||
|
transformation.applyTransformation(
|
||||||
|
this.sourceCanvas,
|
||||||
|
this.sourceImage,
|
||||||
|
this._postTransformation.bind(this)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
_postTransformation: function(newImage) {
|
||||||
|
if (newImage)
|
||||||
|
this.sourceImage = newImage;
|
||||||
|
|
||||||
|
this.refresh(function() {
|
||||||
|
this.dispatchEvent('core:transformation');
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Initialize image from original element plus re-apply every
|
||||||
|
// transformations.
|
||||||
|
reinitializeImage: function() {
|
||||||
|
this.sourceImage.remove();
|
||||||
|
this._initializeImage();
|
||||||
|
this._popTransformation(this.transformations.slice())
|
||||||
|
},
|
||||||
|
|
||||||
|
_popTransformation: function(transformations) {
|
||||||
|
if (0 === transformations.length) {
|
||||||
|
this.dispatchEvent('core:reinitialized');
|
||||||
|
this.refresh();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var transformation = transformations.shift();
|
||||||
|
|
||||||
|
var next = function(newImage) {
|
||||||
|
if (newImage) this.sourceImage = newImage;
|
||||||
|
this._popTransformation(transformations)
|
||||||
|
};
|
||||||
|
|
||||||
|
transformation.applyTransformation(
|
||||||
|
this.sourceCanvas,
|
||||||
|
this.sourceImage,
|
||||||
|
next.bind(this)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create the DOM elements and instanciate the Fabric canvas.
|
||||||
|
// The image element is replaced by a new `div` element.
|
||||||
|
// However the original image is re-injected in order to keep a trace of it.
|
||||||
|
_initializeDOM: function(imageElement) {
|
||||||
|
// Container
|
||||||
|
var mainContainerElement = document.createElement('div');
|
||||||
|
mainContainerElement.className = 'darkroom-container';
|
||||||
|
|
||||||
|
// Toolbar
|
||||||
|
var toolbarElement = document.createElement('div');
|
||||||
|
toolbarElement.className = 'darkroom-toolbar';
|
||||||
|
mainContainerElement.appendChild(toolbarElement);
|
||||||
|
|
||||||
|
// Viewport canvas
|
||||||
|
var canvasContainerElement = document.createElement('div');
|
||||||
|
canvasContainerElement.className = 'darkroom-image-container';
|
||||||
|
var canvasElement = document.createElement('canvas');
|
||||||
|
canvasContainerElement.appendChild(canvasElement);
|
||||||
|
mainContainerElement.appendChild(canvasContainerElement);
|
||||||
|
|
||||||
|
// Source canvas
|
||||||
|
var sourceCanvasContainerElement = document.createElement('div');
|
||||||
|
sourceCanvasContainerElement.className = 'darkroom-source-container';
|
||||||
|
sourceCanvasContainerElement.style.display = 'none';
|
||||||
|
var sourceCanvasElement = document.createElement('canvas');
|
||||||
|
sourceCanvasContainerElement.appendChild(sourceCanvasElement);
|
||||||
|
mainContainerElement.appendChild(sourceCanvasContainerElement);
|
||||||
|
|
||||||
|
// Original image
|
||||||
|
imageElement.parentNode.replaceChild(mainContainerElement, imageElement);
|
||||||
|
imageElement.style.display = 'none';
|
||||||
|
mainContainerElement.appendChild(imageElement);
|
||||||
|
|
||||||
|
// Instanciate object from elements
|
||||||
|
this.containerElement = mainContainerElement;
|
||||||
|
this.originalImageElement = imageElement;
|
||||||
|
|
||||||
|
this.toolbar = new Darkroom.UI.Toolbar(toolbarElement);
|
||||||
|
|
||||||
|
this.canvas = new fabric.Canvas(canvasElement, {
|
||||||
|
selection: false,
|
||||||
|
backgroundColor: this.options.backgroundColor
|
||||||
|
});
|
||||||
|
|
||||||
|
this.sourceCanvas = new fabric.Canvas(sourceCanvasElement, {
|
||||||
|
selection: false,
|
||||||
|
backgroundColor: this.options.backgroundColor
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Instanciate the Fabric image object.
|
||||||
|
// The image is created as a static element with no control,
|
||||||
|
// then it is add in the Fabric canvas object.
|
||||||
|
_initializeImage: function() {
|
||||||
|
this.sourceImage = new fabric.Image(this.originalImageElement, {
|
||||||
|
// Some options to make the image static
|
||||||
|
selectable: false,
|
||||||
|
evented: false,
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
lockRotation: true,
|
||||||
|
lockScalingX: true,
|
||||||
|
lockScalingY: true,
|
||||||
|
lockUniScaling: true,
|
||||||
|
hasControls: false,
|
||||||
|
hasBorders: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.sourceCanvas.add(this.sourceImage);
|
||||||
|
|
||||||
|
// Adjust width or height according to specified ratio
|
||||||
|
var viewport = Darkroom.Utils.computeImageViewPort(this.sourceImage);
|
||||||
|
var canvasWidth = viewport.width;
|
||||||
|
var canvasHeight = viewport.height;
|
||||||
|
|
||||||
|
this.sourceCanvas.setWidth(canvasWidth);
|
||||||
|
this.sourceCanvas.setHeight(canvasHeight);
|
||||||
|
this.sourceCanvas.centerObject(this.sourceImage);
|
||||||
|
this.sourceImage.setCoords();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Initialize every plugins.
|
||||||
|
// Note that plugins are instanciated in the same order than they
|
||||||
|
// are declared in the parameter object.
|
||||||
|
_initializePlugins: function(plugins) {
|
||||||
|
for (var name in plugins) {
|
||||||
|
var plugin = plugins[name];
|
||||||
|
var options = this.options.plugins[name];
|
||||||
|
|
||||||
|
// Setting false into the plugin options will disable the plugin
|
||||||
|
if (options === false)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
// Avoid any issues with _proto_
|
||||||
|
if (!plugins.hasOwnProperty(name))
|
||||||
|
continue;
|
||||||
|
|
||||||
|
this.plugins[name] = new plugin(this, options);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.Plugin = Plugin;
|
||||||
|
|
||||||
|
// Define a plugin object. This is the (abstract) parent class which
|
||||||
|
// has to be extended for each plugin.
|
||||||
|
function Plugin(darkroom, options) {
|
||||||
|
this.darkroom = darkroom;
|
||||||
|
this.options = Darkroom.Utils.extend(options, this.defaults);
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
Plugin.prototype = {
|
||||||
|
defaults: {},
|
||||||
|
initialize: function() { }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inspired by Backbone.js extend capability.
|
||||||
|
Plugin.extend = function(protoProps) {
|
||||||
|
var parent = this;
|
||||||
|
var child;
|
||||||
|
|
||||||
|
if (protoProps && protoProps.hasOwnProperty('constructor')) {
|
||||||
|
child = protoProps.constructor;
|
||||||
|
} else {
|
||||||
|
child = function(){ return parent.apply(this, arguments); };
|
||||||
|
}
|
||||||
|
|
||||||
|
Darkroom.Utils.extend(child, parent);
|
||||||
|
|
||||||
|
var Surrogate = function(){ this.constructor = child; };
|
||||||
|
Surrogate.prototype = parent.prototype;
|
||||||
|
child.prototype = new Surrogate;
|
||||||
|
|
||||||
|
if (protoProps) Darkroom.Utils.extend(child.prototype, protoProps);
|
||||||
|
|
||||||
|
child.__super__ = parent.prototype;
|
||||||
|
|
||||||
|
return child;
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.Transformation = Transformation;
|
||||||
|
|
||||||
|
function Transformation(options) {
|
||||||
|
this.options = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
Transformation.prototype = {
|
||||||
|
applyTransformation: function(image) { /* no-op */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inspired by Backbone.js extend capability.
|
||||||
|
Transformation.extend = function(protoProps) {
|
||||||
|
var parent = this;
|
||||||
|
var child;
|
||||||
|
|
||||||
|
if (protoProps && protoProps.hasOwnProperty('constructor')) {
|
||||||
|
child = protoProps.constructor;
|
||||||
|
} else {
|
||||||
|
child = function(){ return parent.apply(this, arguments); };
|
||||||
|
}
|
||||||
|
|
||||||
|
Darkroom.Utils.extend(child, parent);
|
||||||
|
|
||||||
|
var Surrogate = function(){ this.constructor = child; };
|
||||||
|
Surrogate.prototype = parent.prototype;
|
||||||
|
child.prototype = new Surrogate;
|
||||||
|
|
||||||
|
if (protoProps) Darkroom.Utils.extend(child.prototype, protoProps);
|
||||||
|
|
||||||
|
child.__super__ = parent.prototype;
|
||||||
|
|
||||||
|
return child;
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.UI = {
|
||||||
|
Toolbar: Toolbar,
|
||||||
|
ButtonGroup: ButtonGroup,
|
||||||
|
Button: Button,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toolbar object.
|
||||||
|
function Toolbar(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Toolbar.prototype = {
|
||||||
|
createButtonGroup: function(options) {
|
||||||
|
var buttonGroup = document.createElement('div');
|
||||||
|
buttonGroup.className = 'darkroom-button-group';
|
||||||
|
this.element.appendChild(buttonGroup);
|
||||||
|
|
||||||
|
return new ButtonGroup(buttonGroup);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ButtonGroup object.
|
||||||
|
function ButtonGroup(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
ButtonGroup.prototype = {
|
||||||
|
createButton: function(options) {
|
||||||
|
var defaults = {
|
||||||
|
image: 'help',
|
||||||
|
type: 'default',
|
||||||
|
group: 'default',
|
||||||
|
hide: false,
|
||||||
|
disabled: false
|
||||||
|
};
|
||||||
|
|
||||||
|
options = Darkroom.Utils.extend(options, defaults);
|
||||||
|
|
||||||
|
var buttonElement = document.createElement('button');
|
||||||
|
buttonElement.type = 'button';
|
||||||
|
buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
|
||||||
|
buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
|
||||||
|
this.element.appendChild(buttonElement);
|
||||||
|
|
||||||
|
var button = new Button(buttonElement);
|
||||||
|
button.hide(options.hide);
|
||||||
|
button.disable(options.disabled);
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button object.
|
||||||
|
function Button(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Button.prototype = {
|
||||||
|
addEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.addEventListener){
|
||||||
|
this.element.addEventListener(eventName, listener);
|
||||||
|
} else if (this.element.attachEvent) {
|
||||||
|
this.element.attachEvent('on' + eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.removeEventListener){
|
||||||
|
this.element.removeEventListener(eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active: function(value) {
|
||||||
|
if (value)
|
||||||
|
this.element.classList.add('darkroom-button-active');
|
||||||
|
else
|
||||||
|
this.element.classList.remove('darkroom-button-active');
|
||||||
|
},
|
||||||
|
hide: function(value) {
|
||||||
|
if (value)
|
||||||
|
this.element.classList.add('darkroom-button-hidden');
|
||||||
|
else
|
||||||
|
this.element.classList.remove('darkroom-button-hidden');
|
||||||
|
},
|
||||||
|
disable: function(value) {
|
||||||
|
this.element.disabled = (value) ? true : false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.Utils = {
|
||||||
|
extend: extend,
|
||||||
|
computeImageViewPort: computeImageViewPort,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Utility method to easily extend objects.
|
||||||
|
function extend(b, a) {
|
||||||
|
var prop;
|
||||||
|
if (b === undefined) {
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
for (prop in a) {
|
||||||
|
if (a.hasOwnProperty(prop) && b.hasOwnProperty(prop) === false) {
|
||||||
|
b[prop] = a[prop];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeImageViewPort(image) {
|
||||||
|
return {
|
||||||
|
height: Math.abs(image.getWidth() * (Math.sin(image.getAngle() * Math.PI/180))) + Math.abs(image.getHeight() * (Math.cos(image.getAngle() * Math.PI/180))),
|
||||||
|
width: Math.abs(image.getHeight() * (Math.sin(image.getAngle() * Math.PI/180))) + Math.abs(image.getWidth() * (Math.cos(image.getAngle() * Math.PI/180))),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,669 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Crop = Darkroom.Transformation.extend({
|
||||||
|
applyTransformation: function(canvas, image, next) {
|
||||||
|
// Snapshot the image delimited by the crop zone
|
||||||
|
var snapshot = new Image();
|
||||||
|
snapshot.onload = function() {
|
||||||
|
// Validate image
|
||||||
|
if (height < 1 || width < 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var imgInstance = new fabric.Image(this, {
|
||||||
|
// options to make the image static
|
||||||
|
selectable: false,
|
||||||
|
evented: false,
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
lockRotation: true,
|
||||||
|
lockScalingX: true,
|
||||||
|
lockScalingY: true,
|
||||||
|
lockUniScaling: true,
|
||||||
|
hasControls: false,
|
||||||
|
hasBorders: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var width = this.width;
|
||||||
|
var height = this.height;
|
||||||
|
|
||||||
|
// Update canvas size
|
||||||
|
canvas.setWidth(width);
|
||||||
|
canvas.setHeight(height);
|
||||||
|
|
||||||
|
// Add image
|
||||||
|
image.remove();
|
||||||
|
canvas.add(imgInstance);
|
||||||
|
|
||||||
|
next(imgInstance);
|
||||||
|
};
|
||||||
|
|
||||||
|
var viewport = Darkroom.Utils.computeImageViewPort(image);
|
||||||
|
var imageWidth = viewport.width;
|
||||||
|
var imageHeight = viewport.height;
|
||||||
|
|
||||||
|
var left = this.options.left * imageWidth;
|
||||||
|
var top = this.options.top * imageHeight;
|
||||||
|
var width = Math.min(this.options.width * imageWidth, imageWidth - left);
|
||||||
|
var height = Math.min(this.options.height * imageHeight, imageHeight - top);
|
||||||
|
|
||||||
|
snapshot.src = canvas.toDataURL({
|
||||||
|
left: left,
|
||||||
|
top: top,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var CropZone = fabric.util.createClass(fabric.Rect, {
|
||||||
|
_render: function(ctx) {
|
||||||
|
this.callSuper('_render', ctx);
|
||||||
|
|
||||||
|
var canvas = ctx.canvas;
|
||||||
|
var dashWidth = 7;
|
||||||
|
|
||||||
|
// Set original scale
|
||||||
|
var flipX = this.flipX ? -1 : 1;
|
||||||
|
var flipY = this.flipY ? -1 : 1;
|
||||||
|
var scaleX = flipX / this.scaleX;
|
||||||
|
var scaleY = flipY / this.scaleY;
|
||||||
|
|
||||||
|
ctx.scale(scaleX, scaleY);
|
||||||
|
|
||||||
|
// Overlay rendering
|
||||||
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
|
||||||
|
this._renderOverlay(ctx);
|
||||||
|
|
||||||
|
// Set dashed borders
|
||||||
|
if (ctx.setLineDash !== undefined)
|
||||||
|
ctx.setLineDash([dashWidth, dashWidth]);
|
||||||
|
else if (ctx.mozDash !== undefined)
|
||||||
|
ctx.mozDash = [dashWidth, dashWidth];
|
||||||
|
|
||||||
|
// First lines rendering with black
|
||||||
|
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
|
||||||
|
this._renderBorders(ctx);
|
||||||
|
this._renderGrid(ctx);
|
||||||
|
|
||||||
|
// Re render lines in white
|
||||||
|
ctx.lineDashOffset = dashWidth;
|
||||||
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
|
||||||
|
this._renderBorders(ctx);
|
||||||
|
this._renderGrid(ctx);
|
||||||
|
|
||||||
|
// Reset scale
|
||||||
|
ctx.scale(1/scaleX, 1/scaleY);
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderOverlay: function(ctx) {
|
||||||
|
var canvas = ctx.canvas;
|
||||||
|
var borderOffset = 0;
|
||||||
|
|
||||||
|
//
|
||||||
|
// x0 x1 x2 x3
|
||||||
|
// y0 +------------------------+
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// y1 +------+---------+-------+
|
||||||
|
// |\\\\\\| |\\\\\\\|
|
||||||
|
// |\\\\\\| 0 |\\\\\\\|
|
||||||
|
// |\\\\\\| |\\\\\\\|
|
||||||
|
// y2 +------+---------+-------+
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// y3 +------------------------+
|
||||||
|
//
|
||||||
|
|
||||||
|
var x0 = Math.ceil(-this.getWidth() / 2 - this.getLeft());
|
||||||
|
var x1 = Math.ceil(-this.getWidth() / 2);
|
||||||
|
var x2 = Math.ceil(this.getWidth() / 2);
|
||||||
|
var x3 = Math.ceil(this.getWidth() / 2 + (canvas.width - this.getWidth() - this.getLeft()));
|
||||||
|
|
||||||
|
var y0 = Math.ceil(-this.getHeight() / 2 - this.getTop());
|
||||||
|
var y1 = Math.ceil(-this.getHeight() / 2);
|
||||||
|
var y2 = Math.ceil(this.getHeight() / 2);
|
||||||
|
var y3 = Math.ceil(this.getHeight() / 2 + (canvas.height - this.getHeight() - this.getTop()));
|
||||||
|
|
||||||
|
// Upper rect
|
||||||
|
ctx.fillRect(x0, y0, x3 - x0, y1 - y0 + borderOffset);
|
||||||
|
|
||||||
|
// Left rect
|
||||||
|
ctx.fillRect(x0, y1, x1 - x0, y2 - y1 + borderOffset);
|
||||||
|
|
||||||
|
// Right rect
|
||||||
|
ctx.fillRect(x2, y1, x3 - x2, y2 - y1 + borderOffset);
|
||||||
|
|
||||||
|
// Down rect
|
||||||
|
ctx.fillRect(x0, y2, x3 - x0, y3 - y2);
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderBorders: function(ctx) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2); // upper right
|
||||||
|
ctx.lineTo(this.getWidth()/2, this.getHeight()/2); // down right
|
||||||
|
ctx.lineTo(-this.getWidth()/2, this.getHeight()/2); // down left
|
||||||
|
ctx.lineTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderGrid: function(ctx) {
|
||||||
|
// Vertical lines
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2 + 1/3 * this.getWidth(), -this.getHeight()/2);
|
||||||
|
ctx.lineTo(-this.getWidth()/2 + 1/3 * this.getWidth(), this.getHeight()/2);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2 + 2/3 * this.getWidth(), -this.getHeight()/2);
|
||||||
|
ctx.lineTo(-this.getWidth()/2 + 2/3 * this.getWidth(), this.getHeight()/2);
|
||||||
|
ctx.stroke();
|
||||||
|
// Horizontal lines
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Darkroom.plugins['crop'] = Darkroom.Plugin.extend({
|
||||||
|
// Init point
|
||||||
|
startX: null,
|
||||||
|
startY: null,
|
||||||
|
|
||||||
|
// Keycrop
|
||||||
|
isKeyCroping: false,
|
||||||
|
isKeyLeft: false,
|
||||||
|
isKeyUp: false,
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
// min crop dimension
|
||||||
|
minHeight: 1,
|
||||||
|
minWidth: 1,
|
||||||
|
// ensure crop ratio
|
||||||
|
ratio: null,
|
||||||
|
// quick crop feature (set a key code to enable it)
|
||||||
|
quickCropKey: false
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function InitDarkroomCropPlugin() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.cropButton = buttonGroup.createButton({
|
||||||
|
image: 'crop'
|
||||||
|
});
|
||||||
|
this.okButton = buttonGroup.createButton({
|
||||||
|
image: 'done',
|
||||||
|
type: 'success',
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
this.cancelButton = buttonGroup.createButton({
|
||||||
|
image: 'close',
|
||||||
|
type: 'danger',
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Buttons click
|
||||||
|
this.cropButton.addEventListener('click', this.toggleCrop.bind(this));
|
||||||
|
this.okButton.addEventListener('click', this.cropCurrentZone.bind(this));
|
||||||
|
this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
|
||||||
|
|
||||||
|
// Canvas events
|
||||||
|
this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
|
||||||
|
this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
|
||||||
|
this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
|
||||||
|
|
||||||
|
fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
|
||||||
|
fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
|
||||||
|
|
||||||
|
this.darkroom.addEventListener('core:transformation', this.releaseFocus.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Avoid crop zone to go beyond the canvas edges
|
||||||
|
onObjectMoving: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentObject = event.target;
|
||||||
|
if (currentObject !== this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var x = currentObject.getLeft(), y = currentObject.getTop();
|
||||||
|
var w = currentObject.getWidth(), h = currentObject.getHeight();
|
||||||
|
var maxX = canvas.getWidth() - w;
|
||||||
|
var maxY = canvas.getHeight() - h;
|
||||||
|
|
||||||
|
if (x < 0)
|
||||||
|
currentObject.set('left', 0);
|
||||||
|
if (y < 0)
|
||||||
|
currentObject.set('top', 0);
|
||||||
|
if (x > maxX)
|
||||||
|
currentObject.set('left', maxX);
|
||||||
|
if (y > maxY)
|
||||||
|
currentObject.set('top', maxY);
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
// Prevent crop zone from going beyond the canvas edges (like mouseMove)
|
||||||
|
onObjectScaling: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var preventScaling = false;
|
||||||
|
var currentObject = event.target;
|
||||||
|
if (currentObject !== this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
var minX = currentObject.getLeft();
|
||||||
|
var minY = currentObject.getTop();
|
||||||
|
var maxX = currentObject.getLeft() + currentObject.getWidth();
|
||||||
|
var maxY = currentObject.getTop() + currentObject.getHeight();
|
||||||
|
|
||||||
|
if (null !== this.options.ratio) {
|
||||||
|
if (minX < 0 || maxX > canvas.getWidth() || minY < 0 || maxY > canvas.getHeight()) {
|
||||||
|
preventScaling = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minX < 0 || maxX > canvas.getWidth() || preventScaling) {
|
||||||
|
var lastScaleX = this.lastScaleX || 1;
|
||||||
|
currentObject.setScaleX(lastScaleX);
|
||||||
|
}
|
||||||
|
if (minX < 0) {
|
||||||
|
currentObject.setLeft(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minY < 0 || maxY > canvas.getHeight() || preventScaling) {
|
||||||
|
var lastScaleY = this.lastScaleY || 1;
|
||||||
|
currentObject.setScaleY(lastScaleY);
|
||||||
|
}
|
||||||
|
if (minY < 0) {
|
||||||
|
currentObject.setTop(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentObject.getWidth() < this.options.minWidth) {
|
||||||
|
currentObject.scaleToWidth(this.options.minWidth);
|
||||||
|
}
|
||||||
|
if (currentObject.getHeight() < this.options.minHeight) {
|
||||||
|
currentObject.scaleToHeight(this.options.minHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.lastScaleX = currentObject.getScaleX();
|
||||||
|
this.lastScaleY = currentObject.getScaleY();
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
// Init crop zone
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
|
||||||
|
// recalculate offset, in case canvas was manipulated since last `calcOffset`
|
||||||
|
canvas.calcOffset();
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
var point = new fabric.Point(x, y);
|
||||||
|
|
||||||
|
// Check if user want to scale or drag the crop zone.
|
||||||
|
var activeObject = canvas.getActiveObject();
|
||||||
|
if (activeObject === this.cropZone || this.cropZone.containsPoint(point)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.discardActiveObject();
|
||||||
|
this.cropZone.setWidth(0);
|
||||||
|
this.cropZone.setHeight(0);
|
||||||
|
this.cropZone.setScaleX(1);
|
||||||
|
this.cropZone.setScaleY(1);
|
||||||
|
|
||||||
|
this.startX = x;
|
||||||
|
this.startY = y;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Extend crop zone
|
||||||
|
onMouseMove: function(event) {
|
||||||
|
// Quick crop feature
|
||||||
|
if (this.isKeyCroping)
|
||||||
|
return this.onMouseMoveKeyCrop(event);
|
||||||
|
|
||||||
|
if (null === this.startX || null === this.startY) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
this._renderCropZone(this.startX, this.startY, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseMoveKeyCrop: function(event) {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var zone = this.cropZone;
|
||||||
|
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
if (!zone.left || !zone.top) {
|
||||||
|
zone.setTop(y);
|
||||||
|
zone.setLeft(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isKeyLeft = x < zone.left + zone.width / 2 ;
|
||||||
|
this.isKeyUp = y < zone.top + zone.height / 2 ;
|
||||||
|
|
||||||
|
this._renderCropZone(
|
||||||
|
Math.min(zone.left, x),
|
||||||
|
Math.min(zone.top, y),
|
||||||
|
Math.max(zone.left+zone.width, x),
|
||||||
|
Math.max(zone.top+zone.height, y)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Finish crop zone
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
if (null === this.startX || null === this.startY) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
this.cropZone.setCoords();
|
||||||
|
canvas.setActiveObject(this.cropZone);
|
||||||
|
canvas.calcOffset();
|
||||||
|
|
||||||
|
this.startX = null;
|
||||||
|
this.startY = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyDown: function(event) {
|
||||||
|
if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || this.isKeyCroping)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Active quick crop flow
|
||||||
|
this.isKeyCroping = true ;
|
||||||
|
this.darkroom.canvas.discardActiveObject();
|
||||||
|
this.cropZone.setWidth(0);
|
||||||
|
this.cropZone.setHeight(0);
|
||||||
|
this.cropZone.setScaleX(1);
|
||||||
|
this.cropZone.setScaleY(1);
|
||||||
|
this.cropZone.setTop(0);
|
||||||
|
this.cropZone.setLeft(0);
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyUp: function(event) {
|
||||||
|
if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || !this.isKeyCroping)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Unactive quick crop flow
|
||||||
|
this.isKeyCroping = false;
|
||||||
|
this.startX = 1;
|
||||||
|
this.startY = 1;
|
||||||
|
this.onMouseUp();
|
||||||
|
},
|
||||||
|
|
||||||
|
selectZone: function(x, y, width, height, forceDimension) {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
this.requireFocus();
|
||||||
|
|
||||||
|
if (!forceDimension) {
|
||||||
|
this._renderCropZone(x, y, x+width, y+height);
|
||||||
|
} else {
|
||||||
|
this.cropZone.set({
|
||||||
|
'left': x,
|
||||||
|
'top': y,
|
||||||
|
'width': width,
|
||||||
|
'height': height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
canvas.bringToFront(this.cropZone);
|
||||||
|
this.cropZone.setCoords();
|
||||||
|
canvas.setActiveObject(this.cropZone);
|
||||||
|
canvas.calcOffset();
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleCrop: function() {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
this.requireFocus();
|
||||||
|
else
|
||||||
|
this.releaseFocus();
|
||||||
|
},
|
||||||
|
|
||||||
|
cropCurrentZone: function() {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Avoid croping empty zone
|
||||||
|
if (this.cropZone.width < 1 && this.cropZone.height < 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var image = this.darkroom.image;
|
||||||
|
|
||||||
|
// Compute crop zone dimensions
|
||||||
|
var top = this.cropZone.getTop() - image.getTop();
|
||||||
|
var left = this.cropZone.getLeft() - image.getLeft();
|
||||||
|
var width = this.cropZone.getWidth();
|
||||||
|
var height = this.cropZone.getHeight();
|
||||||
|
|
||||||
|
// Adjust dimensions to image only
|
||||||
|
if (top < 0) {
|
||||||
|
height += top;
|
||||||
|
top = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (left < 0) {
|
||||||
|
width += left;
|
||||||
|
left = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply crop transformation.
|
||||||
|
// Make sure to use relative dimension since the crop will be applied
|
||||||
|
// on the source image.
|
||||||
|
this.darkroom.applyTransformation(new Crop({
|
||||||
|
top: top / image.getHeight(),
|
||||||
|
left: left / image.getWidth(),
|
||||||
|
width: width / image.getWidth(),
|
||||||
|
height: height / image.getHeight(),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Test wether crop zone is set
|
||||||
|
hasFocus: function() {
|
||||||
|
return this.cropZone !== undefined;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create the crop zone
|
||||||
|
requireFocus: function() {
|
||||||
|
this.cropZone = new CropZone({
|
||||||
|
fill: 'transparent',
|
||||||
|
hasBorders: false,
|
||||||
|
originX: 'left',
|
||||||
|
originY: 'top',
|
||||||
|
//stroke: '#444',
|
||||||
|
//strokeDashArray: [5, 5],
|
||||||
|
//borderColor: '#444',
|
||||||
|
cornerColor: '#444',
|
||||||
|
cornerSize: 8,
|
||||||
|
transparentCorners: false,
|
||||||
|
lockRotation: true,
|
||||||
|
hasRotatingPoint: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (null !== this.options.ratio) {
|
||||||
|
this.cropZone.set('lockUniScaling', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.darkroom.canvas.add(this.cropZone);
|
||||||
|
this.darkroom.canvas.defaultCursor = 'crosshair';
|
||||||
|
|
||||||
|
this.cropButton.active(true);
|
||||||
|
this.okButton.hide(false);
|
||||||
|
this.cancelButton.hide(false);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Remove the crop zone
|
||||||
|
releaseFocus: function() {
|
||||||
|
if (undefined === this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.cropZone.remove();
|
||||||
|
this.cropZone = undefined;
|
||||||
|
|
||||||
|
this.cropButton.active(false);
|
||||||
|
this.okButton.hide(true);
|
||||||
|
this.cancelButton.hide(true);
|
||||||
|
|
||||||
|
this.darkroom.canvas.defaultCursor = 'default';
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderCropZone: function(fromX, fromY, toX, toY) {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
|
||||||
|
var isRight = (toX > fromX);
|
||||||
|
var isLeft = !isRight;
|
||||||
|
var isDown = (toY > fromY);
|
||||||
|
var isUp = !isDown;
|
||||||
|
|
||||||
|
var minWidth = Math.min(+this.options.minWidth, canvas.getWidth());
|
||||||
|
var minHeight = Math.min(+this.options.minHeight, canvas.getHeight());
|
||||||
|
|
||||||
|
// Define corner coordinates
|
||||||
|
var leftX = Math.min(fromX, toX);
|
||||||
|
var rightX = Math.max(fromX, toX);
|
||||||
|
var topY = Math.min(fromY, toY);
|
||||||
|
var bottomY = Math.max(fromY, toY);
|
||||||
|
|
||||||
|
// Replace current point into the canvas
|
||||||
|
leftX = Math.max(0, leftX);
|
||||||
|
rightX = Math.min(canvas.getWidth(), rightX);
|
||||||
|
topY = Math.max(0, topY)
|
||||||
|
bottomY = Math.min(canvas.getHeight(), bottomY);
|
||||||
|
|
||||||
|
// Recalibrate coordinates according to given options
|
||||||
|
if (rightX - leftX < minWidth) {
|
||||||
|
if (isRight)
|
||||||
|
rightX = leftX + minWidth;
|
||||||
|
else
|
||||||
|
leftX = rightX - minWidth;
|
||||||
|
}
|
||||||
|
if (bottomY - topY < minHeight) {
|
||||||
|
if (isDown)
|
||||||
|
bottomY = topY + minHeight;
|
||||||
|
else
|
||||||
|
topY = bottomY - minHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Truncate truncate according to canvas dimensions
|
||||||
|
if (leftX < 0) {
|
||||||
|
// Translate to the left
|
||||||
|
rightX += Math.abs(leftX);
|
||||||
|
leftX = 0
|
||||||
|
}
|
||||||
|
if (rightX > canvas.getWidth()) {
|
||||||
|
// Translate to the right
|
||||||
|
leftX -= (rightX - canvas.getWidth());
|
||||||
|
rightX = canvas.getWidth();
|
||||||
|
}
|
||||||
|
if (topY < 0) {
|
||||||
|
// Translate to the bottom
|
||||||
|
bottomY += Math.abs(topY);
|
||||||
|
topY = 0
|
||||||
|
}
|
||||||
|
if (bottomY > canvas.getHeight()) {
|
||||||
|
// Translate to the right
|
||||||
|
topY -= (bottomY - canvas.getHeight());
|
||||||
|
bottomY = canvas.getHeight();
|
||||||
|
}
|
||||||
|
|
||||||
|
var width = rightX - leftX;
|
||||||
|
var height = bottomY - topY;
|
||||||
|
var currentRatio = width / height;
|
||||||
|
|
||||||
|
if (this.options.ratio && +this.options.ratio !== currentRatio) {
|
||||||
|
var ratio = +this.options.ratio;
|
||||||
|
|
||||||
|
if(this.isKeyCroping) {
|
||||||
|
isLeft = this.isKeyLeft;
|
||||||
|
isUp = this.isKeyUp;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentRatio < ratio) {
|
||||||
|
var newWidth = height * ratio;
|
||||||
|
if (isLeft) {
|
||||||
|
leftX -= (newWidth - width);
|
||||||
|
}
|
||||||
|
width = newWidth;
|
||||||
|
} else if (currentRatio > ratio) {
|
||||||
|
var newHeight = height / (ratio * height/width);
|
||||||
|
if (isUp) {
|
||||||
|
topY -= (newHeight - height);
|
||||||
|
}
|
||||||
|
height = newHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (leftX < 0) {
|
||||||
|
leftX = 0;
|
||||||
|
//TODO
|
||||||
|
}
|
||||||
|
if (topY < 0) {
|
||||||
|
topY = 0;
|
||||||
|
//TODO
|
||||||
|
}
|
||||||
|
if (leftX + width > canvas.getWidth()) {
|
||||||
|
var newWidth = canvas.getWidth() - leftX;
|
||||||
|
height = newWidth * height / width;
|
||||||
|
width = newWidth;
|
||||||
|
if (isUp) {
|
||||||
|
topY = fromY - height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (topY + height > canvas.getHeight()) {
|
||||||
|
var newHeight = canvas.getHeight() - topY;
|
||||||
|
width = width * newHeight / height;
|
||||||
|
height = newHeight;
|
||||||
|
if (isLeft) {
|
||||||
|
leftX = fromX - width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply coordinates
|
||||||
|
this.cropZone.left = leftX;
|
||||||
|
this.cropZone.top = topY;
|
||||||
|
this.cropZone.width = width;
|
||||||
|
this.cropZone.height = height;
|
||||||
|
|
||||||
|
this.darkroom.canvas.bringToFront(this.cropZone);
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
;(function(window, document, Darkroom, fabric) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.plugins['history'] = Darkroom.Plugin.extend({
|
||||||
|
undoTransformations: [],
|
||||||
|
|
||||||
|
initialize: function InitDarkroomHistoryPlugin() {
|
||||||
|
this._initButtons();
|
||||||
|
|
||||||
|
this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
undo: function() {
|
||||||
|
if (this.darkroom.transformations.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var lastTransformation = this.darkroom.transformations.pop();
|
||||||
|
this.undoTransformations.unshift(lastTransformation);
|
||||||
|
|
||||||
|
this.darkroom.reinitializeImage();
|
||||||
|
this._updateButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
redo: function() {
|
||||||
|
if (this.undoTransformations.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cancelTransformation = this.undoTransformations.shift();
|
||||||
|
this.darkroom.transformations.push(cancelTransformation);
|
||||||
|
|
||||||
|
this.darkroom.reinitializeImage();
|
||||||
|
this._updateButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
_initButtons: function() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.backButton = buttonGroup.createButton({
|
||||||
|
image: 'undo',
|
||||||
|
disabled: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.forwardButton = buttonGroup.createButton({
|
||||||
|
image: 'redo',
|
||||||
|
disabled: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backButton.addEventListener('click', this.undo.bind(this));
|
||||||
|
this.forwardButton.addEventListener('click', this.redo.bind(this));
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
_updateButtons: function() {
|
||||||
|
this.backButton.disable((this.darkroom.transformations.length === 0))
|
||||||
|
this.forwardButton.disable((this.undoTransformations.length === 0))
|
||||||
|
},
|
||||||
|
|
||||||
|
_onTranformationApplied: function() {
|
||||||
|
this.undoTransformations = [];
|
||||||
|
this._updateButtons();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})(window, document, Darkroom, fabric);
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Rotation = Darkroom.Transformation.extend({
|
||||||
|
applyTransformation: function(canvas, image, next) {
|
||||||
|
var angle = (image.getAngle() + this.options.angle) % 360;
|
||||||
|
image.rotate(angle);
|
||||||
|
|
||||||
|
var width, height;
|
||||||
|
height = Math.abs(image.getWidth()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getHeight()*(Math.cos(angle*Math.PI/180)));
|
||||||
|
width = Math.abs(image.getHeight()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getWidth()*(Math.cos(angle*Math.PI/180)));
|
||||||
|
|
||||||
|
canvas.setWidth(width);
|
||||||
|
canvas.setHeight(height);
|
||||||
|
|
||||||
|
canvas.centerObject(image);
|
||||||
|
image.setCoords();
|
||||||
|
canvas.renderAll();
|
||||||
|
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Darkroom.plugins['rotate'] = Darkroom.Plugin.extend({
|
||||||
|
|
||||||
|
initialize: function InitDarkroomRotatePlugin() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
var leftButton = buttonGroup.createButton({
|
||||||
|
image: 'rotate-left'
|
||||||
|
});
|
||||||
|
|
||||||
|
var rightButton = buttonGroup.createButton({
|
||||||
|
image: 'rotate-right'
|
||||||
|
});
|
||||||
|
|
||||||
|
leftButton.addEventListener('click', this.rotateLeft.bind(this));
|
||||||
|
rightButton.addEventListener('click', this.rotateRight.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
rotateLeft: function rotateLeft() {
|
||||||
|
this.rotate(-90);
|
||||||
|
},
|
||||||
|
|
||||||
|
rotateRight: function rotateRight() {
|
||||||
|
this.rotate(90);
|
||||||
|
},
|
||||||
|
|
||||||
|
rotate: function rotate(angle) {
|
||||||
|
this.darkroom.applyTransformation(
|
||||||
|
new Rotation({angle: angle})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Darkroom.plugins['save'] = Darkroom.Plugin.extend({
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
callback: function() {
|
||||||
|
this.darkroom.selfDestroy();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function InitializeDarkroomSavePlugin() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.destroyButton = buttonGroup.createButton({
|
||||||
|
image: 'save'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.destroyButton.addEventListener('click', this.options.callback.bind(this));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
{
|
||||||
|
"name": "darkroom",
|
||||||
|
"description": "Extensible image editing tool via HTML canvas",
|
||||||
|
"version": "2.0.1",
|
||||||
|
"license": "MIT",
|
||||||
|
"homepage": "https://mattketmo.github.io/darkroomjs",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/mattketmo/darkroomjs.git"
|
||||||
|
},
|
||||||
|
"author": "Matthieu Moquet <matthieu@moquet.net> (http://moquet.net/)",
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"cheerio": "^0.18.0",
|
||||||
|
"gulp": "^3.8.6",
|
||||||
|
"gulp-concat": "^2.3.4",
|
||||||
|
"gulp-connect": "^2.0.6",
|
||||||
|
"gulp-inject": "^1.2.0",
|
||||||
|
"gulp-plumber": "^0.6.4",
|
||||||
|
"gulp-sass": "^0.7.2",
|
||||||
|
"gulp-sourcemaps": "^1.1.0",
|
||||||
|
"gulp-svgmin": "^1.1.1",
|
||||||
|
"gulp-svgstore": "^5.0.0",
|
||||||
|
"gulp-uglify": "^0.3.1",
|
||||||
|
"gulp-util": "^3.0.0",
|
||||||
|
"js-string-escape": "^1.0.0",
|
||||||
|
"rimraf": "^2.2.8",
|
||||||
|
"streamqueue": "^0.1.1"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "node_modules/.bin/gulp server build --prod",
|
||||||
|
"develop": "node_modules/.bin/gulp"
|
||||||
|
},
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/*.darkroom-container{
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
.darkroom-toolbar{
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.darkroom-button-group{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* Copyright 2016 LasLabs Inc.
|
||||||
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_plugins', function(require){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var DarkroomPlugins = Object;
|
||||||
|
DarkroomPlugins.extend = function(destination, source) {
|
||||||
|
for (var property in source) {
|
||||||
|
if (source.hasOwnProperty(property)) {
|
||||||
|
destination[property] = source[property];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return destination;
|
||||||
|
};
|
||||||
|
|
||||||
|
return DarkroomPlugins
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,683 @@
|
||||||
|
/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
|
||||||
|
* License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_crop', function(require){
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DarkroomPluginCrop = function(){
|
||||||
|
|
||||||
|
var Crop = Darkroom.Transformation.extend({
|
||||||
|
applyTransformation: function(canvas, image, next) {
|
||||||
|
// Snapshot the image delimited by the crop zone
|
||||||
|
var snapshot = new Image();
|
||||||
|
snapshot.onload = function() {
|
||||||
|
// Validate image
|
||||||
|
if (height < 1 || width < 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var imgInstance = new fabric.Image(this, {
|
||||||
|
// options to make the image static
|
||||||
|
selectable: false,
|
||||||
|
evented: false,
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
lockRotation: true,
|
||||||
|
lockScalingX: true,
|
||||||
|
lockScalingY: true,
|
||||||
|
lockUniScaling: true,
|
||||||
|
hasControls: false,
|
||||||
|
hasBorders: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var width = this.width;
|
||||||
|
var height = this.height;
|
||||||
|
|
||||||
|
// Update canvas size
|
||||||
|
canvas.setWidth(width);
|
||||||
|
canvas.setHeight(height);
|
||||||
|
|
||||||
|
// Add image
|
||||||
|
image.remove();
|
||||||
|
canvas.add(imgInstance);
|
||||||
|
|
||||||
|
next(imgInstance);
|
||||||
|
};
|
||||||
|
|
||||||
|
var viewport = Darkroom.Utils.computeImageViewPort(image);
|
||||||
|
var imageWidth = viewport.width;
|
||||||
|
var imageHeight = viewport.height;
|
||||||
|
|
||||||
|
var left = this.options.left * imageWidth;
|
||||||
|
var top = this.options.top * imageHeight;
|
||||||
|
var width = Math.min(this.options.width * imageWidth, imageWidth - left);
|
||||||
|
var height = Math.min(this.options.height * imageHeight, imageHeight - top);
|
||||||
|
|
||||||
|
snapshot.src = canvas.toDataURL({
|
||||||
|
left: left,
|
||||||
|
top: top,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var CropZone = fabric.util.createClass(fabric.Rect, {
|
||||||
|
_render: function(ctx) {
|
||||||
|
this.callSuper('_render', ctx);
|
||||||
|
|
||||||
|
var canvas = ctx.canvas;
|
||||||
|
var dashWidth = 7;
|
||||||
|
|
||||||
|
// Set original scale
|
||||||
|
var flipX = this.flipX ? -1 : 1;
|
||||||
|
var flipY = this.flipY ? -1 : 1;
|
||||||
|
var scaleX = flipX / this.scaleX;
|
||||||
|
var scaleY = flipY / this.scaleY;
|
||||||
|
|
||||||
|
ctx.scale(scaleX, scaleY);
|
||||||
|
|
||||||
|
// Overlay rendering
|
||||||
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
|
||||||
|
this._renderOverlay(ctx);
|
||||||
|
|
||||||
|
// Set dashed borders
|
||||||
|
if (ctx.setLineDash !== undefined)
|
||||||
|
ctx.setLineDash([dashWidth, dashWidth]);
|
||||||
|
else if (ctx.mozDash !== undefined)
|
||||||
|
ctx.mozDash = [dashWidth, dashWidth];
|
||||||
|
|
||||||
|
// First lines rendering with black
|
||||||
|
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
|
||||||
|
this._renderBorders(ctx);
|
||||||
|
this._renderGrid(ctx);
|
||||||
|
|
||||||
|
// Re render lines in white
|
||||||
|
ctx.lineDashOffset = dashWidth;
|
||||||
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
|
||||||
|
this._renderBorders(ctx);
|
||||||
|
this._renderGrid(ctx);
|
||||||
|
|
||||||
|
// Reset scale
|
||||||
|
ctx.scale(1/scaleX, 1/scaleY);
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderOverlay: function(ctx) {
|
||||||
|
var canvas = ctx.canvas;
|
||||||
|
var borderOffset = 0;
|
||||||
|
|
||||||
|
//
|
||||||
|
// x0 x1 x2 x3
|
||||||
|
// y0 +------------------------+
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// y1 +------+---------+-------+
|
||||||
|
// |\\\\\\| |\\\\\\\|
|
||||||
|
// |\\\\\\| 0 |\\\\\\\|
|
||||||
|
// |\\\\\\| |\\\\\\\|
|
||||||
|
// y2 +------+---------+-------+
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// |\\\\\\\\\\\\\\\\\\\\\\\\|
|
||||||
|
// y3 +------------------------+
|
||||||
|
//
|
||||||
|
|
||||||
|
var x0 = Math.ceil(-this.getWidth() / 2 - this.getLeft());
|
||||||
|
var x1 = Math.ceil(-this.getWidth() / 2);
|
||||||
|
var x2 = Math.ceil(this.getWidth() / 2);
|
||||||
|
var x3 = Math.ceil(this.getWidth() / 2 + (canvas.width - this.getWidth() - this.getLeft()));
|
||||||
|
|
||||||
|
var y0 = Math.ceil(-this.getHeight() / 2 - this.getTop());
|
||||||
|
var y1 = Math.ceil(-this.getHeight() / 2);
|
||||||
|
var y2 = Math.ceil(this.getHeight() / 2);
|
||||||
|
var y3 = Math.ceil(this.getHeight() / 2 + (canvas.height - this.getHeight() - this.getTop()));
|
||||||
|
|
||||||
|
// Upper rect
|
||||||
|
ctx.fillRect(x0, y0, x3 - x0, y1 - y0 + borderOffset);
|
||||||
|
|
||||||
|
// Left rect
|
||||||
|
ctx.fillRect(x0, y1, x1 - x0, y2 - y1 + borderOffset);
|
||||||
|
|
||||||
|
// Right rect
|
||||||
|
ctx.fillRect(x2, y1, x3 - x2, y2 - y1 + borderOffset);
|
||||||
|
|
||||||
|
// Down rect
|
||||||
|
ctx.fillRect(x0, y2, x3 - x0, y3 - y2);
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderBorders: function(ctx) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2); // upper right
|
||||||
|
ctx.lineTo(this.getWidth()/2, this.getHeight()/2); // down right
|
||||||
|
ctx.lineTo(-this.getWidth()/2, this.getHeight()/2); // down left
|
||||||
|
ctx.lineTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderGrid: function(ctx) {
|
||||||
|
// Vertical lines
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2 + 1/3 * this.getWidth(), -this.getHeight()/2);
|
||||||
|
ctx.lineTo(-this.getWidth()/2 + 1/3 * this.getWidth(), this.getHeight()/2);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2 + 2/3 * this.getWidth(), -this.getHeight()/2);
|
||||||
|
ctx.lineTo(-this.getWidth()/2 + 2/3 * this.getWidth(), this.getHeight()/2);
|
||||||
|
ctx.stroke();
|
||||||
|
// Horizontal lines
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
|
||||||
|
ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Darkroom.plugins['crop'] = Darkroom.Plugin.extend({
|
||||||
|
// Init point
|
||||||
|
startX: null,
|
||||||
|
startY: null,
|
||||||
|
|
||||||
|
// Keycrop
|
||||||
|
isKeyCroping: false,
|
||||||
|
isKeyLeft: false,
|
||||||
|
isKeyUp: false,
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
// min crop dimension
|
||||||
|
minHeight: 1,
|
||||||
|
minWidth: 1,
|
||||||
|
// ensure crop ratio
|
||||||
|
ratio: null,
|
||||||
|
// quick crop feature (set a key code to enable it)
|
||||||
|
quickCropKey: false
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function InitDarkroomCropPlugin() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.cropButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-crop',
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
this.okButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-check',
|
||||||
|
editOnly: true,
|
||||||
|
type: 'success',
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
this.cancelButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-times',
|
||||||
|
editOnly: true,
|
||||||
|
type: 'danger',
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Buttons click
|
||||||
|
this.cropButton.addEventListener('click', this.toggleCrop.bind(this));
|
||||||
|
this.okButton.addEventListener('click', this.cropCurrentZone.bind(this));
|
||||||
|
this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
|
||||||
|
|
||||||
|
// Canvas events
|
||||||
|
this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
|
||||||
|
this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
|
||||||
|
this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
|
||||||
|
|
||||||
|
fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
|
||||||
|
fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
|
||||||
|
|
||||||
|
this.darkroom.addEventListener('core:transformation', this.releaseFocus.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Avoid crop zone to go beyond the canvas edges
|
||||||
|
onObjectMoving: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentObject = event.target;
|
||||||
|
if (currentObject !== this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var x = currentObject.getLeft(), y = currentObject.getTop();
|
||||||
|
var w = currentObject.getWidth(), h = currentObject.getHeight();
|
||||||
|
var maxX = canvas.getWidth() - w;
|
||||||
|
var maxY = canvas.getHeight() - h;
|
||||||
|
|
||||||
|
if (x < 0)
|
||||||
|
currentObject.set('left', 0);
|
||||||
|
if (y < 0)
|
||||||
|
currentObject.set('top', 0);
|
||||||
|
if (x > maxX)
|
||||||
|
currentObject.set('left', maxX);
|
||||||
|
if (y > maxY)
|
||||||
|
currentObject.set('top', maxY);
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
// Prevent crop zone from going beyond the canvas edges (like mouseMove)
|
||||||
|
onObjectScaling: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var preventScaling = false;
|
||||||
|
var currentObject = event.target;
|
||||||
|
if (currentObject !== this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
var minX = currentObject.getLeft();
|
||||||
|
var minY = currentObject.getTop();
|
||||||
|
var maxX = currentObject.getLeft() + currentObject.getWidth();
|
||||||
|
var maxY = currentObject.getTop() + currentObject.getHeight();
|
||||||
|
|
||||||
|
if (null !== this.options.ratio) {
|
||||||
|
if (minX < 0 || maxX > canvas.getWidth() || minY < 0 || maxY > canvas.getHeight()) {
|
||||||
|
preventScaling = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minX < 0 || maxX > canvas.getWidth() || preventScaling) {
|
||||||
|
var lastScaleX = this.lastScaleX || 1;
|
||||||
|
currentObject.setScaleX(lastScaleX);
|
||||||
|
}
|
||||||
|
if (minX < 0) {
|
||||||
|
currentObject.setLeft(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (minY < 0 || maxY > canvas.getHeight() || preventScaling) {
|
||||||
|
var lastScaleY = this.lastScaleY || 1;
|
||||||
|
currentObject.setScaleY(lastScaleY);
|
||||||
|
}
|
||||||
|
if (minY < 0) {
|
||||||
|
currentObject.setTop(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentObject.getWidth() < this.options.minWidth) {
|
||||||
|
currentObject.scaleToWidth(this.options.minWidth);
|
||||||
|
}
|
||||||
|
if (currentObject.getHeight() < this.options.minHeight) {
|
||||||
|
currentObject.scaleToHeight(this.options.minHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.lastScaleX = currentObject.getScaleX();
|
||||||
|
this.lastScaleY = currentObject.getScaleY();
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
// Init crop zone
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
if (!this.hasFocus()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
|
||||||
|
// recalculate offset, in case canvas was manipulated since last `calcOffset`
|
||||||
|
canvas.calcOffset();
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
var point = new fabric.Point(x, y);
|
||||||
|
|
||||||
|
// Check if user want to scale or drag the crop zone.
|
||||||
|
var activeObject = canvas.getActiveObject();
|
||||||
|
if (activeObject === this.cropZone || this.cropZone.containsPoint(point)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.discardActiveObject();
|
||||||
|
this.cropZone.setWidth(0);
|
||||||
|
this.cropZone.setHeight(0);
|
||||||
|
this.cropZone.setScaleX(1);
|
||||||
|
this.cropZone.setScaleY(1);
|
||||||
|
|
||||||
|
this.startX = x;
|
||||||
|
this.startY = y;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Extend crop zone
|
||||||
|
onMouseMove: function(event) {
|
||||||
|
// Quick crop feature
|
||||||
|
if (this.isKeyCroping)
|
||||||
|
return this.onMouseMoveKeyCrop(event);
|
||||||
|
|
||||||
|
if (null === this.startX || null === this.startY) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
this._renderCropZone(this.startX, this.startY, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseMoveKeyCrop: function(event) {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var zone = this.cropZone;
|
||||||
|
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
var x = pointer.x;
|
||||||
|
var y = pointer.y;
|
||||||
|
|
||||||
|
if (!zone.left || !zone.top) {
|
||||||
|
zone.setTop(y);
|
||||||
|
zone.setLeft(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isKeyLeft = x < zone.left + zone.width / 2 ;
|
||||||
|
this.isKeyUp = y < zone.top + zone.height / 2 ;
|
||||||
|
|
||||||
|
this._renderCropZone(
|
||||||
|
Math.min(zone.left, x),
|
||||||
|
Math.min(zone.top, y),
|
||||||
|
Math.max(zone.left+zone.width, x),
|
||||||
|
Math.max(zone.top+zone.height, y)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Finish crop zone
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
if (null === this.startX || null === this.startY) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
this.cropZone.setCoords();
|
||||||
|
canvas.setActiveObject(this.cropZone);
|
||||||
|
canvas.calcOffset();
|
||||||
|
|
||||||
|
this.startX = null;
|
||||||
|
this.startY = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyDown: function(event) {
|
||||||
|
if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || this.isKeyCroping)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Active quick crop flow
|
||||||
|
this.isKeyCroping = true ;
|
||||||
|
this.darkroom.canvas.discardActiveObject();
|
||||||
|
this.cropZone.setWidth(0);
|
||||||
|
this.cropZone.setHeight(0);
|
||||||
|
this.cropZone.setScaleX(1);
|
||||||
|
this.cropZone.setScaleY(1);
|
||||||
|
this.cropZone.setTop(0);
|
||||||
|
this.cropZone.setLeft(0);
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyUp: function(event) {
|
||||||
|
if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || !this.isKeyCroping)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Unactive quick crop flow
|
||||||
|
this.isKeyCroping = false;
|
||||||
|
this.startX = 1;
|
||||||
|
this.startY = 1;
|
||||||
|
this.onMouseUp();
|
||||||
|
},
|
||||||
|
|
||||||
|
selectZone: function(x, y, width, height, forceDimension) {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
this.requireFocus();
|
||||||
|
|
||||||
|
if (!forceDimension) {
|
||||||
|
this._renderCropZone(x, y, x+width, y+height);
|
||||||
|
} else {
|
||||||
|
this.cropZone.set({
|
||||||
|
'left': x,
|
||||||
|
'top': y,
|
||||||
|
'width': width,
|
||||||
|
'height': height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
canvas.bringToFront(this.cropZone);
|
||||||
|
this.cropZone.setCoords();
|
||||||
|
canvas.setActiveObject(this.cropZone);
|
||||||
|
canvas.calcOffset();
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleCrop: function() {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
this.requireFocus();
|
||||||
|
else
|
||||||
|
this.releaseFocus();
|
||||||
|
},
|
||||||
|
|
||||||
|
cropCurrentZone: function() {
|
||||||
|
if (!this.hasFocus())
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Avoid croping empty zone
|
||||||
|
if (this.cropZone.width < 1 && this.cropZone.height < 1)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var image = this.darkroom.image;
|
||||||
|
|
||||||
|
// Compute crop zone dimensions
|
||||||
|
var top = this.cropZone.getTop() - image.getTop();
|
||||||
|
var left = this.cropZone.getLeft() - image.getLeft();
|
||||||
|
var width = this.cropZone.getWidth();
|
||||||
|
var height = this.cropZone.getHeight();
|
||||||
|
|
||||||
|
// Adjust dimensions to image only
|
||||||
|
if (top < 0) {
|
||||||
|
height += top;
|
||||||
|
top = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (left < 0) {
|
||||||
|
width += left;
|
||||||
|
left = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply crop transformation.
|
||||||
|
// Make sure to use relative dimension since the crop will be applied
|
||||||
|
// on the source image.
|
||||||
|
this.darkroom.applyTransformation(new Crop({
|
||||||
|
top: top / image.getHeight(),
|
||||||
|
left: left / image.getWidth(),
|
||||||
|
width: width / image.getWidth(),
|
||||||
|
height: height / image.getHeight(),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
// Test wether crop zone is set
|
||||||
|
hasFocus: function() {
|
||||||
|
return this.cropZone !== undefined;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create the crop zone
|
||||||
|
requireFocus: function() {
|
||||||
|
this.cropZone = new CropZone({
|
||||||
|
fill: 'transparent',
|
||||||
|
hasBorders: false,
|
||||||
|
originX: 'left',
|
||||||
|
originY: 'top',
|
||||||
|
//stroke: '#444',
|
||||||
|
//strokeDashArray: [5, 5],
|
||||||
|
//borderColor: '#444',
|
||||||
|
cornerColor: '#444',
|
||||||
|
cornerSize: 8,
|
||||||
|
transparentCorners: false,
|
||||||
|
lockRotation: true,
|
||||||
|
hasRotatingPoint: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (null !== this.options.ratio) {
|
||||||
|
this.cropZone.set('lockUniScaling', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.darkroom.canvas.add(this.cropZone);
|
||||||
|
this.darkroom.canvas.defaultCursor = 'crosshair';
|
||||||
|
|
||||||
|
this.cropButton.active(true);
|
||||||
|
this.okButton.hide(false);
|
||||||
|
this.cancelButton.hide(false);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Remove the crop zone
|
||||||
|
releaseFocus: function() {
|
||||||
|
if (undefined === this.cropZone)
|
||||||
|
return;
|
||||||
|
|
||||||
|
this.cropZone.remove();
|
||||||
|
this.cropZone = undefined;
|
||||||
|
|
||||||
|
this.cropButton.active(false);
|
||||||
|
this.okButton.hide(true);
|
||||||
|
this.cancelButton.hide(true);
|
||||||
|
|
||||||
|
this.darkroom.canvas.defaultCursor = 'default';
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
},
|
||||||
|
|
||||||
|
_renderCropZone: function(fromX, fromY, toX, toY) {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
|
||||||
|
var isRight = (toX > fromX);
|
||||||
|
var isLeft = !isRight;
|
||||||
|
var isDown = (toY > fromY);
|
||||||
|
var isUp = !isDown;
|
||||||
|
|
||||||
|
var minWidth = Math.min(+this.options.minWidth, canvas.getWidth());
|
||||||
|
var minHeight = Math.min(+this.options.minHeight, canvas.getHeight());
|
||||||
|
|
||||||
|
// Define corner coordinates
|
||||||
|
var leftX = Math.min(fromX, toX);
|
||||||
|
var rightX = Math.max(fromX, toX);
|
||||||
|
var topY = Math.min(fromY, toY);
|
||||||
|
var bottomY = Math.max(fromY, toY);
|
||||||
|
|
||||||
|
// Replace current point into the canvas
|
||||||
|
leftX = Math.max(0, leftX);
|
||||||
|
rightX = Math.min(canvas.getWidth(), rightX);
|
||||||
|
topY = Math.max(0, topY)
|
||||||
|
bottomY = Math.min(canvas.getHeight(), bottomY);
|
||||||
|
|
||||||
|
// Recalibrate coordinates according to given options
|
||||||
|
if (rightX - leftX < minWidth) {
|
||||||
|
if (isRight)
|
||||||
|
rightX = leftX + minWidth;
|
||||||
|
else
|
||||||
|
leftX = rightX - minWidth;
|
||||||
|
}
|
||||||
|
if (bottomY - topY < minHeight) {
|
||||||
|
if (isDown)
|
||||||
|
bottomY = topY + minHeight;
|
||||||
|
else
|
||||||
|
topY = bottomY - minHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Truncate truncate according to canvas dimensions
|
||||||
|
if (leftX < 0) {
|
||||||
|
// Translate to the left
|
||||||
|
rightX += Math.abs(leftX);
|
||||||
|
leftX = 0
|
||||||
|
}
|
||||||
|
if (rightX > canvas.getWidth()) {
|
||||||
|
// Translate to the right
|
||||||
|
leftX -= (rightX - canvas.getWidth());
|
||||||
|
rightX = canvas.getWidth();
|
||||||
|
}
|
||||||
|
if (topY < 0) {
|
||||||
|
// Translate to the bottom
|
||||||
|
bottomY += Math.abs(topY);
|
||||||
|
topY = 0
|
||||||
|
}
|
||||||
|
if (bottomY > canvas.getHeight()) {
|
||||||
|
// Translate to the right
|
||||||
|
topY -= (bottomY - canvas.getHeight());
|
||||||
|
bottomY = canvas.getHeight();
|
||||||
|
}
|
||||||
|
|
||||||
|
var width = rightX - leftX;
|
||||||
|
var height = bottomY - topY;
|
||||||
|
var currentRatio = width / height;
|
||||||
|
|
||||||
|
if (this.options.ratio && +this.options.ratio !== currentRatio) {
|
||||||
|
var ratio = +this.options.ratio;
|
||||||
|
|
||||||
|
if(this.isKeyCroping) {
|
||||||
|
isLeft = this.isKeyLeft;
|
||||||
|
isUp = this.isKeyUp;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentRatio < ratio) {
|
||||||
|
var newWidth = height * ratio;
|
||||||
|
if (isLeft) {
|
||||||
|
leftX -= (newWidth - width);
|
||||||
|
}
|
||||||
|
width = newWidth;
|
||||||
|
} else if (currentRatio > ratio) {
|
||||||
|
var newHeight = height / (ratio * height/width);
|
||||||
|
if (isUp) {
|
||||||
|
topY -= (newHeight - height);
|
||||||
|
}
|
||||||
|
height = newHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (leftX < 0) {
|
||||||
|
leftX = 0;
|
||||||
|
//TODO
|
||||||
|
}
|
||||||
|
if (topY < 0) {
|
||||||
|
topY = 0;
|
||||||
|
//TODO
|
||||||
|
}
|
||||||
|
if (leftX + width > canvas.getWidth()) {
|
||||||
|
var newWidth = canvas.getWidth() - leftX;
|
||||||
|
height = newWidth * height / width;
|
||||||
|
width = newWidth;
|
||||||
|
if (isUp) {
|
||||||
|
topY = fromY - height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (topY + height > canvas.getHeight()) {
|
||||||
|
var newHeight = canvas.getHeight() - topY;
|
||||||
|
width = width * newHeight / height;
|
||||||
|
height = newHeight;
|
||||||
|
if (isLeft) {
|
||||||
|
leftX = fromX - width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply coordinates
|
||||||
|
this.cropZone.left = leftX;
|
||||||
|
this.cropZone.top = topY;
|
||||||
|
this.cropZone.width = width;
|
||||||
|
this.cropZone.height = height;
|
||||||
|
|
||||||
|
this.darkroom.canvas.bringToFront(this.cropZone);
|
||||||
|
|
||||||
|
this.darkroom.dispatchEvent('crop:update');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return {DarkroomPluginCrop: DarkroomPluginCrop};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
|
||||||
|
* License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_history', function(require){
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DarkroomPluginHistory = function() {
|
||||||
|
|
||||||
|
Darkroom.plugins['history'] = Darkroom.Plugin.extend({
|
||||||
|
undoTransformations: [],
|
||||||
|
|
||||||
|
initialize: function InitDarkroomHistoryPlugin() {
|
||||||
|
this._initButtons();
|
||||||
|
|
||||||
|
this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
undo: function() {
|
||||||
|
if (this.darkroom.transformations.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var lastTransformation = this.darkroom.transformations.pop();
|
||||||
|
this.undoTransformations.unshift(lastTransformation);
|
||||||
|
|
||||||
|
this.darkroom.reinitializeImage();
|
||||||
|
this._updateButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
redo: function() {
|
||||||
|
if (this.undoTransformations.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cancelTransformation = this.undoTransformations.shift();
|
||||||
|
this.darkroom.transformations.push(cancelTransformation);
|
||||||
|
|
||||||
|
this.darkroom.reinitializeImage();
|
||||||
|
this._updateButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
_initButtons: function() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.backButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-step-backward',
|
||||||
|
disabled: true,
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.forwardButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-step-forward',
|
||||||
|
disabled: true,
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.backButton.addEventListener('click', this.undo.bind(this));
|
||||||
|
this.forwardButton.addEventListener('click', this.redo.bind(this));
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
_updateButtons: function() {
|
||||||
|
this.backButton.disable((this.darkroom.transformations.length === 0))
|
||||||
|
this.forwardButton.disable((this.undoTransformations.length === 0))
|
||||||
|
},
|
||||||
|
|
||||||
|
_onTranformationApplied: function() {
|
||||||
|
this.undoTransformations = [];
|
||||||
|
this._updateButtons();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return {DarkroomPluginHistory: DarkroomPluginHistory};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
|
||||||
|
* License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_rotate', function(require){
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DarkroomPluginRotate = function() {
|
||||||
|
|
||||||
|
var Rotation = Darkroom.Transformation.extend({
|
||||||
|
applyTransformation: function(canvas, image, next) {
|
||||||
|
var angle = (image.getAngle() + this.options.angle) % 360;
|
||||||
|
image.rotate(angle);
|
||||||
|
|
||||||
|
var width, height;
|
||||||
|
height = Math.abs(image.getWidth()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getHeight()*(Math.cos(angle*Math.PI/180)));
|
||||||
|
width = Math.abs(image.getHeight()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getWidth()*(Math.cos(angle*Math.PI/180)));
|
||||||
|
|
||||||
|
canvas.setWidth(width);
|
||||||
|
canvas.setHeight(height);
|
||||||
|
|
||||||
|
canvas.centerObject(image);
|
||||||
|
image.setCoords();
|
||||||
|
canvas.renderAll();
|
||||||
|
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Darkroom.plugins['rotate'] = Darkroom.Plugin.extend({
|
||||||
|
|
||||||
|
initialize: function InitDarkroomRotatePlugin() {
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
var leftButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-undo oe_edit_only',
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
var rightButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-repeat oe_edit_only',
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
leftButton.addEventListener('click', this.rotateLeft.bind(this));
|
||||||
|
rightButton.addEventListener('click', this.rotateRight.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
rotateLeft: function rotateLeft() {
|
||||||
|
this.rotate(-90);
|
||||||
|
},
|
||||||
|
|
||||||
|
rotateRight: function rotateRight() {
|
||||||
|
this.rotate(90);
|
||||||
|
},
|
||||||
|
|
||||||
|
rotate: function rotate(angle) {
|
||||||
|
this.darkroom.applyTransformation(
|
||||||
|
new Rotation({angle: angle})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return {DarkroomPluginRotate: DarkroomPluginRotate};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
/* Copyright 2016 LasLabs Inc.
|
||||||
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_zoom', function(require){
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DarkroomPluginZoom = function(){
|
||||||
|
|
||||||
|
Darkroom.plugins['zoom'] = Darkroom.Plugin.extend({
|
||||||
|
|
||||||
|
inZoom: false,
|
||||||
|
zoomLevel: 0,
|
||||||
|
zoomFactor: .1,
|
||||||
|
|
||||||
|
initialize: function() {
|
||||||
|
var self = this;
|
||||||
|
var buttonGroup = this.darkroom.toolbar.createButtonGroup();
|
||||||
|
|
||||||
|
this.zoomButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-search',
|
||||||
|
})
|
||||||
|
this.zoomInButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-plus',
|
||||||
|
})
|
||||||
|
this.zoomOutButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-minus',
|
||||||
|
})
|
||||||
|
this.okButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-check',
|
||||||
|
type: 'success',
|
||||||
|
hide: true,
|
||||||
|
editOnly: true,
|
||||||
|
});
|
||||||
|
this.cancelButton = buttonGroup.createButton({
|
||||||
|
image: 'fa fa-times',
|
||||||
|
type: 'danger',
|
||||||
|
hide: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Buttons click
|
||||||
|
this.zoomButton.addEventListener('click', this.toggleZoom.bind(this));
|
||||||
|
this.zoomInButton.addEventListener('click', this.zoomIn.bind(this));
|
||||||
|
this.zoomOutButton.addEventListener('click', this.zoomOut.bind(this));
|
||||||
|
//this.okButton.addEventListener('click', this.saveZoom.bind(this));
|
||||||
|
this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
|
||||||
|
|
||||||
|
// Canvas events
|
||||||
|
this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
|
||||||
|
this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
|
||||||
|
//this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
|
||||||
|
//this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
|
||||||
|
$(this.darkroom.canvas.wrapperEl).on('mousewheel', function(event){
|
||||||
|
self.onMouseWheel(event);
|
||||||
|
});
|
||||||
|
|
||||||
|
//fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
|
||||||
|
//fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
|
||||||
|
this.toggleElements(false);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleZoom: function() {
|
||||||
|
if (this.hasFocus()) {
|
||||||
|
this.releaseFocus();
|
||||||
|
} else {
|
||||||
|
this.requireFocus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hasFocus: function() {
|
||||||
|
return this.inZoom;
|
||||||
|
},
|
||||||
|
|
||||||
|
releaseFocus: function() {
|
||||||
|
this.toggleElements(false);
|
||||||
|
},
|
||||||
|
|
||||||
|
requireFocus: function() {
|
||||||
|
this.toggleElements(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleElements: function(activate) {
|
||||||
|
if (activate === 'undefined') {
|
||||||
|
activate = !this.hasFocus();
|
||||||
|
}
|
||||||
|
this.zoomButton.active(!activate);
|
||||||
|
this.inZoom = activate;
|
||||||
|
this.zoomInButton.hide(!activate);
|
||||||
|
this.zoomOutButton.hide(!activate);
|
||||||
|
this.okButton.hide(!activate);
|
||||||
|
this.cancelButton.hide(!activate);
|
||||||
|
this.darkroom.canvas.default_cursor = activate ? "move" : "default";
|
||||||
|
},
|
||||||
|
|
||||||
|
// Return fabric.Point object for center of canvas
|
||||||
|
getCenterPoint: function() {
|
||||||
|
var center = this.darkroom.canvas.getCenter();
|
||||||
|
return new fabric.Point(center.left, center.top);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Set internal zoom
|
||||||
|
setZoomLevel: function(factor, point) {
|
||||||
|
var zoomLevel = this.zoomLevel + factor;
|
||||||
|
if (zoomLevel < 0) zoomLevel = 0;
|
||||||
|
if (zoomLevel == this.zoomLevel) return false;
|
||||||
|
console.log('Setting zoom factor');
|
||||||
|
console.log(zoomLevel);
|
||||||
|
console.log(point);
|
||||||
|
if (point) {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
canvas.zoomToPoint(point, zoomLevel + 1); // Add one for zero index
|
||||||
|
this.zoomLevel = zoomLevel;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
getObjectBounds: function() {
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var objects = canvas.getObjects();
|
||||||
|
var top = 0, bottom = 0, left = 0, right = 0;
|
||||||
|
for (var idx in objects) {
|
||||||
|
var obj = objects[idx];
|
||||||
|
var objRight = obj.left + obj.getWidth();
|
||||||
|
var objBottom = obj.top + obj.getHeight();
|
||||||
|
if (obj.left < left) left = obj.left;
|
||||||
|
if (objRight > right) right = objRight;
|
||||||
|
if (obj.top < top) top = obj.top;
|
||||||
|
if (objBottom > bottom) bottom = objBottom;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
top: top,
|
||||||
|
bottom: bottom,
|
||||||
|
left: left,
|
||||||
|
right: right,
|
||||||
|
height: (bottom - top),
|
||||||
|
width: (right - left),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
zoomIn: function() {
|
||||||
|
return this.setZoomLevel(this.zoomFactor, this.getCenterPoint());
|
||||||
|
},
|
||||||
|
|
||||||
|
zoomOut: function() {
|
||||||
|
return this.setZoomLevel(-this.zoomFactor, this.getCenterPoint());
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseWheel: function(event) {
|
||||||
|
if (this.hasFocus() && event && event.originalEvent) {
|
||||||
|
var modifier = event.originalEvent.wheelDelta < 0 ? -1 : 1;
|
||||||
|
var pointer = this.darkroom.canvas.getPointer(event.originalEvent);
|
||||||
|
var mousePoint = new fabric.Point(pointer.x, pointer.y);
|
||||||
|
this.setZoomLevel(modifier * this.zoomFactor, mousePoint);
|
||||||
|
return event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseDown: function(event) {
|
||||||
|
if (this.hasFocus()) {
|
||||||
|
this.panning = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp: function(event) {
|
||||||
|
this.panning = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseMove: function(event) {
|
||||||
|
if (this.panning && event && event.e) {
|
||||||
|
var delta = new fabric.Point(event.e.movementX,
|
||||||
|
event.e.movementY);
|
||||||
|
var canvas = this.darkroom.canvas;
|
||||||
|
var objBounds = this.getObjectBounds();
|
||||||
|
var newPoint = new fabric.Point(
|
||||||
|
-delta.x - canvas.viewportTransform[4],
|
||||||
|
-delta.y - canvas.viewportTransform[5]
|
||||||
|
)
|
||||||
|
if (newPoint.x < objBounds.left || newPoint.x > objBounds.right) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (newPoint.y < objBounds.top || newPoint.y > objBounds.bottom) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
canvas.absolutePan(newPoint);
|
||||||
|
//canvas.setCoords();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return {DarkroomPluginZoom: DarkroomPluginZoom};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,238 @@
|
||||||
|
/* Copyright 2016 LasLabs Inc.
|
||||||
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_widget', function(require){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var core = require('web.core');
|
||||||
|
var common = require('web.form_common');
|
||||||
|
var session = require('web.session');
|
||||||
|
var utils = require('web.utils');
|
||||||
|
var framework = require('web.framework');
|
||||||
|
var crash_manager = require('web.crash_manager');
|
||||||
|
|
||||||
|
var QWeb = core.qweb;
|
||||||
|
var _t = core._t;
|
||||||
|
|
||||||
|
var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||||
|
className: 'darkroom-widget',
|
||||||
|
template: 'FieldDarkroomImage',
|
||||||
|
placeholder: "/web/static/src/img/placeholder.png",
|
||||||
|
darkroom: null,
|
||||||
|
no_rerender: false,
|
||||||
|
|
||||||
|
defaults: {
|
||||||
|
// Canvas initialization size
|
||||||
|
minWidth: 100,
|
||||||
|
minHeight: 100,
|
||||||
|
maxWidth: 700,
|
||||||
|
maxHeight: 500,
|
||||||
|
|
||||||
|
// Plugins options
|
||||||
|
plugins: {
|
||||||
|
crop: {
|
||||||
|
minHeight: 50,
|
||||||
|
minWidth: 50,
|
||||||
|
ratio: 1
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Post initialization method
|
||||||
|
initialize: function() {
|
||||||
|
// Active crop selection
|
||||||
|
// this.plugins['crop'].requireFocus();
|
||||||
|
// Add custom listener
|
||||||
|
// this.addEventListener('core:transformation', function() { /* ... */ });
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function(field_manager, node) {
|
||||||
|
this._super(field_manager, node);
|
||||||
|
this.options = _.defaults(this.options, this.defaults);
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom_icons: function() {
|
||||||
|
var element = document.createElement('div');
|
||||||
|
element.id = 'darkroom-icons';
|
||||||
|
element.style.height = 0;
|
||||||
|
element.style.width = 0;
|
||||||
|
element.style.position = 'absolute';
|
||||||
|
element.style.visibility = 'hidden';
|
||||||
|
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||||
|
this.el.appendChild(element);
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom_plugins: function(){
|
||||||
|
require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
|
||||||
|
require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
|
||||||
|
require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
|
||||||
|
require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom: function() {
|
||||||
|
if (!this.darkroom) {
|
||||||
|
this._init_darkroom_icons();
|
||||||
|
this._init_darkroom_ui();
|
||||||
|
this._init_darkroom_plugins();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom_ui: function() {
|
||||||
|
|
||||||
|
Darkroom.UI = {
|
||||||
|
Toolbar: Toolbar,
|
||||||
|
ButtonGroup: ButtonGroup,
|
||||||
|
Button: Button,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toolbar object.
|
||||||
|
function Toolbar(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Toolbar.prototype = {
|
||||||
|
createButtonGroup: function(options) {
|
||||||
|
var buttonGroup = document.createElement('div');
|
||||||
|
buttonGroup.className = 'darkroom-button-group';
|
||||||
|
this.element.appendChild(buttonGroup);
|
||||||
|
|
||||||
|
return new ButtonGroup(buttonGroup);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ButtonGroup object.
|
||||||
|
function ButtonGroup(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
ButtonGroup.prototype = {
|
||||||
|
createButton: function(options) {
|
||||||
|
var defaults = {
|
||||||
|
image: 'fa fa-question-circle',
|
||||||
|
type: 'default',
|
||||||
|
group: 'default',
|
||||||
|
hide: false,
|
||||||
|
disabled: false,
|
||||||
|
editOnly: false,
|
||||||
|
addClass: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
options = Darkroom.Utils.extend(options, defaults);
|
||||||
|
|
||||||
|
var buttonElement = document.createElement('button');
|
||||||
|
buttonElement.type = 'button';
|
||||||
|
buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
|
||||||
|
buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
|
||||||
|
if (options.editOnly) {
|
||||||
|
buttonElement.classList.add('oe_edit_only');
|
||||||
|
}
|
||||||
|
if (options.addClass) {
|
||||||
|
buttonElement.classList.add(options.addClass);
|
||||||
|
}
|
||||||
|
// buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
|
||||||
|
this.element.appendChild(buttonElement);
|
||||||
|
|
||||||
|
var button = new Button(buttonElement);
|
||||||
|
button.hide(options.hide);
|
||||||
|
button.disable(options.disabled);
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button object.
|
||||||
|
function Button(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Button.prototype = {
|
||||||
|
addEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.addEventListener){
|
||||||
|
this.element.addEventListener(eventName, listener);
|
||||||
|
} else if (this.element.attachEvent) {
|
||||||
|
this.element.attachEvent('on' + eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.removeEventListener){
|
||||||
|
this.element.removeEventListener(eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active: function(value) {
|
||||||
|
if (value){
|
||||||
|
this.element.classList.add('darkroom-button-active');
|
||||||
|
this.element.disabled = false;
|
||||||
|
} else {
|
||||||
|
this.element.classList.remove('darkroom-button-active');
|
||||||
|
this.element.disabled = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide: function(value) {
|
||||||
|
if (value)
|
||||||
|
this.element.classList.add('hidden');
|
||||||
|
else
|
||||||
|
this.element.classList.remove('hidden');
|
||||||
|
},
|
||||||
|
disable: function(value) {
|
||||||
|
this.element.disabled = (value) ? true : false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy_content: function() {
|
||||||
|
if (this.darkroom && this.darkroom.containerElement) {
|
||||||
|
this.darkroom.containerElement.remove();
|
||||||
|
this.darkroom = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
set_value: function(value){
|
||||||
|
this.destroy_content();
|
||||||
|
return this._super(value);
|
||||||
|
},
|
||||||
|
|
||||||
|
render_value: function() {
|
||||||
|
this._init_darkroom();
|
||||||
|
var url;
|
||||||
|
if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
|
||||||
|
url = 'data:image/png;base64,' + this.get('value');
|
||||||
|
} else if (this.get('value')) {
|
||||||
|
var id = JSON.stringify(this.view.datarecord.id || null);
|
||||||
|
var field = this.name;
|
||||||
|
if (this.options.preview_image)
|
||||||
|
field = this.options.preview_image;
|
||||||
|
url = session.url('/web/image', {
|
||||||
|
model: this.view.dataset.model,
|
||||||
|
id: id,
|
||||||
|
field: field,
|
||||||
|
unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
url = this.placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
|
||||||
|
this.$el.find('> img').remove();
|
||||||
|
this.$el.append($img);
|
||||||
|
this.darkroom = new Darkroom($img.get(0), this.options);
|
||||||
|
this.darkroom.widget = this;
|
||||||
|
},
|
||||||
|
|
||||||
|
commit_value: function(callback) {
|
||||||
|
this.set_value(
|
||||||
|
this.darkroom.sourceImage.toDataURL().split(',')[1]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
core.form_widget_registry.add("darkroom", FieldDarkroomImage);
|
||||||
|
|
||||||
|
return {
|
||||||
|
FieldDarkroomImage: FieldDarkroomImage,
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
/* © 2016-TODAY LasLabs Inc.
|
||||||
|
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
|
||||||
|
*/
|
||||||
|
|
||||||
|
odoo.define('web_widget_darkroom.darkroom_widget', function(require){
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var core = require('web.core');
|
||||||
|
var common = require('web.form_common');
|
||||||
|
var session = require('web.session');
|
||||||
|
var utils = require('web.utils');
|
||||||
|
var framework = require('web.framework');
|
||||||
|
var crash_manager = require('web.crash_manager');
|
||||||
|
|
||||||
|
var QWeb = core.qweb;
|
||||||
|
var _t = core._t;
|
||||||
|
|
||||||
|
var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||||
|
className: 'darkroom-widget',
|
||||||
|
template: 'FieldDarkroomImage',
|
||||||
|
placeholder: "/web/static/src/img/placeholder.png",
|
||||||
|
darkroom: null,
|
||||||
|
no_rerender: false,
|
||||||
|
|
||||||
|
_init_darkroom_icons: function() {
|
||||||
|
var element = document.createElement('div');
|
||||||
|
element.id = 'darkroom-icons';
|
||||||
|
element.style.height = 0;
|
||||||
|
element.style.width = 0;
|
||||||
|
element.style.position = 'absolute';
|
||||||
|
element.style.visibility = 'hidden';
|
||||||
|
element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
|
||||||
|
this.el.appendChild(element);
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom_plugins: function(){
|
||||||
|
require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
|
||||||
|
require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
|
||||||
|
require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
|
||||||
|
require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
|
||||||
|
require('web_widget_darkroom.darkroom_save').DarkroomPluginSave();
|
||||||
|
},
|
||||||
|
|
||||||
|
_init_darkroom_ui: function() {
|
||||||
|
|
||||||
|
this._init_darkroom_icons();
|
||||||
|
|
||||||
|
Darkroom.UI = {
|
||||||
|
Toolbar: Toolbar,
|
||||||
|
ButtonGroup: ButtonGroup,
|
||||||
|
Button: Button,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Toolbar object.
|
||||||
|
function Toolbar(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Toolbar.prototype = {
|
||||||
|
createButtonGroup: function(options) {
|
||||||
|
var buttonGroup = document.createElement('div');
|
||||||
|
buttonGroup.className = 'darkroom-button-group';
|
||||||
|
this.element.appendChild(buttonGroup);
|
||||||
|
|
||||||
|
return new ButtonGroup(buttonGroup);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ButtonGroup object.
|
||||||
|
function ButtonGroup(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
ButtonGroup.prototype = {
|
||||||
|
createButton: function(options) {
|
||||||
|
var defaults = {
|
||||||
|
image: 'fa fa-question-circle',
|
||||||
|
type: 'default',
|
||||||
|
group: 'default',
|
||||||
|
hide: false,
|
||||||
|
disabled: false,
|
||||||
|
editOnly: false,
|
||||||
|
addClass: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
options = Darkroom.Utils.extend(options, defaults);
|
||||||
|
|
||||||
|
var buttonElement = document.createElement('button');
|
||||||
|
buttonElement.type = 'button';
|
||||||
|
buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
|
||||||
|
buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
|
||||||
|
if (options.editOnly) {
|
||||||
|
buttonElement.classList.add('oe_edit_only');
|
||||||
|
}
|
||||||
|
<<<<<<< Updated upstream
|
||||||
|
if (options.addClass) {
|
||||||
|
buttonElement.classList.add(options.addClass);
|
||||||
|
}
|
||||||
|
// buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
|
||||||
|
=======
|
||||||
|
>>>>>>> Stashed changes
|
||||||
|
this.element.appendChild(buttonElement);
|
||||||
|
|
||||||
|
var button = new Button(buttonElement);
|
||||||
|
button.hide(options.hide);
|
||||||
|
button.disable(options.disabled);
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button object.
|
||||||
|
function Button(element) {
|
||||||
|
this.element = element;
|
||||||
|
}
|
||||||
|
|
||||||
|
Button.prototype = {
|
||||||
|
addEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.addEventListener){
|
||||||
|
this.element.addEventListener(eventName, listener);
|
||||||
|
} else if (this.element.attachEvent) {
|
||||||
|
this.element.attachEvent('on' + eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeEventListener: function(eventName, listener) {
|
||||||
|
if (this.element.removeEventListener){
|
||||||
|
this.element.removeEventListener(eventName, listener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active: function(value) {
|
||||||
|
if (value){
|
||||||
|
this.element.classList.add('darkroom-button-active');
|
||||||
|
this.element.disabled = false;
|
||||||
|
} else {
|
||||||
|
this.element.classList.remove('darkroom-button-active');
|
||||||
|
this.element.disabled = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide: function(value) {
|
||||||
|
if (value)
|
||||||
|
this.element.classList.add('hidden');
|
||||||
|
else
|
||||||
|
this.element.classList.remove('hidden');
|
||||||
|
},
|
||||||
|
disable: function(value) {
|
||||||
|
this.element.disabled = (value) ? true : false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy_content: function() {
|
||||||
|
console.log('Destroying Darkroom Obj');
|
||||||
|
this.darkroom.selfDestroy();
|
||||||
|
},
|
||||||
|
|
||||||
|
render_value: function() {
|
||||||
|
console.log('Rerendering');
|
||||||
|
var url;
|
||||||
|
if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
|
||||||
|
url = 'data:image/png;base64,' + this.get('value');
|
||||||
|
} else if (this.get('value')) {
|
||||||
|
var id = JSON.stringify(this.view.datarecord.id || null);
|
||||||
|
var field = this.name;
|
||||||
|
if (this.options.preview_image)
|
||||||
|
field = this.options.preview_image;
|
||||||
|
url = session.url('/web/image', {
|
||||||
|
model: this.view.dataset.model,
|
||||||
|
id: id,
|
||||||
|
field: field,
|
||||||
|
unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
url = this.placeholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
|
||||||
|
this.$el.find('> img').remove();
|
||||||
|
this.$el.append($img);
|
||||||
|
|
||||||
|
if (!this.darkroom) {
|
||||||
|
this._init_darkroom_ui();
|
||||||
|
this._init_darkroom_plugins();
|
||||||
|
}
|
||||||
|
this.darkroom = new Darkroom($img.get(0));
|
||||||
|
this.darkroom.widget = this;
|
||||||
|
},
|
||||||
|
|
||||||
|
on_save_as: function(e) {
|
||||||
|
|
||||||
|
framework.blockUI();
|
||||||
|
var value = this.darkroom.sourceImage.toDataURL();
|
||||||
|
var c = crash_manager;
|
||||||
|
var filename_fieldname = this.node.attrs.filename;
|
||||||
|
var filename_field = this.view.fields && this.view.fields[filename_fieldname];
|
||||||
|
|
||||||
|
var filereader = new FileReader();
|
||||||
|
filereader.onload = function(upload) {
|
||||||
|
var data = upload.target.result;
|
||||||
|
data = data.split(',')[1];
|
||||||
|
$.post({
|
||||||
|
url: '/web/binary/upload',
|
||||||
|
|
||||||
|
})
|
||||||
|
};
|
||||||
|
filereader.readAsDataURL(new Blob(value));
|
||||||
|
|
||||||
|
this.$el.find('form.o_form_darkroom_form input[name=ufile]').val(value);
|
||||||
|
this.$el.find('form.o_form_darkroom_form input[name=session_id]').val(this.session.session_id);
|
||||||
|
this.$el.find('form.o_form_darkroom_form').submit();
|
||||||
|
|
||||||
|
var $form = $(parentEl).find('form');
|
||||||
|
$form.find('input[name=ufile]').val(value);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function(field_manager, node) {
|
||||||
|
var self = this;
|
||||||
|
this._super(field_manager, node);
|
||||||
|
this.binary_value = false;
|
||||||
|
this.useFileAPI = !!window.FileReader;
|
||||||
|
this.max_upload_size = 25 * 1024 * 1024; // 25Mo
|
||||||
|
if (!this.useFileAPI) {
|
||||||
|
this.fileupload_id = _.uniqueId('oe_fileupload');
|
||||||
|
$(window).on(this.fileupload_id, function() {
|
||||||
|
var args = [].slice.call(arguments).slice(1);
|
||||||
|
self.on_file_uploaded.apply(self, args);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stop: function() {
|
||||||
|
if (!this.useFileAPI) {
|
||||||
|
$(window).off(this.fileupload_id);
|
||||||
|
}
|
||||||
|
this._super.apply(this, arguments);
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
core.form_widget_registry.add("darkroom", FieldDarkroomImage);
|
||||||
|
|
||||||
|
return {
|
||||||
|
FieldDarkroomImage: FieldDarkroomImage,
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Copyright 2016 LasLabs Inc.
|
||||||
|
License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
-->
|
||||||
|
|
||||||
|
<templates id="field_templates" xml:space="preserve">
|
||||||
|
<t t-name="FieldDarkroomImage">
|
||||||
|
<span class="oe_form_field o_form_field_darkroom"
|
||||||
|
t-att-style="widget.node.attrs.style">
|
||||||
|
<t t-if="!widget.get('effective_readonly')">
|
||||||
|
<div class="darkroom-toolbar" />
|
||||||
|
</t>
|
||||||
|
</span>
|
||||||
|
</t>
|
||||||
|
</templates>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Copyright 2016 LasLabs Inc.
|
||||||
|
License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||||
|
-->
|
||||||
|
|
||||||
|
<odoo>
|
||||||
|
<template id="assets_darkroom" name="web_widget_darkroom Assets" inherit_id="web.assets_backend">
|
||||||
|
<xpath expr="//script[last()]" position="after">
|
||||||
|
<!--<link href="/web_widget_darkroom/static/lib/darkroomjs/build/darkroom.css" rel="stylesheet" type="text/css" />-->
|
||||||
|
<link href="/web_widget_darkroom/static/src/css/darkroom.css" rel="stylesheet" type="text/css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.require.min.js" />
|
||||||
|
|
||||||
|
<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/darkroom.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/plugin.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/transformation.js" />
|
||||||
|
<!--<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/ui.js" />-->
|
||||||
|
<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/utils.js" />
|
||||||
|
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/plugins/darkroom.crop.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/plugins/darkroom.history.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/plugins/darkroom.rotate.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/plugins/darkroom.save.js" />
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/plugins/darkroom.zoom.js" />
|
||||||
|
|
||||||
|
<script src="/web_widget_darkroom/static/src/js/widget_darkroom.js" />
|
||||||
|
|
||||||
|
</xpath>
|
||||||
|
</template>
|
||||||
|
</odoo>
|
||||||
Loading…
Reference in New Issue