diginext-pixi/dist/extras/print-editor/PrintEditor.js

README.md

"use strict";var _PrintEditor_instances,_PrintEditor_awake,_PrintEditor_createBoardMask,_PrintEditor_drawEmptyAreaForExportBoard,__createBinding=this&&this.__createBinding||(Object.create?function(t,e,i,r){void 0===r&&(r=i);var o=Object.getOwnPropertyDescriptor(e,i);o&&!("get"in o?!e.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,r,o)}:function(t,e,i,r){void 0===r&&(r=i),t[r]=e[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),__importStar=this&&this.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)"default"!==i&&Object.prototype.hasOwnProperty.call(t,i)&&__createBinding(e,t,i);return __setModuleDefault(e,t),e},__awaiter=this&&this.__awaiter||function(t,e,i,r){return new(i||(i=Promise))((function(o,n){function a(t){try{d(r.next(t))}catch(t){n(t)}}function s(t){try{d(r.throw(t))}catch(t){n(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}d((r=r.apply(t,e||[])).next())}))},__classPrivateFieldGet=this&&this.__classPrivateFieldGet||function(t,e,i,r){if("a"===i&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?r:"a"===i?r.call(t):r?r.value:e.get(t)},__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const Event_1=__importDefault(require("../../data/Event")),pixi_viewport_1=require("pixi-viewport"),pixi_js_1=require("pixi.js"),PIXI=__importStar(require("pixi.js")),Ruler_1=__importDefault(require("../../extras/print-editor/Ruler")),InteractItem_1=__importDefault(require("../../core/InteractItem")),moveToBottom_1=__importDefault(require("../../helper/moveToBottom")),moveToTop_1=__importDefault(require("../../helper/moveToTop")),object_1=require("diginext-utils/dist/object"),device_1=require("diginext-utils/dist/device"),math_1=require("diginext-utils/dist/math"),removeChild_1=__importDefault(require("../../helper/removeChild")),scaleByWidth_1=__importDefault(require("../../helper/scaleByWidth")),scaleClamp_1=__importDefault(require("../../helper/scaleClamp")),getChildById_1=__importDefault(require("../../helper/getChildById")),generateUUID_1=__importDefault(require("diginext-utils/dist/string/generateUUID")),scaleByHeight_1=__importDefault(require("../../helper/scaleByHeight"));class PrintEditor extends pixi_js_1.Container{constructor(t){super(),_PrintEditor_instances.add(this),this.props={side:"front",width:3780,height:5906,MARGIN_BOARD:1800,isShowBorder:!0,border:{dash:[100,40],width:20,color:"#ffffff"},isUseViewport:!0},this.props=Object.assign(Object.assign({},this.props),t),__classPrivateFieldGet(this,_PrintEditor_instances,"m",_PrintEditor_awake).call(this)}get priceByArea(){var t;const e=(null===(t=this.contentBoard)||void 0===t?void 0:t.children.reduce(((t,e)=>t+(0,object_1.toFloat)(e.AREA_VIA_CM)),0))||0;return this.calculatePriceByArea(e)}configSizeBoard({width:t,height:e}){var i;t=Math.abs((0,object_1.toInt)(t)),e=Math.abs((0,object_1.toInt)(e)),this.props.width=t,this.props.height=e,this.setupArea();const r=null===(i=window.uData)||void 0===i?void 0:i.app;if(!r)return;const o=r.stage;o&&o.emit("size-board-changed-success",{width:t,height:e})}hide(){return __awaiter(this,void 0,void 0,(function*(){this.root&&(this.root.visible=!1)}))}show(){return __awaiter(this,void 0,void 0,(function*(){this.root&&(this.root.visible=!0)}))}setupBackground({url:t=""}){return new Promise(((e,i)=>__awaiter(this,void 0,void 0,(function*(){var r;if(this.background){if(!t)return void i(null);const r=yield PIXI.Texture.fromURL(t);this.background.sprite.texture=r,e(this.background)}else this.background=new InteractItem_1.default({url:t}),this.background.name="background",this.background.on(Event_1.default.LOADED,(()=>{e(this.background)})),this.background.deactive(),null===(r=this.root)||void 0===r||r.addChild(this.background),(0,moveToBottom_1.default)(this.background)}))))}changeBackground(t){}changeData(t){this.props=Object.assign(Object.assign({},this.props),t),this.setupArea()}setupArea(){var t,e,i,r;const o=null===(t=window.uData)||void 0===t?void 0:t.app;if(!o)return;const n=o.stage;if(!n)return;(0,removeChild_1.default)(this),this.background=null,this.root=new pixi_js_1.Container,this.root.name="root PrintEditor",this.addChild(this.root),this.root.x=this.props.MARGIN_BOARD,this.root.y=this.props.MARGIN_BOARD,this.drawArea=new pixi_js_1.Container,this.drawArea.name="drawArea PrintEditor",null===(e=this.root)||void 0===e||e.addChild(this.drawArea),this.holderDrawArea=new pixi_js_1.Container,this.holderDrawArea.name="holderDrawArea PrintEditor",null===(i=this.drawArea)||void 0===i||i.addChild(this.holderDrawArea),this.contentBoard=new pixi_js_1.Container,this.contentBoard.name="contentBoard PrintEditor",null===(r=this.holderDrawArea)||void 0===r||r.addChild(this.contentBoard);const{width:a,height:s}=this.props;this.props.isShowBorder&&this.drawBorderDash(),__classPrivateFieldGet(this,_PrintEditor_instances,"m",_PrintEditor_drawEmptyAreaForExportBoard).call(this),__classPrivateFieldGet(this,_PrintEditor_instances,"m",_PrintEditor_createBoardMask).call(this),this.resizeViewport(),(0,moveToTop_1.default)(this.holderDrawArea),(0,moveToTop_1.default)(this.contentBoard),o.viewport?o.viewport.addChild(this):n.addChild(this)}addToBoard(t){var e;null===(e=this.contentBoard)||void 0===e||e.addChild(t),t.board=this.drawArea,t.x=this.props.width/2,t.y=this.props.height/2,t.on(Event_1.default.CHANGE_MATRIX,(()=>{this.updateObjectMatrix(t)})),t.on(Event_1.default.LOADED,(()=>{this.updateObjectMatrix(t)})),this.updateObjectMatrix(t),t.once(Event_1.default.DISPOSE,(()=>{this.onRemove(t)}).bind(this))}onRemove(t){}updateObjectMatrix(t){this.emit("update_price")}calculatePriceByArea(t){if(0==(t=(0,math_1.clamp)(t,0,1600)))return 0;let e=0;switch(!0){case(t=Math.ceil(t))<25:e=2;break;case t<100:e=5;break;case t>=100&&t<225:e=8;break;case t>=225&&t<400:e=15;break;case t>=400&&t<625:e=22;break;case t>=625&&t<900:e=35;break;case t>=900:e=40}return Math.ceil(10*e)/10}drawBorderDash(t){this.props.isShowBorder}showBorder(){var t,e;this.props.isShowBorder&&(null===(e=null===(t=this.root)||void 0===t?void 0:t.getChildByName("BorderDash"))||void 0===e?void 0:e.visible)&&(this.root.getChildByName("BorderDash").visible=!0)}hideBorder(){var t,e;(null===(e=null===(t=this.root)||void 0===t?void 0:t.getChildByName("BorderDash"))||void 0===e?void 0:e.visible)&&(this.root.getChildByName("BorderDash").visible=!1)}changeColorBorder(t){var e,i;(null===(e=this.root)||void 0===e?void 0:e.getChildByName("BorderDash"))&&(null===(i=this.root)||void 0===i||i.getChildByName("BorderDash").destroy(),this.drawBorderDash(t))}setupRuler(){new Ruler_1.default}showRuler(){}hideRuler(){}setupViewport(){var t;if(!this.props.isUseViewport)return;const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.renderer;if(!i)return;const r=e.stage;if(!r)return;e.viewport=new pixi_viewport_1.Viewport({screenWidth:i.width/i.resolution,screenHeight:i.height/i.resolution,worldWidth:this.props.width,worldHeight:this.props.height,events:i.events});const o=e.viewport;o.addChild(this),r.addChild(o),o.on("moved",(t=>{o.interactiveChildren=!1}).bind(this)),o.on("moved-end",(t=>{if(r.TransformTool){const t=r.TransformTool;t.isChoosing&&t.onUpdateTargetMatrix()}o.interactiveChildren=!0}).bind(this)),r.on("pointerdown",(t=>{o.interactiveChildren=!1}).bind(this)),r.on("pointerup",(t=>{o.pause=!1,o.interactiveChildren=!0}).bind(this));const n="start_choose_target",a="un_choose_target";r.on(n,(t=>{o.pause=!0}).bind(this)),r.on(a,(t=>{o.pause=!1}).bind(this)),o.fit(!0,this.props.width+2*this.props.MARGIN_BOARD,this.props.height+2*this.props.MARGIN_BOARD),this.resizeViewport()}zoomFit(){var t;const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.viewport;i&&i.fit(!0,this.props.width+100,this.props.height+100)}zoomOut(){var t;const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.viewport;i&&i.fit(!0,this.props.width+2*this.props.MARGIN_BOARD,this.props.height+2*this.props.MARGIN_BOARD)}duplicateById(t,{deltaX:e=200,deltaY:i=200}={}){return __awaiter(this,void 0,void 0,(function*(){const r=(0,getChildById_1.default)(this.contentBoard,t).toJSON();return r.id=(0,generateUUID_1.default)(),r.x+=e,r.y+=i,yield this.addItemByJson(r)}))}resizeViewport(){var t;const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.renderer;if(!i)return;const r=e.viewport;if(!r)return;r.resize(i.width/i.resolution,i.height/i.resolution,this.props.width+2*this.props.MARGIN_BOARD,this.props.height+2*this.props.MARGIN_BOARD);const{worldWidth:o,worldHeight:n}=r,a=o>n?3*o:null,s=o>n?null:3*n;r.drag({wheel:!1,wheelScroll:0}).pinch().decelerate().clampZoom({minWidth:i.width/i.resolution,minHeight:i.height/i.resolution,maxWidth:a,maxHeight:s,minScale:null,maxScale:null}).animate({time:1e3}).clamp({left:!0,right:!0,top:!0,bottom:!0,direction:"all"})}toJSON(){var t;const e=null===(t=this.contentBoard)||void 0===t?void 0:t.children.map(((t,e)=>t.toJSON()));return{price:this.priceByArea,list:e}}toJsonWithoutText(){var t,e,i,r,o,n,a;return __awaiter(this,void 0,void 0,(function*(){const s=null===(t=window.uData)||void 0===t?void 0:t.app;if(!s)return;if(!s.stage)return;const d=s.renderer;if(!d)return;const h=[];for(let t=(null===(i=null===(e=this.contentBoard)||void 0===e?void 0:e.children)||void 0===i?void 0:i.length)-1;t>=0;t--){const e=null===(o=null===(r=this.contentBoard)||void 0===r?void 0:r.children)||void 0===o?void 0:o[t];switch(e.type){case"PrintText":case"PrintTextMesh":{const t={id:e.id,type:e.type,rotation:e.rotation,x:e.x,y:e.y,scaleX:e.scale.x,scaleY:e.scale.y,width:e.width,height:e.height},i=new pixi_js_1.Container;null===(n=this.contentBoard)||void 0===n||n.addChild(i),e.rotation=0,i.addChild(e),yield e.prepairPrint(),(0,device_1.isMobile)()?(0,scaleClamp_1.default)(e,2592,1944):(0,scaleClamp_1.default)(e,4096,4096);const r=d.extract.canvas(i),o=(yield new Promise(((t,e)=>{null==r||r.toBlob((e=>{t(e)}))})))||void 0;(0,scaleByWidth_1.default)(e,t.width),e.rotation=t.rotation,e.x=t.x,e.y=t.y,null===(a=this.contentBoard)||void 0===a||a.addChild(e),e.viewAsWeb(),i.destroy(),h.push(Object.assign(Object.assign({},e.toJSON()),{blob:o}));break}case"PrintSprite":case"PrintSvg":h.push(e.toJSON())}}return h.reverse(),{price:this.priceByArea,list:h}}))}clearContent(){(0,removeChild_1.default)(this.contentBoard)}addItemByJson(t){var e,i;return __awaiter(this,void 0,void 0,(function*(){const r=null===(e=window.uData)||void 0===e?void 0:e.app;if(!r)return;const o=r.stage;if(!o)return;if("string"==typeof t)try{t=JSON.parse(t)}catch(t){console.error("fromJSON error",t)}if(!t)return;let n;switch(t.type){case"PrintSvg":n=new(0,(yield Promise.resolve().then((()=>__importStar(require("../../extras/print-editor"))))).PrintSvg);break;case"PrintText":n=new(0,(yield Promise.resolve().then((()=>__importStar(require("../../extras/print-editor"))))).PrintText);break;case"PrintSprite":n=new(0,(yield Promise.resolve().then((()=>__importStar(require("../../extras/print-editor"))))).PrintSprite);break;case"PrintTextMesh":n=new(0,(yield Promise.resolve().then((()=>__importStar(require("../../extras/print-editor"))))).PrintTextMesh);break;case"PrintShape":n=new(0,(yield Promise.resolve().then((()=>__importStar(require("../../extras/print-editor"))))).PrintShape)}return n?(this.addToBoard(n),yield n.fromJSON(t),null===(i=o.TransformTool)||void 0===i||i.add(n),n):null}))}fromJSON(t){var e,i;return __awaiter(this,void 0,void 0,(function*(){const r=null===(e=window.uData)||void 0===e?void 0:e.app;if(!r)return;if(!r.stage)return;if("string"==typeof t)try{t=JSON.parse(t)}catch(t){console.error("fromJSON error",t)}if(!t)return;this.clearContent();const o=this.props.side,n=null===(i=t[o])||void 0===i?void 0:i.list;n?yield Promise.all(n.map((t=>__awaiter(this,void 0,void 0,(function*(){yield this.addItemByJson(t)}))))):t.list.map((t=>__awaiter(this,void 0,void 0,(function*(){yield this.addItemByJson(t)}))))}))}prepairToExport(){var t,e,i;return __awaiter(this,void 0,void 0,(function*(){for(let r=0;r<((null===(e=null===(t=this.contentBoard)||void 0===t?void 0:t.children)||void 0===e?void 0:e.length)||0);r++){const t=null===(i=this.contentBoard)||void 0===i?void 0:i.children[r];t.isResized&&(yield t.prepairPrint())}}))}prepairToWebView(){var t,e,i;return __awaiter(this,void 0,void 0,(function*(){for(let r=0;r<((null===(e=null===(t=this.contentBoard)||void 0===t?void 0:t.children)||void 0===e?void 0:e.length)||0);r++){const t=null===(i=this.contentBoard)||void 0===i?void 0:i.children[r];t.isResized&&(yield t.viewAsWeb())}}))}exportToImage(){var t;return __awaiter(this,void 0,void 0,(function*(){const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return null;const i=e.renderer;if(!i)return null;if(yield this.prepairToExport(),!this.drawArea)return null;const r=yield i.extract.image(this.drawArea);return this.prepairToWebView(),r}))}exportToCanvas(){var t;return __awaiter(this,void 0,void 0,(function*(){const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return null;const i=e.renderer;if(!i)return null;yield this.prepairToExport();const r=i.extract.canvas(this.drawArea);return this.prepairToWebView(),r}))}exportToBlob(){var t;return __awaiter(this,void 0,void 0,(function*(){const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.renderer;if(!i)return;yield this.prepairToExport();const r=i.extract.canvas(this.drawArea),o=(yield new Promise(((t,e)=>{null==r||r.toBlob((e=>(t(e),e)))})))||void 0;return this.prepairToWebView(),o}))}exportToShareBlob(t){var e;return __awaiter(this,void 0,void 0,(function*(){const i=null===(e=window.uData)||void 0===e?void 0:e.app;if(!i)return;const r=i.renderer;if(!r)return;const{width:o}=this;switch(!0){case(0,object_1.toBool)(t.width):t.width&&(0,scaleByWidth_1.default)(this,t.width);break;case(0,object_1.toBool)(t.height):t.height&&(0,scaleByHeight_1.default)(this,t.height);break;default:(0,scaleByWidth_1.default)(this,1024)}this.hideBorder(),yield this.prepairToExport();const n=r.extract.canvas(i.viewport),a=(yield new Promise(((t,e)=>{null==n||n.toBlob((e=>{t(e)}))})))||void 0;return(0,scaleByWidth_1.default)(this,o),yield this.prepairToWebView(),this.showBorder(),this.zoomOut(),a}))}}exports.default=PrintEditor,_PrintEditor_instances=new WeakSet,_PrintEditor_awake=function(){var t;const e=null===(t=window.uData)||void 0===t?void 0:t.app;if(!e)return;const i=e.stage;i&&(i.on(Event_1.default.RESIZE,(t=>{const{data:i}=t;if(!i)return;const{width:r,height:o}=i;e.resize(),this.resizeViewport()}).bind(this)),i.on("config-size-board",this.configSizeBoard.bind(this)),this.setupViewport(),this.setupArea())},_PrintEditor_createBoardMask=function(){var t;const{width:e,height:i}=this.props,r=new PIXI.Graphics;r.beginFill(2458288),r.drawRect(0,0,e,i),r.endFill(),null===(t=this.drawArea)||void 0===t||t.addChild(r),this.holderDrawArea&&(this.holderDrawArea.mask=r)},_PrintEditor_drawEmptyAreaForExportBoard=function(){var t;const{width:e,height:i}=this.props,r=new PIXI.Graphics;r.beginFill(16777215,1e-11),r.drawRect(0,0,e,i),r.endFill(),null===(t=this.holderDrawArea)||void 0===t||t.addChild(r)};