podesigner-sdk/dist/index.cjs

专业设计器SDK - 完整的图片编辑、文字添加、图层管理解决方案

"use strict";var G=Object.defineProperty;var j=(s,o,i)=>o in s?G(s,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[o]=i;var u=(s,o,i)=>j(s,typeof o!="symbol"?o+"":o,i);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("podesigner-core"),h=require("leafer-editor"),W=require("leafer-x-guide-line"),q=require("leafer-x-ruler"),e=require("vue");class y{constructor(o,i={}){u(this,"app");u(this,"elementParent");u(this,"currentElement",e.ref(null));u(this,"printImages",e.ref([]));u(this,"initialized",e.ref(!1));u(this,"currentFrame");u(this,"guideLines");u(this,"ruler");u(this,"zoom",e.ref(.25));u(this,"skus",new Map);u(this,"currentSkuKey","");u(this,"currentSkuFaceKey","");u(this,"currentFaceName","");u(this,"commonSkuChildren",new Map);u(this,"config");u(this,"options");this.config=o,this.options={strokeColor:"#F68066",strokeWidth:1,cornerRadius:0,...i}}init(){this.createApp(),this.setupGuideLines(),this.setupRuler(),this.setupWorkspace(),this.initialized.value=!0}createApp(){this.app=new h.App({view:this.config.container,width:this.config.width||1200,height:this.config.height||1200,tree:{type:"editor"},editor:{point:{cornerRadius:this.options.cornerRadius},middlePoint:{},rotatePoint:{width:16,height:16},rect:{dashPattern:[3,2]},buttonsDirection:"top",stroke:this.options.strokeColor,strokeWidth:this.options.strokeWidth,buttonsFixed:!0},wheel:{disabled:!0,preventDefault:!1}}),this.app.tree.fill="transparent"}setupGuideLines(){this.config.enableGuideLines!==!1&&(this.guideLines=new W.GuideLines(this.app,{enabled:!0,alignLineMargin:10,alignLineWidth:1,signSize:3,lineStyle:{type:"dashed"},alignLineColor:this.options.strokeColor||"#F68066"}))}setupRuler(){this.config.enableRuler!==!1&&(this.ruler=new q.Ruler(this.app,{enabled:!0,theme:"light"}))}setupWorkspace(){const o=new h.Frame({lockRatio:!0,zIndex:1,resizeChildren:!0,name:"workspace",fill:{type:"solid",color:"#ffffff01"}});this.elementParent=o,this.currentFrame=o,this.app.tree.add(o)}addImage(o,i){const c=new h.Image({url:o,x:i?.x||0,y:i?.y||0,width:i?.width,height:i?.height});return this.elementParent.add(c),c}addText(o,i){const c=new h.Text({text:o,x:i?.x||0,y:i?.y||0,fontSize:i?.fontSize||16,fill:i?.fill||"#000000"});return this.elementParent.add(c),c}removeElement(o){this.printImages.value=this.printImages.value.filter(i=>i.id!==o.id),o.remove()}clear(){this.elementParent&&"removeAll"in this.elementParent&&this.elementParent.removeAll(),this.printImages.value=[]}getAllElements(){return this.elementParent.children||[]}setZoom(o){this.zoom.value=o,this.app.tree.scale=o}getZoom(){return this.zoom.value}destroy(){this.app?.destroy(),this.initialized.value=!1}}const Z={class:"cuzcuz-designer"},X={class:"top-toolbar"},K={class:"toolbar-center"},Y=["disabled"],H=["disabled"],J={class:"designer-body"},Q={class:"left-sidebar"},ee={class:"tool-tabs"},te=["onClick"],ne={class:"tool-content"},le={key:0,class:"tool-panel"},oe={key:1,class:"tool-panel"},ie={class:"gallery-grid"},re=["onClick"],se=["src","alt"],ae={key:2,class:"tool-panel"},de={class:"text-templates"},ue=["onClick"],ce={key:3,class:"tool-panel"},me={class:"layers-list"},pe=["onClick"],ve=["onClick"],fe={class:"canvas-area"},he={class:"canvas-toolbar"},Ee={class:"zoom-controls"},ye={class:"right-sidebar"},ge={key:0,class:"properties-panel"},ke={class:"property-group"},Ve={class:"property-row"},Ne={class:"property-row"},be={class:"property-row"},xe={class:"property-row"},we={key:0,class:"property-group"},Ce={class:"property-row"},ze={class:"property-row"},_e={class:"property-row"},Se={key:1,class:"no-selection"},Be=e.defineComponent({__name:"CuzcuzDesigner",props:{width:{default:1200},height:{default:800},galleryImages:{default:()=>[]},onSave:{},onPreview:{}},emits:["save","preview","elementSelected"],setup(s,{emit:o}){const i=s,c=o,v=e.ref(),k=e.ref(),p=e.ref("upload"),V=e.ref(""),a=e.ref(null),C=e.ref(!1),z=e.ref(!1);let d=null;const _=[{key:"upload",label:"上传",icon:"icon-upload"},{key:"gallery",label:"图库",icon:"icon-gallery"},{key:"text",label:"文字",icon:"icon-text"},{key:"layers",label:"图层",icon:"icon-layers"}],N=e.ref([]),S=[{id:"1",text:"标题文字",fontSize:24,fill:"#000000"},{id:"2",text:"正文内容",fontSize:16,fill:"#333333"},{id:"3",text:"装饰文字",fontSize:18,fill:"#666666"}],l=e.reactive({x:0,y:0,width:0,height:0,text:"",fontSize:16,fill:"#000000"});e.onMounted(async()=>{await e.nextTick(),v.value&&(d=new y({container:v.value,width:i.width,height:i.height,enableGuideLines:!0,enableRuler:!0}),d.init(),B())}),e.onUnmounted(()=>{d?.destroy()});function B(){d&&(d.app.editor.on("select",r=>{a.value=r.list[0]||null,I(),c("elementSelected",a.value)}),e.watch(()=>d?.getAllElements(),r=>{N.value=r?.map((t,n)=>({id:t.id||`layer-${n}`,name:t.tag==="Text"?`文字 ${n+1}`:`图片 ${n+1}`,type:t.tag||"unknown"}))||[]},{deep:!0}))}function I(){a.value&&(l.x=a.value.x||0,l.y=a.value.y||0,l.width=a.value.width||0,l.height=a.value.height||0,a.value.tag==="Text"&&(l.text=a.value.text||"",l.fontSize=a.value.fontSize||16,l.fill=a.value.fill||"#000000"))}function m(){a.value&&(Object.assign(a.value,{x:l.x,y:l.y,width:l.width,height:l.height}),a.value.tag==="Text"&&Object.assign(a.value,{text:l.text,fontSize:l.fontSize,fill:l.fill}))}function T(r){const t=r.target.files;!t||!d||Array.from(t).forEach(n=>{const f=URL.createObjectURL(n);d?.addImage(f,{x:Math.random()*300,y:Math.random()*300})})}function M(r){d&&d.addImage(r.url,{x:Math.random()*300,y:Math.random()*300})}function L(){d&&d.addText("双击编辑文字",{x:Math.random()*300,y:Math.random()*300,fontSize:16,fill:"#000000"})}function D(r){d&&d.addText(r.text,{x:Math.random()*300,y:Math.random()*300,fontSize:r.fontSize,fill:r.fill})}function P(r){V.value=r.id}function Me(r){}function E(r){d?.setZoom(r)}function R(){}function F(){}function U(){}function $(){const r={elements:d?.getAllElements()};c("save",r)}function O(){const r={elements:d?.getAllElements()};c("preview",r)}return(r,t)=>(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("div",X,[t[11]||(t[11]=e.createElementVNode("div",{class:"logo"},"CuzcuzDesigner",-1)),e.createElementVNode("div",K,[e.createElementVNode("button",{onClick:F,disabled:!C.value},"撤销",8,Y),e.createElementVNode("button",{onClick:U,disabled:!z.value},"重做",8,H),e.createElementVNode("button",{onClick:$},"保存")]),e.createElementVNode("div",{class:"toolbar-right"},[e.createElementVNode("button",{onClick:O,class:"preview-btn"},"预览")])]),e.createElementVNode("div",J,[e.createElementVNode("div",Q,[e.createElementVNode("div",ee,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(_,n=>e.createElementVNode("div",{key:n.key,class:e.normalizeClass(["tool-tab",{active:p.value===n.key}]),onClick:f=>p.value=n.key},[e.createElementVNode("i",{class:e.normalizeClass(n.icon)},null,2),e.createElementVNode("span",null,e.toDisplayString(n.label),1)],10,te)),64))]),e.createElementVNode("div",ne,[p.value==="upload"?(e.openBlock(),e.createElementBlock("div",le,[t[12]||(t[12]=e.createElementVNode("h3",null,"图片上传",-1)),e.createElementVNode("input",{type:"file",onChange:T,accept:"image/*",multiple:"",ref_key:"fileInput",ref:k,style:{display:"none"}},null,544),e.createElementVNode("button",{onClick:t[0]||(t[0]=n=>k.value?.click()),class:"upload-btn"}," 上传图片 ")])):e.createCommentVNode("",!0),p.value==="gallery"?(e.openBlock(),e.createElementBlock("div",oe,[t[13]||(t[13]=e.createElementVNode("h3",null,"图片素材",-1)),e.createElementVNode("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.galleryImages,n=>(e.openBlock(),e.createElementBlock("div",{key:n.id,class:"gallery-item",onClick:f=>M(n)},[e.createElementVNode("img",{src:n.url,alt:n.name},null,8,se)],8,re))),128))])])):e.createCommentVNode("",!0),p.value==="text"?(e.openBlock(),e.createElementBlock("div",ae,[t[14]||(t[14]=e.createElementVNode("h3",null,"文字工具",-1)),e.createElementVNode("button",{onClick:L,class:"add-text-btn"},"添加文字"),e.createElementVNode("div",de,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(S,n=>e.createElementVNode("div",{key:n.id,class:"text-template",onClick:f=>D(n)},e.toDisplayString(n.text),9,ue)),64))])])):e.createCommentVNode("",!0),p.value==="layers"?(e.openBlock(),e.createElementBlock("div",ce,[t[15]||(t[15]=e.createElementVNode("h3",null,"图层",-1)),e.createElementVNode("div",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,(n,f)=>(e.openBlock(),e.createElementBlock("div",{key:n.id,class:e.normalizeClass(["layer-item",{active:n.id===V.value}]),onClick:A=>P(n)},[e.createElementVNode("span",null,e.toDisplayString(n.name),1),e.createElementVNode("button",{onClick:e.withModifiers(A=>void 0,["stop"]),class:"delete-btn"},"×",8,ve)],10,pe))),128))])])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",fe,[e.createElementVNode("div",he,[e.createElementVNode("div",Ee,[e.createElementVNode("button",{onClick:t[1]||(t[1]=n=>E(.25))},"25%"),e.createElementVNode("button",{onClick:t[2]||(t[2]=n=>E(.5))},"50%"),e.createElementVNode("button",{onClick:t[3]||(t[3]=n=>E(1))},"100%"),e.createElementVNode("button",{onClick:R},"适应屏幕")])]),e.createElementVNode("div",{ref_key:"canvasContainer",ref:v,class:"canvas-container"},null,512)]),e.createElementVNode("div",ye,[a.value?(e.openBlock(),e.createElementBlock("div",ge,[t[25]||(t[25]=e.createElementVNode("h3",null,"属性设置",-1)),e.createElementVNode("div",ke,[t[20]||(t[20]=e.createElementVNode("h4",null,"位置和大小",-1)),e.createElementVNode("div",Ve,[t[16]||(t[16]=e.createElementVNode("label",null,"X:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[4]||(t[4]=n=>l.x=n),onInput:m,type:"number"},null,544),[[e.vModelText,l.x,void 0,{number:!0}]])]),e.createElementVNode("div",Ne,[t[17]||(t[17]=e.createElementVNode("label",null,"Y:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[5]||(t[5]=n=>l.y=n),onInput:m,type:"number"},null,544),[[e.vModelText,l.y,void 0,{number:!0}]])]),e.createElementVNode("div",be,[t[18]||(t[18]=e.createElementVNode("label",null,"宽度:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[6]||(t[6]=n=>l.width=n),onInput:m,type:"number"},null,544),[[e.vModelText,l.width,void 0,{number:!0}]])]),e.createElementVNode("div",xe,[t[19]||(t[19]=e.createElementVNode("label",null,"高度:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[7]||(t[7]=n=>l.height=n),onInput:m,type:"number"},null,544),[[e.vModelText,l.height,void 0,{number:!0}]])])]),a.value.tag==="Text"?(e.openBlock(),e.createElementBlock("div",we,[t[24]||(t[24]=e.createElementVNode("h4",null,"文字属性",-1)),e.createElementVNode("div",Ce,[t[21]||(t[21]=e.createElementVNode("label",null,"内容:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[8]||(t[8]=n=>l.text=n),onInput:m,type:"text"},null,544),[[e.vModelText,l.text]])]),e.createElementVNode("div",ze,[t[22]||(t[22]=e.createElementVNode("label",null,"字号:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[9]||(t[9]=n=>l.fontSize=n),onInput:m,type:"number"},null,544),[[e.vModelText,l.fontSize,void 0,{number:!0}]])]),e.createElementVNode("div",_e,[t[23]||(t[23]=e.createElementVNode("label",null,"颜色:",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[10]||(t[10]=n=>l.fill=n),onInput:m,type:"color"},null,544),[[e.vModelText,l.fill]])])])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",Se,t[26]||(t[26]=[e.createElementVNode("p",null,"请选择一个元素来编辑属性",-1)])))])])]))}}),Ie=(s,o)=>{const i=s.__vccOpts||s;for(const[c,v]of o)i[c]=v;return i},g=Ie(Be,[["__scopeId","data-v-6270eb26"]]),x="1.0.0",w=s=>{s.component("CuzcuzDesigner",g)},Te={install:w,CuzcuzDesigner:g,VERSION:x};exports.BaseEditor=y;exports.CuzcuzDesigner=g;exports.CuzcuzEditor=y;exports.VERSION=x;exports.default=Te;exports.install=w;Object.keys(b).forEach(s=>{s!=="default"&&!Object.prototype.hasOwnProperty.call(exports,s)&&Object.defineProperty(exports,s,{enumerable:!0,get:()=>b[s]})});
//# sourceMappingURL=index.cjs.map