fixed bug

Author: purestart

build/webpack.prod.conf.js

@@ -1,17 +1,17 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+'use strict';
+const path = require('path');
+const utils = require('./utils');
+const webpack = require('webpack');
+const config = require('../config');
+const merge = require('webpack-merge');
+const baseWebpackConfig = require('./webpack.base.conf');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
-const env = require('../config/prod.env')
+const env = require('../config/prod.env');
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
@@ -26,6 +26,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     path: config.build.assetsRoot,
     publicPath: config.build.assetsPublicPath,
     filename: 'vue-fabric.min.js',
+    chunkFilename: 'vue-fabric.[name].[chunkhash:8].js',
     library: 'vue-fabric',
     libraryTarget: 'umd'
   },
@@ -43,33 +44,32 @@ const webpackConfig = merge(baseWebpackConfig, {
     // extract css into its own file
     new ExtractTextPlugin({
       // filename: utils.assetsPath('css/[name].[contenthash].css')
-       filename: 'vue-fabric.min.css'
+      filename: 'vue-fabric.min.css'
     }),
     new OptimizeCSSPlugin()
   ]
-})
+});
 
 if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+  const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
   webpackConfig.plugins.push(
     new CompressionWebpackPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
+        '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
       ),
       threshold: 10240,
       minRatio: 0.8
     })
-  )
+  );
 }
 
 if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+    .BundleAnalyzerPlugin;
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
 }
 
-module.exports = webpackConfig
+module.exports = webpackConfig;

config/index.js

@@ -9,7 +9,7 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
-    host: '0.0.0.0',
+    host: '127.0.0.1',
     port: 8088,
     autoOpenBrowser: false,
     errorOverlay: true,

dist/vue-fabric.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-fabric",
-  "version": "0.1.21",
+  "version": "0.1.25",
   "author": "purestart <[email protected]>",
   "description": "fabric vue components",
   "keywords": [

package.json

@@ -247,15 +247,15 @@ export default {
     },
     discardActive () {
       this.canvas.discardActiveObject();
-      this.canvas.discardActiveGroup();
+      // this.canvas.discardActiveGroup();
       this.canvas.renderAll();
     },
     moveTo () {
       let obj = this.canvas.getActiveObject();
       console.log(this.canvas.sendBackwards);
       this.canvas.sendBackwards(obj, true);
       this.canvas.discardActiveObject();
-      this.canvas.discardActiveGroup();
+      // this.canvas.discardActiveGroup();
     },
     createRect (options) {
       options = Object.assign({ width: 0, height: 0, fillColor: 'rgba(255, 255, 255, 0)', left: 50, top: 50 }, options);
@@ -330,13 +330,14 @@ export default {
       this.canvas.renderAll();
     },
     createTextbox (text, options) {
-      options = Object.assign({ fontSize: 14, fillColor: '#000000', registeObjectEvent: false, width: 50, _fontSizeMult: 5, left: 100, top: 100 }, options);
+      // _fontSizeMult: 5,
+      options = Object.assign({ fontSize: 14, fillColor: '#000000', registeObjectEvent: false, width: 50, left: 100, top: 100 }, options);
       var canvasObj = new fabric.Textbox(text, {
         ...options,
         fill: options.fillColor
       });
-      let arr = canvasObj._splitTextIntoLines(text);
-      console.log(arr);
+      // let arr = canvasObj._splitTextIntoLines(text);
+      // console.log(arr);
       this.canvas.add(canvasObj);
       if (options.registeObjectEvent) {
         Utils.registeObjectEvent(this, canvasObj);

src/components/fabric/fabric.vue

@@ -1,7 +1,4 @@
+import Fabric from './fabric';
+// const App = () => import(/* webpackChunkName: "frame" */ './image-model.vue');
 
-
-import Fabric from "./fabric";
-
-export {
-  Fabric
-};
+export { Fabric };

src/components/index.js

@@ -18,6 +18,7 @@
         <i @click="handleDelete" class="pt-iconfont icon-delete"></i>
         <i @click="rotate" class="pt-iconfont icon-shuaxin"></i>
         <i @click="createImg" class="pt-iconfont icon-crop"></i>
+        <i @click="discardActive" class="pt-iconfont icon-crop"></i>
       </div>
     </div>
     <vue-image-model :close="()=>{imgUrl=''}" v-show="imgUrl.length>0" :url="imgUrl"></vue-image-model>
@@ -82,6 +83,9 @@ export default {
     this.$refs.canvas.drawByPath([[50, 50], [120, 120], [80, 160]], {});
   },
   methods: {
+    discardActive () {
+      this.$refs.canvas.discardActive();
+    },
     handleAdd (url) {
       this.$refs.canvas.createImage(url);
     },