Initial Commit
This commit is contained in:
NWalker4483
commit
fdd6b75c99
|
|
@ -0,0 +1 @@
|
|||
dist/
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "plugin:bpmn-io/es6",
|
||||
"env": {
|
||||
"browser": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/node_modules/
|
||||
dist/
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
resources/
|
||||
test/
|
||||
!dist
|
||||
lib/
|
||||
.eslintignore
|
||||
.eslintrc
|
||||
karma.conf.js
|
||||
.travis.yml
|
||||
rollup.config.js
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
language:
|
||||
- node_js
|
||||
|
||||
node_js:
|
||||
- node
|
||||
|
||||
script:
|
||||
- npm run all
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
# Changelog
|
||||
|
||||
All notable changes to [diagram-js-minimap](https://github.com/bpmn-io/diagram-js-minimap) are documented here. We use [semantic versioning](http://semver.org/) for releases.
|
||||
|
||||
## Unreleased
|
||||
|
||||
___Note:__ Yet to be released changes appear here._
|
||||
|
||||
## 2.0.4
|
||||
|
||||
* `FIX`: translate toggle button content ([#43](https://github.com/bpmn-io/diagram-js-minimap/issues/43))
|
||||
|
||||
## 2.0.3
|
||||
|
||||
Re-released `v2.0.2`.
|
||||
|
||||
## 2.0.2
|
||||
|
||||
* `FIX`: do not log graphics not found ([#38](https://github.com/bpmn-io/diagram-js-minimap/issues/38))
|
||||
|
||||
## 2.0.1
|
||||
|
||||
* `FIX`: prevent minimap from crashing on mouse move ([#36](https://github.com/bpmn-io/diagram-js-minimap/issues/36))
|
||||
|
||||
## 2.0.0
|
||||
|
||||
* `CHORE`: provide pre-packaged distribution
|
||||
* `CHORE`: bump to `diagram-js@4`
|
||||
* `FIX`: only update viewbox on valid bounds
|
||||
|
||||
## 1.3.0
|
||||
|
||||
* `CHORE`: bump to `diagram-js@3`
|
||||
|
||||
## 1.2.2
|
||||
|
||||
__Republish with updated changelog.__
|
||||
|
||||
## 1.2.0
|
||||
|
||||
* `FEAT`: zoom on CTRL key only ([`a1848cf8`](https://github.com/bpmn-io/diagram-js-minimap/commit/a1848cf880478a74fb799422780df10f7e6d7d8f))
|
||||
* `FEAT`: center & drag on SVG mouse down ([`5585f871`](https://github.com/bpmn-io/diagram-js-minimap/commit/5585f871933f6ec39d964907d6ab1a33d176cf8f))
|
||||
* `FIX`: change title attribute depending on open/closed ([`5bc0e04a`](https://github.com/bpmn-io/diagram-js-minimap/commit/5bc0e04aedefb46f867b734aa9a303db3ea6c0b7))
|
||||
|
||||
## 1.1.2
|
||||
|
||||
* `FIX`: use `svgClasses` for IE 11 compatibility ([#25](https://github.com/bpmn-io/diagram-js-minimap/issues/25))
|
||||
|
||||
## 1.1.1
|
||||
|
||||
* `FIX`: export `Minimap` as ES module
|
||||
|
||||
## 1.1.0
|
||||
|
||||
* `FEAT`: align minimap to canvas (0, 0) if possible ([#17](https://github.com/bpmn-io/diagram-js-minimap/issues/17))
|
||||
* `FIX`: make close handle always clickable ([#18](https://github.com/bpmn-io/diagram-js-minimap/issues/18))
|
||||
* `FIX`: correct stepping when zooming out ([#19](https://github.com/bpmn-io/diagram-js-minimap/issues/19))
|
||||
* `FIX`: use same zoom directions like diagram-js `ZoomScroll`
|
||||
|
||||
## 1.0.0
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
* `CHORE`: migrate to ES modules
|
||||
|
||||
### Other Improvements
|
||||
|
||||
* `FEAT`: improved minimap UX ([#4](https://github.com/bpmn-io/diagram-js-minimap/issues/4))
|
||||
* `FEAT`: add more intuitive open / close controls ([#5](https://github.com/bpmn-io/diagram-js-minimap/issues/5))
|
||||
* `FIX`: disallow minimap zoom outside of minimap ([`153093be`](https://github.com/bpmn-io/diagram-js-minimap/commit/153093be7f9b3999d2b2653613db427aecb83687))
|
||||
* `FIX`: ignore canvas.resized events if not present in DOM ([`24614f86`](https://github.com/bpmn-io/diagram-js-minimap/commit/24614f86856a7e1b75950ffbb1a96d2d11541b5c))
|
||||
* `FIX`: correct wheel / click interaction ([#12](https://github.com/bpmn-io/diagram-js-minimap/issues/12))
|
||||
* `FIX`: properly cleanup global event listeners ([#16](https://github.com/bpmn-io/diagram-js-minimap/issues/16))
|
||||
|
||||
## ...
|
||||
|
||||
Check `git log` for earlier history.
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017-present camunda Services GmbH
|
||||
|
||||
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,44 @@
|
|||
# diagram-js Minimap
|
||||
|
||||
[](https://travis-ci.com/bpmn-io/diagram-js-minimap)
|
||||
|
||||
A minimap for diagram-js.
|
||||
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* See the whole diagram in the minimap
|
||||
* Highlight current viewport
|
||||
* Click/drag/scroll the minimap to navigate the diagram
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Extend your diagram-js application with the minimap module. We'll use [bpmn-js](https://github.com/bpmn-io/bpmn-js) as an example:
|
||||
|
||||
```javascript
|
||||
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
||||
|
||||
import minimapModule from 'diagram-js-minimap';
|
||||
|
||||
var bpmnModeler = new BpmnModeler({
|
||||
additionalModules: [
|
||||
minimapModule
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
For proper styling integrate the embedded style sheet:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="diagram-js-minimap/assets/diagram-js-minimap.css" />
|
||||
```
|
||||
|
||||
Please see [this example](https://github.com/bpmn-io/bpmn-js-examples/tree/master/minimap) for a more detailed instruction.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.djs-editor {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
right: 20px;
|
||||
left: 500px;
|
||||
/* overflow: hidden; */
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
/* user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none; */
|
||||
}
|
||||
|
||||
.djs-editor:not(.open) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.djs-editor .ide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.djs-editor.open .ide {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.djs-editor .ide {
|
||||
width: 620px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.djs-editor:not(.open) .toggle {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.djs-editor .toggle:before {
|
||||
content: attr(title);
|
||||
}
|
||||
|
||||
.djs-editor.open .toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
'use strict';
|
||||
|
||||
// configures browsers to run test against
|
||||
// any of [ 'ChromeHeadless', 'Chrome', 'Firefox', 'IE', 'PhantomJS' ]
|
||||
var browsers = (process.env.TEST_BROWSERS || 'PhantomJS').split(',');
|
||||
|
||||
// use puppeteer provided Chrome for testing
|
||||
process.env.CHROME_BIN = require('puppeteer').executablePath();
|
||||
|
||||
module.exports = function(karma) {
|
||||
karma.set({
|
||||
|
||||
frameworks: [
|
||||
'mocha',
|
||||
'sinon-chai'
|
||||
],
|
||||
|
||||
files: [
|
||||
'test/spec/*Spec.js'
|
||||
],
|
||||
|
||||
preprocessors: {
|
||||
'test/spec/*Spec.js': [ 'webpack' ]
|
||||
},
|
||||
|
||||
browsers,
|
||||
|
||||
autoWatch: false,
|
||||
singleRun: true,
|
||||
|
||||
webpack: {
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: 'raw-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import {
|
||||
attr as domAttr,
|
||||
classes as domClasses,
|
||||
event as domEvent,
|
||||
query as domQuery
|
||||
} from 'min-dom';
|
||||
|
||||
import {
|
||||
append as svgAppend,
|
||||
attr as svgAttr,
|
||||
classes as svgClasses,
|
||||
clone as svgClone,
|
||||
create as svgCreate,
|
||||
remove as svgRemove
|
||||
} from 'tiny-svg';
|
||||
|
||||
import {
|
||||
assign,
|
||||
every,
|
||||
isNumber,
|
||||
isObject
|
||||
} from 'min-dash';
|
||||
|
||||
import CodeMirror from 'codemirror';
|
||||
import cssEscape from 'css.escape';
|
||||
|
||||
import { getVisual } from 'diagram-js/lib/util/GraphicsUtil';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A code editor that reflects and lets you navigate the diagram.
|
||||
*/
|
||||
export default function Editor(
|
||||
config, injector, eventBus,
|
||||
canvas, elementRegistry) {
|
||||
|
||||
var self = this;
|
||||
|
||||
this._canvas = canvas;
|
||||
this._elementRegistry = elementRegistry;
|
||||
this._eventBus = eventBus;
|
||||
this._injector = injector;
|
||||
|
||||
this._state = {
|
||||
isOpen: undefined,
|
||||
isDragging: false,
|
||||
initialDragPosition: null,
|
||||
offsetViewport: null,
|
||||
cachedViewbox: null,
|
||||
dragger: null,
|
||||
svgClientRect: null,
|
||||
parentClientRect: null,
|
||||
zoomDelta: 0
|
||||
};
|
||||
|
||||
this._init();
|
||||
|
||||
this.toggle((config && config.open) || false);
|
||||
|
||||
domEvent.bind(this._toggle, 'click', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
self.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
Editor.$inject = [
|
||||
'config.editor',
|
||||
'injector',
|
||||
'eventBus',
|
||||
'canvas',
|
||||
'elementRegistry'
|
||||
];
|
||||
|
||||
Editor.prototype._init = function() {
|
||||
var canvas = this._canvas,
|
||||
container = canvas.getContainer();
|
||||
|
||||
// create parent div
|
||||
var parent = this._parent = document.createElement('div');
|
||||
|
||||
domClasses(parent).add('djs-editor');
|
||||
|
||||
container.appendChild(parent);
|
||||
|
||||
// create toggle
|
||||
var toggle = this._toggle = document.createElement('div');
|
||||
|
||||
domClasses(toggle).add('toggle');
|
||||
|
||||
parent.appendChild(toggle);
|
||||
|
||||
// create ide textarea
|
||||
var ide = this._ide = document.createElement('textarea');
|
||||
|
||||
ide.name = "code";
|
||||
ide.maxLength = "5000";
|
||||
ide.cols = "80";
|
||||
ide.rows = "40";
|
||||
|
||||
domClasses(ide).add('ide');
|
||||
|
||||
parent.appendChild(ide);
|
||||
|
||||
CodeMirror.fromTextArea(ide, {
|
||||
lineNumbers: true,
|
||||
mode: "python",
|
||||
theme: 'monokai'
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
Editor.prototype._validate = function() {
|
||||
// ! This parts gonna be hard
|
||||
}
|
||||
|
||||
Editor.prototype.open = function() {
|
||||
assign(this._state, { isOpen: true });
|
||||
|
||||
domClasses(this._parent).add('open');
|
||||
|
||||
var translate = this._injector.get('translate', false) || function(s) { return s; };
|
||||
|
||||
domAttr(this._toggle, 'title', translate('Close Editor'));
|
||||
|
||||
this._eventBus.fire('editor.toggle', { open: true });
|
||||
};
|
||||
|
||||
Editor.prototype.close = function() {
|
||||
assign(this._state, { isOpen: false });
|
||||
|
||||
domClasses(this._parent).remove('open');
|
||||
|
||||
var translate = this._injector.get('translate', false) || function(s) { return s; };
|
||||
|
||||
domAttr(this._toggle, 'title', translate('Open Editor'));
|
||||
|
||||
this._eventBus.fire('editor.toggle', { open: false });
|
||||
};
|
||||
|
||||
Editor.prototype.toggle = function(open) {
|
||||
|
||||
var currentOpen = this.isOpen();
|
||||
|
||||
if (typeof open === 'undefined') {
|
||||
open = !currentOpen;
|
||||
}
|
||||
|
||||
if (open == currentOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (open) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
|
||||
Editor.prototype.isOpen = function() {
|
||||
return this._state.isOpen;
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import Editor from './Editor';
|
||||
import CoreModule from 'diagram-js/lib/core';
|
||||
|
||||
export default {
|
||||
// __depends__: [ CoreModule ], // {2}
|
||||
__init__: [ 'editor' ], // {3}
|
||||
editor: [ 'type', Editor ] // {1}
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,65 @@
|
|||
{
|
||||
"name": "diagram-js-code-editor",
|
||||
"version": "1.0.0",
|
||||
"description": "A code-editor for diagram-js",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"umd:main": "dist/diagram-code-editor.umd.js",
|
||||
"source": "lib/index.js",
|
||||
"scripts": {
|
||||
"all": "run-s lint test distro",
|
||||
"lint": "eslint .",
|
||||
"dev": "npm test -- --auto-watch --no-single-run",
|
||||
"test": "karma start",
|
||||
"distro": "run-s build test:build",
|
||||
"build": "rollup -c",
|
||||
"test:build": "karma start test/distro/karma.conf.js",
|
||||
"prepublishOnly": "run-s distro"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:NWalker4483/diagram-js-code-editor.git"
|
||||
},
|
||||
"keywords": [
|
||||
"diagram-js",
|
||||
"code-editor"
|
||||
],
|
||||
"author": "Philipp Fromme",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/NWalker4483/diagram-js-code-editor/issues"
|
||||
},
|
||||
"homepage": "https://github.com/NWalker4483/diagram-js-code-editor#readme",
|
||||
"devDependencies": {
|
||||
"chai": "^4.2.0",
|
||||
"diagram-js": "^5.0.2",
|
||||
"eslint": "^6.5.0",
|
||||
"eslint-plugin-bpmn-io": "^0.10.0",
|
||||
"karma": "^4.3.0",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-firefox-launcher": "^1.2.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-sinon-chai": "^2.0.2",
|
||||
"karma-webpack": "^4.0.2",
|
||||
"mocha": "^6.2.1",
|
||||
"mocha-test-container-support": "^0.2.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"puppeteer": "^3.0.0",
|
||||
"raw-loader": "^3.1.0",
|
||||
"rollup": "^1.22.0",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-terser": "^5.1.2",
|
||||
"sinon": "^7.5.0",
|
||||
"sinon-chai": "^3.3.0",
|
||||
"webpack": "^4.41.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"codemirror": "^5.61.1",
|
||||
"css.escape": "^1.5.1",
|
||||
"min-dash": "^3.5.2",
|
||||
"min-dom": "^3.1.1",
|
||||
"tiny-svg": "^2.2.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
|
|
@ -0,0 +1,58 @@
|
|||
import { terser } from 'rollup-plugin-terser';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
|
||||
import pkg from './package.json';
|
||||
|
||||
const srcEntry = pkg.source;
|
||||
const umdDist = pkg[ 'umd:main' ];
|
||||
const umdName = 'DiagramJSMinimap';
|
||||
|
||||
function pgl(plugins=[]) {
|
||||
return plugins;
|
||||
}
|
||||
|
||||
export default [
|
||||
|
||||
// browser-friendly UMD build
|
||||
{
|
||||
input: srcEntry,
|
||||
output: {
|
||||
file: umdDist.replace(/\.js$/, '.prod.js'),
|
||||
format: 'umd',
|
||||
name: umdName
|
||||
},
|
||||
plugins: pgl([
|
||||
resolve(),
|
||||
commonjs(),
|
||||
terser()
|
||||
])
|
||||
},
|
||||
{
|
||||
input: srcEntry,
|
||||
output: {
|
||||
file: umdDist,
|
||||
format: 'umd',
|
||||
name: umdName
|
||||
},
|
||||
plugins: pgl([
|
||||
resolve(),
|
||||
commonjs()
|
||||
])
|
||||
},
|
||||
{
|
||||
input: srcEntry,
|
||||
output: [
|
||||
{ file: pkg.main, format: 'cjs' },
|
||||
{ file: pkg.module, format: 'es' }
|
||||
],
|
||||
external: [
|
||||
'diagram-js/lib/util/GraphicsUtil',
|
||||
'css.escape',
|
||||
'min-dash',
|
||||
'min-dom',
|
||||
'tiny-svg'
|
||||
],
|
||||
plugins: pgl()
|
||||
}
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "plugin:bpmn-io/mocha"
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from 'diagram-js/test/helper';
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
describe('distro', function() {
|
||||
|
||||
it('should expose CJS bundle', function() {
|
||||
const DiagramJSMinimap = require('../..');
|
||||
|
||||
expect(DiagramJSMinimap).to.exist;
|
||||
});
|
||||
|
||||
|
||||
it('should expose UMD bundle', function() {
|
||||
const DiagramJSMinimap = require('../../dist/diagram-minimap.umd.js');
|
||||
|
||||
expect(DiagramJSMinimap).to.exist;
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
'use strict';
|
||||
|
||||
// configures browsers to run test against
|
||||
// any of [ 'ChromeHeadless', 'Chrome', 'Firefox', 'IE', 'PhantomJS' ]
|
||||
var browsers = (process.env.TEST_BROWSERS || 'PhantomJS').split(',');
|
||||
|
||||
// use puppeteer provided Chrome for testing
|
||||
process.env.CHROME_BIN = require('puppeteer').executablePath();
|
||||
|
||||
module.exports = function(karma) {
|
||||
karma.set({
|
||||
|
||||
frameworks: [
|
||||
'mocha',
|
||||
'sinon-chai'
|
||||
],
|
||||
|
||||
files: [ '*Spec.js' ],
|
||||
|
||||
preprocessors: {
|
||||
'*Spec.js': [ 'webpack' ]
|
||||
},
|
||||
|
||||
browsers,
|
||||
|
||||
autoWatch: false,
|
||||
singleRun: true,
|
||||
|
||||
webpack: {
|
||||
mode: 'development'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,379 @@
|
|||
/* global sinon */
|
||||
|
||||
import {
|
||||
attr as svgAttr,
|
||||
remove as domRemove,
|
||||
query as domQuery
|
||||
} from 'min-dom';
|
||||
|
||||
import Diagram from 'diagram-js';
|
||||
|
||||
import {
|
||||
bootstrapDiagram,
|
||||
getDiagramJS,
|
||||
inject,
|
||||
insertCSS
|
||||
} from '../TestHelper';
|
||||
|
||||
import minimapModule from '../../lib';
|
||||
|
||||
import modelingModule from 'diagram-js/lib/features/modeling';
|
||||
import moveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
import moveModule from 'diagram-js/lib/features/move';
|
||||
import zoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
|
||||
import minimapCSS from '../../assets/diagram-js-minimap.css';
|
||||
|
||||
insertCSS('diagram-js-minimap.css', minimapCSS);
|
||||
|
||||
var viewerModules = [
|
||||
minimapModule,
|
||||
moveCanvasModule,
|
||||
zoomScrollModule
|
||||
];
|
||||
|
||||
var modelerModules = viewerModules.concat([
|
||||
modelingModule,
|
||||
moveModule
|
||||
]);
|
||||
|
||||
|
||||
describe('minimap', function() {
|
||||
|
||||
this.timeout(20000);
|
||||
|
||||
|
||||
describe('viewer', function() {
|
||||
|
||||
beforeEach(bootstrapDiagram({
|
||||
modules: viewerModules,
|
||||
minimap: {
|
||||
open: true
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
it('should show', inject(function(canvas, elementFactory) {
|
||||
|
||||
// when
|
||||
var shapeA = elementFactory.createShape({
|
||||
id: 'A',
|
||||
width: 100,
|
||||
height: 300,
|
||||
x: 50,
|
||||
y: 150
|
||||
});
|
||||
|
||||
canvas.addShape(shapeA, canvas.getRootElement());
|
||||
|
||||
|
||||
var shapeB = elementFactory.createShape({
|
||||
id: 'B',
|
||||
width: 50,
|
||||
height: 50,
|
||||
x: 775,
|
||||
y: 1175
|
||||
});
|
||||
|
||||
canvas.addShape(shapeB, canvas.getRootElement());
|
||||
|
||||
|
||||
var shapeC = elementFactory.createShape({
|
||||
id: 'C',
|
||||
width: 300,
|
||||
height: 300,
|
||||
x: 650,
|
||||
y: -50
|
||||
});
|
||||
|
||||
canvas.addShape(shapeC, canvas.getRootElement());
|
||||
|
||||
// then
|
||||
expectMinimapShape('A');
|
||||
expectMinimapShape('B');
|
||||
expectMinimapShape('C');
|
||||
}));
|
||||
|
||||
|
||||
it('should show single element', inject(function(canvas, elementFactory) {
|
||||
|
||||
// when
|
||||
var shapeA = elementFactory.createShape({
|
||||
id: 'A',
|
||||
width: 100,
|
||||
height: 300,
|
||||
x: 50,
|
||||
y: 150
|
||||
});
|
||||
|
||||
canvas.addShape(shapeA, canvas.getRootElement());
|
||||
|
||||
// then
|
||||
expectMinimapShape('A');
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('modeler', function() {
|
||||
|
||||
beforeEach(bootstrapDiagram({
|
||||
modules: modelerModules,
|
||||
minimap: {
|
||||
open: true
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
it('should show', inject(function(canvas, modeling, elementFactory) {
|
||||
|
||||
// when
|
||||
var shapeA = elementFactory.createShape({
|
||||
id: 'A',
|
||||
width: 100,
|
||||
height: 300
|
||||
});
|
||||
|
||||
modeling.createShape(shapeA, { x: 100, y: 300 }, canvas.getRootElement());
|
||||
|
||||
|
||||
var shapeB = elementFactory.createShape({
|
||||
id: 'B',
|
||||
width: 50,
|
||||
height: 50
|
||||
});
|
||||
|
||||
modeling.createShape(shapeB, { x: 800, y: 1200 }, canvas.getRootElement());
|
||||
|
||||
|
||||
var shapeC = elementFactory.createShape({
|
||||
id: 'C',
|
||||
width: 300,
|
||||
height: 300
|
||||
});
|
||||
|
||||
modeling.createShape(shapeC, { x: 800, y: 100 }, canvas.getRootElement());
|
||||
|
||||
var shapes = generateShapes(200, {
|
||||
x: -200,
|
||||
y: -50,
|
||||
width: 3000,
|
||||
height: 1000
|
||||
});
|
||||
|
||||
// then
|
||||
expectMinimapShape('A');
|
||||
expectMinimapShape('B');
|
||||
expectMinimapShape('C');
|
||||
|
||||
expectMinimapShapes(shapes);
|
||||
}));
|
||||
|
||||
|
||||
it('should update', inject(function(canvas, elementFactory, modeling) {
|
||||
|
||||
// given
|
||||
var parent = elementFactory.createShape({
|
||||
id: 'parent',
|
||||
width: 100,
|
||||
height: 100,
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
var child = elementFactory.createShape({
|
||||
id: 'child',
|
||||
parent: parent,
|
||||
width: 50,
|
||||
height: 50,
|
||||
x: 125,
|
||||
y: 125
|
||||
});
|
||||
|
||||
var rootElement = canvas.getRootElement();
|
||||
|
||||
modeling.createElements([ parent, child ], { x: 100, y: 100 }, rootElement);
|
||||
|
||||
expectMinimapShape('parent');
|
||||
expectMinimapShape('child');
|
||||
|
||||
// when
|
||||
modeling.resizeShape(parent, { x: 50, y: 50, width: 200, height: 100 });
|
||||
|
||||
// then
|
||||
expectMinimapShape('parent');
|
||||
expectMinimapShape('child');
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('canvas.resized', function() {
|
||||
|
||||
beforeEach(bootstrapDiagram({
|
||||
modules: viewerModules,
|
||||
minimap: {
|
||||
open: true
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
it('should not update if not present in DOM', inject(
|
||||
function(canvas, eventBus, minimap) {
|
||||
|
||||
// given
|
||||
var spy = sinon.spy(minimap, '_update');
|
||||
|
||||
// when
|
||||
domRemove(canvas.getContainer());
|
||||
|
||||
eventBus.fire('canvas.resized');
|
||||
|
||||
// then
|
||||
expect(spy).to.not.have.been.called;
|
||||
}
|
||||
));
|
||||
});
|
||||
|
||||
|
||||
describe('update', function() {
|
||||
|
||||
it('should not error on viewbox changed', function() {
|
||||
var diagram = new Diagram({
|
||||
modules: modelerModules
|
||||
});
|
||||
|
||||
var canvas = diagram.get('canvas');
|
||||
|
||||
canvas.viewbox({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
it('should not error on viewbox changed (malformed values)', function() {
|
||||
var diagram = new Diagram({
|
||||
modules: modelerModules
|
||||
});
|
||||
|
||||
var canvas = diagram.get('canvas');
|
||||
|
||||
canvas.viewbox({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: Infinity,
|
||||
height: Infinity
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('mousemove', function() {
|
||||
|
||||
beforeEach(bootstrapDiagram({
|
||||
modules: viewerModules,
|
||||
minimap: {
|
||||
open: true
|
||||
}
|
||||
}));
|
||||
|
||||
it('should change viewbox on mousemove', inject(function(eventBus, minimap) {
|
||||
|
||||
// given
|
||||
var svg = minimap._svg;
|
||||
|
||||
var listener = sinon.spy();
|
||||
|
||||
eventBus.on('canvas.viewbox.changing', listener);
|
||||
|
||||
// when
|
||||
triggerMouseEvent('mousedown', svg);
|
||||
triggerMouseEvent('mousemove', svg);
|
||||
triggerMouseEvent('mousemove', svg);
|
||||
|
||||
// then
|
||||
// 1 mousedown + 2 mousemove
|
||||
expect(listener).to.have.been.calledThrice;
|
||||
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// helpers /////////////////
|
||||
|
||||
function generateShapes(count, viewport) {
|
||||
|
||||
return getDiagramJS().invoke(function(canvas, elementFactory, modeling) {
|
||||
var rootElement = canvas.getRootElement(),
|
||||
shape;
|
||||
|
||||
var shapes = [];
|
||||
|
||||
for (var i = 0; i < count; i++) {
|
||||
shape = elementFactory.createShape({
|
||||
id: 'shape' + i,
|
||||
width: random(10, 300),
|
||||
height: random(10, 200),
|
||||
});
|
||||
|
||||
shapes.push(modeling.createShape(shape, {
|
||||
x: random(viewport.x, viewport.width),
|
||||
y: random(viewport.y, viewport.height)
|
||||
}, rootElement));
|
||||
}
|
||||
|
||||
return shapes;
|
||||
});
|
||||
}
|
||||
|
||||
function random(start, end) {
|
||||
return Math.round(Math.random() * (end - start) + start);
|
||||
}
|
||||
|
||||
function triggerMouseEvent(type, gfx) {
|
||||
var event = document.createEvent('MouseEvent');
|
||||
|
||||
event.initMouseEvent(type, true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
||||
|
||||
return gfx.dispatchEvent(event);
|
||||
}
|
||||
|
||||
function expectMinimapShape(id) {
|
||||
getDiagramJS().invoke(function(elementRegistry, minimap) {
|
||||
var element = elementRegistry.get(id);
|
||||
|
||||
expect(element).to.exist;
|
||||
|
||||
var minimapShape = domQuery('g#' + id, minimap._parent);
|
||||
|
||||
expect(minimapShape).to.exist;
|
||||
|
||||
var transform = svgAttr(minimapShape, 'transform');
|
||||
|
||||
var translate = transform.replace('translate(', '').replace(')', '').split(' ');
|
||||
|
||||
var x = parseInt(translate[0], 10),
|
||||
y = parseInt(translate[1], 10);
|
||||
|
||||
var parentX = element.parent.x || 0,
|
||||
parentY = element.parent.y || 0;
|
||||
|
||||
expect(x).to.equal(element.x - parentX);
|
||||
expect(y).to.equal(element.y - parentY);
|
||||
});
|
||||
}
|
||||
|
||||
function expectMinimapShapes(shapes) {
|
||||
shapes.forEach(function(shape) {
|
||||
var id = shape.id;
|
||||
|
||||
expectMinimapShape(id);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue