@fonixtree/magic-design 0.0.55 → 0.0.56

package/es/common/ImgArea/components/MultiCrops.js

@@ -0,0 +1,210 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiCrops = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ramda = require("ramda");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _Crop = _interopRequireWildcard(require("./Crop"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var isValidPoint = function isValidPoint(point) {
+  if (point === void 0) {
+    point = {};
+  }
+
+  var strictNumber = function strictNumber(number) {
+    return (0, _ramda.both)((0, _ramda.is)(Number), (0, _ramda.complement)((0, _ramda.equals)(NaN)))(number);
+  };
+
+  return strictNumber(point.x) && strictNumber(point.y);
+};
+
+var MultiCrops =
+/** @class */
+function (_super) {
+  __extends(MultiCrops, _super);
+
+  function MultiCrops() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.drawingIndex = -1;
+    _this.pointA = {};
+    _this.id = _shortid["default"].generate();
+
+    _this.renderCrops = function (props) {
+      var indexedMap = (0, _ramda.addIndex)(_ramda.map);
+      return indexedMap(function (coor, index) {
+        return /*#__PURE__*/_react["default"].createElement(_Crop["default"] // improve performance when delet crop in middle array
+        , _extends({
+          key: coor.id || index,
+          index: index,
+          coordinate: coor
+        }, props));
+      })(props.coordinates);
+    };
+
+    _this.getCursorPosition = function (e) {
+      var _a = _this.container.getBoundingClientRect(),
+          left = _a.left,
+          top = _a.top;
+
+      return {
+        x: e.clientX - left,
+        y: e.clientY - top
+      };
+    };
+
+    _this.handleMouseDown = function (e) {
+      var coordinates = _this.props.coordinates;
+
+      if (e.target === _this.img || e.target === _this.container) {
+        var _a = _this.getCursorPosition(e),
+            x = _a.x,
+            y = _a.y;
+
+        _this.drawingIndex = coordinates.length;
+        _this.pointA = {
+          x: x,
+          y: y
+        };
+        _this.id = _shortid["default"].generate();
+      }
+    };
+
+    _this.handleMouseMove = function (e) {
+      var _a = _this.props,
+          onDraw = _a.onDraw,
+          onChange = _a.onChange,
+          coordinates = _a.coordinates;
+      var pointA = _this.pointA;
+
+      if (isValidPoint(pointA)) {
+        var pointB = _this.getCursorPosition(e); // get the drawing coordinate
+
+
+        var coordinate = {
+          x: Math.min(pointA.x, pointB.x),
+          y: Math.min(pointA.y, pointB.y),
+          width: Math.abs(pointA.x - pointB.x),
+          height: Math.abs(pointA.y - pointB.y),
+          id: _this.id
+        };
+        var nextCoordinates = (0, _ramda.clone)(coordinates);
+        nextCoordinates[_this.drawingIndex] = coordinate;
+
+        if ((0, _ramda.is)(Function, onDraw)) {
+          onDraw(coordinate, _this.drawingIndex, nextCoordinates);
+        }
+
+        if ((0, _ramda.is)(Function, onChange)) {
+          onChange(coordinate, _this.drawingIndex, nextCoordinates);
+        }
+      }
+    };
+
+    _this.handlMouseUp = function () {
+      _this.pointA = {};
+    };
+
+    return _this;
+  }
+
+  MultiCrops.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        src = _a.src,
+        width = _a.width,
+        height = _a.height,
+        onLoad = _a.onLoad; // const { clicked } = this.state
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'inline-block',
+        position: 'relative',
+        width: '600px'
+      },
+      onMouseDown: this.handleMouseDown,
+      onMouseMove: this.handleMouseMove,
+      onMouseUp: this.handlMouseUp,
+      ref: function ref(container) {
+        return _this.container = container;
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: function ref(img) {
+        return _this.img = img;
+      },
+      src: src,
+      width: width,
+      height: height,
+      onLoad: onLoad,
+      alt: "",
+      draggable: false
+    }), this.renderCrops(this.props));
+  };
+
+  return MultiCrops;
+}(_react.Component);
+
+exports.MultiCrops = MultiCrops;
+var string = _propTypes["default"].string,
+    arrayOf = _propTypes["default"].arrayOf,
+    number = _propTypes["default"].number,
+    func = _propTypes["default"].func;
+MultiCrops.propTypes = {
+  coordinates: arrayOf(_Crop.coordinateType),
+  src: string,
+  width: number,
+  height: number,
+  onDraw: func,
+  onChange: func,
+  onLoad: func
+};
+MultiCrops.defaultProps = {
+  coordinates: [],
+  src: ''
+};

package/lib/common/ImgArea/components/MultiCrops.js

@@ -0,0 +1,210 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiCrops = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ramda = require("ramda");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _Crop = _interopRequireWildcard(require("./Crop"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var isValidPoint = function isValidPoint(point) {
+  if (point === void 0) {
+    point = {};
+  }
+
+  var strictNumber = function strictNumber(number) {
+    return (0, _ramda.both)((0, _ramda.is)(Number), (0, _ramda.complement)((0, _ramda.equals)(NaN)))(number);
+  };
+
+  return strictNumber(point.x) && strictNumber(point.y);
+};
+
+var MultiCrops =
+/** @class */
+function (_super) {
+  __extends(MultiCrops, _super);
+
+  function MultiCrops() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.drawingIndex = -1;
+    _this.pointA = {};
+    _this.id = _shortid["default"].generate();
+
+    _this.renderCrops = function (props) {
+      var indexedMap = (0, _ramda.addIndex)(_ramda.map);
+      return indexedMap(function (coor, index) {
+        return /*#__PURE__*/_react["default"].createElement(_Crop["default"] // improve performance when delet crop in middle array
+        , _extends({
+          key: coor.id || index,
+          index: index,
+          coordinate: coor
+        }, props));
+      })(props.coordinates);
+    };
+
+    _this.getCursorPosition = function (e) {
+      var _a = _this.container.getBoundingClientRect(),
+          left = _a.left,
+          top = _a.top;
+
+      return {
+        x: e.clientX - left,
+        y: e.clientY - top
+      };
+    };
+
+    _this.handleMouseDown = function (e) {
+      var coordinates = _this.props.coordinates;
+
+      if (e.target === _this.img || e.target === _this.container) {
+        var _a = _this.getCursorPosition(e),
+            x = _a.x,
+            y = _a.y;
+
+        _this.drawingIndex = coordinates.length;
+        _this.pointA = {
+          x: x,
+          y: y
+        };
+        _this.id = _shortid["default"].generate();
+      }
+    };
+
+    _this.handleMouseMove = function (e) {
+      var _a = _this.props,
+          onDraw = _a.onDraw,
+          onChange = _a.onChange,
+          coordinates = _a.coordinates;
+      var pointA = _this.pointA;
+
+      if (isValidPoint(pointA)) {
+        var pointB = _this.getCursorPosition(e); // get the drawing coordinate
+
+
+        var coordinate = {
+          x: Math.min(pointA.x, pointB.x),
+          y: Math.min(pointA.y, pointB.y),
+          width: Math.abs(pointA.x - pointB.x),
+          height: Math.abs(pointA.y - pointB.y),
+          id: _this.id
+        };
+        var nextCoordinates = (0, _ramda.clone)(coordinates);
+        nextCoordinates[_this.drawingIndex] = coordinate;
+
+        if ((0, _ramda.is)(Function, onDraw)) {
+          onDraw(coordinate, _this.drawingIndex, nextCoordinates);
+        }
+
+        if ((0, _ramda.is)(Function, onChange)) {
+          onChange(coordinate, _this.drawingIndex, nextCoordinates);
+        }
+      }
+    };
+
+    _this.handlMouseUp = function () {
+      _this.pointA = {};
+    };
+
+    return _this;
+  }
+
+  MultiCrops.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        src = _a.src,
+        width = _a.width,
+        height = _a.height,
+        onLoad = _a.onLoad; // const { clicked } = this.state
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'inline-block',
+        position: 'relative',
+        width: '600px'
+      },
+      onMouseDown: this.handleMouseDown,
+      onMouseMove: this.handleMouseMove,
+      onMouseUp: this.handlMouseUp,
+      ref: function ref(container) {
+        return _this.container = container;
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: function ref(img) {
+        return _this.img = img;
+      },
+      src: src,
+      width: width,
+      height: height,
+      onLoad: onLoad,
+      alt: "",
+      draggable: false
+    }), this.renderCrops(this.props));
+  };
+
+  return MultiCrops;
+}(_react.Component);
+
+exports.MultiCrops = MultiCrops;
+var string = _propTypes["default"].string,
+    arrayOf = _propTypes["default"].arrayOf,
+    number = _propTypes["default"].number,
+    func = _propTypes["default"].func;
+MultiCrops.propTypes = {
+  coordinates: arrayOf(_Crop.coordinateType),
+  src: string,
+  width: number,
+  height: number,
+  onDraw: func,
+  onChange: func,
+  onLoad: func
+};
+MultiCrops.defaultProps = {
+  coordinates: [],
+  src: ''
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -36,91 +36,6 @@
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1"
   },
-  "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@svgr/webpack": "^5.5.0",
-    "@types/axios": "^0.14.0",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.36",
-    "@types/react": "^18.0.9",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.5",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "add": "^2.0.6",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "child_process": "^1.0.2",
-    "classnames": "^2.3.1",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "7",
-    "eslint-config-next": "^12.1.6",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "extract-zip": "^2.0.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "gulp": "4.0.2",
-    "gulp-less": "5.0.0",
-    "gulp-postcss": "9.0.1",
-    "gulp-rename": "2.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "^2.0.6",
-    "identity-obj-proxy": "^3.0.0",
-    "less": "3.13.1",
-    "less-loader": "^11.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "mv": "^2.1.1",
-    "ora": "^4.1.1",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-less": "6.0.0",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "postcss-px-to-viewport": "^1.1.1",
-    "postcss-selector-namespace": "^3.0.1",
-    "prompts": "^2.4.2",
-    "rc-tools": "^9.6.1-alpha.1",
-    "react": "^16.11.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dom": "^16.11.0",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "typescript": "^4.7.2",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
-  },
   "peerDependencies": {
     "react": ">=16.11.0",
     "react-dom": ">=16.11.0"

package/README.md

@@ -1,320 +0,0 @@
-# 快捷指令使用
-
-## 1、发布 -- npm run pub
-
-## 2、新增国际化 -- npm run cl "Hello world"
-
-## 3、更新iconfont -- npm run iconfont
-
-
-# 设计器二期
-
-## 1、基本概念
-
-### 1.1、元组件：构成复合组件的最小单位
-
-Text、Image、Button、Divider、Video 等
-
-### 1.2、复合组件：由若干个元组件构成的一个大组件
-
-Text、Banner、Image Gallery、Image and Text、Carousel、Reward、Newsletter 等
-
-### 1.3、业务公共组件：项目中复用的公共组件
-
-所有的公共组件需要开放 value 和 onChange Api（除 Button、Iconfont）
-
-Button、Iconfont、AlignSelecter、Collapse、ColorPicker、ImagePicker、LayoutSelecter、Slider、UrlPicker
-
-## 2、元组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、IMAGE、BUTTON、DIVIDER、VIDEO
-
-元组件报文格式：
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  style:{
-  	fontFamily:'xxx', //字体
-  	...css  //属性名称尽量使用标准css名称
-	},
-	hoverStyle:{
-
-  }
-}
-```
-
-动态设置 hover 效果
-
-onMouseEnter={e => { e.target.style.color = 'red'; }}
-
-onMouseLeave={e => { e.target.style.color = 'white'; }}
-
-文本可编辑
-
-contenteditable="true"
-
-### 2.2 、元组件报文
-
-#### Text
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  content:'this is text',
-  style:{
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    width: '200px',
-    ...css
-	}
-}
-```
-
-#### Image
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'IMAGE', //元组件类型
-  name:'123.png',
-  src:'../image.png', //图片地址
-  url:'www.baidu.com', //图片跳转地址
-  style:{
-    width: '200px',
-    ...css
-	},
-	hoverStyle:{     //hover 类型为new时保存src，类型为enlarge时保存scale
-    scale: '2',
-    src:'../image1.png',
-  }
-}
-```
-
-#### Button
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'BUTTON', //元组件类型
-  name:'Submit',
-  url: 'www.baidu.com',
-  style:{
-  	buttonIconSrc:'../img.png',
- 	  buttonIconPlace: 'left',
-  	color:'#FEFEFE',
-  	border: '1px solid red',
-  	borderRadius:'10px',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-	},
-	hoverStyle {
-    color:'#FEFEFE',
-  	border: '1px solid red',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-  }
-}
-```
-
-## 2、复合组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、BANNER、IMAGE_GALLERT、IMAGE_TEXT、CAROUSEL、REWARD、NEWSLETTER
-
-复合组件报文格式：
-
-```json
-{
-  id:'xxxx' //复合组件key
-  type: 'TYPE', //复合组件类型
-  setting:{     //开关类型的配置及属性配置放在这里
-  	autoplays: 3, //3秒轮播
-	},
-	groupSource:[],  //元组件集合组数据放在这里
-	metas:{
-    title:{
-      open:false,
-      type:'IMAGE'
-      ...metaCompJson
-    },
-    subTitle:{
-      open:false,
-        type:'IMAGE'
-        ...metaCompJson
-    }
-  },
-	customize:{
-    layout:'',
-    background:{
-
-    }
-  }
-}
-```
-
-#### Text
-
-```js
-{
-	id: 'xxxx', //复合组件key
-  type: 'TEXT', //复合组件类型
-  setting:{
-    layout:'left', // 模块布局 left/center/right ，每一个layout可能都是一个不同的组件
-    title:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-    subtitle:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-  },
-  source:[
-    {                   //此处可以抽出业务组件
-      title:{
-        type:'TEXT'
-       ...metaCompJson
-      },
-      content:{
-        type:'TEXT'
-       ...metaCompJson
-      }
-    }
-  ],
-  style:{
-  	align:'left',  //文本布局 left/center/right
-  	backgroundColor: 'red',
-  	backgroundImage:'../image.png'
-	}
-}
-```
-
-#### Banner
-
-modifySetting
-
-```json
-{
-  "comositeId": "1111",
-
-  "value": {
-    "autoplays": 4
-  }
-}
-```
-
-```json
-{
-	id: 'xxxx',
-	type: 'BANNER',
-	setting:{
-    open:false
-  	autoplays: 3, //3秒轮播
-    arrows:{      // 滚动箭头
-    	open:false,
-    	color:'red',
-    	size:'',
-    	hoverSize:'',
-      hoverColor:'green',
-  	},
-    dots:{       //面板指示点
-      open:false,
-      color: 'red',
-      size:'',
-      hoverSize:''
-      hoverColor:'green',
-    },
-	},
-  groupSource:[
-    {                     //此处可以作为一个业务组件
-      id:'xxxxx',
-      image:{
-        open:false,
-        type:'IMAGE'
-        ...metaCompJson
-      },
-      title:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      content:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      button:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      secondaryButton:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      layout:'center',
-      align:'left',
-      //文本布局 left/center/right
-    }
-  ]
-}
-```
-
-#### Image Gallery
-
-```json
-
-```
-
-#### Image and Text
-
-```json
-{
-  id:'xxxx'
-  type: 'IMAGE_TEXT',
-  setting:{
-  	layout:'left',
-  	title:{},
-		subtitle:{},
-		button:{},
-		secondaryButton:{}
-	},
-	source:[
-
-  ],
-  style:{
-    align:'left',
-    backgroundColor:'red',
-    backgroundImage:'./img.png'
-  }
-}
-```
-
-疑问：
-
-Text 元组件
-
-文字链接配置好之后，怎么删除
-
-链接配置的规则，按单词还是字符
-
-image 元组件
-
-属性控制进度条和输入框是否要限制最大最小值
-
-button 元组件
-
-是否需要 icon 的 hover 效果
-
-banner 中的 text Align 放在元组件里？