2 lines
24 KiB
JavaScript
2 lines
24 KiB
JavaScript
import{v as R,J as C,k as Z,E as y,_ as I,r as g,m as V,A as G,c as m,F as D,B,e as f,o as p,d as k,D as _,w as L,f as b,L as z,N as K,g as X,ah as Y,u as ee,h as te}from"./index-nRSe4xNB.js";import{e as se,m as ie}from"./bus-C8MdfDPM.js";const h=[];for(let i=0;i<256;++i)h.push((i+256).toString(16).slice(1));function ne(i,e=0){return(h[i[e+0]]+h[i[e+1]]+h[i[e+2]]+h[i[e+3]]+"-"+h[i[e+4]]+h[i[e+5]]+"-"+h[i[e+6]]+h[i[e+7]]+"-"+h[i[e+8]]+h[i[e+9]]+"-"+h[i[e+10]]+h[i[e+11]]+h[i[e+12]]+h[i[e+13]]+h[i[e+14]]+h[i[e+15]]).toLowerCase()}let S;const oe=new Uint8Array(16);function ae(){if(!S){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");S=crypto.getRandomValues.bind(crypto)}return S(oe)}const re=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),F={randomUUID:re};function ce(i,e,t){var s;if(F.randomUUID&&!i)return F.randomUUID();i=i||{};const n=i.random??((s=i.rng)==null?void 0:s.call(i))??ae();if(n.length<16)throw new Error("Random bytes length must be >= 16");return n[6]=n[6]&15|64,n[8]=n[8]&63|128,ne(n)}const le=(i,e)=>R({url:`/api/v1/whiteboard/rooms/${e}/shapes`,method:"put",data:i}),A=(i,e)=>R({url:`/api/v1/whiteboard/rooms/${e}/history`,method:"get",params:i}),P=Z();P.initUdid();let T=!1,M=null;function he(){const i=sessionStorage.getItem("userData");if(!i)return null;try{return JSON.parse(i)}catch(e){return console.error("解析 userData 失败:",e),null}}const de={async init(i,e){if(!i||!e)return;M=i;const t=he(),n=t==null?void 0:t.uid;try{await C.connect(P.getSudid());const s=await A({after_timestamp:0},e);s.meta.code===200&&s.data.shapes.length>0?M.addShape(s.data.shapes):s.meta.code===401&&se.emit("whiteboardFailed",!0);const o=`xsynergy/room/${e}/whiteboard/#`;C.subscribe(o,async c=>{const r=JSON.parse(c.toString());try{if(T=!0,r.user_uid===n)return;const a=await A({after_timestamp:r.created_at},e);a.meta.code===200?M.addShape(a.data.shapes):(y.error("获取历史数据失败"),console.error("获取历史数据失败"))}catch(a){console.error("处理MQTT数据失败:",a)}finally{T=!1}})}catch(s){console.log("初始化多人同步失败:",s)}i.on("drawingEnd",async s=>{if(!(T||!["pencil","line","rectangle","circle","eraser"].includes(s.type))&&!(s.user_uid&&s.user_uid===n)){s.room_uid=e;try{await le(s,e)}catch(o){y.error("提交形状失败"),console.error("提交形状失败:",o)}}}),i.on("clear",async()=>{})}},ue="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efollow备份%203%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-8.000000,%20-44.000000)'%20stroke='%23444E60'%3e%3cg%20id='folder备份'%20transform='translate(8.000000,%2044.000000)'%3e%3cpath%20d='M15.2700286,11.5822879%20L9.44305056,17.4092659%20C9.06480988,17.7875066%208.55180543,18%208.01689232,18%20L6,18%20L6,18%20L6,15.9831077%20C6,15.4481946%206.2124934,14.9351901%206.59073408,14.5569494%20L14.5569494,6.59073408%20C15.3445949,5.80308864%2016.6216205,5.80308864%2017.4092659,6.59073408%20C18.1969114,7.37837953%2018.1969114,8.65540512%2017.4092659,9.44305056%20L17.4092659,9.44305056%20L17.4092659,9.44305056%20C18.1969114,10.230696%2018.1969114,11.5077216%2017.4092659,12.295367%20L14.5569494,15.1476835%20L14.5569494,15.1476835'%20id='路径'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",ge="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efollow备份%203%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-48.000000,%20-44.000000)'%20stroke='%233381FF'%3e%3cg%20id='folder备份'%20transform='translate(48.000000,%2044.000000)'%3e%3cpath%20d='M15.2700286,11.5822879%20L9.44305056,17.4092659%20C9.06480988,17.7875066%208.55180543,18%208.01689232,18%20L6,18%20L6,18%20L6,15.9831077%20C6,15.4481946%206.2124934,14.9351901%206.59073408,14.5569494%20L14.5569494,6.59073408%20C15.3445949,5.80308864%2016.6216205,5.80308864%2017.4092659,6.59073408%20C18.1969114,7.37837953%2018.1969114,8.65540512%2017.4092659,9.44305056%20L17.4092659,9.44305056%20L17.4092659,9.44305056%20C18.1969114,10.230696%2018.1969114,11.5077216%2017.4092659,12.295367%20L14.5569494,15.1476835%20L14.5569494,15.1476835'%20id='路径'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",ve="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e矩形备份%2025%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='切图'%20transform='translate(-8.000000,%20-116.000000)'%20stroke='%23444E60'%3e%3cg%20id='编组-3'%20transform='translate(8.000000,%20116.000000)'%3e%3cline%20x1='11'%20y1='8'%20x2='16'%20y2='13'%20id='路径-26'%3e%3c/line%3e%3cpath%20d='M15.5,6.16666667%20L17.8333333,8.5%20C18.4776655,9.14433221%2018.4776655,10.1890011%2017.8333333,10.8333333%20L12,16.6666667%20C10.7113356,17.9553311%208.62199775,17.9553311%207.33333333,16.6666667%20L6.16666667,15.5%20C5.52233446,14.8556678%205.52233446,13.8109989%206.16666667,13.1666667%20L13.1666667,6.16666667%20C13.8109989,5.52233446%2014.8556678,5.52233446%2015.5,6.16666667%20Z'%20id='矩形'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",we="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3e矩形备份%2025%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='切图'%20transform='translate(-48.000000,%20-116.000000)'%20stroke='%233381FF'%3e%3cg%20id='编组-3'%20transform='translate(48.000000,%20116.000000)'%3e%3cline%20x1='11'%20y1='8'%20x2='16'%20y2='13'%20id='路径-26'%3e%3c/line%3e%3cpath%20d='M15.5,6.16666667%20L17.8333333,8.5%20C18.4776655,9.14433221%2018.4776655,10.1890011%2017.8333333,10.8333333%20L12,16.6666667%20C10.7113356,17.9553311%208.62199775,17.9553311%207.33333333,16.6666667%20L6.16666667,15.5%20C5.52233446,14.8556678%205.52233446,13.8109989%206.16666667,13.1666667%20L13.1666667,6.16666667%20C13.8109989,5.52233446%2014.8556678,5.52233446%2015.5,6.16666667%20Z'%20id='矩形'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",pe="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder备份%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-8.000000,%20-368.000000)'%20stroke='%23444E60'%3e%3cg%20id='folder备份'%20transform='translate(8.000000,%20368.000000)'%3e%3crect%20id='矩形'%20x='6'%20y='6'%20width='12'%20height='12'%20rx='6'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",xe="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder备份%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-48.000000,%20-368.000000)'%20stroke='%233381FF'%3e%3cg%20id='folder备份'%20transform='translate(48.000000,%20368.000000)'%3e%3crect%20id='矩形'%20x='6'%20y='6'%20width='12'%20height='12'%20rx='6'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",me="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder备份%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-8.000000,%20-332.000000)'%20stroke='%23444E60'%3e%3cg%20id='folder备份'%20transform='translate(8.000000,%20332.000000)'%3e%3crect%20id='矩形'%20x='6'%20y='6'%20width='12'%20height='12'%20rx='2'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",fe="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder备份%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-48.000000,%20-332.000000)'%20stroke='%233381FF'%3e%3cg%20id='folder备份'%20transform='translate(48.000000,%20332.000000)'%3e%3crect%20id='矩形'%20x='6'%20y='6'%20width='12'%20height='12'%20rx='2'%3e%3c/rect%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",ke="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efollow备份%205%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-8.000000,%20-404.000000)'%20stroke='%23444E60'%3e%3cg%20id='folder备份-2'%20transform='translate(8.000000,%20404.000000)'%3e%3cline%20x1='6'%20y1='18'%20x2='18'%20y2='6'%20id='路径-2'%3e%3c/line%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",ye="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efollow备份%207%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cg%20id='切图'%20transform='translate(-48.000000,%20-404.000000)'%20stroke='%233381FF'%3e%3cg%20id='folder备份-2'%20transform='translate(48.000000,%20404.000000)'%3e%3cline%20x1='6'%20y1='18'%20x2='18'%20y2='6'%20id='路径-2'%3e%3c/line%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e",be="/assets/brushSize-BKGQxoQG.svg",Se="/assets/brushSize-active-BDmIZAig.svg",Te="data:image/svg+xml,%3csvg%20t='1757644652588'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='8843'%20width='18'%20height='18'%3e%3cpath%20d='M512%2085.3248c235.5968%200%20426.6752%20169.728%20426.6752%20379.264a237.1328%20237.1328%200%200%201-237.056%20237.0304H617.728a71.0656%2071.0656%200%200%200-71.1168%2071.1168c0%2017.9968%207.1168%2034.6112%2017.9968%2046.9248a71.68%2071.68%200%200%201%2018.5088%2047.872c0%2039.3984-32.7168%2071.1424-71.1168%2071.1424-235.5968%200-426.6752-191.0784-426.6752-426.6752%200-235.5968%20191.0784-426.6752%20426.6752-426.6752z%20m-50.7392%20687.4112a156.3136%20156.3136%200%200%201%20156.4672-156.4672h83.8912a151.808%20151.808%200%200%200%20151.7056-151.6288c0-160.0512-150.6816-293.9648-341.3248-293.9648a341.3504%20341.3504%200%200%200-28.8512%20681.472%20155.648%20155.648%200%200%201-21.888-79.36v-0.0512zM320%20512a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128z%20m384%200a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128zM512%20384a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128z'%20p-id='8844'%20fill='%23444e60'%3e%3c/path%3e%3c/svg%3e",Me="data:image/svg+xml,%3csvg%20t='1757644652588'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='8843'%20width='18'%20height='18'%3e%3cpath%20d='M512%2085.3248c235.5968%200%20426.6752%20169.728%20426.6752%20379.264a237.1328%20237.1328%200%200%201-237.056%20237.0304H617.728a71.0656%2071.0656%200%200%200-71.1168%2071.1168c0%2017.9968%207.1168%2034.6112%2017.9968%2046.9248a71.68%2071.68%200%200%201%2018.5088%2047.872c0%2039.3984-32.7168%2071.1424-71.1168%2071.1424-235.5968%200-426.6752-191.0784-426.6752-426.6752%200-235.5968%20191.0784-426.6752%20426.6752-426.6752z%20m-50.7392%20687.4112a156.3136%20156.3136%200%200%201%20156.4672-156.4672h83.8912a151.808%20151.808%200%200%200%20151.7056-151.6288c0-160.0512-150.6816-293.9648-341.3248-293.9648a341.3504%20341.3504%200%200%200-28.8512%20681.472%20155.648%20155.648%200%200%201-21.888-79.36v-0.0512zM320%20512a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128z%20m384%200a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128zM512%20384a64%2064%200%201%201%200-128%2064%2064%200%200%201%200%20128z'%20p-id='8844'%20fill='%233381ff'%3e%3c/path%3e%3c/svg%3e",Ce={class:"tool-mid-box-left"},_e=["onClick"],Le=["src","alt"],ze={key:0,class:"tool-popup"},Ee={key:1,class:"tool-popup"},Ue={__name:"index",props:{canvas:{type:Object,required:!0,validator:i=>i&&typeof i.setDrawingTool=="function"}},setup(i){const e=i,t=g([{name:"笔",icon:ue,iconActive:ge,shapeType:"pencil"},{name:"圆形",icon:pe,iconActive:xe,shapeType:"circle"},{name:"矩形",icon:me,iconActive:fe,shapeType:"rectangle"},{name:"直线",icon:ke,iconActive:ye,shapeType:"line"},{name:"选色器",icon:Te,iconActive:Me,shapeType:"colorSelector"},{name:"画笔大小",icon:be,iconActive:Se,shapeType:"brushSize"},{name:"橡皮擦",icon:ve,iconActive:we,shapeType:"eraser"}]),n=g("#ffcc00"),s=g(2),o=[1,2,4,8,16],c=g(!1),r=g(!1),a=g(!1),u=g(!1),x=g("pencil"),E=g("pencil"),j=g(),W=g(),O=d=>{var l;(l=e.canvas)==null||l.setColor(d),c.value=!1,a.value=!1},$=d=>{var l;(l=e.canvas)==null||l.setThickness(d),r.value=!1,u.value=!1};function N(d){var l;if(x.value===d){d==="colorSelector"?(c.value=!c.value,a.value=c.value):d==="brushSize"&&(r.value=!r.value,u.value=r.value);return}x.value=d,E.value=d,d==="colorSelector"?(c.value=!0,r.value=!1,z(()=>{a.value=!0})):d==="brushSize"?(r.value=!0,c.value=!1,z(()=>{u.value=!0})):(c.value=!1,r.value=!1,a.value=!1,u.value=!1,(l=e.canvas)==null||l.setDrawingTool(d))}function U(d){document.querySelector(".tool-mid-box-left").contains(d.target)||(r.value=!1,u.value=!1)}return V(()=>{(!e.canvas||typeof e.canvas.setDrawingTool!="function")&&console.error("Invalid canvas prop passed to ToolBox"),document.addEventListener("click",U)}),G(()=>{document.removeEventListener("click",U)}),(d,l)=>{const q=f("el-tooltip"),H=f("el-color-picker"),J=f("el-option"),Q=f("el-select");return p(),m("div",Ce,[(p(!0),m(D,null,B(t.value,w=>(p(),m("div",{class:"tool-box-cell-box-left",key:w.shapeType},[k(q,{content:w.name,placement:"top-end"},{default:L(()=>[b("div",{class:"tool-box-cell",onClick:v=>N(w.shapeType)},[b("img",{src:w.shapeType===x.value||["colorSelector","brushSize"].includes(x.value)&&w.shapeType===E.value?w.iconActive:w.icon,alt:w.name},null,8,Le)],8,_e)]),_:2},1032,["content"]),w.shapeType==="colorSelector"&&x.value==="colorSelector"&&c.value?(p(),m("div",ze,[k(H,{ref_for:!0,ref_key:"colorPickerRef",ref:j,modelValue:n.value,"onUpdate:modelValue":l[0]||(l[0]=v=>n.value=v),visible:a.value,"onUpdate:visible":l[1]||(l[1]=v=>a.value=v),"show-alpha":"",onChange:O},null,8,["modelValue","visible"])])):_("",!0),w.shapeType==="brushSize"&&x.value==="brushSize"&&r.value?(p(),m("div",Ee,[k(Q,{ref_for:!0,ref_key:"brushSizeRef",ref:W,modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=v=>s.value=v),placeholder:"画笔粗细",size:"small",onChange:$,visible:u.value,"onUpdate:visible":l[3]||(l[3]=v=>u.value=v),style:{width:"60px"}},{default:L(()=>[(p(),m(D,null,B(o,v=>k(J,{key:v,label:v+"px",value:v},null,8,["label","value"])),64))]),_:1},8,["modelValue","visible"])])):_("",!0)]))),128))])}}},De=I(Ue,[["__scopeId","data-v-d6b920d5"]]);class Be{constructor(){this.emitter=ie()}on(e,t){this.emitter.on(e,t)}off(e,t){this.emitter.off(e,t)}emit(e,t){this.emitter.emit(e,t)}removeAllListeners(){this.emitter.all.clear()}}class Fe extends Be{constructor(e){if(super(),this.canvas=document.getElementById(e),!this.canvas)throw new Error(`Canvas element with id ${e} not found`);this.ctx=this.canvas.getContext("2d"),this.shapes=[],this.currentShape=null,this.isDrawing=!1,this.drawingTool="pencil",this.pathOptimizationEnabled=!0,this.optimizationThreshold=.005,this.currentColor="#ffcc00",this.currentThickness=2,this.resize(),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.canvas.addEventListener("mousedown",this.handleMouseDown),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseup",this.handleMouseUp),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),window.addEventListener("resize",()=>this.resize())}resize(){const e=this.canvas.parentElement;if(!e)return;const t=e.offsetWidth-150,n=e.offsetHeight;let s=t,o=Math.floor(s*9/16);o>n&&(o=n,s=Math.floor(o*16/9)),!(this.canvas.width===s&&this.canvas.height===o)&&(this.canvas.width=s,this.canvas.height=o,this.canvas.style.width=s+"px",this.canvas.style.height=o+"px",this.render())}setDrawingTool(e){this.drawingTool=e}setColor(e){this.currentColor=e}setThickness(e){this.currentThickness=e}setPathOptimization(e){this.pathOptimizationEnabled=e}setOptimizationThreshold(e){this.optimizationThreshold=e}getShapes(){return this.shapes}setShapes(e){this.shapes=e,this.render()}getMouseCoordinates(e){const t=this.canvas.getBoundingClientRect();return{x:((e.clientX-t.left)/this.canvas.width).toFixed(4),y:((e.clientY-t.top)/this.canvas.height).toFixed(4)}}handleMouseDown(e){this.isDrawing=!0;const t=this.getMouseCoordinates(e);this.drawingTool==="pencil"?this.currentShape={type:"pencil",data:{color:this.currentColor,path:[t],thickness:this.currentThickness}}:this.drawingTool==="line"?this.currentShape={type:"line",data:{color:this.currentColor,start:t,end:t,thickness:this.currentThickness}}:this.drawingTool==="rectangle"?this.currentShape={type:"rectangle",data:{color:this.currentColor,start:t,end:t,thickness:this.currentThickness,fill:!1}}:this.drawingTool==="circle"?this.currentShape={type:"circle",data:{color:this.currentColor,start:t,end:t,thickness:this.currentThickness,fill:!1}}:this.drawingTool==="eraser"&&(this.currentShape={type:"eraser",data:{color:"#ffffff",start:t,end:t,thickness:3}}),this.emit("drawingStart",this.currentShape)}handleMouseMove(e){if(!this.isDrawing||!this.currentShape)return;const t=this.getMouseCoordinates(e);this.drawingTool==="pencil"?this.currentShape.data.path.push(t):this.currentShape.data.end=t,this.render(),this.emit("drawingUpdate",this.currentShape)}handleMouseUp(e){if(!this.isDrawing||!this.currentShape)return;this.isDrawing=!1;const t=this.getMouseCoordinates(e);this.drawingTool==="pencil"&&this.pathOptimizationEnabled&&this.currentShape.data.path.length>10?this.currentShape.data.path=this.optimizePath(this.currentShape.data.path):this.currentShape.data.end=t,this.shapes.push({...this.currentShape}),this.emit("drawingEnd",this.currentShape),this.currentShape=null,this.render()}handleMouseLeave(e){this.isDrawing&&this.handleMouseUp(e)}optimizePath(e){if(e.length<3)return e;const t=[e[0]];for(let n=1;n<e.length-1;){let s=1;for(;n+s<e.length&&this.calculateDistance(e[n],e[n+s])<this.optimizationThreshold;)s++;t.push(e[n]),n+=s}return t.push(e[e.length-1]),t}calculateDistance(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}addShape(e){Array.isArray(e)?this.shapes.push(...e):this.shapes.push(e),this.render()}clearCanvas(){this.shapes=[],this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.emit("clear")}exportToDataURL(e="image/png",t=1){return this.canvas.toDataURL(e,t)}render(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.shapes.forEach(e=>this.drawShape(e)),this.currentShape&&this.drawShape(this.currentShape),this.ctx.save(),this.ctx.strokeStyle="#000",this.ctx.lineWidth=2,this.ctx.strokeRect(0,0,this.canvas.width,this.canvas.height),this.ctx.restore()}drawShape(e){switch(e.type){case"pencil":this.drawPencil(e.data);break;case"line":this.drawLine(e.data);break;case"rectangle":this.drawRectangle(e.data);break;case"circle":this.drawCircle(e.data);break;case"eraser":this.drawEraser(e.data,e);break}}drawPencil(e){if(e.path.length<2)return;const t=e.path.map(n=>({x:n.x*this.canvas.width,y:n.y*this.canvas.height}));this.ctx.beginPath(),this.ctx.strokeStyle=e.color,this.ctx.lineWidth=e.thickness,this.ctx.lineCap="round",this.ctx.lineJoin="round",this.drawSmoothCurve(this.ctx,t),this.ctx.stroke()}drawSmoothCurve(e,t){if(t.length<3){e.moveTo(t[0].x,t[0].y);for(let s=1;s<t.length;s++)e.lineTo(t[s].x,t[s].y);return}e.moveTo(t[0].x,t[0].y);const n=5;for(let s=1;s<t.length-2;){let o=1;for(;s+o<t.length-2&&Math.sqrt(Math.pow(t[s].x-t[s+o].x,2)+Math.pow(t[s].y-t[s+o].y,2))<n;)o++;const c=(t[s].x+t[s+o].x)/2,r=(t[s].y+t[s+o].y)/2;e.quadraticCurveTo(t[s].x,t[s].y,c,r),s+=o}e.lineTo(t[t.length-1].x,t[t.length-1].y)}drawLine(e){const t=e.start.x*this.canvas.width,n=e.start.y*this.canvas.height,s=e.end.x*this.canvas.width,o=e.end.y*this.canvas.height;this.ctx.beginPath(),this.ctx.moveTo(t,n),this.ctx.lineTo(s,o),this.ctx.strokeStyle=e.color,this.ctx.lineWidth=e.thickness,this.ctx.stroke()}drawRectangle(e){const t=e.start.x*this.canvas.width,n=e.start.y*this.canvas.height,s=e.end.x*this.canvas.width,o=e.end.y*this.canvas.height,c=s-t,r=o-n;this.ctx.beginPath(),this.ctx.rect(t,n,c,r),e.fill?(this.ctx.fillStyle=e.color,this.ctx.fill()):(this.ctx.strokeStyle=e.color,this.ctx.lineWidth=e.thickness,this.ctx.stroke())}drawCircle(e){const t=e.start.x*this.canvas.width,n=e.start.y*this.canvas.height,s=e.end.x*this.canvas.width,o=e.end.y*this.canvas.height,c=(t+s)/2,r=(n+o)/2,a=Math.abs(s-t)/2,u=Math.abs(o-n)/2;this.ctx.beginPath(),this.ctx.ellipse(c,r,a,u,0,0,2*Math.PI),e.fill?(this.ctx.fillStyle=e.color,this.ctx.fill()):(this.ctx.strokeStyle=e.color,this.ctx.lineWidth=e.thickness,this.ctx.stroke())}drawEraser(e,t){const n=e.start.x*this.canvas.width,s=e.start.y*this.canvas.height,o=e.end.x*this.canvas.width,c=e.end.y*this.canvas.height,r=Math.abs(o-n),a=Math.abs(c-s),u=Math.min(n,o),x=Math.min(s,c);this.ctx.beginPath(),this.ctx.rect(u,x,r,a),this.ctx.fillStyle="rgba(255,255,255)",this.ctx.fill(),this.currentShape&&t===this.currentShape&&(this.ctx.save(),this.ctx.strokeStyle="#000",this.ctx.lineWidth=1,this.ctx.strokeRect(u,x,r,a),this.ctx.restore())}destroy(){this.canvas.removeEventListener("mousedown",this.handleMouseDown),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseup",this.handleMouseUp),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),window.removeEventListener("resize",this.resize)}}const Ae={class:"wrapper-content"},Re={key:0,class:"login-button-container"},Ie={key:1,class:"whiteboard-wrapper"},Ve={__name:"index",props:{roomId:{type:String,default:""},userId:{type:String,default:""}},setup(i){const e=i,t=g(!1),n=g(null),s=ee();async function o(){const r=Y.service({lock:!0,text:"正在进入互动画板...",background:"rgba(0, 0, 0, 0.4)"});try{const a=`whiteboard-${ce()}`;await C.connect(a),t.value=!0,await z(),c(),y.success("已进入互动画板 🎉")}catch(a){console.error("❌ 连接失败:",a),y.error("连接白板失败，请重试")}finally{r.close()}}function c(){if(!document.getElementById("whiteboard")){console.error("⚠️ 找不到 canvas 元素");return}n.value=new Fe("whiteboard");const a=s.query.room_uid||e.roomId||"default-room";de.init(n.value,a)}return V(async()=>{o()}),K(()=>{n.value&&n.value.destroy()}),(r,a)=>{const u=f("el-button");return p(),m("div",Ae,[b("div",null,[t.value?(p(),m("div",Ie,[n.value?(p(),X(De,{key:0,class:"toolbox",canvas:n.value},null,8,["canvas"])):_("",!0),a[1]||(a[1]=b("canvas",{id:"whiteboard",class:"whiteboard-canvas"},null,-1))])):(p(),m("div",Re,[k(u,{type:"primary",size:"large",link:"",onClick:o},{default:L(()=>[...a[0]||(a[0]=[te(" 正在进入互动画板。。。 ",-1)])]),_:1})]))])])}}},We=I(Ve,[["__scopeId","data-v-119f18fe"]]);export{We as default};
|