@gui-chat-plugin/canvas 0.3.4 → 0.4.0

package/dist/vue.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=require(`./plugin-CwoU2oDe.cjs`);let l=require(`vue`),u=require(`vue-drawing-canvas`);u=s(u);var d={class:`w-full h-full flex flex-col bg-white`},f={class:`flex-shrink-0 p-4 border-b bg-gray-50`},p={class:`flex items-center justify-between gap-4`},m={class:`flex items-center gap-4`},h={class:`flex items-center gap-2`},g={class:`flex gap-1`},_=[`onClick`],v={class:`flex items-center gap-2`},y={class:`flex-1 p-4 overflow-hidden`},b=(0,l.defineComponent)({__name:`View`,props:{selectedResult:{}},emits:[`updateResult`],setup(e,{emit:t}){let n=e,r=t,i=(0,l.ref)(null),a=(0,l.ref)(``),o=(0,l.ref)(5),s=(0,l.ref)(`#000000`),c=(0,l.ref)([]),b=(0,l.ref)(800),x=(0,l.ref)(600),S=(0,l.ref)(0),C=()=>{if(n.selectedResult?.viewState?.drawingState){let e=n.selectedResult.viewState.drawingState;o.value=e.brushSize||5,s.value=e.brushColor||`#000000`,b.value=e.canvasWidth||800,x.value=e.canvasHeight||600,e.strokes?c.value=e.strokes:c.value=[]}else c.value=[]};C();let w=async()=>{if(i.value)try{i.value.undo(),setTimeout(O,50)}catch(e){console.warn(`Undo operation failed:`,e)}},T=async()=>{if(i.value)try{i.value.redo(),setTimeout(O,50)}catch(e){console.warn(`Redo operation failed:`,e)}},E=()=>{if(i.value)try{i.value.reset(),O()}catch(e){console.warn(`Clear operation failed:`,e)}},D=()=>{O()},O=async()=>{if(i.value&&n.selectedResult)try{let e=await i.value.save(),t={strokes:i.value.getAllStrokes(),brushSize:o.value,brushColor:s.value,canvasWidth:b.value,canvasHeight:x.value};r(`updateResult`,{...n.selectedResult,data:{prompt:n.selectedResult.data?.prompt||``,imageData:e},viewState:{drawingState:t}})}catch(e){console.error(`Failed to save drawing state:`,e)}};(0,l.watch)(()=>n.selectedResult,()=>{C()},{immediate:!1}),(0,l.watch)([o,s],()=>{O()}),(0,l.watch)([b,x],()=>{S.value++});let k=()=>{let e=i.value?.$el?.parentElement;if(e){let t=e.getBoundingClientRect(),n=Math.floor(t.width),r=Math.floor(n*9/16);(n!==b.value||r!==x.value)&&(b.value=n,x.value=r)}};return(0,l.onMounted)(async()=>{await(0,l.nextTick)(),k(),window.addEventListener(`resize`,k)}),(0,l.onUnmounted)(()=>{window.removeEventListener(`resize`,k)}),(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,d,[(0,l.createElementVNode)(`div`,f,[(0,l.createElementVNode)(`div`,p,[(0,l.createElementVNode)(`div`,m,[(0,l.createElementVNode)(`div`,h,[(0,l.createElementVNode)(`div`,g,[((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)([2,5,10,20],e=>(0,l.createElementVNode)(`button`,{key:e,onClick:t=>o.value=e,class:(0,l.normalizeClass)([`w-8 h-8 rounded border-2 transition-colors`,o.value===e?`border-blue-500 bg-blue-100`:`border-gray-300 bg-white hover:bg-gray-50`])},[(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)(`bg-gray-800 rounded-full mx-auto`),style:(0,l.normalizeStyle)({width:Math.max(2,e*1)+`px`,height:Math.max(2,e*1)+`px`})},null,4)],10,_)),64))])]),(0,l.createElementVNode)(`div`,v,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`color`,class:`w-12 h-8 rounded border border-gray-300`},null,512),[[l.vModelText,s.value]])])]),(0,l.createElementVNode)(`div`,{class:`flex items-center gap-1`},[(0,l.createElementVNode)(`button`,{onClick:w,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Undo`},` ↩ `),(0,l.createElementVNode)(`button`,{onClick:T,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Redo`},` ↪ `),(0,l.createElementVNode)(`button`,{onClick:E,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50`,title:`Clear`},` 🗑 `)])])]),(0,l.createElementVNode)(`div`,y,[((0,l.openBlock)(),(0,l.createBlock)((0,l.unref)(u.default),{ref_key:`canvasRef`,ref:i,key:`${e.selectedResult?.uuid||`default`}-${S.value}`,image:a.value,"onUpdate:image":n[1]||=e=>a.value=e,width:b.value,height:x.value,"stroke-type":`dash`,"line-cap":`round`,"line-join":`round`,"fill-shape":!1,eraser:!1,lineWidth:o.value,color:s.value,"background-color":`#FFFFFF`,"background-image":void 0,watermark:void 0,"initial-image":c.value,saveAs:`png`,styles:{border:`1px solid #ddd`,borderRadius:`8px`},lock:!1,onMouseup:D,onTouchend:D},null,8,[`image`,`width`,`height`,`lineWidth`,`color`,`initial-image`]))])]))}}),x={class:`min-h-24 flex items-center justify-center`},S=[`src`],C={key:1,class:`text-gray-400 text-sm`},w=(0,l.defineComponent)({__name:`Preview`,props:{result:{}},setup(e){return(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,x,[e.result.data?.imageData?((0,l.openBlock)(),(0,l.createElementBlock)(`img`,{key:0,src:e.result.data.imageData,class:`max-w-full h-auto rounded`,alt:`Canvas drawing`},null,8,S)):((0,l.openBlock)(),(0,l.createElementBlock)(`div`,C,`No drawing yet`))]))}}),T={...c.n,viewComponent:b,previewComponent:w},E={plugin:T};exports.Preview=w,exports.SYSTEM_PROMPT=c.r,exports.TOOL_DEFINITION=c.i,exports.TOOL_NAME=c.a,exports.View=b,exports.default=E,exports.executeOpenCanvas=c.t,exports.plugin=T,exports.pluginCore=c.n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=require(`./plugin-CwoU2oDe.cjs`);let l=require(`vue`),u=require(`vue-drawing-canvas`);u=s(u,1);var d={class:`w-full h-full flex flex-col bg-white`},f={class:`flex-shrink-0 p-4 border-b bg-gray-50`},p={class:`flex items-center justify-between gap-4`},m={class:`flex items-center gap-4`},h={class:`flex items-center gap-2`},g={class:`flex gap-1`},_=[`onClick`],v={class:`flex items-center gap-2`},y={class:`flex-1 p-4 overflow-hidden`},b=(0,l.defineComponent)({__name:`View`,props:{selectedResult:{}},emits:[`updateResult`],setup(e,{emit:t}){let n=e,r=t,i=(0,l.ref)(null),a=(0,l.ref)(``),o=(0,l.ref)(5),s=(0,l.ref)(`#000000`),c=(0,l.ref)([]),b=(0,l.ref)(800),x=(0,l.ref)(600),S=(0,l.ref)(0),C=()=>{if(n.selectedResult?.viewState?.drawingState){let e=n.selectedResult.viewState.drawingState;o.value=e.brushSize||5,s.value=e.brushColor||`#000000`,b.value=e.canvasWidth||800,x.value=e.canvasHeight||600,e.strokes?c.value=e.strokes:c.value=[]}else c.value=[]};C();let w=async()=>{if(i.value)try{i.value.undo(),setTimeout(O,50)}catch(e){console.warn(`Undo operation failed:`,e)}},T=async()=>{if(i.value)try{i.value.redo(),setTimeout(O,50)}catch(e){console.warn(`Redo operation failed:`,e)}},E=()=>{if(i.value)try{i.value.reset(),O()}catch(e){console.warn(`Clear operation failed:`,e)}},D=()=>{O()},O=async()=>{if(i.value&&n.selectedResult)try{let e=await i.value.save(),t={strokes:i.value.getAllStrokes(),brushSize:o.value,brushColor:s.value,canvasWidth:b.value,canvasHeight:x.value};r(`updateResult`,{...n.selectedResult,data:{prompt:n.selectedResult.data?.prompt||``,imageData:e},viewState:{drawingState:t}})}catch(e){console.error(`Failed to save drawing state:`,e)}};(0,l.watch)(()=>n.selectedResult,()=>{C()},{immediate:!1}),(0,l.watch)([o,s],()=>{O()}),(0,l.watch)([b,x],()=>{S.value++});let k=()=>{let e=i.value?.$el?.parentElement;if(e){let t=e.getBoundingClientRect(),n=Math.floor(t.width),r=Math.floor(n*9/16);(n!==b.value||r!==x.value)&&(b.value=n,x.value=r)}};return(0,l.onMounted)(async()=>{await(0,l.nextTick)(),k(),window.addEventListener(`resize`,k)}),(0,l.onUnmounted)(()=>{window.removeEventListener(`resize`,k)}),(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,d,[(0,l.createElementVNode)(`div`,f,[(0,l.createElementVNode)(`div`,p,[(0,l.createElementVNode)(`div`,m,[(0,l.createElementVNode)(`div`,h,[(0,l.createElementVNode)(`div`,g,[((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)([2,5,10,20],e=>(0,l.createElementVNode)(`button`,{key:e,onClick:t=>o.value=e,class:(0,l.normalizeClass)([`w-8 h-8 rounded border-2 transition-colors`,o.value===e?`border-blue-500 bg-blue-100`:`border-gray-300 bg-white hover:bg-gray-50`])},[(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)(`bg-gray-800 rounded-full mx-auto`),style:(0,l.normalizeStyle)({width:Math.max(2,e*1)+`px`,height:Math.max(2,e*1)+`px`})},null,4)],10,_)),64))])]),(0,l.createElementVNode)(`div`,v,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`color`,class:`w-12 h-8 rounded border border-gray-300`},null,512),[[l.vModelText,s.value]])])]),(0,l.createElementVNode)(`div`,{class:`flex items-center gap-1`},[(0,l.createElementVNode)(`button`,{onClick:w,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Undo`},` ↩ `),(0,l.createElementVNode)(`button`,{onClick:T,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-gray-300 bg-white hover:bg-gray-50`,title:`Redo`},` ↪ `),(0,l.createElementVNode)(`button`,{onClick:E,class:`w-8 h-8 flex items-center justify-center rounded border-2 border-red-300 bg-white hover:bg-red-50`,title:`Clear`},` 🗑 `)])])]),(0,l.createElementVNode)(`div`,y,[((0,l.openBlock)(),(0,l.createBlock)((0,l.unref)(u.default),{ref_key:`canvasRef`,ref:i,key:`${e.selectedResult?.uuid||`default`}-${S.value}`,image:a.value,"onUpdate:image":n[1]||=e=>a.value=e,width:b.value,height:x.value,"stroke-type":`dash`,"line-cap":`round`,"line-join":`round`,"fill-shape":!1,eraser:!1,lineWidth:o.value,color:s.value,"background-color":`#FFFFFF`,"background-image":void 0,watermark:void 0,"initial-image":c.value,saveAs:`png`,styles:{border:`1px solid #ddd`,borderRadius:`8px`},lock:!1,onMouseup:D,onTouchend:D},null,8,[`image`,`width`,`height`,`lineWidth`,`color`,`initial-image`]))])]))}}),x={class:`min-h-24 flex items-center justify-center`},S=[`src`],C={key:1,class:`text-gray-400 text-sm`},w=(0,l.defineComponent)({__name:`Preview`,props:{result:{}},setup(e){return(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,x,[e.result.data?.imageData?((0,l.openBlock)(),(0,l.createElementBlock)(`img`,{key:0,src:e.result.data.imageData,class:`max-w-full h-auto rounded`,alt:`Canvas drawing`},null,8,S)):((0,l.openBlock)(),(0,l.createElementBlock)(`div`,C,`No drawing yet`))]))}}),T={...c.n,viewComponent:b,previewComponent:w},E={plugin:T};exports.Preview=w,exports.SYSTEM_PROMPT=c.r,exports.TOOL_DEFINITION=c.i,exports.TOOL_NAME=c.a,exports.View=b,exports.default=E,exports.executeOpenCanvas=c.t,exports.plugin=T,exports.pluginCore=c.n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gui-chat-plugin/canvas",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Drawing canvas plugin for GUIChat",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -34,7 +34,7 @@
     "lint": "eslint src demo"
   },
   "peerDependencies": {
-    "gui-chat-protocol": "^0.0.3",
+    "gui-chat-protocol": "^0.1.0",
     "vue": "^3.5.0"
   },
   "dependencies": {
@@ -49,9 +49,9 @@
     "eslint": "^10.1.0",
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.4.0",
-    "gui-chat-protocol": "^0.0.4",
+    "gui-chat-protocol": "^0.1.0",
     "tailwindcss": "^4.2.2",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.2",
     "vite": "^8.0.3",
     "vue": "^3.5.31",
     "vue-eslint-parser": "^10.4.0",