react-echarts-mark-board/lib/index.js

Mark drawing tool, support for drawing lines , rays and other graphics.

import e,{useReducer as n,useEffect as t,useState as r}from"react";import o from"echarts-for-react";import{update as a,last as i,head as s,equals as c,slice as l,remove as h,max as p,curry as y,compose as d}from"ramda";import u from"echarts";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */var f=function(){return(f=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)};function v(){for(var e=0,n=0,t=arguments.length;n<t;n++)e+=arguments[n].length;var r=Array(e),o=0;for(n=0;n<t;n++)for(var a=arguments[n],i=0,s=a.length;i<s;i++,o++)r[o]=a[i];return r}var g={grid:{top:0,right:1,bottom:1,left:0},xAxis:{min:0,max:1,type:"value",splitLine:{show:!1},axisLine:{lineStyle:{color:"rgba(0,0,0,0)"},onZero:!1}},yAxis:{min:0,max:1,inverse:!0,type:"value",splitLine:{show:!1},axisLine:{lineStyle:{color:"rgba(0,0,0,0)"},onZero:!1}},series:[]},m=function(e){var n=e.nativeEvent.offsetX||0,t=e.nativeEvent.offsetY||0;return[n/(e.currentTarget.clientWidth||0)||0,t/(e.currentTarget.clientHeight||0)||0]},E=function(e,n){var t,r;return.05-(t=e,r=n,Math.sqrt(Math.pow(t[0]-r[0],2)+Math.pow(t[1]-r[1],2)))<0?n:e},b=function(e){return c(s(e),i(e))},L=function(e){return a(-1,E(s(e),i(e)),e)},O=function(e){return{anchors:[],color:e.color,over:!1,type:e.shapeType,data:e.data}};function A(e,n){var t=n.type,r=n.location,o=n.newShapeList,i=n.shapeOrdinal,c=n.shapeType,p=n.anchorOrdinal,y=n.color,d=n.data,u=e.shapeList,g=u[e.selected];switch(t){case"CREATE_SHAPE":e={shapeList:v(u,[O({shapeType:c||"line",color:y,data:d})]),selected:u.length};break;case"DELETE_SHAPE":if(void 0===i)break;e={shapeList:h(i,1,u),selected:0};break;case"CHANGE_SELECTED":if(void 0===i)break;e=f(f({},e),{selected:i});break;case"PUSH_ANCHOR":if(!g||g.over||!r)break;if(g.anchors.length<1&&g.anchors.push(r),("polygon"===g.type||"sides_polygon"===g.type)&&g.anchors.length>3&&(g.anchors=L(g.anchors),g.over=b(g.anchors),g.over)){e=f({},e);break}if("sides"===g.type&&g.anchors.length>1){g.over=!0,e=f({},e);break}if("arrow"===g.type&&g.anchors.length>1){g.over=!0,e=f({},e);break}g.anchors.push(r),e=f({},e);break;case"MOVE_LAST_ANCHOR":g&&!g.over&&g.anchors.length>0&&(g.anchors=a(-1,r,g.anchors),e=f({},e));break;case"MOVE_ANCHOR":g&&g.anchors.length>0&&"number"==typeof p&&(g.anchors=a(p,r,g.anchors),"polygon"!==g.type&&"sides_polygon"!==g.type||!g.over||n.anchorOrdinal!==g.anchors.length-1||(g.anchors=a(0,r,g.anchors)),e=f({},e));break;case"OVER":if(g&&!g.over&&g.anchors.length>0){if(g.anchors=l(0,-2,g.anchors),("polygon"===g.type||"sides_polygon"===g.type)&&g.anchors.length>3&&(g.anchors=a(-1,s(g.anchors),g.anchors)),("polygon"===g.type||"sides_polygon"===g.type)&&g.anchors.length<=3)break;if("line"===g.type&&g.anchors.length<2)break;g.over=!0,e=f({},e)}break;case"LOAD":e={selected:!i||i<0||i>=o.length?0:i,shapeList:o}}return e}export default function(a){var i=a.onChange,s=a.onReady,l=a.selected,h=a.showGrid,v=void 0!==h&&h,E=a.value,b=a.lineWidth,L=void 0===b?2:b,O=n(A,{selected:0,shapeList:E}),S=O[0],_=O[1];t((function(){c(S.shapeList,E)||_({type:"LOAD",newShapeList:E})}),[E]),t((function(){_({type:"CHANGE_SELECTED",shapeOrdinal:l})}),[l]),g.xAxis.splitLine.show=v,g.yAxis.splitLine.show=v;var k=r(null),w=k[0],C=k[1];t((function(){if(w){var e=w._dom.clientWidth/w._dom.clientHeight,n=S.shapeList,t=S.selected,r=n[t];w.setOption(f(f({},g),{series:n.map((function(n,r){var o,a,i,s=function(e){var n;return null===(n=e)||void 0===n?void 0:n.map((function(e){return e.map((function(e){var n=e>1?1:e;return n=n<0?0:n}))}))},c=n.anchors[0]&&n.anchors[1]?n.anchors:[[0,0],[0,0]],l=c[0],h=l[0],y=l[1],d=c[1],u=d[0],f=d[1];return{type:"line",symbolSize:r===t?12:0,data:s(n.anchors),lineStyle:{color:n.color,width:L},itemStyle:{color:n.color},markPoint:"arrow"===n.type&&{silent:!0,symbol:"triangle",symbolSize:p(18,3.6*L),symbolRotate:u-h>0?180*Math.atan((-f+y)/(u-h)/e)/Math.PI-90:180*Math.atan((f-y)/(-u+h)/e)/Math.PI+90,data:(i=n.anchors[0]?function(e){var n=e[0],t=n[0],r=n[1],o=e[1];return[o[0]-t+t,o[1]-r+r]}(n.anchors):null,i?[{coord:i}]:null),animation:!1},markLine:("sides"===n.type||"sides_polygon"===n.type)&&{silent:!0,symbol:["circle","triangle"],symbolSize:p(18,3.6*L),lineStyle:{type:"solid",width:L,clip:!1},data:(o=n.anchors[0]?function(e,n){var t=e[0],r=t[0],o=t[1],a=e[1],i=a[0],s=a[1];return[[(r+i)/2-(o-s)/4/n,(o+s)/2+(r-i)/4*n],[(r+i)/2+(o-s)/4/n,(o+s)/2-(r-i)/4*n]]}(n.anchors,e):null,a=s(o),o?[[{coord:a[0]},{coord:a[1]}]]:null),animation:!1},clip:!1}})),graphic:r?r.anchors.map((function(e,n){return{type:"circle",position:w.convertToPixel("grid",[e[0],e[1]]),shape:{cx:0,cy:0,r:12},invisible:!0,draggable:!0,ondrag:u.util.curry((function(e){var n=w.convertFromPixel("grid",this.position);_({type:"MOVE_ANCHOR",location:[n[0],n[1]],anchorOrdinal:e})}),n),z:100}})):null}),!0),i&&i(S)}}),[S]);var H=function(e){_({type:"CREATE_SHAPE",shapeType:e.shapeType,color:e.color,data:e.data})},T=function(e){_({type:"DELETE_SHAPE",shapeOrdinal:e})};t((function(){w&&(_({type:"LOAD",newShapeList:E,shapeOrdinal:l}),s&&s({createShape:H,deleteShape:T}))}),[w]);var x=y((function(e,n){_({type:e,location:n})}));return e.createElement("div",{style:{height:"100%",width:"100%"},onClick:d(x("PUSH_ANCHOR"),m),onMouseMove:d(x("MOVE_LAST_ANCHOR"),m),onDoubleClick:d(x("OVER"),m),"data-testid":"MarkBoard"},e.createElement(o,{onChartReady:C,option:g,style:{height:"100%",width:"100%"}}))}