https://assets2.gyazo.com/dist/dd61c3cea9d21e4532d8.chunk.js

1try{!function(){var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="e4e1444b-7109-492c-a6fb-45eaedff84d5",e._sentryDebugIdIdentifier="sentry-dbid-e4e1444b-7109-492c-a6fb-45eaedff84d5")}()}catch(e){}(globalThis.webpackChunkgyazo=globalThis.webpackChunkgyazo||[]).push([[5792],{68054(e,t,n){var a=n(71354),r=n.n(a),o=n(76314),i=n.n(o)()(r());i.push([e.id,".zvBDsziPKHCMotDdg8gO{color:#000;fill:#000}.yDst2NY2pQpOXpoSTc4O{position:absolute;top:46px;left:-20px;background:#fafafa;padding:4px}.l7JTw9DxsD5MTWqkXEfn{width:80px;display:grid;grid-template-columns:repeat(3, 1fr);gap:4px}.irXi2KrqPyGTbzrhn15q{width:24px;height:24px;padding:0;border:none;background:#fff}.wIax9q9h2oXMyDzbET8Q{background:#3e87f4}.DZ8yJ0BAm7yULPBza8PY{fill:#000}.pUPWqNRt5xRIimiGPTI3{fill:#fff}.HV63d8lJaRmfmaen1qwZ{width:80px;height:24px;padding:0;color:#000;background:#fafafa}.HV63d8lJaRmfmaen1qwZ:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.HV63d8lJaRmfmaen1qwZ:disabled:hover{color:#000;background:#fafafa}.Srm2I0m0TWY88lpyxY9P{margin-top:4px}","",{version:3,sources:["webpack://./client/js/app/components/OverlayWatermarkPage/Header/WatermarkPatternSelectMenu/styles.module.scss"],names:[],mappings:"AAAA,sBACE,UAAA,CACA,SAAA,CAGF,sBACE,iBAAA,CACA,QAAA,CACA,UAAA,CACA,kBAAA,CACA,WAAA,CAGF,sBACE,UAAA,CACA,YAAA,CACA,oCAAA,CACA,OAAA,CAGF,sBACE,UAAA,CACA,WAAA,CACA,SAAA,CACA,WAAA,CACA,eAAA,CAGF,sBACE,kBAAA,CAGF,sBACE,SAAA,CAGF,sBACE,SAAA,CAGF,sBACE,UAAA,CACA,WAAA,CACA,SAAA,CACA,UAAA,CACA,kBAAA,CAGF,+BACE,kBAAA,CACA,UAAA,CACA,eAAA,CAGF,qCACE,UAAA,CACA,kBAAA,CAGF,sBACE,cAAA",sourcesContent:[".explorerActionBtnGroupDark {\n  color: black;\n  fill: black;\n}\n\n.menuItems {\n  position: absolute;\n  top: 46px;\n  left: -20px;\n  background: #fafafa;\n  padding: 4px;\n}\n\n.gridContainer {\n  width: 80px;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 4px;\n}\n\n.gridButton {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: white;\n}\n\n.gridButtonActive {\n  background: #3e87f4;\n}\n\n.kamonIcon {\n  fill: black;\n}\n\n.kamonIconActive {\n  fill: white;\n}\n\n.fillButton {\n  width: 80px;\n  height: 24px;\n  padding: 0;\n  color: black;\n  background: #fafafa;\n}\n\n.fillButton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  box-shadow: none;\n}\n\n.fillButton:disabled:hover {\n  color: black;\n  background: #fafafa;\n}\n\n.marginTop4 {\n  margin-top: 4px;\n}\n"],sourceRoot:""}]),i.locals={explorerActionBtnGroupDark:"zvBDsziPKHCMotDdg8gO",menuItems:"yDst2NY2pQpOXpoSTc4O",gridContainer:"l7JTw9DxsD5MTWqkXEfn",gridButton:"irXi2KrqPyGTbzrhn15q",gridButtonActive:"wIax9q9h2oXMyDzbET8Q",kamonIcon:"DZ8yJ0BAm7yULPBza8PY",kamonIconActive:"pUPWqNRt5xRIimiGPTI3",fillButton:"HV63d8lJaRmfmaen1qwZ",marginTop4:"Srm2I0m0TWY88lpyxY9P"};const l=i;n.d(t,["A",0,l])},88412(e,t,n){var a=n(71354),r=n.n(a),o=n(76314),i=n.n(o)()(r());i.push([e.id,".cJc2ECWKjtt2br3luoxA{width:100vw;height:calc(100vh - 50px);background-color:rgba(0,0,0,.5)}.WtIrxgwqUwcCz8XXRWeE{display:flex;justify-content:center;align-items:center;max-width:100vw;height:100%}.OH4tP7KI6Jdg8DyOQ0Jn{max-width:100vw;max-height:calc(100vh - 50px)}.OTy3st0gOPhpjzwlxF71{width:1000px;height:750px}.kx0U7DKj7q5GUSJayzTr{width:750px;height:1000px}.Am1cFPq3WQ7xHAkFDRQs{position:absolute;left:calc(50% - 15px);top:calc(50% - 15px);width:30px;height:30px;fill:#ccc;animation:sXmJWQ45aCGUmSlIqLIE 1.5s infinite linear;opacity:.99}@keyframes sXmJWQ45aCGUmSlIqLIE{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}","",{version:3,sources:["webpack://./client/js/app/components/OverlayWatermarkPage/styles.module.scss"],names:[],mappings:"AAAA,sBACE,WAAA,CACA,yBAAA,CACA,+BAAA,CAGF,sBACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,eAAA,CACA,WAAA,CAGF,sBACE,eAAA,CACA,6BAAA,CAGF,sBACE,YAAA,CACA,YAAA,CAGF,sBACE,WAAA,CACA,aAAA,CAGF,sBACE,iBAAA,CACA,qBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,mDAAA,CACA,WAAA,CAEA,gCACE,GACE,sBAAA,CAGF,KACE,wBAAA,CAAA",sourcesContent:[".mainContainer {\n  width: 100vw;\n  height: calc(100vh - 50px);\n  background-color: rgb(0, 0, 0, 0.5);\n}\n\n.imageContainer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-width: 100vw;\n  height: 100%;\n}\n\n.imageElement {\n  max-width: 100vw;\n  max-height: calc(100vh - 50px);\n}\n\n.imageLandscape {\n  width: 1000px;\n  height: 750px;\n}\n\n.imagePortrait {\n  width: 750px;\n  height: 1000px;\n}\n\n.loadingSpinner {\n  position: absolute;\n  left: calc(50% - 15px);\n  top: calc(50% - 15px);\n  width: 30px;\n  height: 30px;\n  fill: #ccc;\n  animation: kamonspin 1.5s infinite linear;\n  opacity: 0.99; // opacity:1だとジャギーのため変形して見えてしまう\n\n  @keyframes kamonspin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],sourceRoot:""}]),i.locals={mainContainer:"cJc2ECWKjtt2br3luoxA",imageContainer:"WtIrxgwqUwcCz8XXRWeE",imageElement:"OH4tP7KI6Jdg8DyOQ0Jn",imageLandscape:"OTy3st0gOPhpjzwlxF71",imagePortrait:"kx0U7DKj7q5GUSJayzTr",loadingSpinner:"Am1cFPq3WQ7xHAkFDRQs",kamonspin:"sXmJWQ45aCGUmSlIqLIE"};const l=i;n.d(t,["A",0,l])},25792(e,t,n){n.r(t),n.d(t,{OverlayWatermarkPage:()=>J,watermarkPatterns:()=>z});var a=n(74848),r=n(96540),o=n(32446),i=n(33826),l=n(91227),s=n(77399),A=n.n(s),c=n(16522),d=n(77946),m=n(51233),h=n(46942),p=n.n(h),g=n(85072),x=n.n(g),C=n(97825),f=n.n(C),b=n(77659),u=n.n(b),w=n(55056),k=n.n(w),y=n(10540),B=n.n(y),v=n(41113),j=n.n(v),T=n(68054),I={};I.styleTagTransform=j(),I.setAttributes=k(),I.insert=u().bind(null,"head"),I.domAPI=f(),I.insertStyleElement=B();x()(T.A,I);const P=T.A&&T.A.locals?T.A.locals:void 0;var S=n(97460);const E=e=>{const t=(0,c.c)(28),{currentPattern:n,setPattern:r}=e,{tooltipId:o,targetProps:i}=(0,S.fS)();let s,A,h,g,x,C,f,b,u,w,k;t[0]===Symbol.for("react.memo_cache_sentinel")?(s=p()("explorer-action-btn-group dropdown",P.explorerActionBtnGroupDark),t[0]=s):s=t[0],t[1]===Symbol.for("react.memo_cache_sentinel")?(A=l.R.t("watermark_text_pattern"),t[1]=A):A=t[1],t[2]===Symbol.for("react.memo_cache_sentinel")?(h=p()("btn explorer-action-btn explorer-action-btn-default"),t[2]=h):h=t[2],t[3]===Symbol.for("react.memo_cache_sentinel")?(g=(0,a.jsx)(m.$,{name:"grid-9"}),x=(0,a.jsx)(m.$,{name:"caret-down"}),t[3]=g,t[4]=x):(g=t[3],x=t[4]),t[5]!==i?(C=(0,a.jsxs)(d.IU,{className:h,...i,children:[g,x]}),t[5]=i,t[6]=C):C=t[6],t[7]!==C||t[8]!==o?(f=(0,a.jsx)(S.ax,{tooltipId:o,content:A,children:C}),t[7]=C,t[8]=o,t[9]=f):f=t[9],t[10]!==n||t[11]!==r?(b=z.filter(_).map(e=>(0,a.jsx)(d.Dr,{children:(0,a.jsx)("button",{onClick:()=>r(e),className:p()(P.gridButton,{[P.gridButtonActive]:n===e||"fill"===n}),disabled:n===e,title:e,children:(0,a.jsx)(m.$,{name:"space",className:p()({[P.kamonIconActive]:n===e,[P.kamonIcon]:n!==e})})})},e)),t[10]=n,t[11]=r,t[12]=b):b=t[12],t[13]!==b?(u=(0,a.jsx)("div",{className:P.gridContainer,children:b}),t[13]=b,t[14]=u):u=t[14],t[15]===Symbol.for("react.memo_cache_sentinel")?(w=p()("btn btn-default",P.fillButton),t[15]=w):w=t[15],t[16]!==r?(k=()=>r("fill"),t[16]=r,t[17]=k):k=t[17];const y="fill"===n;let B,v,j,T;return t[18]===Symbol.for("react.memo_cache_sentinel")?(B=l.R.t("watermark_text_pattern_fill"),t[18]=B):B=t[18],t[19]!==k||t[20]!==y?(v=(0,a.jsx)("div",{className:P.marginTop4,children:(0,a.jsx)(d.Dr,{children:(0,a.jsx)("button",{className:w,onClick:k,disabled:y,title:"fill",children:B})})}),t[19]=k,t[20]=y,t[21]=v):v=t[21],t[22]!==v||t[23]!==u?(j=(0,a.jsxs)(d.c,{

1className:P.menuItems,children:[u,v]}),t[22]=v,t[23]=u,t[24]=j):j=t[24],t[25]!==j||t[26]!==f?(T=(0,a.jsx)("div",{className:s,children:(0,a.jsxs)(d.W1,{children:[f,j]})}),t[25]=j,t[26]=f,t[27]=T):T=t[27],T};function _(e){return"fill"!==e}const U=e=>{const t=(0,c.c)(49),{save:n,cancel:r,saving:o,currentText:i,setText:s,currentPattern:A,setPattern:d,currentTextBorder:h,toggleTextBorder:p}=e,{tooltipId:g,targetProps:x}=(0,S.fS)(),{tooltipId:C,targetProps:f}=(0,S.fS)();let b;t[0]!==i||t[1]!==s?(b=()=>{const e=prompt(l.R.t("watermark_text_input"),i);s(e||i)},t[0]=i,t[1]=s,t[2]=b):b=t[2];const u=b;let w,k,y,B,v,j;t[3]===Symbol.for("react.memo_cache_sentinel")?(w=l.R.t("watermark_text_input"),t[3]=w):w=t[3],t[4]===Symbol.for("react.memo_cache_sentinel")?(k=(0,a.jsx)(m.$,{name:"text"}),t[4]=k):k=t[4],t[5]!==i?(y=(0,a.jsx)("span",{children:i}),t[5]=i,t[6]=y):y=t[6],t[7]!==u||t[8]!==o||t[9]!==y||t[10]!==x?(B=(0,a.jsxs)("button",{className:"explorer-action-btn explorer-action-btn-default",onClick:u,disabled:o,...x,children:[k,y]}),t[7]=u,t[8]=o,t[9]=y,t[10]=x,t[11]=B):B=t[11],t[12]!==B||t[13]!==g?(v=(0,a.jsx)(S.ax,{tooltipId:g,content:w,children:B}),t[12]=B,t[13]=g,t[14]=v):v=t[14],t[15]===Symbol.for("react.memo_cache_sentinel")?(j=l.R.t("watermark_text_border"),t[15]=j):j=t[15];const T=`${j}: ${h?"ON":"OFF"}`;let I,P,_,U,W,D,G,q,F,R,N,O,z;return t[16]!==h?(I=h?(0,a.jsx)(m.$,{name:"a-border"}):(0,a.jsx)(m.$,{name:"a"}),t[16]=h,t[17]=I):I=t[17],t[18]!==o||t[19]!==I||t[20]!==f||t[21]!==p?(P=(0,a.jsx)("button",{className:"explorer-action-btn explorer-action-btn-default",onClick:p,disabled:o,...f,children:I}),t[18]=o,t[19]=I,t[20]=f,t[21]=p,t[22]=P):P=t[22],t[23]!==P||t[24]!==T||t[25]!==C?(_=(0,a.jsx)(S.ax,{tooltipId:C,content:T,children:P}),t[23]=P,t[24]=T,t[25]=C,t[26]=_):_=t[26],t[27]!==_||t[28]!==v?(U=(0,a.jsxs)("div",{className:"explorer-action-btn-group",children:[v,_]}),t[27]=_,t[28]=v,t[29]=U):U=t[29],t[30]!==A||t[31]!==d?(W=(0,a.jsx)(E,{currentPattern:A,setPattern:d}),t[30]=A,t[31]=d,t[32]=W):W=t[32],t[33]===Symbol.for("react.memo_cache_sentinel")?(D=(0,a.jsx)(m.$,{name:"check"}),G=(0,a.jsx)("span",{children:l.R.t("save")}),t[33]=D,t[34]=G):(D=t[33],G=t[34]),t[35]!==n||t[36]!==o?(q=(0,a.jsxs)("button",{className:"explorer-action-btn explorer-action-btn-default",onClick:n,disabled:o,children:[D,G]}),t[35]=n,t[36]=o,t[37]=q):q=t[37],t[38]===Symbol.for("react.memo_cache_sentinel")?(F=(0,a.jsx)(m.$,{name:"cross"}),R=(0,a.jsx)("span",{children:l.R.t("cancel")}),t[38]=F,t[39]=R):(F=t[38],R=t[39]),t[40]!==r?(N=(0,a.jsxs)("button",{className:"explorer-action-btn explorer-action-btn-default",onClick:r,children:[F,R]}),t[40]=r,t[41]=N):N=t[41],t[42]!==q||t[43]!==N?(O=(0,a.jsxs)("div",{className:"explorer-action-btn-group",children:[q,N]}),t[42]=q,t[43]=N,t[44]=O):O=t[44],t[45]!==U||t[46]!==W||t[47]!==O?(z=(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("div",{className:"transform-page-header",children:(0,a.jsxs)("div",{className:"explorer-action-btn-toolbar",children:[U,W,O]})})}),t[45]=U,t[46]=W,t[47]=O,t[48]=z):z=t[48],z};var W=n(88412),D={};D.styleTagTransform=j(),D.setAttributes=k(),D.insert=u().bind(null,"head"),D.domAPI=f(),D.insertStyleElement=B();x()(W.A,D);const G=W.A&&W.A.locals?W.A.locals:void 0;var q=n(30651),F=n(6300),R=n(32361),N=n(3654),O=n(22675);const z=["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right","fill"],J=()=>{const e=(0,F.i)(),t=(0,o.oU)(),n=(0,o.kq)(),{mixpanel:s,googleAnalytics:c}=(0,O.z1)(),[d,m]=(0,r.useState)(null),[h,p]=(0,r.useState)(!1),g=R.U.get(R.s.watermarkText),[x,C]=(0,r.useState)(g||(e?.name||"Gyazo")),f=R.U.get(R.s.watermarkTextBorder),[b,u]=(0,r.useState)(f||!0),w=R.U.get(R.s.watermarkPattern),[k,y]=(0,r.useState)(w||"middle-center"),B=(0,r.useRef)(null),v=(0,i.OI)(),j=(0,i.OI)(),T=(0,r.useCallback)(async()=>{if(n)try{const e=B.current;if(!e)return;const t=e.getContext("2d");if(!t)return;v.show();const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{e.width=a.width,e.height=a.height,t.drawImage(a,0,0,a.width,a.height);const n=a.width/20;if(t.lineJoin="miter",t.lineCap="butt",t.lineWidth=1+Math.floor(n/40),t.font=`bold ${n}px Arial`,t.fillStyle="rgba(0, 0, 0, 0.4)",t.strokeStyle="rgba(255, 255, 255, 0.6)",t.textAlign="center",t.textBaseline="middle","fill"===k){t.save(),t.translate(e.width/2,e.height/2),t.rotate(-30*Math.PI/180),t.translate(-e.width/2,-e.height/2);const a=80,r=t.measureText(x).width+a,o=n+a,i=Math.sqrt(e.width**2+e.height**2);for(let e=-i;e<i;e+=o)for(let n=-i;n<i;n+=r)b&&t.strokeText(x,n,e),t.fillText(x,n,e);

1t.restore()}else{const a=80,r=t.measureText(x).width+a,o=n+a;let i=0,l=0;switch(k){case"top-left":i=r/2,l=o/2;break;case"top-center":i=e.width/2,l=o/2;break;case"top-right":i=e.width-r/2,l=o/2;break;case"middle-left":i=r/2,l=e.height/2;break;case"middle-center":i=e.width/2,l=e.height/2;break;case"middle-right":i=e.width-r/2,l=e.height/2;break;case"bottom-left":i=r/2,l=e.height-o/2;break;case"bottom-center":i=e.width/2,l=e.height-o/2;break;case"bottom-right":i=e.width-r/2,l=e.height-o/2}b&&t.strokeText(x,i,l),t.fillText(x,i,l)}const r=e.toDataURL("image/png");m(r)},a.src=n.src}catch(e){console.error(e),alert(l.R.t("background_removal_failed"))}finally{v.hide()}},[n,v,x,b,k]),I=(0,r.useCallback)(async()=>{if(d&&t){j.show(),p(!0);try{s("save watermark",{app:t?.metadata?.app,categories:t?.categories,imageType:t?.type,loggedIn:!!e,isPro:e?.isPro,watermarkTextLength:x.length}),c("watermark","save");const n=await(0,N.y)(d);(0,q.xr)(n)}catch(e){console.error(e),j.hide()}finally{j.hide()}}},[d,t,j,e,x,s,c]),P=(0,r.useCallback)(()=>{t&&A()(`/${t.uniqId}`)},[t]),S=(0,r.useCallback)(e=>{C(e),R.U.set(R.s.watermarkText,e),m(null)},[]),E=(0,r.useCallback)(()=>{u(!b),R.U.set(R.s.watermarkTextBorder,!b),m(null)},[b]),_=(0,r.useCallback)(e=>{y(e),R.U.set(R.s.watermarkPattern,e),m(null)},[]);return(0,r.useEffect)(()=>{null===d&&T()},[T,d]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:G.mainContainer,children:[(0,a.jsx)(U,{save:I,cancel:P,saving:h,currentText:x,setText:S,currentPattern:k,setPattern:_,currentTextBorder:b,toggleTextBorder:E}),(0,a.jsx)("div",{className:G.imageContainer,children:(0,a.jsx)("canvas",{ref:B,className:G.imageElement})})]}),(0,a.jsx)(i.jK,{text:l.R.t("loading"),control:v}),(0,a.jsx)(i.jK,{text:l.R.t("img_draw_saving"),control:j})]})}},3654(e,t,n){var a=n(25096),r=n(38515);n.d(t,["y",0,async e=>{const t=e.split(",")[0];if(!t)throw new Error("mimeString is null");const n=t.split(":")[1]?.split(";")[0],o=e.split(",")[1];if(!o)throw new Error("base64String is null");const i=atob(o),l=new Uint8Array(i.length);for(let e=0;e<i.length;e++)l[e]=i.charCodeAt(e);const s=new Blob([l],{type:n}),A=await(0,a.A)(s),c=await A.text();return(0,r.A)(c)}])}}]);