react-svg-image-board/dist/demo/main.832140311f297f087283.bundle.js

A react component. can drawing svg element to image board.

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{277:function(module,exports,__webpack_require__){__webpack_require__(278),__webpack_require__(424),module.exports=__webpack_require__(425)},342:function(module,exports){},425:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(272);module._StorybookPreserveDecorators=!0,Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(619)],module)}.call(this,__webpack_require__(426)(module))},619:function(module,exports,__webpack_require__){var map={"./stories/SvgImageBoard.stories.tsx":634};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=619},633:function(module,exports,__webpack_require__){},634:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ReadOnly",(function(){return ReadOnly})),__webpack_require__.d(__webpack_exports__,"EditMode",(function(){return EditMode}));__webpack_require__(36);var BoardMode,ShapeTypeEnum,dist=__webpack_require__(88),react=__webpack_require__(2),react_default=__webpack_require__.n(react),toConsumableArray=(__webpack_require__(19),__webpack_require__(65),__webpack_require__(632),__webpack_require__(18),__webpack_require__(42),__webpack_require__(89)),classCallCheck=__webpack_require__(273),createClass=__webpack_require__(274),assertThisInitialized=__webpack_require__(3),createSuper=__webpack_require__(275),inherits=__webpack_require__(276),defineProperty=__webpack_require__(9);__webpack_require__(633);!function(BoardMode){BoardMode[BoardMode.ReadOnly=0]="ReadOnly",BoardMode[BoardMode.Edit=1]="Edit"}(BoardMode||(BoardMode={})),function(ShapeTypeEnum){ShapeTypeEnum[ShapeTypeEnum.Rectangle=0]="Rectangle",ShapeTypeEnum[ShapeTypeEnum.Line=1]="Line",ShapeTypeEnum[ShapeTypeEnum.Circle=2]="Circle",ShapeTypeEnum[ShapeTypeEnum.Polyline=3]="Polyline",ShapeTypeEnum[ShapeTypeEnum.polygon=4]="polygon"}(ShapeTypeEnum||(ShapeTypeEnum={}));var _ref=react.createElement("rect",{x:"0",y:"0",height:"100%",width:"100%"}),_ref2=react.createElement("circle",{className:"left-top",r:"4",cx:"0",cy:"0"}),_ref3=react.createElement("circle",{className:"left",r:"4",cx:"0",cy:"50%"}),_ref4=react.createElement("circle",{className:"left-bottom",r:"4",cx:"0",cy:"100%"}),_ref5=react.createElement("circle",{className:"top",r:"4",cx:"50%",cy:"0"}),_ref6=react.createElement("circle",{className:"bottom",r:"4",cx:"50%",cy:"100%"}),_ref7=react.createElement("circle",{className:"right-top",r:"4",cx:"100%",cy:"0"}),_ref8=react.createElement("circle",{className:"right",r:"4",cx:"100%",cy:"50%"}),_ref9=react.createElement("circle",{className:"right-bottom",r:"4",cx:"100%",cy:"100%"}),SvgImageBoard_SvgImageBoard=function(_React$Component){Object(inherits.a)(SvgImageBoard,_React$Component);var _super=Object(createSuper.a)(SvgImageBoard);function SvgImageBoard(props){var _this;return Object(classCallCheck.a)(this,SvgImageBoard),_this=_super.call(this,props),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"_isMouseDown",!1),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"_mouseTarget",void 0),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"_mouseDownPostion",{x:0,y:0}),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"_lastMousePosition",{x:0,y:0}),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mainBoxRef",void 0),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mapscaleControlRef",void 0),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"drawRectRef",void 0),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"resize",(function(){if(_this.mainBoxRef.current){var imageSize=_this.state.imageSize;_this.setImageDefaultRatio(imageSize)}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"preLoadImage",(function(imageUrl){if(imageUrl){var img=new Image;img.onload=function(){var imageSize={width:img.naturalWidth,height:img.naturalHeight};_this.setState({imageUrl:imageUrl,imageSize:imageSize}),_this.setImageDefaultRatio(imageSize)},img.src=imageUrl}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"setImageDefaultRatio",(function(imageSize){var _this$mainBoxRef$curr,_this$mainBoxRef$curr2,_this$mapscaleControl;if(_this.props.imageUrl&&_this.mainBoxRef.current){var boxSize_width=null===(_this$mainBoxRef$curr=_this.mainBoxRef.current)||void 0===_this$mainBoxRef$curr?void 0:_this$mainBoxRef$curr.clientWidth,boxSize_height=null===(_this$mainBoxRef$curr2=_this.mainBoxRef.current)||void 0===_this$mainBoxRef$curr2?void 0:_this$mainBoxRef$curr2.clientHeight,scaleRatio=1,scalePoint={x:0,y:0};boxSize_width/imageSize.width<boxSize_height/imageSize.height?(scaleRatio=boxSize_width/imageSize.width,scalePoint.y=(boxSize_height-imageSize.height*scaleRatio)/2):(scaleRatio=boxSize_height/imageSize.height,scalePoint.x=(boxSize_width-imageSize.width*scaleRatio)/2),null===(_this$mapscaleControl=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl||_this$mapscaleControl.setAttribute("transform","matrix(".concat(scaleRatio,",0,0,").concat(scaleRatio,",").concat(scalePoint.x,",").concat(scalePoint.y,")"))}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"onkeydown",(function(e){if(46===e.keyCode){e.stopImmediatePropagation();var _this$props=_this.props,mode=_this$props.mode,onDeletedShape=_this$props.onDeletedShape,_this$state=_this.state,currentEditIndex=_this$state.currentEditIndex,shapes=_this$state.shapes;if(mode===BoardMode.Edit&&0<=currentEditIndex){var removes=shapes.splice(currentEditIndex,1);removes&&0<removes.length&&(_this.setState({shapes:Object(toConsumableArray.a)(shapes),currentEditIndex:-1}),null==onDeletedShape||onDeletedShape.call(Object(assertThisInitialized.a)(_this),removes[0]))}}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mainMouseDown",(function(evt){var e=evt.nativeEvent;if(e.stopImmediatePropagation(),0===e.button){_this._mouseTarget=e.target,_this._isMouseDown=!0;var x=e.offsetX,y=e.offsetY;_this._mouseDownPostion={x:x,y:y},_this._lastMousePosition=_this._mouseDownPostion}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mainMouseMove",(function(evt){var _this$mapscaleControl2,_matrix;if(_this._isMouseDown){var e=evt.nativeEvent;e.stopImmediatePropagation();var mode=_this.props.mode,x=e.offsetX,y=e.offsetY,translateX=x-_this._lastMousePosition.x,translateY=y-_this._lastMousePosition.y;switch(mode){case BoardMode.ReadOnly:var matrix=null===(_this$mapscaleControl2=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl2?void 0:_this$mapscaleControl2.getCTM();matrix=null===(_matrix=matrix)||void 0===_matrix?void 0:_matrix.translate(translateX/matrix.a,translateY/matrix.d),_this.ResetTransform(matrix),_this._lastMousePosition={x:x,y:y};break;case BoardMode.Edit:if(_this._mouseTarget&&"rect"===_this._mouseTarget.tagName){var _this$mapscaleControl3,_matrix2=null===(_this$mapscaleControl3=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl3?void 0:_this$mapscaleControl3.getCTM(),svgContainer=_this._mouseTarget.parentNode,nowX=parseFloat(svgContainer.getAttribute("x")||"0")+translateX/_matrix2.a,nowY=parseFloat(svgContainer.getAttribute("y")||"0")+translateY/_matrix2.d;svgContainer.setAttribute("x",nowX.toString()),svgContainer.setAttribute("y",nowY.toString()),_this._lastMousePosition={x:x,y:y}}else if(_this._mouseTarget&&"circle"===_this._mouseTarget.tagName){var _this$mapscaleControl4,_matrix3=null===(_this$mapscaleControl4=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl4?void 0:_this$mapscaleControl4.getCTM(),_svgContainer=_this._mouseTarget.parentNode,oldItem={x:parseFloat(_svgContainer.getAttribute("x")||"0"),y:parseFloat(_svgContainer.getAttribute("y")||"0"),width:parseFloat(_svgContainer.getAttribute("width")||"0"),height:parseFloat(_svgContainer.getAttribute("height")||"0")},nowItem={};switch(_this._mouseTarget.className.baseVal){case"left-top":(nowItem={x:oldItem.x+translateX/_matrix3.a,y:oldItem.y+translateY/_matrix3.d,width:oldItem.width-translateX/_matrix3.a,height:oldItem.height-translateY/_matrix3.d}).x<oldItem.x+oldItem.width&&nowItem.y<oldItem.y+oldItem.height&&(_svgContainer.setAttribute("x",nowItem.x),_svgContainer.setAttribute("y",nowItem.y),_svgContainer.setAttribute("width",nowItem.width),_svgContainer.setAttribute("height",nowItem.height));break;case"left":(nowItem={x:oldItem.x+translateX/_matrix3.a,width:oldItem.width-translateX/_matrix3.a}).x<oldItem.x+oldItem.width&&(_svgContainer.setAttribute("x",nowItem.x),_svgContainer.setAttribute("width",nowItem.width));break;case"left-bottom":(nowItem={x:oldItem.x+translateX/_matrix3.a,width:oldItem.width-translateX/_matrix3.a,height:oldItem.height+translateY/_matrix3.d}).x<oldItem.x+oldItem.width&&0<nowItem.height&&(_svgContainer.setAttribute("x",nowItem.x),_svgContainer.setAttribute("width",nowItem.width),_svgContainer.setAttribute("height",nowItem.height));break;case"top":0<(nowItem={y:oldItem.y+translateY/_matrix3.d,height:oldItem.height-translateY/_matrix3.d}).height&&(_svgContainer.setAttribute("y",nowItem.y),_svgContainer.setAttribute("height",nowItem.height));break;case"bottom":0<(nowItem={height:oldItem.height+translateY/_matrix3.d}).height&&_svgContainer.setAttribute("height",nowItem.height);break;case"right-top":0<(nowItem={y:oldItem.y+translateY/_matrix3.d,width:oldItem.width+translateX/_matrix3.a,height:oldItem.height-translateY/_matrix3.d}).width&&0<nowItem.height&&(_svgContainer.setAttribute("y",nowItem.y),_svgContainer.setAttribute("width",nowItem.width),_svgContainer.setAttribute("height",nowItem.height));break;case"right":0<(nowItem={width:oldItem.width+translateX/_matrix3.a}).width&&_svgContainer.setAttribute("width",nowItem.width);break;case"right-bottom":0<(nowItem={width:oldItem.width+translateX/_matrix3.a,height:oldItem.height+translateY/_matrix3.d}).width&&0<nowItem.height&&(_svgContainer.setAttribute("width",nowItem.width),_svgContainer.setAttribute("height",nowItem.height))}_this._lastMousePosition={x:x,y:y}}else _this.setDrawRect({x:Math.min(_this._mouseDownPostion.x,x),y:Math.min(_this._mouseDownPostion.y,y),height:Math.abs(_this._mouseDownPostion.y-y),width:Math.abs(_this._mouseDownPostion.x-x)})}}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mainMouseUp",(function(evt){if(_this._isMouseDown){var e=evt.nativeEvent;if(e.stopImmediatePropagation(),0===e.button){var _this$props2=_this.props,mode=_this$props2.mode,onCreatedShape=_this$props2.onCreatedShape,onUpdatedShape=_this$props2.onUpdatedShape,drawShapeType=_this$props2.drawShapeType,_this$state2=_this.state,currentEditIndex=_this$state2.currentEditIndex,shapes=_this$state2.shapes,x=e.offsetX,y=e.offsetY;switch(mode){case BoardMode.ReadOnly:break;case BoardMode.Edit:if((1<Math.abs(x-_this._mouseDownPostion.x)||1<Math.abs(y-_this._mouseDownPostion.y))&&_this._mouseTarget)if("image"===_this._mouseTarget.tagName){if(drawShapeType===ShapeTypeEnum.Rectangle){if(5<Math.abs(x-_this._mouseDownPostion.x)&&5<Math.abs(y-_this._mouseDownPostion.y)){var _this$mapscaleControl5,matrix=null===(_this$mapscaleControl5=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl5?void 0:_this$mapscaleControl5.getCTM(),rectX=Math.min(_this._mouseDownPostion.x,x),rectY=Math.min(_this._mouseDownPostion.y,y);rectX=(rectX-matrix.e)/matrix.a,rectY=(rectY-matrix.f)/matrix.d;var theWidth=Math.abs(_this._mouseDownPostion.x-x)/matrix.a,theHeight=Math.abs(_this._mouseDownPostion.y-y)/matrix.d,rect={type:ShapeTypeEnum.Rectangle,shape:{x:rectX,y:rectY,width:theWidth,height:theHeight}};shapes.push(rect),_this.setState({shapes:Object(toConsumableArray.a)(shapes),currentEditIndex:shapes.length-1}),null==onCreatedShape||onCreatedShape.call(Object(assertThisInitialized.a)(_this),rect)}_this.setDrawRect({x:0,y:0,height:0,width:0})}}else if("rect"===_this._mouseTarget.tagName){var _this$mapscaleControl6,_matrix4=null===(_this$mapscaleControl6=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl6?void 0:_this$mapscaleControl6.getCTM(),translateX=x-_this._lastMousePosition.x,translateY=y-_this._lastMousePosition.y,svgContainer=_this._mouseTarget.parentNode,nowX=parseFloat("".concat(svgContainer.getAttribute("x")))+translateX/_matrix4.a,nowY=parseFloat("".concat(svgContainer.getAttribute("y")))+translateY/_matrix4.d,_rect=shapes[currentEditIndex],_shape=_rect.shape;_shape.x=nowX,_shape.y=nowY,_rect.shape=_shape,_this.setState({shapes:Object(toConsumableArray.a)(shapes)}),null==onUpdatedShape||onUpdatedShape.call(Object(assertThisInitialized.a)(_this),_rect)}else if("circle"===_this._mouseTarget.tagName){var _svgContainer2=_this._mouseTarget.parentNode,_rect2=shapes[currentEditIndex];_rect2.shape={x:parseFloat(_svgContainer2.getAttribute("x")),y:parseFloat(_svgContainer2.getAttribute("y")),width:parseFloat(_svgContainer2.getAttribute("width")),height:parseFloat(_svgContainer2.getAttribute("height"))},_this.setState({shapes:Object(toConsumableArray.a)(shapes)}),null==onUpdatedShape||onUpdatedShape.call(Object(assertThisInitialized.a)(_this),_rect2)}else"svg"===_this._mouseTarget.tagName&&"mainBox"===_this._mouseTarget.className.baseVal&&_this.setDrawRect({x:0,y:0,height:0,width:0})}_this._isMouseDown=!1}}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"mainMouseWheel",(function(evt){if(!_this._isMouseDown){var _this$props$scaleNum=_this.props.scaleNum,scaleNum=void 0===_this$props$scaleNum?.1:_this$props$scaleNum,e=evt.nativeEvent;e.stopImmediatePropagation();var zoomScale=1;0>e.deltaY?zoomScale+=scaleNum:zoomScale-=scaleNum,_this.setZoomScale(zoomScale,{x:e.offsetX,y:e.offsetY})}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"setZoomScale",(function(zoomScale,scalePoint){var _this$mapscaleControl7,matrix=null===(_this$mapscaleControl7=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl7?void 0:_this$mapscaleControl7.getCTM(),_this$props3=_this.props,_this$props3$maxScale=_this$props3.maxScale,maxScale=void 0===_this$props3$maxScale?5:_this$props3$maxScale,_this$props3$minScale=_this$props3.minScale,minScale=void 0===_this$props3$minScale?.1:_this$props3$minScale;if(!((matrix.a>=maxScale||matrix.d>=maxScale)&&1<zoomScale||(matrix.a<=minScale||matrix.d<=minScale)&&1>zoomScale)){(matrix.a*zoomScale>maxScale||matrix.d*zoomScale>maxScale)&&1<zoomScale?zoomScale=matrix.a>matrix.d?maxScale/matrix.a:maxScale/matrix.d:(matrix.a*zoomScale<minScale||matrix.d*zoomScale<minScale)&&1>zoomScale&&(zoomScale=matrix.a<matrix.d?minScale/matrix.a:minScale/matrix.d);var offsetX=0,offsetY=0;scalePoint?(offsetX=scalePoint.x-matrix.e,offsetY=scalePoint.y-matrix.f):(offsetX=_this.mainBoxRef.current.clientWidth*matrix.a/2,offsetY=_this.mainBoxRef.current.clientHeight*matrix.d/2);var translateX=offsetX-offsetX*zoomScale,translateY=offsetY-offsetY*zoomScale;matrix=(matrix=matrix.translate(translateX/matrix.a,translateY/matrix.d)).scale(zoomScale),_this.ResetTransform(matrix)}})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"setOriginalScale",(function(){var _this$mapscaleControl8;null===(_this$mapscaleControl8=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl8||_this$mapscaleControl8.setAttribute("transform","matrix(1,0,0,1,0,0)")})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"ResetTransform",(function(Matrix){var _this$mapscaleControl9;null===(_this$mapscaleControl9=_this.mapscaleControlRef.current)||void 0===_this$mapscaleControl9||_this$mapscaleControl9.setAttribute("transform","matrix("+Matrix.a+","+Matrix.b+","+Matrix.c+","+Matrix.d+","+Matrix.e+","+Matrix.f+")")})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"setDrawRect",(function(rect){var _this$drawRectRef$cur,_this$drawRectRef$cur2,_this$drawRectRef$cur3,_this$drawRectRef$cur4;null===(_this$drawRectRef$cur=_this.drawRectRef.current)||void 0===_this$drawRectRef$cur||_this$drawRectRef$cur.setAttribute("height","".concat(rect.height)),null===(_this$drawRectRef$cur2=_this.drawRectRef.current)||void 0===_this$drawRectRef$cur2||_this$drawRectRef$cur2.setAttribute("width","".concat(rect.width)),null===(_this$drawRectRef$cur3=_this.drawRectRef.current)||void 0===_this$drawRectRef$cur3||_this$drawRectRef$cur3.setAttribute("x","".concat(rect.x)),null===(_this$drawRectRef$cur4=_this.drawRectRef.current)||void 0===_this$drawRectRef$cur4||_this$drawRectRef$cur4.setAttribute("y","".concat(rect.y))})),Object(defineProperty.a)(Object(assertThisInitialized.a)(_this),"getData",(function(){return console.log("getData"),_this.state.shapes})),_this.state={uploading:!1,imageUrl:"",imageSize:{width:100,height:100},currentEditIndex:-1,shapes:props.initShapes||[]},_this.mainBoxRef=react.createRef(),_this.mapscaleControlRef=react.createRef(),_this.drawRectRef=react.createRef(),_this}return Object(createClass.a)(SvgImageBoard,[{key:"componentDidMount",value:function componentDidMount(){var _this$props$onLoad,_this2=this;null===(_this$props$onLoad=this.props.onLoad)||void 0===_this$props$onLoad||_this$props$onLoad.call(this,this);var imageUrl=this.props.imageUrl;setTimeout((function(){_this2.preLoadImage(imageUrl)}),100),window.addEventListener("resize",this.resize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.resize)}},{key:"render",value:function render(){var _this3=this,_this$props4=this.props,mode=_this$props4.mode,shapeClassName=_this$props4.shapeClassName,_this$state3=this.state,imageUrl=_this$state3.imageUrl,imageSize=_this$state3.imageSize,currentEditIndex=_this$state3.currentEditIndex,shapes=_this$state3.shapes;return imageUrl&&react.createElement("div",{style:{height:"100%"},onContextMenu:function onContextMenu(e){return e.preventDefault()},onSelect:function onSelect(e){return e.preventDefault()}},react.createElement("svg",{ref:this.mainBoxRef,className:"mainBox",onMouseDown:this.mainMouseDown,onMouseMove:this.mainMouseMove,onMouseUp:this.mainMouseUp,onWheel:this.mainMouseWheel,tabIndex:0,onKeyDown:function onKeyDown(e){return _this3.onkeydown(e.nativeEvent)}},react.createElement("g",{ref:this.mapscaleControlRef,transform:"matrix(1,0,0,1,0,0)"},react.createElement("image",{href:imageUrl,width:imageSize.width,height:imageSize.height}),shapes&&shapes.map((function(item,index){if(item.type===ShapeTypeEnum.Rectangle){var rectInfo=item.shape;return react.createElement("svg",Object.assign({key:index,className:"shape ".concat(shapeClassName," ").concat(currentEditIndex===index?"active":""," ").concat(mode===BoardMode.Edit?"edit":"")},rectInfo,{onMouseDown:function onMouseDown(){return _this3.setState({currentEditIndex:index})}}),_ref,mode===BoardMode.Edit&&currentEditIndex===index&&react.createElement(react.Fragment,null,_ref2,_ref3,_ref4,_ref5,_ref6,_ref7,_ref8,_ref9))}return react.createElement("div",{key:index}," ")}))),react.createElement("rect",{ref:this.drawRectRef,strokeWidth:"1",strokeDasharray:"6,2",stroke:"#15f635",fill:"none"})))}}]),SvgImageBoard}(react.Component);SvgImageBoard_SvgImageBoard.displayName="SvgImageBoard",Object(defineProperty.a)(SvgImageBoard_SvgImageBoard,"defaultProps",{scaleNum:.1,maxScale:5,minScale:.1,shapeClassName:"red",drawShapeType:ShapeTypeEnum.Rectangle}),SvgImageBoard_SvgImageBoard.__docgenInfo={description:"",methods:[{name:"preLoadImage",docblock:null,modifiers:[],params:[{name:"imageUrl",type:{name:"string"}}],returns:null},{name:"setZoomScale",docblock:"设置缩放比例\r\n@zoomScale 缩放比例\r\n@scalePoint 缩放中心点",modifiers:[],params:[{name:"zoomScale",type:{name:"number"}},{name:"scalePoint",optional:!0,type:{name:"Point",alias:"Point"}}],returns:null,description:"设置缩放比例"},{name:"setOriginalScale",docblock:"设置原始缩放比例",modifiers:[],params:[],returns:null,description:"设置原始缩放比例"},{name:"getData",docblock:"获取编辑的数据",modifiers:[],params:[],returns:{type:{name:"Array",elements:[{name:"Shape",elements:[{name:"union",raw:"Rectangle | Line | Circle | Ellipse | Multipoint",elements:[{name:"Rectangle"},{name:"Line"},{name:"Circle"},{name:"Ellipse"},{name:"Multipoint"}]}],raw:"Shape<ShapeType>"}],raw:"Array<Shape<ShapeType>>"}},description:"获取编辑的数据"}],displayName:"SvgImageBoard",props:{scaleNum:{defaultValue:{value:"0.1",computed:!1},required:!1,tsType:{name:"number"},description:"每次缩放的比例"},maxScale:{defaultValue:{value:"5",computed:!1},required:!1,tsType:{name:"number"},description:"最大缩放比例"},minScale:{defaultValue:{value:"0.1",computed:!1},required:!1,tsType:{name:"number"},description:"最小缩放比例"},shapeClassName:{defaultValue:{value:"'red'",computed:!1},required:!1,tsType:{name:"string"},description:""},drawShapeType:{defaultValue:{value:"ShapeTypeEnum.Rectangle",computed:!0},required:!1,tsType:{name:"ShapeTypeEnum"},description:""},imageUrl:{required:!0,tsType:{name:"string"},description:""},mode:{required:!0,tsType:{name:"BoardMode"},description:""},initShapes:{required:!1,tsType:{name:"Array",elements:[{name:"Shape",elements:[{name:"union",raw:"Rectangle | Line | Circle | Ellipse | Multipoint",elements:[{name:"Rectangle"},{name:"Line"},{name:"Circle"},{name:"Ellipse"},{name:"Multipoint"}]}],raw:"Shape<ShapeType>"}],raw:"Array<Shape<ShapeType>>"},description:""},onLoad:{required:!1,tsType:{name:"signature",type:"function",raw:"(board: SvgImageBoard) => void",signature:{arguments:[{name:"board",type:{name:"SvgImageBoard"}}],return:{name:"void"}}},description:""},onDeletedShape:{required:!1,tsType:{name:"signature",type:"function",raw:"(shape: Shape<ShapeType>) => void",signature:{arguments:[{name:"shape",type:{name:"Shape",elements:[{name:"union",raw:"Rectangle | Line | Circle | Ellipse | Multipoint",elements:[{name:"Rectangle"},{name:"Line"},{name:"Circle"},{name:"Ellipse"},{name:"Multipoint"}]}],raw:"Shape<ShapeType>"}}],return:{name:"void"}}},description:""},onCreatedShape:{required:!1,tsType:{name:"signature",type:"function",raw:"(shape: Shape<ShapeType>) => void",signature:{arguments:[{name:"shape",type:{name:"Shape",elements:[{name:"union",raw:"Rectangle | Line | Circle | Ellipse | Multipoint",elements:[{name:"Rectangle"},{name:"Line"},{name:"Circle"},{name:"Ellipse"},{name:"Multipoint"}]}],raw:"Shape<ShapeType>"}}],return:{name:"void"}}},description:""},onUpdatedShape:{required:!1,tsType:{name:"signature",type:"function",raw:"(shape: Shape<ShapeType>) => void",signature:{arguments:[{name:"shape",type:{name:"Shape",elements:[{name:"union",raw:"Rectangle | Line | Circle | Ellipse | Multipoint",elements:[{name:"Rectangle"},{name:"Line"},{name:"Circle"},{name:"Ellipse"},{name:"Multipoint"}]}],raw:"Shape<ShapeType>"}}],return:{name:"void"}}},description:""}}};"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src\\components\\SvgImageBoard\\index.tsx"]={name:"SvgImageBoard",docgenInfo:SvgImageBoard_SvgImageBoard.__docgenInfo,path:"src\\components\\SvgImageBoard\\index.tsx"});__webpack_exports__.default={title:"SvgImageBoard",component:SvgImageBoard_SvgImageBoard};var svgImageBoardRef,SvgImageBoard_stories_props={imageUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586942012402&di=a2e533d8165ebe5896bf039dd6469d7c&imgtype=0&src=http%3A%2F%2Fn1image.hjfile.cn%2Fshetuan%2F2de8bf7b-b4d4-4eb8-871b-0caa5f5e0967.jpg",mode:BoardMode.Edit,shapeClassName:"blue",initShapes:[{key:1,type:ShapeTypeEnum.Rectangle,shape:{x:0,y:0,width:100,height:100},tag:{id:1,name:"a"}},{key:2,type:ShapeTypeEnum.Rectangle,shape:{x:100,y:100,width:100,height:100},tag:{id:2,name:"b"}},{key:3,type:ShapeTypeEnum.Rectangle,shape:{x:200,y:200,width:100,height:100},tag:{id:3,name:"c"}},{key:4,type:ShapeTypeEnum.Rectangle,shape:{x:300,y:300,width:100,height:100},tag:{id:4,name:"d"}}],onLoad:function onLoad(obj){svgImageBoardRef=obj},onCreatedShape:Object(dist.action)("onCreatedShape"),onUpdatedShape:Object(dist.action)("onUpdatedShape"),onDeletedShape:Object(dist.action)("onDeletedShape")},container=function(component){var _svgImageBoardRef4;return react_default.a.createElement("div",{style:{width:"800px",height:"400px",margin:"50px auto",backgroundColor:"gray"}},react_default.a.createElement("div",{style:{position:"absolute",top:"25px"}},react_default.a.createElement("button",{onClick:function onClick(){var _svgImageBoardRef;null===(_svgImageBoardRef=svgImageBoardRef)||void 0===_svgImageBoardRef||_svgImageBoardRef.setZoomScale(1.1)}},"放大"),react_default.a.createElement("button",{onClick:function onClick(){var _svgImageBoardRef2;null===(_svgImageBoardRef2=svgImageBoardRef)||void 0===_svgImageBoardRef2||_svgImageBoardRef2.setZoomScale(.9)}},"缩小"),react_default.a.createElement("button",{onClick:function onClick(){var _svgImageBoardRef3;null===(_svgImageBoardRef3=svgImageBoardRef)||void 0===_svgImageBoardRef3||_svgImageBoardRef3.setOriginalScale()}},"原始大小"),react_default.a.createElement("button",{onClick:Object(dist.action)("获取数据:".concat(JSON.stringify(null===(_svgImageBoardRef4=svgImageBoardRef)||void 0===_svgImageBoardRef4?void 0:_svgImageBoardRef4.getData())))},"获取数据")),component)};container.displayName="container";var ReadOnly=function(){return container(react_default.a.createElement(SvgImageBoard_SvgImageBoard,Object.assign({},SvgImageBoard_stories_props,{mode:BoardMode.ReadOnly})))},EditMode=function(){return container(react_default.a.createElement(SvgImageBoard_SvgImageBoard,Object.assign({},SvgImageBoard_stories_props,{mode:BoardMode.Edit})))};ReadOnly.__docgenInfo={description:"",methods:[],displayName:"ReadOnly"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src\\stories\\SvgImageBoard.stories.tsx"]={name:"ReadOnly",docgenInfo:ReadOnly.__docgenInfo,path:"src\\stories\\SvgImageBoard.stories.tsx"}),EditMode.__docgenInfo={description:"",methods:[],displayName:"EditMode"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src\\stories\\SvgImageBoard.stories.tsx"]={name:"EditMode",docgenInfo:EditMode.__docgenInfo,path:"src\\stories\\SvgImageBoard.stories.tsx"})}},[[277,1,2]]]);
//# sourceMappingURL=main.832140311f297f087283.bundle.js.map