File size: 5,411 Bytes
a87c29e | 1 | import{n as e}from"../rolldown-runtime-hePW80VL.js";import{B as t,C as n,Ct as r,H as i,St as a,T as o,U as s,_ as c,b as l,bt as u,dt as d,et as f,l as p,m,r as h,tt as g,u as _,v,y,yt as b}from"../modules/shiki-CRDHBXw7.js";import{d as x,g as S}from"../modules/vue-jGGq3ahv.js";import{t as C}from"../useDrawings-B5C1Zlkn.js";import{t as w}from"./IconButton-BiAlWjlk.js";import{t as T}from"./VerticalDivider-BuDt2kNg.js";var E=o({__name:`Draggable`,props:{storageKey:{},initial:{}},setup(e){let n=e,r=d(null),i=n.initial??{x:0,y:0},o=n.storageKey?S(n.storageKey,i):d(i),{style:c}=x(r,{initialValue:o});return(e,n)=>(t(),l(`div`,{ref_key:`el`,ref:r,class:`fixed`,style:a(b(c))},[s(e.$slots,`default`)],4))}}),D={class:`flex bg-main p-2`},O={class:`inline-block w-7 text-center`},k={class:`pt-.5`},A={class:`i-carbon:pin-filled transform -rotate-45`},j={class:`i-carbon:pin`},M={class:`i-carbon:error`},N={class:`i-carbon:close-outline`},P=o({__name:`DrawingControls`,setup(e){let{brush:o,canClear:s,canRedo:x,canUndo:S,clear:P,drauu:F,drawingEnabled:I,drawingMode:L,drawingPinned:R,brushColors:z}=C(),B=d(!1);function V(e){e.preventDefault(),e.stopPropagation(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{B.value=!0})})}function H(e){e.pointerType!==`mouse`&&V(e)}function U(){F.undo()}function W(){F.redo()}let G=`stylus`;function K(e){L.value=e,I.value=!0,e!==`eraseLine`&&(G=e)}function q(e){o.value.color=e,I.value=!0,L.value=G}return(e,d)=>b(I)||b(R)?(t(),v(E,{key:0,class:u([`flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-nav border border-main`,!b(I)&&b(R)?`opacity-40 hover:opacity-90`:``]),"storage-key":`slidev-drawing-pos`,"initial-x":10,"initial-y":10},{default:f(()=>[n(w,{title:`Draw with stylus`,class:u({shallow:b(L)!==`stylus`}),onClick:d[0]||=e=>K(`stylus`)},{default:f(()=>[...d[14]||=[c(`div`,{class:`i-carbon:pen`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Draw a line`,class:u({shallow:b(L)!==`line`}),onClick:d[1]||=e=>K(`line`)},{default:f(()=>[...d[15]||=[c(`svg`,{width:`1em`,height:`1em`,class:`-mt-0.5`,preserveAspectRatio:`xMidYMid meet`,viewBox:`0 0 24 24`},[c(`path`,{d:`M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z`,fill:`currentColor`})],-1)]]),_:1},8,[`class`]),n(w,{title:`Draw an arrow`,class:u({shallow:b(L)!==`arrow`}),onClick:d[2]||=e=>K(`arrow`)},{default:f(()=>[...d[16]||=[c(`div`,{class:`i-carbon:arrow-up-right`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Draw an ellipse`,class:u({shallow:b(L)!==`ellipse`}),onClick:d[3]||=e=>K(`ellipse`)},{default:f(()=>[...d[17]||=[c(`div`,{class:`i-carbon:radio-button`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Draw a rectangle`,class:u({shallow:b(L)!==`rectangle`}),onClick:d[4]||=e=>K(`rectangle`)},{default:f(()=>[...d[18]||=[c(`div`,{class:`i-carbon:checkbox`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Erase`,class:u({shallow:b(L)!==`eraseLine`}),onClick:d[5]||=e=>K(`eraseLine`)},{default:f(()=>[...d[19]||=[c(`div`,{class:`i-carbon:erase`},null,-1)]]),_:1},8,[`class`]),n(T),n(b(h),{shown:B.value,"onUpdate:shown":d[8]||=e=>B.value=e,triggers:[]},{popper:f(()=>[c(`div`,D,[c(`div`,O,r(b(o).size),1),c(`div`,k,[g(c(`input`,{"onUpdate:modelValue":d[6]||=e=>b(o).size=e,type:`range`,min:`1`,max:`15`,onChange:d[7]||=e=>L.value=b(G)},null,544),[[p,b(o).size]])])])]),default:f(()=>[n(w,{title:`Adjust stroke width`,class:u({shallow:b(L)===`eraseLine`}),onClick:V,onPointerdown:H,onPointerup:H,onTouchend:V},{default:f(()=>[...d[20]||=[c(`svg`,{viewBox:`0 0 32 32`,width:`1.2em`,height:`1.2em`},[c(`line`,{x1:`2`,y1:`15`,x2:`22`,y2:`4`,stroke:`currentColor`,"stroke-width":`1`,"stroke-linecap":`round`}),c(`line`,{x1:`2`,y1:`24`,x2:`28`,y2:`10`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`}),c(`line`,{x1:`7`,y1:`31`,x2:`29`,y2:`19`,stroke:`currentColor`,"stroke-width":`3`,"stroke-linecap":`round`})],-1)]]),_:1},8,[`class`])]),_:1},8,[`shown`]),(t(!0),l(m,null,i(b(z),e=>(t(),v(w,{key:e,title:`Set brush color`,class:u(b(o).color===e&&b(L)!==`eraseLine`?`active`:`shallow`),onClick:t=>q(e)},{default:f(()=>[c(`div`,{class:u([`w-6 h-6 transition-all transform border`,b(o).color===e?`rounded-md border-gray-300/50`:`rounded-1/2 scale-85 border-white`]),style:a(b(I)?{background:e}:{borderColor:e})},null,6)]),_:2},1032,[`class`,`onClick`]))),128)),n(T),n(w,{title:`Undo`,class:u({disabled:!b(S)}),onClick:d[9]||=e=>U()},{default:f(()=>[...d[21]||=[c(`div`,{class:`i-carbon:undo`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Redo`,class:u({disabled:!b(x)}),onClick:d[10]||=e=>W()},{default:f(()=>[...d[22]||=[c(`div`,{class:`i-carbon:redo`},null,-1)]]),_:1},8,[`class`]),n(w,{title:`Delete`,class:u({disabled:!b(s)}),onClick:d[11]||=e=>b(P)()},{default:f(()=>[...d[23]||=[c(`div`,{class:`i-carbon:trash-can`},null,-1)]]),_:1},8,[`class`]),n(T),n(w,{title:b(R)?`Unpin drawing`:`Pin drawing`,class:u({shallow:!b(R)}),onClick:d[12]||=e=>R.value=!b(R)},{default:f(()=>[g(c(`div`,A,null,512),[[_,b(R)]]),g(c(`div`,j,null,512),[[_,!b(R)]])]),_:1},8,[`title`,`class`]),b(I)?(t(),v(w,{key:0,title:b(R)?`Drawing pinned`:`Drawing unpinned`,class:u({shallow:!b(I)}),onClick:d[13]||=e=>I.value=!b(I)},{default:f(()=>[g(c(`div`,M,null,512),[[_,b(R)]]),g(c(`div`,N,null,512),[[_,!b(R)]])]),_:1},8,[`title`,`class`])):y(`v-if`,!0)]),_:1},8,[`class`])):y(`v-if`,!0)}}),F=e({default:()=>I}),I=P;export{F as n,I as t}; |