From 352d4d5dacbb2c5243bfeb30d50e80669328753b Mon Sep 17 00:00:00 2001 From: kirillmurashov Date: Thu, 3 May 2018 20:29:27 +0300 Subject: [PATCH] Added demo app Added reactivity for component props --- README.md | 6 +- config/dev.conf.js | 2 +- config/prod.conf.js | 3 +- package-lock.json | 534 +++++++----------- package.json | 7 +- src/app.js | 8 - src/app.vue | 57 -- src/components/vue-drag-resize.css | 14 +- src/components/vue-drag-resize.html | 5 +- src/components/vue-drag-resize.js | 90 ++- src/demo/app.js | 15 + src/demo/app.vue | 109 ++++ src/demo/components/toolbar/toolbar.css | 76 +++ src/demo/components/toolbar/toolbar.html | 62 ++ src/demo/components/toolbar/toolbar.js | 155 +++++ src/demo/components/toolbar/toolbar.vue | 3 + src/demo/icons/index.js | 4 + src/demo/icons/lock.js | 10 + src/demo/icons/toBottom.js | 10 + src/demo/icons/toTop.js | 10 + src/demo/store/index.js | 19 + src/demo/store/modules/rect/actions.js | 140 +++++ src/demo/store/modules/rect/getters.js | 12 + src/demo/store/modules/rect/index.js | 12 + src/demo/store/modules/rect/mutation-types.js | 53 ++ src/demo/store/modules/rect/mutations.js | 102 ++++ src/demo/store/modules/rect/state.js | 52 ++ static/index.html | 51 ++ webpack.config.js | 6 +- 29 files changed, 1190 insertions(+), 437 deletions(-) delete mode 100644 src/app.js delete mode 100644 src/app.vue create mode 100644 src/demo/app.js create mode 100644 src/demo/app.vue create mode 100644 src/demo/components/toolbar/toolbar.css create mode 100644 src/demo/components/toolbar/toolbar.html create mode 100644 src/demo/components/toolbar/toolbar.js create mode 100644 src/demo/components/toolbar/toolbar.vue create mode 100644 src/demo/icons/index.js create mode 100644 src/demo/icons/lock.js create mode 100644 src/demo/icons/toBottom.js create mode 100644 src/demo/icons/toTop.js create mode 100644 src/demo/store/index.js create mode 100644 src/demo/store/modules/rect/actions.js create mode 100644 src/demo/store/modules/rect/getters.js create mode 100644 src/demo/store/modules/rect/index.js create mode 100644 src/demo/store/modules/rect/mutation-types.js create mode 100644 src/demo/store/modules/rect/mutations.js create mode 100644 src/demo/store/modules/rect/state.js diff --git a/README.md b/README.md index 9501c8e..6d98ccd 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,10 @@ * [Contributing](#contributing) * [License](#license) +### Demo + +[Demo](http://kirillmurashov.com/vue-drag-resize) + ### Features * A lightweight, no-dependency @@ -237,7 +241,7 @@ Type: `String`
Required: `false`
Default: `both` -Define the axis on which the element is draggable. Available values are `x`, `y` or `both`. +Define the axis on which the element is draggable. Available values are `x`, `y`, `both` or `none`. ```html diff --git a/config/dev.conf.js b/config/dev.conf.js index a461da1..d8875e0 100644 --- a/config/dev.conf.js +++ b/config/dev.conf.js @@ -1,6 +1,6 @@ module.exports = { entry: { - "app": './src/app.js' + "app": './src/demo/app.js' }, build: { env: '"development"', diff --git a/config/prod.conf.js b/config/prod.conf.js index ed0781c..040c8bc 100644 --- a/config/prod.conf.js +++ b/config/prod.conf.js @@ -1,6 +1,7 @@ module.exports = { entry: { - "index": './src' + "index": './src', + "demo": './src/demo/app' }, build: { env: '"production"', diff --git a/package-lock.json b/package-lock.json index 0615d51..43ce1c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-drag-resize", - "version": "1.0.0", + "version": "1.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2418,17 +2418,6 @@ "integrity": "sha512-yMqGkujkoOIZfvOYiWdqPALgY/PVGiqCHUJb6yNq7xhI/pR+gQO0U2K6lRDqAiJv4+CIU3CtTLblNGw0QGnr6g==", "dev": true }, - "canvas-prebuilt": { - "version": "1.6.5-prerelease.1", - "resolved": "https://registry.npmjs.org/canvas-prebuilt/-/canvas-prebuilt-1.6.5-prerelease.1.tgz", - "integrity": "sha1-aBSyC5yAg13MJL/WGZFHKIYwUhw=", - "dev": true, - "requires": { - "node-pre-gyp": "^0.6.29", - "parse-css-font": "^2.0.2", - "units-css": "^0.4.0" - } - }, "caseless": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", @@ -3349,45 +3338,6 @@ "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", "dev": true }, - "css-font-size-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-font-size-keywords/-/css-font-size-keywords-1.0.0.tgz", - "integrity": "sha1-hUh1rOmspqjS7g00WkSq6btttss=", - "dev": true - }, - "css-font-stretch-keywords": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-font-stretch-keywords/-/css-font-stretch-keywords-1.0.1.tgz", - "integrity": "sha1-UM7puboDH7XJUtRyMTnx4Qe1SxA=", - "dev": true - }, - "css-font-style-keywords": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-font-style-keywords/-/css-font-style-keywords-1.0.1.tgz", - "integrity": "sha1-XDUygT9jtKHelU0TzqhqtDM0CeQ=", - "dev": true - }, - "css-font-weight-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-font-weight-keywords/-/css-font-weight-keywords-1.0.0.tgz", - "integrity": "sha1-m8BGcayFvHJLV07106yWsNYE/Zc=", - "dev": true - }, - "css-global-keywords": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-global-keywords/-/css-global-keywords-1.0.1.tgz", - "integrity": "sha1-cqmupyeW0Bmx0qMlLeTlqqN+Smk=", - "dev": true - }, - "css-list-helpers": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/css-list-helpers/-/css-list-helpers-1.0.1.tgz", - "integrity": "sha1-//VxkiAtuDJAxBaG+RnkSacCT30=", - "dev": true, - "requires": { - "tcomb": "^2.5.0" - } - }, "css-loader": { "version": "0.28.11", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz", @@ -3470,12 +3420,6 @@ "integrity": "sha1-sNBClG2ylTu50pKQCmy19tASIDE=", "dev": true }, - "css-system-font-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-system-font-keywords/-/css-system-font-keywords-1.0.0.tgz", - "integrity": "sha1-hcbwhquk6zLFcaMIav/ENLhII+0=", - "dev": true - }, "css-unit-converter": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz", @@ -3921,12 +3865,6 @@ "repeating": "^2.0.0" } }, - "detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", - "dev": true - }, "detect-newline": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", @@ -5804,6 +5742,26 @@ "klaw": "^1.0.0" } }, + "fs-plus": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/fs-plus/-/fs-plus-2.10.1.tgz", + "integrity": "sha1-MgR4HXhAYR5jZOe2+wWMljJ8WqU=", + "dev": true, + "requires": { + "async": "^1.5.2", + "mkdirp": "^0.5.1", + "rimraf": "^2.5.2", + "underscore-plus": "1.x" + }, + "dependencies": { + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "dev": true + } + } + }, "fs-readdir-recursive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", @@ -6858,17 +6816,6 @@ "rimraf": "2" } }, - "fstream-ignore": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz", - "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=", - "dev": true, - "requires": { - "fstream": "^1.0.0", - "inherits": "2", - "minimatch": "^3.0.0" - } - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -14345,202 +14292,6 @@ } } }, - "node-pre-gyp": { - "version": "0.6.39", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz", - "integrity": "sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==", - "dev": true, - "requires": { - "detect-libc": "^1.0.2", - "hawk": "3.1.3", - "mkdirp": "^0.5.1", - "nopt": "^4.0.1", - "npmlog": "^4.0.2", - "rc": "^1.1.7", - "request": "2.81.0", - "rimraf": "^2.6.1", - "semver": "^5.3.0", - "tar": "^2.2.1", - "tar-pack": "^3.4.0" - }, - "dependencies": { - "assert-plus": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", - "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", - "dev": true - }, - "aws-sign2": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", - "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", - "dev": true - }, - "boom": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", - "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", - "dev": true, - "requires": { - "hoek": "2.x.x" - } - }, - "cryptiles": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", - "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", - "dev": true, - "requires": { - "boom": "2.x.x" - } - }, - "form-data": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", - "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", - "dev": true, - "requires": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.5", - "mime-types": "^2.1.12" - } - }, - "gauge": { - "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", - "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", - "dev": true, - "requires": { - "aproba": "^1.0.3", - "console-control-strings": "^1.0.0", - "has-unicode": "^2.0.0", - "object-assign": "^4.1.0", - "signal-exit": "^3.0.0", - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wide-align": "^1.1.0" - } - }, - "har-schema": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", - "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=", - "dev": true - }, - "har-validator": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", - "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", - "dev": true, - "requires": { - "ajv": "^4.9.1", - "har-schema": "^1.0.5" - } - }, - "hawk": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", - "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", - "dev": true, - "requires": { - "boom": "2.x.x", - "cryptiles": "2.x.x", - "hoek": "2.x.x", - "sntp": "1.x.x" - } - }, - "hoek": { - "version": "2.16.3", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", - "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true - }, - "http-signature": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", - "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", - "dev": true, - "requires": { - "assert-plus": "^0.2.0", - "jsprim": "^1.2.2", - "sshpk": "^1.7.0" - } - }, - "nopt": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", - "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", - "dev": true, - "requires": { - "abbrev": "1", - "osenv": "^0.1.4" - } - }, - "npmlog": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", - "dev": true, - "requires": { - "are-we-there-yet": "~1.1.2", - "console-control-strings": "~1.1.0", - "gauge": "~2.7.3", - "set-blocking": "~2.0.0" - } - }, - "performance-now": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", - "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=", - "dev": true - }, - "qs": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", - "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=", - "dev": true - }, - "request": { - "version": "2.81.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", - "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", - "dev": true, - "requires": { - "aws-sign2": "~0.6.0", - "aws4": "^1.2.1", - "caseless": "~0.12.0", - "combined-stream": "~1.0.5", - "extend": "~3.0.0", - "forever-agent": "~0.6.1", - "form-data": "~2.1.1", - "har-validator": "~4.2.1", - "hawk": "~3.1.3", - "http-signature": "~1.1.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.7", - "oauth-sign": "~0.8.1", - "performance-now": "^0.2.0", - "qs": "~6.4.0", - "safe-buffer": "^5.0.1", - "stringstream": "~0.0.4", - "tough-cookie": "~2.3.0", - "tunnel-agent": "^0.6.0", - "uuid": "^3.0.0" - } - }, - "sntp": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", - "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", - "dev": true, - "requires": { - "hoek": "2.x.x" - } - } - } - }, "nomnom": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz", @@ -15253,23 +15004,6 @@ "pbkdf2": "^3.0.3" } }, - "parse-css-font": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/parse-css-font/-/parse-css-font-2.0.2.tgz", - "integrity": "sha1-e2CwYHBaJam5C38O1JPlgjJIplI=", - "dev": true, - "requires": { - "css-font-size-keywords": "^1.0.0", - "css-font-stretch-keywords": "^1.0.1", - "css-font-style-keywords": "^1.0.1", - "css-font-weight-keywords": "^1.0.0", - "css-global-keywords": "^1.0.1", - "css-list-helpers": "^1.0.1", - "css-system-font-keywords": "^1.0.0", - "tcomb": "^2.5.0", - "unquote": "^1.1.0" - } - }, "parse-filepath": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", @@ -18685,26 +18419,6 @@ "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=", "dev": true }, - "rc": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz", - "integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=", - "dev": true, - "requires": { - "deep-extend": "~0.4.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "deep-extend": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz", - "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=", - "dev": true - } - } - }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -20890,28 +20604,6 @@ "inherits": "2" } }, - "tar-pack": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.1.tgz", - "integrity": "sha512-PPRybI9+jM5tjtCbN2cxmmRU7YmqT3Zv/UDy48tAh2XRkLa9bAORtSWLkVc13+GJF+cdTh1yEnHEk3cpTaL5Kg==", - "dev": true, - "requires": { - "debug": "^2.2.0", - "fstream": "^1.0.10", - "fstream-ignore": "^1.0.5", - "once": "^1.3.3", - "readable-stream": "^2.1.4", - "rimraf": "^2.5.1", - "tar": "^2.2.1", - "uid-number": "^0.0.6" - } - }, - "tcomb": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/tcomb/-/tcomb-2.7.0.tgz", - "integrity": "sha1-ENYpWAQWaaXVNWe5pO6M3iKxwrA=", - "dev": true - }, "temp": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz", @@ -21380,12 +21072,6 @@ } } }, - "uid-number": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz", - "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=", - "dev": true - }, "ultron": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz", @@ -21410,6 +21096,23 @@ "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=", "dev": true }, + "underscore-plus": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/underscore-plus/-/underscore-plus-1.6.6.tgz", + "integrity": "sha1-ZezeG9xEGjXYnmUP1w3PE65Dmn0=", + "dev": true, + "requires": { + "underscore": "~1.6.0" + }, + "dependencies": { + "underscore": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz", + "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=", + "dev": true + } + } + }, "union-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", @@ -21506,12 +21209,6 @@ "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", "dev": true }, - "unquote": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", - "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=", - "dev": true - }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -22009,7 +21706,8 @@ "vue": { "version": "2.5.16", "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.16.tgz", - "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==" + "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ==", + "dev": true }, "vue-hot-reload-api": { "version": "2.3.0", @@ -22052,6 +21750,152 @@ "loader-utils": "^1.0.2" } }, + "vue-svgicon": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/vue-svgicon/-/vue-svgicon-2.1.3.tgz", + "integrity": "sha512-qcixULPTWaPDEGqeERe6jYv5zJZ66h7+I2MTOjngkRf+PY6e5ZpKSF6RR8FlsDwVoHe0t1lAloNrZ8on3VHh4Q==", + "dev": true, + "requires": { + "fs-plus": "^2.9.3", + "glob": "^7.1.1", + "svgo": "^0.7.2", + "yargs": "^6.6.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + }, + "cliui": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "dev": true, + "requires": { + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wrap-ansi": "^2.0.0" + } + }, + "find-up": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", + "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", + "dev": true, + "requires": { + "path-exists": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "load-json-file": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^2.2.0", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0", + "strip-bom": "^2.0.0" + } + }, + "path-exists": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", + "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", + "dev": true, + "requires": { + "pinkie-promise": "^2.0.0" + } + }, + "path-type": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", + "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "read-pkg": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", + "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", + "dev": true, + "requires": { + "load-json-file": "^1.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^1.0.0" + } + }, + "read-pkg-up": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", + "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", + "dev": true, + "requires": { + "find-up": "^1.0.0", + "read-pkg": "^1.0.0" + } + }, + "strip-bom": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", + "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", + "dev": true, + "requires": { + "is-utf8": "^0.2.0" + } + }, + "y18n": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "dev": true + }, + "yargs": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz", + "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=", + "dev": true, + "requires": { + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^4.2.0" + } + }, + "yargs-parser": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz", + "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=", + "dev": true, + "requires": { + "camelcase": "^3.0.0" + } + } + } + }, "vue-template-compiler": { "version": "2.5.16", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz", @@ -22068,6 +21912,12 @@ "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==", "dev": true }, + "vuex": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz", + "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==", + "dev": true + }, "watchjs": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/watchjs/-/watchjs-0.0.0.tgz", diff --git a/package.json b/package.json index 917d687..4499924 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "name": "vue-drag-resize", - "version": "1.0.3", + "version": "1.1.0", "description": "Vue Component for resize and drag elements", "author": "Kirill Murashov ", "main": "dist/index.js", "scripts": { "start": "NODE_ENV=develop webpack-dev-server -d", + "svg": "vsvg -s ./src/demo/svg -t ./src/demo/icons", "build": "webpack" }, "repository": { @@ -17,7 +18,6 @@ }, "homepage": "https://github.com/kirillmurashov/vue-drag-resize.git", "devDependencies": { - "vue": "^2.5.16", "acorn-dynamic-import": "^3.0.0", "autoprefixer": "^6.7.2", "babel": "^6.23.0", @@ -143,9 +143,12 @@ "underscore": "^1.8.3", "url": "^0.11.0", "url-loader": "^0.5.9", + "vue": "^2.5.16", "vue-loader": "^15.0.3", "vue-style-loader": "^3.0.0", + "vue-svgicon": "^2.1.3", "vue-template-compiler": "^2.5.16", + "vuex": "^3.0.1", "watchjs": "0.0.0", "watchpack": "^1.5.0", "webpack": "^4.6.0", diff --git a/src/app.js b/src/app.js deleted file mode 100644 index ff5c10d..0000000 --- a/src/app.js +++ /dev/null @@ -1,8 +0,0 @@ -import Vue from 'vue/dist/vue.js'; -import app from './app.vue' - -new Vue({ - el: '#app', - template: '', - components: { app } -}); \ No newline at end of file diff --git a/src/app.vue b/src/app.vue deleted file mode 100644 index e10957f..0000000 --- a/src/app.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/vue-drag-resize.css b/src/components/vue-drag-resize.css index bfb7abe..4f53d40 100644 --- a/src/components/vue-drag-resize.css +++ b/src/components/vue-drag-resize.css @@ -5,10 +5,15 @@ .vdr { position: absolute; box-sizing: border-box; - border: 1px dashed rgba(0,0,0,0); } -.vdr.active { - border: 1px dashed #d6d6d6; +.vdr.active:before{ + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + box-sizing: border-box; + outline: 1px dashed #d6d6d6; } .vdr-stick { box-sizing: border-box; @@ -66,4 +71,7 @@ bottom: calc(var(--stick-size)/-2); right: calc(var(--stick-size)/-2); cursor: nwse-resize; +} +.vdr-stick.not-resizable{ + display: none; } \ No newline at end of file diff --git a/src/components/vue-drag-resize.html b/src/components/vue-drag-resize.html index af422c6..13c2384 100644 --- a/src/components/vue-drag-resize.html +++ b/src/components/vue-drag-resize.html @@ -2,12 +2,13 @@ :class="active ? 'active' : 'inactive'" @mousedown.stop.prevent="bodyDown($event)" @touchstart.stop.prevent="bodyDown($event)"> +
- + \ No newline at end of file diff --git a/src/components/vue-drag-resize.js b/src/components/vue-drag-resize.js index e086d3e..316edbd 100644 --- a/src/components/vue-drag-resize.js +++ b/src/components/vue-drag-resize.js @@ -76,7 +76,7 @@ export default { type: String, default: 'both', validator: function (val) { - return ['x', 'y', 'both'].indexOf(val) !== -1 + return ['x', 'y', 'both', 'none'].indexOf(val) !== -1 } } }, @@ -97,7 +97,9 @@ export default { left: this.x, top: this.y, right: null, - bottom: null + bottom: null, + minWidth: this.minw, + minHeight: this.minh } }, @@ -152,7 +154,7 @@ export default { }, methods: { - deselect(ev){ + deselect(ev) { this.active = false }, @@ -215,22 +217,35 @@ export default { bodyMove(ev) { const stickStartPos = this.stickStartPos; + let delta = { - x: this.axis !== 'y' ? stickStartPos.mouseX - ev.x : 0, - y: this.axis !== 'x' ? stickStartPos.mouseY - ev.y : 0 + x: this.axis !== 'y' && this.axis !== 'none' ? stickStartPos.mouseX - ev.x : 0, + y: this.axis !== 'x' && this.axis !== 'none' ? stickStartPos.mouseY - ev.y : 0 }; this.rawTop = stickStartPos.top - delta.y; this.rawBottom = stickStartPos.bottom + delta.y; this.rawLeft = stickStartPos.left - delta.x; this.rawRight = stickStartPos.right + delta.x; - this.$emit('dragging', {left:this.left, top: this.top, width:this.width, height:this.height}); + this.$emit('dragging', this.rect); }, bodyUp() { this.bodyDrag = false; - this.$emit('dragging', {left:this.left, top: this.top, width:this.width, height:this.height}); - this.$emit('dragstop', {left:this.left, top: this.top, width:this.width, height:this.height}); + this.$emit('dragging', this.rect); + this.$emit('dragstop', this.rect); + + this.stickStartPos = {mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0}; + this.limits = { + minLeft: null, + maxLeft: null, + minRight: null, + maxRight: null, + minTop: null, + maxTop: null, + minBottom: null, + maxBottom: null + }; }, stickDown: function (stick, ev) { @@ -264,9 +279,10 @@ export default { break; } + if (this.parentLimitation) { - let minw = this.minw; - let minh = this.minh; + let minw = this.minWidth; + let minh = this.minHeight; const aspectFactor = this.aspectFactor; const width = this.width; const height = this.height; @@ -358,7 +374,7 @@ export default { break; } - this.$emit('resizing', {left: this.left, top: this.top, width: this.width, height: this.height}); + this.$emit('resizing', this.rect); }, stickUp() { @@ -371,7 +387,16 @@ export default { w: 0, h: 0 }; - + this.limits = { + minLeft: null, + maxLeft: null, + minRight: null, + maxRight: null, + minTop: null, + maxTop: null, + minBottom: null, + maxBottom: null + }; this.rawTop = this.top; this.rawBottom = this.bottom; this.rawLeft = this.left; @@ -379,8 +404,8 @@ export default { this.stickAxis = null; - this.$emit('resizing', {left:this.left, top: this.top, width:this.width, height:this.height}); - this.$emit('resizestop', {left:this.left, top: this.top, width:this.width, height:this.height}); + this.$emit('resizing', this.rect); + this.$emit('resizestop', this.rect); }, aspectRatioCorrection() { @@ -434,6 +459,15 @@ export default { height() { return this.parentHeight - this.top - this.bottom; + }, + + rect(){ + return { + left: Math.round(this.left), + top: Math.round(this.top), + width: Math.round(this.width), + height: Math.round(this.height) + } } }, @@ -542,22 +576,40 @@ export default { this.aspectRatioCorrection(); }, - active(isActive){ - if(isActive){ + active(isActive) { + if (isActive) { this.$emit('activated'); - }else{ + } else { this.$emit('deactivated'); } }, - isActive(val){ + isActive(val) { this.active = val; }, - z: function (val) { + z(val) { if (val >= 0 || val === 'auto') { this.zIndex = val } + }, + + aspectRatio(val) { + if (val) { + this.aspectFactor = this.width / this.height; + } + }, + + minw(val) { + if (val > 0 && val <= this.width) { + this.minWidth = val + } + }, + + minh(val) { + if (val > 0 && val <= this.height) { + this.minHeight = val + } } } } \ No newline at end of file diff --git a/src/demo/app.js b/src/demo/app.js new file mode 100644 index 0000000..43966a5 --- /dev/null +++ b/src/demo/app.js @@ -0,0 +1,15 @@ +import Vue from 'vue'; +import app from './app.vue'; +import store from './store'; +import * as svgicon from 'vue-svgicon'; + +Vue.use(svgicon, { + tagName: 'svgicon' +}); + +new Vue({ + el: '#app', + store, + template: '', + components: { app } +}); \ No newline at end of file diff --git a/src/demo/app.vue b/src/demo/app.vue new file mode 100644 index 0000000..15477ff --- /dev/null +++ b/src/demo/app.vue @@ -0,0 +1,109 @@ + + + + + \ No newline at end of file diff --git a/src/demo/components/toolbar/toolbar.css b/src/demo/components/toolbar/toolbar.css new file mode 100644 index 0000000..03d175b --- /dev/null +++ b/src/demo/components/toolbar/toolbar.css @@ -0,0 +1,76 @@ +:root{ + --toolbar-width: 220px; +} +.toolbar{ + position: absolute; + right: 0; + top: 0; + width: var(--toolbar-width); + padding: 15px 15px 0 15px; + box-shadow: 0 0 2px #AAA; + box-sizing: border-box; + background-color: white; + margin: 30px 30px 30px 0; +} +.toolbar-wh-row{ + + margin-bottom: 20px; +} +.toolbar-row-title{ + width: var(--toolbar-width); + font-size: 14px; + font-family: 'Lato', sans-serif; + font-weight: 500; + margin: 0 0 3px 0; + color: #1A173B; +} +.toolbar-position-inp, .toolbar-size-inp{ + width: 90px; + font-size: 11px; + color: #BBB; + font-weight: 300; + display: inline-block; + position: relative; +} + +.toolbar-size-inp input,.toolbar-position-inp input{ + width: 70px; + display: inline-block; + border: 1px solid #bfbfca; + margin-top: 2px; + height: 16px; +} + +.toolbar-size-inp input[disabled],.toolbar-position-inp input[disabled]{ + border: 1px solid #dcdce7; + color: #AAAAAA; +} + +.position-lock-icon, .size-lock-icon{ + position: absolute; + bottom: 3px; + right: 17px; + cursor: pointer; +} +.size-lock-icon{ + bottom: 2px; + right: -3px; +} + +.toolbar-check-inp{ + color: #445477; + font-size: 13px; + width: 180px; + display: inline-block; + margin: 2px 0; +} +.toolbar-row-title+label{ + margin-top: 5px; +} +.toolbar-check-inp input{ + border: 1px solid #bfbfca; +} +.to-top-icon, .to-bottom-icon{ + margin: 10px 30px; + cursor: pointer; +} diff --git a/src/demo/components/toolbar/toolbar.html b/src/demo/components/toolbar/toolbar.html new file mode 100644 index 0000000..9f769e6 --- /dev/null +++ b/src/demo/components/toolbar/toolbar.html @@ -0,0 +1,62 @@ +
+
+

Position

+ top + + + + + left + + + +
+
+

Size

+ width + + + + height + + +
+ +
+

Minimal size

+ width + + + height + + +
+ +
+

Restrictions

+ + + + + + +
+
\ No newline at end of file diff --git a/src/demo/components/toolbar/toolbar.js b/src/demo/components/toolbar/toolbar.js new file mode 100644 index 0000000..0031009 --- /dev/null +++ b/src/demo/components/toolbar/toolbar.js @@ -0,0 +1,155 @@ +export default { + computed: { + activeRect() { + return this.$store.getters['rect/getActive']; + }, + + width() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].width + }, + + height() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].height + }, + + top() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].top + }, + + left() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].left + }, + + minw() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].minw + }, + + minh() { + return this.activeRect === null ? '' : this.$store.state.rect.rects[this.activeRect].minh + }, + + aspectRatio() { + return this.activeRect === null ? false : this.$store.state.rect.rects[this.activeRect].aspectRatio; + }, + + parentLim() { + return this.activeRect === null ? false : this.$store.state.rect.rects[this.activeRect].parentLim; + }, + + draggable() { + return this.activeRect === null ? false : this.$store.state.rect.rects[this.activeRect].draggable; + }, + + resizable() { + return this.activeRect === null ? false : this.$store.state.rect.rects[this.activeRect].resizable; + }, + + topIsLocked() { + if (this.activeRect === null) { + return false; + } + return (this.$store.state.rect.rects[this.activeRect].axis === 'x' || + this.$store.state.rect.rects[this.activeRect].axis === 'none') + }, + + leftIsLocked() { + if (this.activeRect === null) { + return false; + } + return (this.$store.state.rect.rects[this.activeRect].axis === 'y' || + this.$store.state.rect.rects[this.activeRect].axis === 'none') + }, + + zIndex(){ + if (this.activeRect === null) { + return null; + } + + return this.$store.state.rect.rects[this.activeRect].zIndex === 1 ? 'isFirst' : + this.$store.state.rect.rects[this.activeRect].zIndex === this.$store.state.rect.rects.length ? 'isLast' : 'normal' + + } + }, + methods: { + toggleYLock() { + if (this.activeRect === null) { + return + } + + this.$store.dispatch('rect/changeYLock', {id: this.activeRect}); + }, + toggleXLock() { + if (this.activeRect === null) { + return + } + + this.$store.dispatch('rect/changeXLock', {id: this.activeRect}); + }, + + toggleAspect() { + if (this.activeRect === null) { + return + } + if (!this.$store.state.rect.rects[this.activeRect].aspectRatio) { + this.$store.dispatch('rect/setAspect', {id: this.activeRect}); + } else { + this.$store.dispatch('rect/unsetAspect', {id: this.activeRect}); + } + }, + + toggleParentLimitation() { + this.$store.dispatch('rect/toggleParentLimitation', {id: this.activeRect}); + }, + + toggleResizable() { + this.$store.dispatch('rect/toggleResizable', {id: this.activeRect}); + }, + + toggleDraggable() { + this.$store.dispatch('rect/toggleDraggable', {id: this.activeRect}); + }, + + toTop() { + this.$store.dispatch('rect/changeZToTop', {id: this.activeRect}); + }, + + toBottom() { + this.$store.dispatch('rect/changeZToBottom', {id: this.activeRect}); + }, + + changeMinWidth(ev) { + let minw = parseInt(ev.target.value); + if(typeof minw !== 'number' || isNaN(minw)){ + minw = 1; + } + + if (minw <= 0) { + minw = 1; + } else if (minw > this.$store.state.rect.rects[this.activeRect].width) { + minw = this.$store.state.rect.rects[this.activeRect].width; + } + + ev.target.value = minw; + + this.$store.dispatch('rect/setMinWidth', {id: this.activeRect, width: minw}); + }, + + changeMinHeight(ev) { + let minh = parseInt(ev.target.value); + + if(typeof minh !== 'number' || isNaN(minh)){ + minh = 1; + } + + if (minh <= 0) { + minh = 1; + } else if (minh > this.$store.state.rect.rects[this.activeRect].height) { + minh = this.$store.state.rect.rects[this.activeRect].height; + } + + ev.target.value = minh; + + this.$store.dispatch('rect/setMinHeight', {id: this.activeRect, height: minh}); + } + } +} \ No newline at end of file diff --git a/src/demo/components/toolbar/toolbar.vue b/src/demo/components/toolbar/toolbar.vue new file mode 100644 index 0000000..dc41373 --- /dev/null +++ b/src/demo/components/toolbar/toolbar.vue @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/demo/icons/index.js b/src/demo/icons/index.js new file mode 100644 index 0000000..bd780f0 --- /dev/null +++ b/src/demo/icons/index.js @@ -0,0 +1,4 @@ +/* eslint-disable */ +require('./lock') +require('./toBottom') +require('./toTop') diff --git a/src/demo/icons/lock.js b/src/demo/icons/lock.js new file mode 100644 index 0000000..8a02828 --- /dev/null +++ b/src/demo/icons/lock.js @@ -0,0 +1,10 @@ +/* eslint-disable */ +var icon = require('vue-svgicon') +icon.register({ + 'lock': { + width: 100, + height: 100, + viewBox: '0 0 100 100', + data: '' + } +}) diff --git a/src/demo/icons/toBottom.js b/src/demo/icons/toBottom.js new file mode 100644 index 0000000..bd220d1 --- /dev/null +++ b/src/demo/icons/toBottom.js @@ -0,0 +1,10 @@ +/* eslint-disable */ +var icon = require('vue-svgicon') +icon.register({ + 'toBottom': { + width: 100, + height: 100, + viewBox: '0 0 100 100', + data: '' + } +}) diff --git a/src/demo/icons/toTop.js b/src/demo/icons/toTop.js new file mode 100644 index 0000000..a795eb6 --- /dev/null +++ b/src/demo/icons/toTop.js @@ -0,0 +1,10 @@ +/* eslint-disable */ +var icon = require('vue-svgicon') +icon.register({ + 'toTop': { + width: 100, + height: 100, + viewBox: '0 0 100 100', + data: '' + } +}) diff --git a/src/demo/store/index.js b/src/demo/store/index.js new file mode 100644 index 0000000..48fb935 --- /dev/null +++ b/src/demo/store/index.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import rect from './modules/rect' + +Vue.use(Vuex); + +const debug = process.env.NODE_ENV !== 'production'; + +export default new Vuex.Store({ + /** + * Assign the modules to the store + */ + modules: {'rect': rect }, + + /** + * If strict mode should be enabled + */ + strict: debug +}); diff --git a/src/demo/store/modules/rect/actions.js b/src/demo/store/modules/rect/actions.js new file mode 100644 index 0000000..5bf4584 --- /dev/null +++ b/src/demo/store/modules/rect/actions.js @@ -0,0 +1,140 @@ +import types, {CHANGE_ZINDEX} from './mutation-types'; + +export default { + setActive({commit, state}, {id}) { + for (let i = 0, l = state.rects.length; i < l; i++) { + if (i === id) { + commit(types.ENABLE_ACTIVE, i); + continue; + } + + commit(types.DISABLE_ACTIVE, i); + } + }, + unsetActive({commit}, {id}) { + commit(types.DISABLE_ACTIVE, id); + }, + + toggleDraggable({commit, state}, {id}) { + if (!state.rects[id].draggable) { + commit(types.ENABLE_DRAGGABLE, id); + } else { + commit(types.DISABLE_DRAGGABLE, id); + } + }, + + toggleResizable({commit, state}, {id}) { + if (!state.rects[id].resizable) { + commit(types.ENABLE_RESIZABLE, id); + } else { + commit(types.DISABLE_RESIZABLE, id); + } + }, + + toggleParentLimitation({commit, state}, {id}) { + if (!state.rects[id].parentLim) { + commit(types.ENABLE_PARENT_LIMITATION, id); + } else { + commit(types.DISABLE_PARENT_LIMITATION, id); + } + }, + + setAspect({commit}, {id}) { + commit(types.ENABLE_ASPECT, id); + }, + unsetAspect({commit}, {id}) { + commit(types.DISABLE_ASPECT, id); + }, + + setWidth({commit}, {id, width}) { + commit(types.CHANGE_WIDTH, {id, width}); + }, + + setHeight({commit}, {id, height}) { + commit(types.CHANGE_HEIGHT, {id, height}); + }, + + setTop({commit}, {id, top}) { + commit(types.CHANGE_TOP, {id, top}); + }, + + setLeft({commit}, {id, left}) { + commit(types.CHANGE_LEFT, {id, left}); + }, + + changeXLock({commit, state}, {id}) { + switch (state.rects[id].axis) { + case 'both': + commit(types.ENABLE_Y_AXIS, id); + break; + case 'x': + commit(types.ENABLE_NONE_AXIS, id); + break; + case 'y': + commit(types.ENABLE_BOTH_AXIS, id); + break; + case 'none': + commit(types.ENABLE_X_AXIS, id); + break; + } + }, + + changeYLock({commit, state}, {id}) { + switch (state.rects[id].axis) { + case 'both': + commit(types.ENABLE_X_AXIS, id); + break; + case 'x': + commit(types.ENABLE_BOTH_AXIS, id); + break; + case 'y': + commit(types.ENABLE_NONE_AXIS, id); + break; + case 'none': + commit(types.ENABLE_Y_AXIS, id); + break; + } + }, + + changeZToBottom({commit, state}, {id}) { + if (state.rects[id].zIndex === 1) { + return + } + + commit(types.CHANGE_ZINDEX, {id, zIndex: 1}); + + for (let i = 0, l = state.rects.length; i < l; i++) { + if (i !== id) { + if(state.rects[i].zIndex === state.rects.length){ + continue + } + commit(types.CHANGE_ZINDEX, {id: i, zIndex: state.rects[i].zIndex + 1}); + } + } + }, + + changeZToTop({commit, state}, {id}) { + if (state.rects[id].zIndex === state.rects.length) { + return + } + + commit(types.CHANGE_ZINDEX, {id, zIndex: state.rects.length}); + + for (let i = 0, l = state.rects.length; i < l; i++) { + if (i !== id) { + if(state.rects[i].zIndex === 1){ + continue + } + commit(types.CHANGE_ZINDEX, {id: i, zIndex: state.rects[i].zIndex - 1}); + } + } + }, + + setMinWidth({commit}, {id, width}) { + commit(types.CHANGE_MINW, {id, minw:width}); + }, + + setMinHeight({commit}, {id, height}) { + commit(types.CHANGE_MINH, {id, minh:height}); + } +}; diff --git a/src/demo/store/modules/rect/getters.js b/src/demo/store/modules/rect/getters.js new file mode 100644 index 0000000..7735338 --- /dev/null +++ b/src/demo/store/modules/rect/getters.js @@ -0,0 +1,12 @@ +export default { + getActive: state => { + for (let i = 0, l = state.rects.length; i < l; i++) { + let rect = state.rects[i]; + + if (rect.active) { + return i; + } + } + return null; + } +} \ No newline at end of file diff --git a/src/demo/store/modules/rect/index.js b/src/demo/store/modules/rect/index.js new file mode 100644 index 0000000..bec6d1b --- /dev/null +++ b/src/demo/store/modules/rect/index.js @@ -0,0 +1,12 @@ +import actions from './actions'; +import getters from './getters'; +import mutations from './mutations'; +import state from './state'; + +export default { + namespaced: true, + actions, + getters, + mutations, + state +}; diff --git a/src/demo/store/modules/rect/mutation-types.js b/src/demo/store/modules/rect/mutation-types.js new file mode 100644 index 0000000..17f3383 --- /dev/null +++ b/src/demo/store/modules/rect/mutation-types.js @@ -0,0 +1,53 @@ +export const ENABLE_ACTIVE = 'ENABLE_ACTIVE'; +export const DISABLE_ACTIVE = 'DISABLE_ACTIVE'; + +export const ENABLE_DRAGGABLE = 'ENABLE_DRAGGABLE'; +export const DISABLE_DRAGGABLE = 'DISABLE_DRAGGABLE'; + +export const ENABLE_RESIZABLE = 'ENABLE_RESIZABLE'; +export const DISABLE_RESIZABLE = 'DISABLE_RESIZABLE'; + +export const ENABLE_PARENT_LIMITATION = 'ENABLE_PARENT_LIMITATION'; +export const DISABLE_PARENT_LIMITATION = 'DISABLE_PARENT_LIMITATION'; + +export const ENABLE_ASPECT = 'ENABLE_ASPECT'; +export const DISABLE_ASPECT = 'DISABLE_ASPECT'; + +export const ENABLE_X_AXIS = 'ENABLE_X_AXIS'; +export const ENABLE_Y_AXIS = 'ENABLE_Y_AXIS'; +export const ENABLE_BOTH_AXIS = 'ENABLE_BOTH_AXIS'; +export const ENABLE_NONE_AXIS = 'ENABLE_NONE_AXIS'; + +export const CHANGE_ZINDEX = 'CHANGE_ZINDEX'; + +export const CHANGE_MINW = 'CHANGE_MINW'; +export const CHANGE_MINH = 'CHANGE_MINH'; + +export const CHANGE_WIDTH = 'CHANGE_WIDTH'; +export const CHANGE_HEIGHT = 'CHANGE_HEIGHT'; +export const CHANGE_TOP = 'CHANGE_TOP'; +export const CHANGE_LEFT = 'CHANGE_LEFT'; + +export default { + ENABLE_ACTIVE, + DISABLE_ACTIVE, + ENABLE_DRAGGABLE, + DISABLE_DRAGGABLE, + ENABLE_RESIZABLE, + DISABLE_RESIZABLE, + ENABLE_PARENT_LIMITATION, + DISABLE_PARENT_LIMITATION, + ENABLE_ASPECT, + DISABLE_ASPECT, + ENABLE_X_AXIS, + ENABLE_Y_AXIS, + ENABLE_NONE_AXIS, + ENABLE_BOTH_AXIS, + CHANGE_ZINDEX, + CHANGE_MINW, + CHANGE_MINH, + CHANGE_WIDTH, + CHANGE_HEIGHT, + CHANGE_TOP, + CHANGE_LEFT +} \ No newline at end of file diff --git a/src/demo/store/modules/rect/mutations.js b/src/demo/store/modules/rect/mutations.js new file mode 100644 index 0000000..e24449a --- /dev/null +++ b/src/demo/store/modules/rect/mutations.js @@ -0,0 +1,102 @@ +import { + ENABLE_ACTIVE, + DISABLE_ACTIVE, + ENABLE_ASPECT, + DISABLE_ASPECT, + ENABLE_DRAGGABLE, + DISABLE_DRAGGABLE, + ENABLE_RESIZABLE, + DISABLE_RESIZABLE, + ENABLE_PARENT_LIMITATION, + DISABLE_PARENT_LIMITATION, + CHANGE_ZINDEX, + ENABLE_BOTH_AXIS, + ENABLE_X_AXIS, + ENABLE_Y_AXIS, + ENABLE_NONE_AXIS, + CHANGE_HEIGHT, + CHANGE_LEFT, + CHANGE_MINH, + CHANGE_MINW, + CHANGE_TOP, + CHANGE_WIDTH +} from './mutation-types'; + +export default { + [ENABLE_ACTIVE](state, id) { + state.rects[id].active = true; + }, + [DISABLE_ACTIVE](state, id) { + state.rects[id].active = false; + }, + + [ENABLE_ASPECT](state, id) { + state.rects[id].aspectRatio = true; + }, + [DISABLE_ASPECT](state, id) { + state.rects[id].aspectRatio = false; + }, + + [ENABLE_DRAGGABLE](state, id) { + state.rects[id].draggable = true; + }, + [DISABLE_DRAGGABLE](state, id) { + state.rects[id].draggable = false; + }, + + [ENABLE_RESIZABLE](state, id) { + state.rects[id].resizable = true; + }, + [DISABLE_RESIZABLE](state, id) { + state.rects[id].resizable = false; + }, + + [ENABLE_BOTH_AXIS](state, id) { + state.rects[id].axis = 'both'; + }, + [ENABLE_NONE_AXIS](state, id) { + state.rects[id].axis = 'none'; + }, + [ENABLE_X_AXIS](state, id) { + state.rects[id].axis = 'x'; + }, + [ENABLE_Y_AXIS](state, id) { + state.rects[id].axis = 'y'; + }, + + [ENABLE_PARENT_LIMITATION](state, id) { + state.rects[id].parentLim = true; + }, + [DISABLE_PARENT_LIMITATION](state, id) { + state.rects[id].parentLim = false; + }, + + [CHANGE_ZINDEX](state, payload) { + state.rects[payload.id].zIndex = payload.zIndex; + }, + + [CHANGE_HEIGHT](state, payload) { + state.rects[payload.id].height = payload.height; + }, + + [CHANGE_WIDTH](state, payload) { + state.rects[payload.id].width = payload.width; + }, + + [CHANGE_TOP](state, payload) { + state.rects[payload.id].top = payload.top; + }, + + [CHANGE_LEFT](state, payload) { + state.rects[payload.id].left = payload.left; + }, + + [CHANGE_MINH](state, payload) { + + state.rects[payload.id].minh = payload.minh; + }, + + [CHANGE_MINW](state, payload) { + state.rects[payload.id].minw = payload.minw; + } +}; \ No newline at end of file diff --git a/src/demo/store/modules/rect/state.js b/src/demo/store/modules/rect/state.js new file mode 100644 index 0000000..f3b3b23 --- /dev/null +++ b/src/demo/store/modules/rect/state.js @@ -0,0 +1,52 @@ +export default { + 'rects': [ + { + 'width': 200, + 'height': 150, + 'top': 10, + 'left': 10, + 'draggable': true, + 'resizable': true, + 'minw': 10, + 'minh': 10, + 'axis': 'both', + 'parentLim': true, + 'aspectRatio': false, + 'zIndex': 1, + 'color': '#EF9A9A', + 'active': false + }, + { + 'width': 200, + 'height': 150, + 'top': 10, + 'left': 220, + 'draggable': true, + 'resizable': true, + 'minw': 10, + 'minh': 10, + 'axis': 'both', + 'parentLim': true, + 'aspectRatio': false, + 'zIndex': 2, + 'color': '#AED581', + 'active': false + }, + { + 'width': 200, + 'height': 150, + 'top': 170, + 'left': 10, + 'draggable': true, + 'resizable': true, + 'minw': 10, + 'minh': 10, + 'axis': 'both', + 'parentLim': true, + 'aspectRatio': false, + 'zIndex': 3, + 'color': '#81D4FA', + 'active': false + } + ] +}; diff --git a/static/index.html b/static/index.html index 2c99be4..8e469d0 100644 --- a/static/index.html +++ b/static/index.html @@ -3,6 +3,57 @@ Title + +
diff --git a/webpack.config.js b/webpack.config.js index ff12aa3..7fa5eb7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,11 @@ if(config.build.bundleAnalyzerReport){ } module.exports = { - + resolve: { + alias: { + vue: 'vue/dist/vue.common.js' + } + }, module: { rules: [