a.top+a.height&&(c=a.top+a.height),l-=a.left,c-=a.top;}else n&&(l=n.x*a.width,c=n.y*a.height);"h"!==i&&(s.style.left=`calc(${l/a.width*100}% - ${s.offsetWidth/2}px)`),"v"!==i&&(s.style.top=`calc(${c/a.height*100}% - ${s.offsetHeight/2}px)`),e.cache={x:l/a.width,y:c/a.height};const p=C(l/a.width),u=C(c/a.height);switch(i){case"v":return o.onchange(p);case"h":return o.onchange(u);default:return o.onchange(p,u)}},_tapstop(){e.options.onstop(),s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove);},trigger(){e._tapmove();},update(t=0,o=0){const{left:n,top:i,width:s,height:r}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(o=t),e._tapmove({clientX:n+s*t,clientY:i+r*o});},destroy(){const{options:t,_tapstart:o,_keyboard:n}=e;s(document,["keydown","keyup"],n),s([t.wrapper,t.element],"mousedown",o),s([t.wrapper,t.element],"touchstart",o,{passive:!1});}},{options:o,_tapstart:n,_keyboard:r}=e;return i([o.wrapper,o.element],"mousedown",n),i([o.wrapper,o.element],"touchstart",n,{passive:!1}),i(document,["keydown","keyup"],r),e}function k(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=i(t.elements,"click",(e=>{t.elements.forEach((o=>o.classList[e.target===o?"add":"remove"](t.className))),t.onchange(e),e.stopPropagation();}));return {destroy:()=>s(...e)}}const S={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8},O=(t,e,o)=>{const{container:n,margin:i,position:s,variantFlipOrder:r,positionFlipOrder:a}={container:document.documentElement.getBoundingClientRect(),...S,...o},{left:l,top:c}=e.style;e.style.left="0",e.style.top="0";const p=t.getBoundingClientRect(),u=e.getBoundingClientRect(),h={t:p.top-u.height-i,b:p.bottom+i,r:p.right+i,l:p.left-u.width-i},d={vs:p.left,vm:p.left+p.width/2+-u.width/2,ve:p.left+p.width-u.width,hs:p.top,hm:p.bottom-p.height/2-u.height/2,he:p.bottom-u.height},[m,f="middle"]=s.split("-"),v=a[m],b=r[f],{top:y,left:g,bottom:_,right:w}=n;for(const t of v){const o="t"===t||"b"===t,n=h[t],[i,s]=o?["top","left"]:["left","top"],[r,a]=o?[u.height,u.width]:[u.width,u.height],[l,c]=o?[_,w]:[w,_],[p,m]=o?[y,g]:[g,y];if(!(nl))for(const r of b){const l=d[(o?"v":"h")+r];if(!(lc))return e.style[s]=l-u[s]+"px",e.style[i]=n-u[i]+"px",t+r}}return e.style.left=l,e.style.top=c,null};function E(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class L{constructor(t){E(this,"_initializingActive",!0),E(this,"_recalc",!0),E(this,"_nanopop",null),E(this,"_root",null),E(this,"_color",A()),E(this,"_lastColor",A()),E(this,"_swatchColors",[]),E(this,"_setupAnimationFrame",null),E(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign({...L.DEFAULT_OPTIONS},t);const{swatches:e,components:o,theme:n,sliders:i,lockOpacity:s,padding:r}=t;["nano","monolith"].includes(n)&&!i&&(t.sliders="h"),o.interaction||(o.interaction={});const{preview:a,opacity:l,hue:c,palette:p}=o;o.opacity=!s&&l,o.palette=p||a||l||c,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach((t=>this.addSwatch(t)));const{button:u,app:h}=this._root;this._nanopop=((t,e,o)=>{const n="object"!=typeof t||t instanceof HTMLElement?{reference:t,popper:e,...o}:t;return {update(t=n){const{reference:e,popper:o}=Object.assign(n,t);if(!o||!e)throw new Error("Popper- or reference-element missing.");return O(e,o,n)}}})(u,h,{margin:r}),u.setAttribute("role","button"),u.setAttribute("aria-label",this._t("btn:toggle"));const d=this;this._setupAnimationFrame=requestAnimationFrame((function e(){if(!h.offsetWidth)return requestAnimationFrame(e);d.setColor(t.default),d._rePositioningPicker(),t.defaultRepresentation&&(d._representation=t.defaultRepresentation,d.setColorRepresentation(d._representation)),t.showAlways&&d.show(),d._initializingActive=!1,d._emit("init");}));}_preBuild(){const{options:t}=this;for(const e of ["el","container"])t[e]=c(t[e]);this._root=(t=>{const{components:e,useAsButton:o,inline:n,appClass:i,theme:s,lockOpacity:r}=t.options,l=t=>t?"":'style="display:none" hidden',c=e=>t._t(e),p=a(`\n \n `),u=p.interaction;return u.options.find((t=>!t.hidden&&!t.classList.add("active"))),u.type=()=>u.options.find((t=>t.classList.contains("active"))),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root);}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app);}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide();}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||"v").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],s=()=>this._color||(this._color=this._lastColor.clone()),r={palette:$({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(o,n){if(!e.palette)return;const i=s(),{_root:r,options:a}=t,{lastColor:l,currentColor:c}=r.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput("slider"));const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\n `,a.comparison?a.useAsButton||t._lastColor||l.style.setProperty("--pcr-color",p):(r.button.style.setProperty("--pcr-color",p),r.button.classList.remove("clear"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?"add":"remove"]("pcr-active");c.style.setProperty("--pcr-color",p);}}),hue:$({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(o){if(!e.hue||!e.palette)return;const n=s();t._recalc&&(n.h=360*o),this.element.style.backgroundColor=`hsl(${n.h}, 100%, 50%)`,r.palette.trigger();}}),opacity:$({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(o){if(!e.opacity||!e.palette)return;const n=s();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background=`rgba(0, 0, 0, ${n.a})`,r.palette.trigger();}}),selectable:k({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch");}})};this._components=r;}_bindEvents(){const{_root:t,options:e}=this,o=[i(t.interaction.clear,"click",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel");})),i(t.interaction.save,"click",(()=>{!this.applyColor()&&!e.showAlways&&this.hide();})),i(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation();})),i(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null);})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const n=e.closeWithKey;o.push(i(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),i(document,"keyup",(t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide())),i(document,["touchstart","mousedown"],(e=>{this.isOpen()&&!l(e).some((e=>e===t.app||e===t.button))&&this.hide();}),{capture:!0}));}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};p(t.interaction.result,((t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],s=t+(e>=100?1e3*o:o);return s<=0?0:Number((s{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e);}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)));}),{capture:!0}));}this._eventBindings=o;}_rePositioningPicker(){const{options:t}=this;if(!t.inline){if(!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+"px",t.style.left=(window.innerWidth-e.width)/2+"px";}}}_updateOutput(t){const{_root:e,_color:o,options:n}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute("data-type")}`;e.interaction.result.value="function"==typeof o[t]?o[t]().toString(n.outputPrecision):"";}!this._initializingActive&&this._recalc&&this._emit("change",o,t,this);}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||e.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear"));}_parseLocalColor(t){const{values:e,type:o,a:n}=w(t),{lockOpacity:i}=this.options,s=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&s?null:e,type:o}}_t(t){return this.options.i18n[t]||L.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)));}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t]||[],n=o.indexOf(e);return ~n&&o.splice(n,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=A(...e),s=r(` `);return o.swatches.appendChild(s),t.push({el:s,color:n}),this._eventBindings.push(i(s,"click",(()=>{this.setHSVA(...n.toHSVA(),!0),this._emit("swatchselect",n),this._emit("change",n,"swatch",this);}))),!0}return !1}removeSwatch(t){const e=this._swatchColors[t];if(e){const{el:o}=e;return this._root.swatches.removeChild(o),this._swatchColors.splice(t,1),!0}return !1}applyColor(t=!1){const{preview:e,button:o}=this._root,n=this._color.toRGBA().toString(0);return e.lastColor.style.setProperty("--pcr-color",n),this.options.useAsButton||o.style.setProperty("--pcr-color",n),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this}destroy(){cancelAnimationFrame(this._setupAnimationFrame),this._eventBindings.forEach((t=>s(...t))),Object.keys(this._components).forEach((t=>this._components[t].destroy()));}destroyAndRemove(){this.destroy();const{root:t,app:e}=this._root;t.parentElement&&t.parentElement.removeChild(t),e.parentElement.removeChild(e),Object.keys(this).forEach((t=>this[t]=null));}hide(){return !!this.isOpen()&&(this._root.app.classList.remove("visible"),this._emit("hide"),!0)}show(){return !this.options.disabled&&!this.isOpen()&&(this._root.app.classList.add("visible"),this._rePositioningPicker(),this._emit("show",this._color),this)}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(t=360,e=0,o=0,n=1,i=!1){const s=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||o<0||o>100||n<0||n>1)return !1;this._color=A(t,e,o,n);const{hue:r,opacity:a,palette:l}=this._components;return r.update(t/360),a.update(n),l.update(e/100,1-o/100),i||this.applyColor(),s&&this._updateOutput(),this._recalc=s,!0}setColor(t,e=!1){if(null===t)return this._clearColor(e),!0;const{values:o,type:n}=this._parseLocalColor(t);if(o){const t=n.toUpperCase(),{options:i}=this._root.interaction,s=i.find((e=>e.getAttribute("data-type")===t));if(s&&!s.hidden)for(const t of i)t.classList[t===s?"add":"remove"]("active");return !!this.setHSVA(...o,e)&&this.setColorRepresentation(t)}return !1}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find((e=>e.getAttribute("data-type").startsWith(t)&&!e.click()))}getColorRepresentation(){return this._representation}getColor(){return this._color}getSelectedColor(){return this._lastColor}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}return E(L,"utils",o),E(L,"version","1.8.2"),E(L,"I18N_DEFAULTS",{"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"}),E(L,"DEFAULT_OPTIONS",{appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"}),E(L,"create",(t=>new L(t))),e=e.default})()}));
+
+});
+
+var Pickr = /*@__PURE__*/getDefaultExportFromCjs(pickr_min);
+
+const DEFAULT_SETTINGS = {
+ viewImageEditor: true,
+ viewImageInCPB: true,
+ viewImageWithALink: true,
+ viewImageOther: true,
+ pinMode: false,
+ pinMaximum: 3,
+ pinCoverMode: true,
+ imageMoveSpeed: 10,
+ imgTipToggle: true,
+ imgFullScreenMode: IMG_FULL_SCREEN_MODE.FIT,
+ imgViewBackgroundColor: IMG_DEFAULT_BACKGROUND_COLOR,
+ imageBorderToggle: false,
+ imageBorderWidth: IMG_BORDER_WIDTH.MEDIUM,
+ imageBorderStyle: IMG_BORDER_STYLE.SOLID,
+ imageBorderColor: IMG_BORDER_COLOR.RED,
+ galleryNavbarToggle: true,
+ galleryNavbarDefaultColor: GALLERY_NAVBAR_DEFAULT_COLOR,
+ galleryNavbarHoverColor: GALLERY_NAVBAR_HOVER_COLOR,
+ galleryImgBorderActive: true,
+ galleryImgBorderActiveColor: GALLERY_IMG_BORDER_ACTIVE_COLOR,
+ // hotkeys conf
+ moveTheImageHotkey: MOVE_THE_IMAGE.DEFAULT_HOTKEY,
+ switchTheImageHotkey: SWITCH_THE_IMAGE.DEFAULT_HOTKEY,
+ doubleClickToolbar: TOOLBAR_CONF[3].class,
+ viewTriggerHotkey: MODIFIER_HOTKEYS.NONE
+};
+class ImageToolkitSettingTab extends obsidian.PluginSettingTab {
+ constructor(app, plugin) {
+ super(app, plugin);
+ this.plugin = plugin;
+ }
+ display() {
+ let { containerEl } = this;
+ containerEl.empty();
+ containerEl.createEl('h2', { text: t("IMAGE_TOOLKIT_SETTINGS_TITLE") });
+ //region >>> VIEW_TRIGGER_SETTINGS
+ containerEl.createEl('h3', { text: t("VIEW_TRIGGER_SETTINGS") });
+ new obsidian.Setting(containerEl)
+ .setName(t("VIEW_IMAGE_EDITOR_NAME"))
+ .setDesc(t("VIEW_IMAGE_EDITOR_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.viewImageEditor)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.viewImageEditor = value;
+ this.plugin.toggleViewImage();
+ yield this.plugin.saveSettings();
+ })));
+ new obsidian.Setting(containerEl)
+ .setName(t("VIEW_IMAGE_IN_CPB_NAME"))
+ .setDesc(t("VIEW_IMAGE_IN_CPB_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.viewImageInCPB)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.viewImageInCPB = value;
+ this.plugin.toggleViewImage();
+ yield this.plugin.saveSettings();
+ })));
+ new obsidian.Setting(containerEl)
+ .setName(t("VIEW_IMAGE_WITH_A_LINK_NAME"))
+ .setDesc(t("VIEW_IMAGE_WITH_A_LINK_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.viewImageWithALink)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.viewImageWithALink = value;
+ this.plugin.toggleViewImage();
+ yield this.plugin.saveSettings();
+ })));
+ new obsidian.Setting(containerEl)
+ .setName(t("VIEW_IMAGE_OTHER_NAME"))
+ .setDesc(t("VIEW_IMAGE_OTHER_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.viewImageOther)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.viewImageOther = value;
+ this.plugin.toggleViewImage();
+ yield this.plugin.saveSettings();
+ })));
+ //endregion
+ //region >>> PIN_MODE_SETTINGS
+ let pinMaximumSetting, pinCoverSetting;
+ containerEl.createEl('h3', { text: t("PIN_MODE_SETTINGS") });
+ new obsidian.Setting(containerEl)
+ .setName(t("PIN_MODE_NAME"))
+ .setDesc(t("PIN_MODE_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.pinMode)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.pinMode = value;
+ this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting);
+ this.plugin.togglePinMode(value);
+ yield this.plugin.saveSettings();
+ })));
+ let pinMaximumScaleText;
+ pinMaximumSetting = new obsidian.Setting(containerEl)
+ .setName(t("PIN_MAXIMUM_NAME"))
+ .addSlider(slider => slider
+ .setLimits(1, 5, 1)
+ .setValue(this.plugin.settings.pinMaximum)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ var _a;
+ pinMaximumScaleText.innerText = " " + value.toString();
+ this.plugin.settings.pinMaximum = value;
+ (_a = this.plugin.containerView) === null || _a === void 0 ? void 0 : _a.setPinMaximum(value);
+ this.plugin.saveSettings();
+ })));
+ pinMaximumSetting.settingEl.createDiv('', (el) => {
+ pinMaximumScaleText = el;
+ el.style.minWidth = "2.3em";
+ el.style.textAlign = "right";
+ el.innerText = " " + this.plugin.settings.pinMaximum.toString();
+ });
+ pinCoverSetting = new obsidian.Setting(containerEl)
+ .setName(t("PIN_COVER_NAME"))
+ .setDesc(t("PIN_COVER_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.pinCoverMode)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.pinCoverMode = value;
+ yield this.plugin.saveSettings();
+ })));
+ this.switchSettingsDisabled(!this.plugin.settings.pinMode, pinMaximumSetting, pinCoverSetting);
+ //endregion
+ //region >>> VIEW_DETAILS_SETTINGS
+ containerEl.createEl('h3', { text: t("VIEW_DETAILS_SETTINGS") });
+ let imgMoveSpeedScaleText;
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_MOVE_SPEED_NAME"))
+ .setDesc(t("IMAGE_MOVE_SPEED_DESC"))
+ .addSlider(slider => slider
+ .setLimits(1, 30, 1)
+ .setValue(this.plugin.settings.imageMoveSpeed)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ imgMoveSpeedScaleText.innerText = " " + value.toString();
+ this.plugin.settings.imageMoveSpeed = value;
+ this.plugin.saveSettings();
+ })))
+ .settingEl.createDiv('', (el) => {
+ imgMoveSpeedScaleText = el;
+ el.style.minWidth = "2.3em";
+ el.style.textAlign = "right";
+ el.innerText = " " + this.plugin.settings.imageMoveSpeed.toString();
+ });
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_TIP_TOGGLE_NAME"))
+ .setDesc(t("IMAGE_TIP_TOGGLE_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.imgTipToggle)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imgTipToggle = value;
+ yield this.plugin.saveSettings();
+ })));
+ new obsidian.Setting(containerEl)
+ .setName(t("IMG_FULL_SCREEN_MODE_NAME"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ for (const key in IMG_FULL_SCREEN_MODE) {
+ // @ts-ignore
+ dropdown.addOption(key, t(key));
+ }
+ dropdown.setValue(this.plugin.settings.imgFullScreenMode);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imgFullScreenMode = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ this.createPickrSetting(containerEl, 'IMG_VIEW_BACKGROUND_COLOR_NAME', IMG_DEFAULT_BACKGROUND_COLOR);
+ //endregion
+ //region >>> IMAGE_BORDER_SETTINGS
+ containerEl.createEl('h3', { text: t("IMAGE_BORDER_SETTINGS") });
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_BORDER_TOGGLE_NAME"))
+ .setDesc(t("IMAGE_BORDER_TOGGLE_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.imageBorderToggle)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imageBorderToggle = value;
+ yield this.plugin.saveSettings();
+ })));
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_BORDER_WIDTH_NAME"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ for (const key in IMG_BORDER_WIDTH) {
+ // @ts-ignore
+ dropdown.addOption(IMG_BORDER_WIDTH[key], t(key));
+ }
+ dropdown.setValue(this.plugin.settings.imageBorderWidth);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imageBorderWidth = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_BORDER_STYLE_NAME"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ for (const key in IMG_BORDER_STYLE) {
+ // @ts-ignore
+ dropdown.addOption(IMG_BORDER_STYLE[key], t(key));
+ }
+ dropdown.setValue(this.plugin.settings.imageBorderStyle);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imageBorderStyle = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ new obsidian.Setting(containerEl)
+ .setName(t("IMAGE_BORDER_COLOR_NAME"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ for (const key in IMG_BORDER_COLOR) {
+ // @ts-ignore
+ dropdown.addOption(IMG_BORDER_COLOR[key], t(key));
+ }
+ dropdown.setValue(this.plugin.settings.imageBorderColor);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.imageBorderColor = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ //endregion
+ //region >>> GALLERY_NAVBAR_SETTINGS
+ let galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting;
+ containerEl.createEl('h3', { text: t("GALLERY_NAVBAR_SETTINGS") });
+ new obsidian.Setting(containerEl)
+ .setName(t("GALLERY_NAVBAR_TOGGLE_NAME"))
+ .setDesc(t("GALLERY_NAVBAR_TOGGLE_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.galleryNavbarToggle)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.galleryNavbarToggle = value;
+ this.switchSettingsDisabled(!value, galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting);
+ yield this.plugin.saveSettings();
+ })));
+ galleryNavbarDefaultColorSetting = this.createPickrSetting(containerEl, 'GALLERY_NAVBAR_DEFAULT_COLOR_NAME', GALLERY_NAVBAR_DEFAULT_COLOR);
+ galleryNavbarHoverColorSetting = this.createPickrSetting(containerEl, 'GALLERY_NAVBAR_HOVER_COLOR_NAME', GALLERY_NAVBAR_HOVER_COLOR);
+ galleryImgBorderToggleSetting = new obsidian.Setting(containerEl)
+ .setName(t("GALLERY_IMG_BORDER_TOGGLE_NAME"))
+ .setDesc(t("GALLERY_IMG_BORDER_TOGGLE_DESC"))
+ .addToggle(toggle => toggle
+ .setValue(this.plugin.settings.galleryImgBorderActive)
+ .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.galleryImgBorderActive = value;
+ yield this.plugin.saveSettings();
+ })));
+ galleryImgBorderActiveColorSetting = this.createPickrSetting(containerEl, 'GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME', GALLERY_IMG_BORDER_ACTIVE_COLOR);
+ this.switchSettingsDisabled(!this.plugin.settings.galleryNavbarToggle, galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting);
+ //endregion
+ //region >>> HOTKEYS_SETTINGS
+ containerEl.createEl('h3', { text: t("HOTKEY_SETTINGS") });
+ containerEl.createEl('p', { text: t("HOTKEY_SETTINGS_DESC") });
+ if (this.plugin.settings.moveTheImageHotkey === this.plugin.settings.switchTheImageHotkey) {
+ this.plugin.settings.moveTheImageHotkey = MOVE_THE_IMAGE.DEFAULT_HOTKEY;
+ }
+ const moveTheImageSetting = new obsidian.Setting(containerEl)
+ .setName(t("MOVE_THE_IMAGE_NAME"))
+ .setDesc(t("MOVE_THE_IMAGE_DESC"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ dropdown.addOptions(this.getDropdownOptions());
+ dropdown.setValue(this.plugin.settings.moveTheImageHotkey);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.moveTheImageHotkey = option;
+ this.checkDropdownOptions(MOVE_THE_IMAGE.CODE, switchTheImageSetting);
+ yield this.plugin.saveSettings();
+ }));
+ })).then((setting) => {
+ setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button hotkeys-settings-plus', (el) => {
+ el.innerHTML = "+";
+ }));
+ setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button', (el) => {
+ el.innerHTML = MOVE_THE_IMAGE.SVG;
+ }));
+ });
+ if (this.plugin.settings.switchTheImageHotkey === this.plugin.settings.moveTheImageHotkey) {
+ this.plugin.settings.switchTheImageHotkey = SWITCH_THE_IMAGE.DEFAULT_HOTKEY;
+ }
+ const switchTheImageSetting = new obsidian.Setting(containerEl)
+ .setName(t("SWITCH_THE_IMAGE_NAME"))
+ .setDesc(t("SWITCH_THE_IMAGE_DESC"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ dropdown.addOptions(this.getDropdownOptions());
+ dropdown.setValue(this.plugin.settings.switchTheImageHotkey);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.switchTheImageHotkey = option;
+ this.checkDropdownOptions(SWITCH_THE_IMAGE.CODE, moveTheImageSetting);
+ yield this.plugin.saveSettings();
+ }));
+ })).then((setting) => {
+ setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button hotkeys-settings-plus', (el) => {
+ el.innerHTML = "+";
+ }));
+ setting.controlEl.appendChild(createDiv('setting-editor-extra-setting-button', (el) => {
+ el.innerHTML = SWITCH_THE_IMAGE.SVG;
+ }));
+ });
+ if (switchTheImageSetting) {
+ this.checkDropdownOptions(MOVE_THE_IMAGE.CODE, switchTheImageSetting);
+ }
+ if (moveTheImageSetting) {
+ this.checkDropdownOptions(SWITCH_THE_IMAGE.CODE, moveTheImageSetting);
+ }
+ new obsidian.Setting(containerEl)
+ .setName(t("DOUBLE_CLICK_TOOLBAR_NAME"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ for (const conf of TOOLBAR_CONF) {
+ if (!conf.enableHotKey)
+ continue;
+ // @ts-ignore
+ dropdown.addOption(conf.class, t(conf.title));
+ }
+ dropdown.setValue(this.plugin.settings.doubleClickToolbar);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.doubleClickToolbar = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ new obsidian.Setting(containerEl)
+ .setName(t("VIEW_TRIGGER_HOTKEY_NAME"))
+ .setDesc(t("VIEW_TRIGGER_HOTKEY_DESC"))
+ .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () {
+ dropdown.addOptions(this.getDropdownOptions());
+ dropdown.setValue(this.plugin.settings.viewTriggerHotkey);
+ dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () {
+ this.plugin.settings.viewTriggerHotkey = option;
+ yield this.plugin.saveSettings();
+ }));
+ }));
+ //endregion
+ }
+ switchSettingsDisabled(disabled, ...settings) {
+ for (const setting of settings) {
+ setting === null || setting === void 0 ? void 0 : setting.setDisabled(disabled);
+ }
+ }
+ createPickrSetting(containerEl, name, defaultColor) {
+ let pickrDefault;
+ if ('GALLERY_NAVBAR_DEFAULT_COLOR_NAME' === name) {
+ pickrDefault = this.plugin.settings.galleryNavbarDefaultColor;
+ }
+ else if ('GALLERY_NAVBAR_HOVER_COLOR_NAME' === name) {
+ pickrDefault = this.plugin.settings.galleryNavbarHoverColor;
+ }
+ else if ('GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME' === name) {
+ pickrDefault = this.plugin.settings.galleryImgBorderActiveColor;
+ }
+ else if ('IMG_VIEW_BACKGROUND_COLOR_NAME' === name) {
+ pickrDefault = this.plugin.settings.imgViewBackgroundColor;
+ }
+ else {
+ pickrDefault = defaultColor;
+ }
+ let pickr;
+ return new obsidian.Setting(containerEl)
+ // @ts-ignore
+ .setName(t(name))
+ .then((setting) => {
+ pickr = Pickr.create({
+ el: setting.controlEl.createDiv({ cls: "picker" }),
+ theme: 'nano',
+ position: "left-middle",
+ lockOpacity: false,
+ default: pickrDefault,
+ swatches: [],
+ components: {
+ preview: true,
+ hue: true,
+ opacity: true,
+ interaction: {
+ hex: true,
+ rgba: true,
+ hsla: false,
+ input: true,
+ cancel: true,
+ save: true,
+ },
+ }
+ })
+ .on('show', (color, instance) => {
+ if (!this.plugin.settings.galleryNavbarToggle)
+ pickr === null || pickr === void 0 ? void 0 : pickr.hide();
+ const { result } = pickr.getRoot().interaction;
+ requestAnimationFrame(() => requestAnimationFrame(() => result.select()));
+ })
+ .on('save', (color, instance) => {
+ if (!color)
+ return;
+ instance.hide();
+ const savedColor = color.toHEXA().toString();
+ instance.addSwatch(savedColor);
+ this.setAndSavePickrSetting(name, savedColor);
+ })
+ .on('cancel', (instance) => {
+ instance.hide();
+ });
+ })
+ .addExtraButton((btn) => {
+ btn.setIcon("reset")
+ .onClick(() => {
+ pickr.setColor(defaultColor);
+ this.setAndSavePickrSetting(name, defaultColor);
+ })
+ .setTooltip('restore default color');
+ });
+ }
+ setAndSavePickrSetting(name, savedColor) {
+ var _a;
+ if ('GALLERY_NAVBAR_DEFAULT_COLOR_NAME' === name) {
+ this.plugin.settings.galleryNavbarDefaultColor = savedColor;
+ }
+ else if ('GALLERY_NAVBAR_HOVER_COLOR_NAME' === name) {
+ this.plugin.settings.galleryNavbarHoverColor = savedColor;
+ }
+ else if ('GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME' === name) {
+ this.plugin.settings.galleryImgBorderActiveColor = savedColor;
+ }
+ else if ('IMG_VIEW_BACKGROUND_COLOR_NAME' === name) {
+ this.plugin.settings.imgViewBackgroundColor = savedColor;
+ (_a = this.plugin.containerView) === null || _a === void 0 ? void 0 : _a.setImgViewDefaultBackgroundForImgList();
+ }
+ this.plugin.saveSettings();
+ }
+ getDropdownOptions() {
+ let options = {};
+ for (const key in MODIFIER_HOTKEYS) {
+ //@ts-ignore
+ options[key] = t(key);
+ }
+ return options;
+ }
+ checkDropdownOptions(code, setting) {
+ if (!setting || !setting.controlEl)
+ return;
+ const optionElList = setting.controlEl.getElementsByClassName('dropdown')[0].getElementsByTagName('option');
+ for (let i = 0, size = optionElList.length; i < size; i++) {
+ if (code === MOVE_THE_IMAGE.CODE) {
+ optionElList[i].disabled = optionElList[i].value === this.plugin.settings.moveTheImageHotkey;
+ }
+ else if (code === SWITCH_THE_IMAGE.CODE) {
+ optionElList[i].disabled = optionElList[i].value === this.plugin.settings.switchTheImageHotkey;
+ }
+ }
+ }
+}
+
+/**
+ * typescript class object for defining operating status of the image
+ */
+class ImgStatusCto {
+ constructor() {
+ // true: the popup layer of viewing image is displayed
+ this.popup = false;
+ // whether the image is being dragged
+ this.dragging = false;
+ // keybord pressing status
+ this.arrowUp = false;
+ this.arrowDown = false;
+ this.arrowLeft = false;
+ this.arrowRight = false;
+ this.fullScreen = false;
+ this.activeImgZIndex = 0;
+ this.clickCount = 0;
+ }
+}
+class ImgInfoCto {
+ constructor() {
+ this.imgList = new Array();
+ this.getPopupImgNum = () => {
+ let num = 0;
+ for (const imgCto of this.imgList) {
+ if (imgCto.popup)
+ num++;
+ }
+ return num;
+ };
+ }
+}
+class ImgCto {
+ constructor(index, mtime, imgViewEl) {
+ this.popup = false;
+ this.zIndex = 0;
+ this.curWidth = 0; // image's current width
+ this.curHeight = 0;
+ this.realWidth = 0; // image's real width
+ this.realHeight = 0;
+ this.left = 0; // margin-left
+ this.top = 0; // margin-top
+ this.moveX = 0; // 鼠标相对于图片的位置
+ this.moveY = 0;
+ this.rotate = 0; // rotateDeg
+ this.invertColor = false;
+ this.scaleX = false; // scaleX(-1)
+ this.scaleY = false; // scaleY(-1)
+ this.fullScreen = false; // whether the image is being previewed in full-screen mode
+ this.defaultImgStyle = {
+ transform: 'none',
+ filter: 'none',
+ mixBlendMode: 'normal',
+ borderWidth: '',
+ borderStyle: '',
+ borderColor: ''
+ };
+ this.index = index;
+ this.mtime = mtime;
+ this.imgViewEl = imgViewEl;
+ }
+}
+
+/**
+ * Image utility class
+ */
+class ImgUtil {
+ static copyText(text) {
+ navigator.clipboard.writeText(text)
+ .then(() => {
+ //console.log('copyText:', copyText);
+ })
+ .catch(err => {
+ console.error('copy text error', err);
+ });
+ }
+ static copyImage(imgEle, width, height) {
+ let image = new Image();
+ image.crossOrigin = 'anonymous';
+ image.src = imgEle.src;
+ image.onload = () => {
+ const canvas = document.createElement('canvas');
+ canvas.width = image.width;
+ canvas.height = image.height;
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = '#fff';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(image, 0, 0);
+ try {
+ canvas.toBlob((blob) => __awaiter(this, void 0, void 0, function* () {
+ yield navigator.clipboard.write([new ClipboardItem({ "image/png": blob })])
+ .then(() => {
+ new obsidian.Notice(t("COPY_IMAGE_SUCCESS"));
+ }, () => {
+ new obsidian.Notice(t("COPY_IMAGE_ERROR"));
+ });
+ }));
+ }
+ catch (error) {
+ new obsidian.Notice(t("COPY_IMAGE_ERROR"));
+ console.error(error);
+ }
+ };
+ image.onerror = () => {
+ new obsidian.Notice(t("COPY_IMAGE_ERROR"));
+ };
+ }
+}
+ImgUtil.calculateImgZoomSize = (realImg, imgCto) => {
+ const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
+ const windowHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 100;
+ const windowZoomWidth = windowWidth * ZOOM_FACTOR;
+ const windowZoomHeight = windowHeight * ZOOM_FACTOR;
+ let tempWidth = realImg.width, tempHeight = realImg.height;
+ if (realImg.height > windowZoomHeight) {
+ tempHeight = windowZoomHeight;
+ if ((tempWidth = tempHeight / realImg.height * realImg.width) > windowZoomWidth) {
+ tempWidth = windowZoomWidth;
+ }
+ }
+ else if (realImg.width > windowZoomWidth) {
+ tempWidth = windowZoomWidth;
+ tempHeight = tempWidth / realImg.width * realImg.height;
+ }
+ tempHeight = tempWidth * realImg.height / realImg.width;
+ // cache image info: curWidth, curHeight, realWidth, realHeight, left, top
+ imgCto.left = (windowWidth - tempWidth) / 2;
+ imgCto.top = (windowHeight - tempHeight) / 2;
+ imgCto.curWidth = tempWidth;
+ imgCto.curHeight = tempHeight;
+ imgCto.realWidth = realImg.width;
+ imgCto.realHeight = realImg.height;
+ /* console.log('calculateImgZoomSize', 'realImg: ' + realImg.width + ',' + realImg.height,
+ 'tempSize: ' + tempWidth + ',' + tempHeight,
+ 'windowZoomSize: ' + windowZoomWidth + ',' + windowZoomHeight,
+ 'windowSize: ' + windowWidth + ',' + windowHeight); */
+ return imgCto;
+};
+/**
+ * zoom an image
+ * @param ratio
+ * @param targetImgInfo
+ * @param offsetSize
+ * @param actualSize
+ * @returns
+ */
+ImgUtil.zoom = (ratio, targetImgInfo, offsetSize, actualSize) => {
+ let zoomRatio;
+ if (!actualSize) {
+ const zoomInFlag = ratio > 0;
+ ratio = zoomInFlag ? 1 + ratio : 1 / (1 - ratio);
+ zoomRatio = targetImgInfo.curWidth * ratio / targetImgInfo.realWidth;
+ }
+ // Snap to 100% zoom when we pass over it
+ const curRatio = targetImgInfo.curWidth / targetImgInfo.realWidth;
+ if (actualSize || (curRatio < 1 && zoomRatio > 1) || (curRatio > 1 && zoomRatio < 1)) {
+ // set zoom ratio to 100%
+ zoomRatio = 1;
+ // reduce snap offset ratio accordingly
+ ratio = 1 / curRatio;
+ }
+ let newWidth = targetImgInfo.realWidth * zoomRatio;
+ let newHeight = targetImgInfo.realHeight * zoomRatio;
+ if (IMG_VIEW_MIN >= newWidth || IMG_VIEW_MIN >= newHeight) {
+ // set minimum width or height
+ if (IMG_VIEW_MIN >= newWidth) {
+ newWidth = IMG_VIEW_MIN;
+ newHeight = (newWidth * targetImgInfo.realHeight) / targetImgInfo.realWidth;
+ }
+ else {
+ newHeight = IMG_VIEW_MIN;
+ newWidth = (newHeight * targetImgInfo.realWidth) / targetImgInfo.realHeight;
+ }
+ ratio = 1;
+ }
+ const left = targetImgInfo.left + offsetSize.offsetX * (1 - ratio);
+ const top = targetImgInfo.top + offsetSize.offsetY * (1 - ratio);
+ // cache image info: curWidth, curHeight, left, top
+ targetImgInfo.curWidth = newWidth;
+ targetImgInfo.curHeight = newHeight;
+ targetImgInfo.left = left;
+ targetImgInfo.top = top;
+ // return { newWidth, left, top };
+ return targetImgInfo;
+};
+ImgUtil.transform = (targetImgInfo) => {
+ let transform = 'rotate(' + targetImgInfo.rotate + 'deg)';
+ if (targetImgInfo.scaleX) {
+ transform += ' scaleX(-1)';
+ }
+ if (targetImgInfo.scaleY) {
+ transform += ' scaleY(-1)';
+ }
+ targetImgInfo.imgViewEl.style.setProperty('transform', transform);
+};
+ImgUtil.rotate = (degree, targetImgInfo) => {
+ targetImgInfo.imgViewEl.style.setProperty('transform', 'rotate(' + (targetImgInfo.rotate += degree) + 'deg)');
+};
+ImgUtil.invertImgColor = (imgEle, open) => {
+ if (open) {
+ imgEle.style.setProperty('filter', 'invert(1) hue-rotate(180deg)');
+ imgEle.style.setProperty('mix-blend-mode', 'screen');
+ }
+ else {
+ imgEle.style.setProperty('filter', 'none');
+ imgEle.style.setProperty('mix-blend-mode', 'normal');
+ }
+ // open ? imgEle.addClass('image-toolkit-img-invert') : imgEle.removeClass('image-toolkit-img-invert');
+};
+
+class ContainerView {
+ constructor(plugin, containerType, pinMaximum) {
+ this.lastClickedImgDefaultStyle = {
+ borderWidth: '',
+ borderStyle: '',
+ borderColor: ''
+ };
+ this.imgGlobalStatus = new ImgStatusCto();
+ this.imgInfoCto = new ImgInfoCto();
+ this.isPinMode = () => {
+ return 'PIN' === this.containerType;
+ };
+ this.setMenuView = (menuView) => {
+ this.menuView = menuView;
+ };
+ this.getPlugin = () => {
+ return this.plugin;
+ };
+ this.getLastClickedImgEl = () => {
+ return this.lastClickedImgEl;
+ };
+ this.getActiveImg = () => {
+ return this.imgGlobalStatus.activeImg;
+ };
+ this.setPinMaximum = (val) => {
+ this.pinMaximum = val;
+ };
+ this.getOitContainerViewEl = () => {
+ return this.imgInfoCto.imgContainerEl;
+ };
+ //region ================== Container View & Init ========================
+ /**
+ * render when clicking an image
+ * @param targetEl the clicked image's element
+ * @returns
+ */
+ this.renderContainerView = (targetEl) => {
+ if (!this.checkStatus())
+ return;
+ const matchedImg = this.initContainerView(targetEl, this.plugin.app.workspace.containerEl);
+ if (!matchedImg)
+ return;
+ this.openOitContainerView(matchedImg);
+ this.renderGalleryNavbar();
+ this.refreshImg(matchedImg, targetEl.src, targetEl.alt);
+ matchedImg.mtime = new Date().getTime();
+ };
+ this.initContainerView = (targetEl, containerEl) => {
+ const matchedImg = this.initContainerViewDom(containerEl);
+ if (!matchedImg)
+ return null;
+ matchedImg.targetOriginalImgEl = targetEl;
+ this.restoreBorderForLastClickedImg();
+ this.initDefaultData(matchedImg, window.getComputedStyle(targetEl));
+ this.addBorderForLastClickedImg(targetEl);
+ this.addOrRemoveEvents(matchedImg, true); // add events
+ return matchedImg;
+ };
+ this.removeOitContainerView = () => {
+ var _a;
+ this.restoreBorderForLastClickedImg();
+ this.removeGalleryNavbar();
+ (_a = this.imgInfoCto.oitContainerViewEl) === null || _a === void 0 ? void 0 : _a.remove();
+ this.imgInfoCto.oitContainerViewEl = null;
+ this.imgInfoCto.imgContainerEl = null;
+ this.imgGlobalStatus.dragging = false;
+ this.imgGlobalStatus.popup = false;
+ this.imgGlobalStatus.activeImgZIndex = 0;
+ this.imgGlobalStatus.fullScreen = false;
+ this.imgGlobalStatus.activeImg = null;
+ // clear imgList
+ this.imgInfoCto.imgList.length = 0;
+ };
+ this.checkStatus = () => {
+ if (!this.containerType)
+ return false;
+ let oitContainerViewClass;
+ switch (this.containerType) {
+ case 'MAIN':
+ if (this.plugin.settings.pinMode) {
+ return false;
+ }
+ oitContainerViewClass = 'oit-main-container-view';
+ break;
+ case 'PIN':
+ if (!this.plugin.settings.pinMode) {
+ return false;
+ }
+ oitContainerViewClass = 'oit-pin-container-view';
+ break;
+ default:
+ return false;
+ }
+ if (this.imgInfoCto.oitContainerViewEl) {
+ const containerElList = document.getElementsByClassName(oitContainerViewClass);
+ if (!containerElList || 0 >= containerElList.length) {
+ // when switch between workspaces, you should remove ContainerView
+ this.removeOitContainerView();
+ }
+ }
+ if (this.isPinMode() && this.plugin.settings.pinCoverMode) {
+ return true;
+ }
+ if (!this.imgGlobalStatus.popup)
+ return true;
+ return this.pinMaximum > this.imgInfoCto.getPopupImgNum();
+ };
+ this.initDefaultData = (matchedImg, targetImgStyle) => {
+ if (targetImgStyle) {
+ matchedImg.defaultImgStyle.transform = 'none';
+ matchedImg.defaultImgStyle.filter = targetImgStyle.filter;
+ matchedImg.defaultImgStyle.mixBlendMode = targetImgStyle.mixBlendMode;
+ matchedImg.defaultImgStyle.borderWidth = targetImgStyle.borderWidth;
+ matchedImg.defaultImgStyle.borderStyle = targetImgStyle.borderStyle;
+ matchedImg.defaultImgStyle.borderColor = targetImgStyle.borderColor;
+ this.lastClickedImgDefaultStyle.borderWidth = targetImgStyle.borderWidth;
+ this.lastClickedImgDefaultStyle.borderStyle = targetImgStyle.borderStyle;
+ this.lastClickedImgDefaultStyle.borderColor = targetImgStyle.borderColor;
+ }
+ this.imgGlobalStatus.dragging = false;
+ this.imgGlobalStatus.arrowUp = false;
+ this.imgGlobalStatus.arrowDown = false;
+ this.imgGlobalStatus.arrowLeft = false;
+ this.imgGlobalStatus.arrowRight = false;
+ matchedImg.invertColor = false;
+ matchedImg.scaleX = false;
+ matchedImg.scaleY = false;
+ matchedImg.fullScreen = false;
+ if (!this.imgGlobalStatus.popup) {
+ this.resetClickTimer();
+ }
+ };
+ /**
+ * set 'data-oit-target' and lastClickedImgEl
+ * @param targetEl
+ */
+ this.setLastClickedImg = (targetEl) => {
+ if (!targetEl)
+ return;
+ // 'data-oit-target' is set for locating current image
+ targetEl.setAttribute('data-oit-target', '1');
+ this.lastClickedImgEl = targetEl;
+ };
+ //endregion
+ //region ================== (Original) Image Border ========================
+ this.addBorderForLastClickedImg = (targetEl) => {
+ this.setLastClickedImg(targetEl);
+ if (!targetEl || !this.plugin.settings.imageBorderToggle)
+ return;
+ const lastClickedImgStyle = targetEl === null || targetEl === void 0 ? void 0 : targetEl.style;
+ if (!lastClickedImgStyle)
+ return;
+ lastClickedImgStyle.setProperty('border-width', this.plugin.settings.imageBorderWidth);
+ lastClickedImgStyle.setProperty('border-style', this.plugin.settings.imageBorderStyle);
+ lastClickedImgStyle.setProperty('border-color', this.plugin.settings.imageBorderColor);
+ };
+ /**
+ * remove 'data-oit-target'
+ * restore default border style
+ */
+ this.restoreBorderForLastClickedImg = () => {
+ if (!this.lastClickedImgEl)
+ return;
+ this.lastClickedImgEl.removeAttribute('data-oit-target');
+ const lastClickedImgStyle = this.lastClickedImgEl.style;
+ if (lastClickedImgStyle) {
+ lastClickedImgStyle.setProperty('border-width', this.lastClickedImgDefaultStyle.borderWidth);
+ lastClickedImgStyle.setProperty('border-style', this.lastClickedImgDefaultStyle.borderStyle);
+ lastClickedImgStyle.setProperty('border-color', this.lastClickedImgDefaultStyle.borderColor);
+ }
+ };
+ //endregion
+ //region ================== Image ========================
+ this.updateImgViewElAndList = (pinMaximum) => {
+ if (!this.imgInfoCto.imgContainerEl)
+ return;
+ const imgNum = this.imgInfoCto.imgList.length;
+ if (pinMaximum < imgNum) {
+ if (this.imgInfoCto.imgContainerEl) {
+ // remove all imgViewEl and imgList
+ this.imgInfoCto.imgContainerEl.innerHTML = '';
+ }
+ // clear imgList
+ this.imgInfoCto.imgList.length = 0;
+ }
+ let imgViewEl;
+ const curTime = new Date().getTime();
+ for (let i = imgNum; i < pinMaximum; i++) {
+ //
+ imgViewEl = createEl('img');
+ imgViewEl.addClass('img-view');
+ imgViewEl.hidden = true; // hide 'img-view' for now
+ imgViewEl.dataset.index = i + ''; // set data-index
+ this.setImgViewDefaultBackground(imgViewEl);
+ this.imgInfoCto.imgContainerEl.appendChild(imgViewEl);
+ // cache imgList
+ this.imgInfoCto.imgList.push(new ImgCto(i, curTime, imgViewEl));
+ }
+ };
+ this.getMatchedImg = () => {
+ let earliestImg;
+ for (const img of this.imgInfoCto.imgList) {
+ if (!earliestImg || earliestImg.mtime > img.mtime)
+ earliestImg = img;
+ if (img.popup)
+ continue;
+ return img;
+ }
+ if (this.plugin.settings.pinCoverMode) {
+ return earliestImg;
+ }
+ return null;
+ };
+ /**
+ * it may from: renderContainerView(), switch GalleryNavbarView, click toolbar_refresh
+ * @param imgCto
+ * @param imgSrc
+ * @param imgAlt
+ * @param imgTitleIndex
+ */
+ this.refreshImg = (imgCto, imgSrc, imgAlt, imgTitleIndex) => {
+ if (!imgSrc)
+ imgSrc = imgCto.imgViewEl.src;
+ if (!imgAlt)
+ imgAlt = imgCto.imgViewEl.alt;
+ this.renderImgTitle(imgAlt, imgTitleIndex);
+ if (imgSrc) {
+ if (imgCto.refreshImgInterval) {
+ clearInterval(imgCto.refreshImgInterval);
+ imgCto.refreshImgInterval = null;
+ }
+ let realImg = new Image();
+ realImg.src = imgSrc;
+ imgCto.refreshImgInterval = setInterval((realImg) => {
+ if (realImg.width > 0 || realImg.height > 0) {
+ clearInterval(imgCto.refreshImgInterval);
+ imgCto.refreshImgInterval = null;
+ this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto), 0);
+ this.renderImgView(imgCto.imgViewEl, imgSrc, imgAlt);
+ this.renderImgTip(imgCto);
+ imgCto.imgViewEl.style.setProperty('transform', imgCto.defaultImgStyle.transform);
+ imgCto.imgViewEl.style.setProperty('filter', imgCto.defaultImgStyle.filter);
+ imgCto.imgViewEl.style.setProperty('mix-blend-mode', imgCto.defaultImgStyle.mixBlendMode);
+ }
+ }, 40, realImg);
+ }
+ };
+ this.renderImgTitle = (name, index) => {
+ };
+ this.setImgViewPosition = (imgZoomSize, rotate) => {
+ const imgViewEl = imgZoomSize.imgViewEl;
+ if (!imgViewEl)
+ return;
+ if (imgZoomSize) {
+ imgViewEl.setAttribute('width', imgZoomSize.curWidth + 'px');
+ imgViewEl.style.setProperty('margin-top', imgZoomSize.top + 'px', 'important');
+ imgViewEl.style.setProperty('margin-left', imgZoomSize.left + 'px', 'important');
+ }
+ const rotateDeg = rotate ? rotate : 0;
+ imgViewEl.style.transform = 'rotate(' + rotateDeg + 'deg)';
+ imgZoomSize.rotate = rotateDeg;
+ };
+ this.renderImgView = (imgViewEl, src, alt) => {
+ if (!imgViewEl)
+ return;
+ imgViewEl.setAttribute('src', src);
+ imgViewEl.setAttribute('alt', alt);
+ imgViewEl.hidden = !src && !alt;
+ };
+ this.renderImgTip = (activeImg) => {
+ if (!activeImg)
+ activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg && this.imgInfoCto.imgTipEl && activeImg.realWidth > 0 && activeImg.curWidth > 0) {
+ if (this.imgInfoCto.imgTipTimeout) {
+ clearTimeout(this.imgInfoCto.imgTipTimeout);
+ }
+ if (this.plugin.settings.imgTipToggle) {
+ this.imgInfoCto.imgTipEl.hidden = false; // display 'img-tip'
+ const ratio = activeImg.curWidth * 100 / activeImg.realWidth;
+ const isSingleDigit = 10 > ratio;
+ const width = isSingleDigit ? 20 : 40;
+ const left = activeImg.left + activeImg.curWidth / 2 - width / 2;
+ const top = activeImg.top + activeImg.curHeight / 2 - 10;
+ this.imgInfoCto.imgTipEl.style.setProperty("width", width + 'px');
+ this.imgInfoCto.imgTipEl.style.setProperty("font-size", isSingleDigit || 100 >= activeImg.curWidth ? 'xx-small' : 'x-small');
+ this.imgInfoCto.imgTipEl.style.setProperty("left", left + 'px');
+ this.imgInfoCto.imgTipEl.style.setProperty("top", top + 'px');
+ this.imgInfoCto.imgTipEl.style.setProperty("z-index", activeImg.zIndex + '');
+ this.imgInfoCto.imgTipEl.setText(parseInt(ratio + '') + '%');
+ this.imgInfoCto.imgTipTimeout = setTimeout(() => {
+ this.imgInfoCto.imgTipEl.hidden = true;
+ }, 1000);
+ }
+ else {
+ this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip'
+ this.imgInfoCto.imgTipTimeout = null;
+ }
+ }
+ };
+ this.setImgViewDefaultBackgroundForImgList = () => {
+ for (const imgCto of this.imgInfoCto.imgList) {
+ this.setImgViewDefaultBackground(imgCto.imgViewEl);
+ }
+ };
+ this.setImgViewDefaultBackground = (imgViewEl) => {
+ if (!imgViewEl)
+ return;
+ if (this.plugin.settings.imgViewBackgroundColor && IMG_DEFAULT_BACKGROUND_COLOR != this.plugin.settings.imgViewBackgroundColor) {
+ imgViewEl.removeClass('img-default-background');
+ imgViewEl.style.setProperty('background-color', this.plugin.settings.imgViewBackgroundColor);
+ }
+ else {
+ imgViewEl.addClass('img-default-background');
+ imgViewEl.style.removeProperty('background-color');
+ }
+ };
+ this.setActiveImgZIndex = (activeImg) => {
+ };
+ //endregion
+ //region ================== Gallery NavBar ========================
+ this.switchImageOnGalleryNavBar = (event, next) => {
+ };
+ this.renderGalleryNavbar = () => {
+ };
+ this.removeGalleryNavbar = () => {
+ };
+ //endregion
+ //region ================== full screen ========================
+ /**
+ * full-screen mode
+ */
+ this.showPlayerImg = (activeImg) => {
+ if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg))
+ return;
+ this.imgGlobalStatus.fullScreen = true;
+ activeImg.fullScreen = true;
+ // activeImg.imgViewEl.style.setProperty('display', 'none', 'important'); // hide imgViewEl
+ // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'none'); // hide 'img-footer'
+ // show the img-player
+ this.imgInfoCto.imgPlayerEl.style.setProperty('display', 'block');
+ this.imgInfoCto.imgPlayerEl.style.setProperty('z-index', (this.imgGlobalStatus.activeImgZIndex + 10) + '');
+ this.imgInfoCto.imgPlayerEl.addEventListener('click', this.closePlayerImg);
+ const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
+ const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+ let newWidth, newHeight;
+ let top = 0;
+ if (IMG_FULL_SCREEN_MODE.STRETCH == this.plugin.settings.imgFullScreenMode) {
+ newWidth = windowWidth + 'px';
+ newHeight = windowHeight + 'px';
+ }
+ else if (IMG_FULL_SCREEN_MODE.FILL == this.plugin.settings.imgFullScreenMode) {
+ newWidth = '100%';
+ newHeight = '100%';
+ }
+ else {
+ // fit
+ const widthRatio = windowWidth / activeImg.realWidth;
+ const heightRatio = windowHeight / activeImg.realHeight;
+ if (widthRatio <= heightRatio) {
+ newWidth = windowWidth;
+ newHeight = widthRatio * activeImg.realHeight;
+ }
+ else {
+ newHeight = windowHeight;
+ newWidth = heightRatio * activeImg.realWidth;
+ }
+ top = (windowHeight - newHeight) / 2;
+ newWidth = newWidth + 'px';
+ newHeight = newHeight + 'px';
+ }
+ const imgPlayerImgViewEl = this.imgInfoCto.imgPlayerImgViewEl;
+ if (imgPlayerImgViewEl) {
+ imgPlayerImgViewEl.setAttribute('src', activeImg.imgViewEl.src);
+ imgPlayerImgViewEl.setAttribute('alt', activeImg.imgViewEl.alt);
+ imgPlayerImgViewEl.setAttribute('width', newWidth);
+ imgPlayerImgViewEl.setAttribute('height', newHeight);
+ imgPlayerImgViewEl.style.setProperty('margin-top', top + 'px');
+ //this.imgInfo.imgPlayerImgViewEl.style.setProperty('margin-left', left + 'px');
+ this.setImgViewDefaultBackground(imgPlayerImgViewEl);
+ }
+ };
+ /**
+ * close full screen
+ */
+ this.closePlayerImg = () => {
+ for (const imgCto of this.imgInfoCto.imgList) {
+ if (!imgCto.fullScreen)
+ continue;
+ // show the popped up image
+ // imgCto.imgViewEl?.style.setProperty('display', 'block', 'important');
+ // this.imgInfoCto.imgFooterEl?.style.setProperty('display', 'block');
+ }
+ // hide full screen
+ if (this.imgInfoCto.imgPlayerEl) {
+ this.imgInfoCto.imgPlayerEl.style.setProperty('display', 'none'); // hide 'img-player'
+ this.imgInfoCto.imgPlayerEl.removeEventListener('click', this.closePlayerImg);
+ }
+ if (this.imgInfoCto.imgPlayerImgViewEl) {
+ this.imgInfoCto.imgPlayerImgViewEl.setAttribute('src', '');
+ this.imgInfoCto.imgPlayerImgViewEl.setAttribute('alt', '');
+ }
+ this.imgGlobalStatus.fullScreen = false;
+ };
+ //endregion
+ //region ================== events ========================
+ this.addOrRemoveEvents = (matchedImg, isAdd) => {
+ if (isAdd) {
+ if (!this.imgGlobalStatus.popup) {
+ document.addEventListener('keydown', this.triggerKeydown);
+ document.addEventListener('keyup', this.triggerKeyup);
+ }
+ if (!this.isPinMode()) {
+ // click event: hide container view
+ this.imgInfoCto.oitContainerViewEl.addEventListener('click', this.closeContainerView);
+ }
+ matchedImg.imgViewEl.addEventListener('mouseenter', this.mouseenterImgView);
+ matchedImg.imgViewEl.addEventListener('mouseleave', this.mouseleaveImgView);
+ // drag the image via mouse
+ matchedImg.imgViewEl.addEventListener('mousedown', this.mousedownImgView);
+ matchedImg.imgViewEl.addEventListener('mouseup', this.mouseupImgView);
+ // zoom the image via mouse wheel
+ matchedImg.imgViewEl.addEventListener('mousewheel', this.mousewheelViewContainer, { passive: true });
+ }
+ else {
+ if (!this.imgGlobalStatus.popup) {
+ document.removeEventListener('keydown', this.triggerKeydown);
+ document.removeEventListener('keyup', this.triggerKeyup);
+ if (this.imgGlobalStatus.clickTimer) {
+ clearTimeout(this.imgGlobalStatus.clickTimer);
+ this.imgGlobalStatus.clickTimer = null;
+ this.imgGlobalStatus.clickCount = 0;
+ }
+ }
+ if (!this.isPinMode()) {
+ this.imgInfoCto.oitContainerViewEl.removeEventListener('click', this.closeContainerView);
+ }
+ matchedImg.imgViewEl.removeEventListener('mouseenter', this.mouseenterImgView);
+ matchedImg.imgViewEl.removeEventListener('mouseleave', this.mouseleaveImgView);
+ matchedImg.imgViewEl.removeEventListener('mousedown', this.mousedownImgView);
+ matchedImg.imgViewEl.removeEventListener('mouseup', this.mouseupImgView);
+ matchedImg.imgViewEl.removeEventListener('mousewheel', this.mousewheelViewContainer);
+ if (matchedImg.refreshImgInterval) {
+ clearInterval(matchedImg.refreshImgInterval);
+ matchedImg.refreshImgInterval = null;
+ }
+ }
+ };
+ this.triggerKeyup = (event) => {
+ // console.log('keyup', event, event.key);
+ const key = event.key;
+ if (!key)
+ return;
+ if (!('Escape' === key)) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ switch (key) {
+ case 'Escape':
+ // close full screen, hide container view
+ this.imgGlobalStatus.fullScreen ? this.closePlayerImg() : this.closeContainerView();
+ break;
+ case 'ArrowUp':
+ this.imgGlobalStatus.arrowUp = false;
+ break;
+ case 'ArrowDown':
+ this.imgGlobalStatus.arrowDown = false;
+ break;
+ case 'ArrowLeft':
+ this.imgGlobalStatus.arrowLeft = false;
+ // switch to the previous image on the gallery navBar
+ this.switchImageOnGalleryNavBar(event, false);
+ break;
+ case 'ArrowRight':
+ this.imgGlobalStatus.arrowRight = false;
+ // switch to the next image on the gallery navBar
+ this.switchImageOnGalleryNavBar(event, true);
+ break;
+ }
+ };
+ /**
+ * move the image by keyboard
+ * @param event
+ */
+ this.triggerKeydown = (event) => {
+ //console.log('keydown', event, event.key, this.imgStatus);
+ if (this.isPinMode())
+ return;
+ event.preventDefault();
+ event.stopPropagation();
+ if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowLeft) {
+ this.moveImgViewByHotkey(event, 'UP_LEFT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowUp && this.imgGlobalStatus.arrowRight) {
+ this.moveImgViewByHotkey(event, 'UP_RIGHT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowLeft) {
+ this.moveImgViewByHotkey(event, 'DOWN_LEFT');
+ return;
+ }
+ else if (this.imgGlobalStatus.arrowDown && this.imgGlobalStatus.arrowRight) {
+ this.moveImgViewByHotkey(event, 'DOWN_RIGHT');
+ return;
+ }
+ switch (event.key) {
+ case 'ArrowUp':
+ this.imgGlobalStatus.arrowUp = true;
+ this.moveImgViewByHotkey(event, 'UP');
+ break;
+ case 'ArrowDown':
+ this.imgGlobalStatus.arrowDown = true;
+ this.moveImgViewByHotkey(event, 'DOWN');
+ break;
+ case 'ArrowLeft':
+ this.imgGlobalStatus.arrowLeft = true;
+ this.moveImgViewByHotkey(event, 'LEFT');
+ break;
+ case 'ArrowRight':
+ this.imgGlobalStatus.arrowRight = true;
+ this.moveImgViewByHotkey(event, 'RIGHT');
+ break;
+ }
+ };
+ this.moveImgViewByHotkey = (event, orientation) => {
+ if (!orientation || !this.imgGlobalStatus.popup || !this.checkHotkeySettings(event, this.plugin.settings.moveTheImageHotkey))
+ return;
+ switch (orientation) {
+ case 'UP':
+ this.mousemoveImgView(null, { offsetX: 0, offsetY: -this.plugin.settings.imageMoveSpeed });
+ break;
+ case 'DOWN':
+ this.mousemoveImgView(null, { offsetX: 0, offsetY: this.plugin.settings.imageMoveSpeed });
+ break;
+ case 'LEFT':
+ this.mousemoveImgView(null, { offsetX: -this.plugin.settings.imageMoveSpeed, offsetY: 0 });
+ break;
+ case 'RIGHT':
+ this.mousemoveImgView(null, { offsetX: this.plugin.settings.imageMoveSpeed, offsetY: 0 });
+ break;
+ case 'UP_LEFT':
+ this.mousemoveImgView(null, {
+ offsetX: -this.plugin.settings.imageMoveSpeed,
+ offsetY: -this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'UP_RIGHT':
+ this.mousemoveImgView(null, {
+ offsetX: this.plugin.settings.imageMoveSpeed,
+ offsetY: -this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'DOWN_LEFT':
+ this.mousemoveImgView(null, {
+ offsetX: -this.plugin.settings.imageMoveSpeed,
+ offsetY: this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ case 'DOWN_RIGHT':
+ this.mousemoveImgView(null, {
+ offsetX: this.plugin.settings.imageMoveSpeed,
+ offsetY: this.plugin.settings.imageMoveSpeed
+ });
+ break;
+ }
+ };
+ this.checkHotkeySettings = (event, hotkey) => {
+ switch (hotkey) {
+ case "NONE":
+ return !event.ctrlKey && !event.altKey && !event.shiftKey;
+ case "CTRL":
+ return event.ctrlKey && !event.altKey && !event.shiftKey;
+ case "ALT":
+ return !event.ctrlKey && event.altKey && !event.shiftKey;
+ case "SHIFT":
+ return !event.ctrlKey && !event.altKey && event.shiftKey;
+ case "CTRL_ALT":
+ return event.ctrlKey && event.altKey && !event.shiftKey;
+ case "CTRL_SHIFT":
+ return event.ctrlKey && !event.altKey && event.shiftKey;
+ case "SHIFT_ALT":
+ return !event.ctrlKey && event.altKey && event.shiftKey;
+ case "CTRL_SHIFT_ALT":
+ return event.ctrlKey && event.altKey && event.shiftKey;
+ }
+ return false;
+ };
+ this.mouseenterImgView = (event) => {
+ this.resetClickTimer();
+ event.stopPropagation();
+ event.preventDefault();
+ this.getAndUpdateActiveImg(event);
+ // console.log('mouseenterImgView', event, this.imgGlobalStatus.activeImg);
+ };
+ this.mousedownImgView = (event) => {
+ // console.log('mousedownImgView', event, this.imgGlobalStatus.activeImg, event.button);
+ event.stopPropagation();
+ event.preventDefault();
+ const activeImg = this.getAndUpdateActiveImg(event);
+ if (!activeImg)
+ return;
+ if (0 == event.button) { // left click
+ this.setClickTimer(activeImg);
+ this.setActiveImgZIndex(activeImg);
+ this.imgGlobalStatus.dragging = true;
+ // 鼠标相对于图片的位置
+ activeImg.moveX = activeImg.imgViewEl.offsetLeft - event.clientX;
+ activeImg.moveY = activeImg.imgViewEl.offsetTop - event.clientY;
+ // 鼠标按下时持续触发/移动事件
+ activeImg.imgViewEl.onmousemove = this.mousemoveImgView;
+ }
+ };
+ /**
+ * move the image by mouse or keyboard
+ * @param event
+ * @param offsetSize
+ */
+ this.mousemoveImgView = (event, offsetSize) => {
+ // console.log('mousemoveImgView', event, this.imgGlobalStatus.activeImg);
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (!activeImg)
+ return;
+ if (event) {
+ if (!this.imgGlobalStatus.dragging)
+ return;
+ // drag via mouse cursor (Both Mode)
+ activeImg.left = event.clientX + activeImg.moveX;
+ activeImg.top = event.clientY + activeImg.moveY;
+ }
+ else if (offsetSize) {
+ // move by arrow keys (Normal Mode)
+ activeImg.left += offsetSize.offsetX;
+ activeImg.top += offsetSize.offsetY;
+ }
+ else {
+ return;
+ }
+ // move the image
+ activeImg.imgViewEl.style.setProperty('margin-left', activeImg.left + 'px', 'important');
+ activeImg.imgViewEl.style.setProperty('margin-top', activeImg.top + 'px', 'important');
+ };
+ this.mouseupImgView = (event) => {
+ var _a;
+ // console.log('mouseupImgView', event, this.imgGlobalStatus.activeImg);
+ this.imgGlobalStatus.dragging = false;
+ event.preventDefault();
+ event.stopPropagation();
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg) {
+ activeImg.imgViewEl.onmousemove = null;
+ if (2 == event.button) { // right click
+ (_a = this.menuView) === null || _a === void 0 ? void 0 : _a.show(event, activeImg);
+ }
+ }
+ };
+ this.mouseleaveImgView = (event) => {
+ // console.log('mouseleaveImgView', event, this.imgGlobalStatus.activeImg, '>>> set null');
+ this.imgGlobalStatus.dragging = false;
+ this.resetClickTimer();
+ event.preventDefault();
+ event.stopPropagation();
+ const activeImg = this.imgGlobalStatus.activeImg;
+ if (activeImg) {
+ activeImg.imgViewEl.onmousemove = null;
+ this.setActiveImgForMouseEvent(null); // for pin mode
+ }
+ };
+ this.setClickTimer = (activeImg) => {
+ ++this.imgGlobalStatus.clickCount;
+ clearTimeout(this.imgGlobalStatus.clickTimer);
+ this.imgGlobalStatus.clickTimer = setTimeout(() => {
+ const clickCount = this.imgGlobalStatus.clickCount;
+ this.resetClickTimer();
+ if (2 === clickCount) { // double click
+ if (!activeImg)
+ activeImg = this.imgGlobalStatus.activeImg;
+ // console.log('mousedownImgView: double click...', activeImg.index);
+ this.clickImgToolbar(null, this.plugin.settings.doubleClickToolbar, activeImg);
+ }
+ }, 200);
+ };
+ this.resetClickTimer = () => {
+ this.imgGlobalStatus.clickTimer = null;
+ this.imgGlobalStatus.clickCount = 0;
+ };
+ this.getAndUpdateActiveImg = (event) => {
+ const targetEl = event.target;
+ let index;
+ if (!targetEl || !(index = targetEl.dataset.index))
+ return;
+ const activeImg = this.imgInfoCto.imgList[parseInt(index)];
+ if (activeImg && (!this.imgGlobalStatus.activeImg || activeImg.index !== this.imgGlobalStatus.activeImg.index)) {
+ this.setActiveImgForMouseEvent(activeImg); // update activeImg
+ }
+ // console.log('getAndUpdateActiveImg: ', activeImg)
+ return activeImg;
+ };
+ this.mousewheelViewContainer = (event) => {
+ // event.preventDefault();
+ event.stopPropagation();
+ // @ts-ignore
+ this.zoomAndRender(0 < event.wheelDelta ? 0.1 : -0.1, event);
+ };
+ this.zoomAndRender = (ratio, event, actualSize, activeImg) => {
+ if (!activeImg) {
+ activeImg = this.imgGlobalStatus.activeImg;
+ }
+ let activeImgViewEl;
+ if (!activeImg || !(activeImgViewEl = activeImg.imgViewEl))
+ return;
+ let offsetSize = { offsetX: 0, offsetY: 0 };
+ if (event) {
+ offsetSize.offsetX = event.offsetX;
+ offsetSize.offsetY = event.offsetY;
+ }
+ else {
+ offsetSize.offsetX = activeImg.curWidth / 2;
+ offsetSize.offsetY = activeImg.curHeight / 2;
+ }
+ const zoomData = ImgUtil.zoom(ratio, activeImg, offsetSize, actualSize);
+ this.renderImgTip(activeImg);
+ activeImgViewEl.setAttribute('width', zoomData.curWidth + 'px');
+ activeImgViewEl.style.setProperty('margin-top', zoomData.top + 'px', 'important');
+ activeImgViewEl.style.setProperty('margin-left', zoomData.left + 'px', 'important');
+ };
+ this.clickImgToolbar = (event, targetElClass, activeImg) => {
+ if (!targetElClass && !activeImg) {
+ if (!event)
+ return;
+ // comes from clicking toolbar
+ targetElClass = event.target.className;
+ activeImg = this.imgGlobalStatus.activeImg;
+ }
+ switch (targetElClass) {
+ case 'toolbar_zoom_to_100':
+ this.zoomAndRender(null, null, true, activeImg);
+ break;
+ case 'toolbar_zoom_in':
+ this.zoomAndRender(0.1);
+ break;
+ case 'toolbar_zoom_out':
+ this.zoomAndRender(-0.1);
+ break;
+ case 'toolbar_full_screen':
+ this.showPlayerImg(activeImg);
+ break;
+ case 'toolbar_refresh':
+ this.refreshImg(activeImg);
+ break;
+ case 'toolbar_rotate_left':
+ activeImg.rotate -= 90;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_rotate_right':
+ activeImg.rotate += 90;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_scale_x':
+ activeImg.scaleX = !activeImg.scaleX;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_scale_y':
+ activeImg.scaleY = !activeImg.scaleY;
+ ImgUtil.transform(activeImg);
+ break;
+ case 'toolbar_invert_color':
+ activeImg.invertColor = !activeImg.invertColor;
+ ImgUtil.invertImgColor(activeImg.imgViewEl, activeImg.invertColor);
+ break;
+ case 'toolbar_copy':
+ ImgUtil.copyImage(activeImg.imgViewEl, activeImg.curWidth, activeImg.curHeight);
+ break;
+ case 'toolbar_close':
+ this.closeContainerView(event, activeImg);
+ break;
+ }
+ };
+ this.plugin = plugin;
+ this.containerType = containerType;
+ this.pinMaximum = pinMaximum;
+ }
+}
+
+var Md5 = /** @class */ (function () {
+ function Md5() {
+ }
+ Md5.AddUnsigned = function (lX, lY) {
+ var lX4, lY4, lX8, lY8, lResult;
+ lX8 = (lX & 0x80000000);
+ lY8 = (lY & 0x80000000);
+ lX4 = (lX & 0x40000000);
+ lY4 = (lY & 0x40000000);
+ lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
+ if (!!(lX4 & lY4)) {
+ return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
+ }
+ if (!!(lX4 | lY4)) {
+ if (!!(lResult & 0x40000000)) {
+ return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
+ }
+ else {
+ return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
+ }
+ }
+ else {
+ return (lResult ^ lX8 ^ lY8);
+ }
+ };
+ Md5.FF = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.F(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.GG = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.G(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.HH = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.H(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.II = function (a, b, c, d, x, s, ac) {
+ a = this.AddUnsigned(a, this.AddUnsigned(this.AddUnsigned(this.I(b, c, d), x), ac));
+ return this.AddUnsigned(this.RotateLeft(a, s), b);
+ };
+ Md5.ConvertToWordArray = function (string) {
+ var lWordCount, lMessageLength = string.length, lNumberOfWords_temp1 = lMessageLength + 8, lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64, lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16, lWordArray = Array(lNumberOfWords - 1), lBytePosition = 0, lByteCount = 0;
+ while (lByteCount < lMessageLength) {
+ lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+ lBytePosition = (lByteCount % 4) * 8;
+ lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
+ lByteCount++;
+ }
+ lWordCount = (lByteCount - (lByteCount % 4)) / 4;
+ lBytePosition = (lByteCount % 4) * 8;
+ lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
+ lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
+ lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
+ return lWordArray;
+ };
+ Md5.WordToHex = function (lValue) {
+ var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
+ for (lCount = 0; lCount <= 3; lCount++) {
+ lByte = (lValue >>> (lCount * 8)) & 255;
+ WordToHexValue_temp = "0" + lByte.toString(16);
+ WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
+ }
+ return WordToHexValue;
+ };
+ Md5.Utf8Encode = function (string) {
+ var utftext = "", c;
+ string = string.replace(/\r\n/g, "\n");
+ for (var n = 0; n < string.length; n++) {
+ c = string.charCodeAt(n);
+ if (c < 128) {
+ utftext += String.fromCharCode(c);
+ }
+ else if ((c > 127) && (c < 2048)) {
+ utftext += String.fromCharCode((c >> 6) | 192);
+ utftext += String.fromCharCode((c & 63) | 128);
+ }
+ else {
+ utftext += String.fromCharCode((c >> 12) | 224);
+ utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+ utftext += String.fromCharCode((c & 63) | 128);
+ }
+ }
+ return utftext;
+ };
+ Md5.init = function (string) {
+ var temp;
+ if (typeof string !== 'string')
+ string = JSON.stringify(string);
+ this._string = this.Utf8Encode(string);
+ this.x = this.ConvertToWordArray(this._string);
+ this.a = 0x67452301;
+ this.b = 0xEFCDAB89;
+ this.c = 0x98BADCFE;
+ this.d = 0x10325476;
+ for (this.k = 0; this.k < this.x.length; this.k += 16) {
+ this.AA = this.a;
+ this.BB = this.b;
+ this.CC = this.c;
+ this.DD = this.d;
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k], this.S11, 0xD76AA478);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 1], this.S12, 0xE8C7B756);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S13, 0x242070DB);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 3], this.S14, 0xC1BDCEEE);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S11, 0xF57C0FAF);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 5], this.S12, 0x4787C62A);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S13, 0xA8304613);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 7], this.S14, 0xFD469501);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S11, 0x698098D8);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 9], this.S12, 0x8B44F7AF);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S13, 0xFFFF5BB1);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 11], this.S14, 0x895CD7BE);
+ this.a = this.FF(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S11, 0x6B901122);
+ this.d = this.FF(this.d, this.a, this.b, this.c, this.x[this.k + 13], this.S12, 0xFD987193);
+ this.c = this.FF(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S13, 0xA679438E);
+ this.b = this.FF(this.b, this.c, this.d, this.a, this.x[this.k + 15], this.S14, 0x49B40821);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S21, 0xF61E2562);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 6], this.S22, 0xC040B340);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S23, 0x265E5A51);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k], this.S24, 0xE9B6C7AA);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S21, 0xD62F105D);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 10], this.S22, 0x2441453);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S23, 0xD8A1E681);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 4], this.S24, 0xE7D3FBC8);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S21, 0x21E1CDE6);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 14], this.S22, 0xC33707D6);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S23, 0xF4D50D87);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 8], this.S24, 0x455A14ED);
+ this.a = this.GG(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S21, 0xA9E3E905);
+ this.d = this.GG(this.d, this.a, this.b, this.c, this.x[this.k + 2], this.S22, 0xFCEFA3F8);
+ this.c = this.GG(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S23, 0x676F02D9);
+ this.b = this.GG(this.b, this.c, this.d, this.a, this.x[this.k + 12], this.S24, 0x8D2A4C8A);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 5], this.S31, 0xFFFA3942);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 8], this.S32, 0x8771F681);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 11], this.S33, 0x6D9D6122);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 14], this.S34, 0xFDE5380C);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 1], this.S31, 0xA4BEEA44);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 4], this.S32, 0x4BDECFA9);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 7], this.S33, 0xF6BB4B60);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 10], this.S34, 0xBEBFBC70);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 13], this.S31, 0x289B7EC6);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k], this.S32, 0xEAA127FA);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 3], this.S33, 0xD4EF3085);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 6], this.S34, 0x4881D05);
+ this.a = this.HH(this.a, this.b, this.c, this.d, this.x[this.k + 9], this.S31, 0xD9D4D039);
+ this.d = this.HH(this.d, this.a, this.b, this.c, this.x[this.k + 12], this.S32, 0xE6DB99E5);
+ this.c = this.HH(this.c, this.d, this.a, this.b, this.x[this.k + 15], this.S33, 0x1FA27CF8);
+ this.b = this.HH(this.b, this.c, this.d, this.a, this.x[this.k + 2], this.S34, 0xC4AC5665);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k], this.S41, 0xF4292244);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 7], this.S42, 0x432AFF97);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 14], this.S43, 0xAB9423A7);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 5], this.S44, 0xFC93A039);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 12], this.S41, 0x655B59C3);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 3], this.S42, 0x8F0CCC92);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 10], this.S43, 0xFFEFF47D);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 1], this.S44, 0x85845DD1);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 8], this.S41, 0x6FA87E4F);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 15], this.S42, 0xFE2CE6E0);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 6], this.S43, 0xA3014314);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 13], this.S44, 0x4E0811A1);
+ this.a = this.II(this.a, this.b, this.c, this.d, this.x[this.k + 4], this.S41, 0xF7537E82);
+ this.d = this.II(this.d, this.a, this.b, this.c, this.x[this.k + 11], this.S42, 0xBD3AF235);
+ this.c = this.II(this.c, this.d, this.a, this.b, this.x[this.k + 2], this.S43, 0x2AD7D2BB);
+ this.b = this.II(this.b, this.c, this.d, this.a, this.x[this.k + 9], this.S44, 0xEB86D391);
+ this.a = this.AddUnsigned(this.a, this.AA);
+ this.b = this.AddUnsigned(this.b, this.BB);
+ this.c = this.AddUnsigned(this.c, this.CC);
+ this.d = this.AddUnsigned(this.d, this.DD);
+ }
+ temp = this.WordToHex(this.a) + this.WordToHex(this.b) + this.WordToHex(this.c) + this.WordToHex(this.d);
+ return temp.toLowerCase();
+ };
+ Md5.x = Array();
+ Md5.S11 = 7;
+ Md5.S12 = 12;
+ Md5.S13 = 17;
+ Md5.S14 = 22;
+ Md5.S21 = 5;
+ Md5.S22 = 9;
+ Md5.S23 = 14;
+ Md5.S24 = 20;
+ Md5.S31 = 4;
+ Md5.S32 = 11;
+ Md5.S33 = 16;
+ Md5.S34 = 23;
+ Md5.S41 = 6;
+ Md5.S42 = 10;
+ Md5.S43 = 15;
+ Md5.S44 = 21;
+ Md5.RotateLeft = function (lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)); };
+ Md5.F = function (x, y, z) { return (x & y) | ((~x) & z); };
+ Md5.G = function (x, y, z) { return (x & z) | (y & (~z)); };
+ Md5.H = function (x, y, z) { return (x ^ y ^ z); };
+ Md5.I = function (x, y, z) { return (y ^ (x | (~z))); };
+ return Md5;
+}());
+
+class FileCto {
+ constructor(path, ctime, mtime) {
+ this.path = path;
+ this.ctime = ctime;
+ this.mtime = mtime;
+ }
+}
+
+class GalleryImgCto {
+ constructor(alt, src) {
+ this.alt = alt;
+ this.src = src;
+ }
+}
+class GalleryImgCacheCto {
+ constructor(file, galleryImgList, mtime) {
+ this.file = file;
+ this.galleryImgList = galleryImgList;
+ this.mtime = mtime;
+ }
+}
+
+/* // const imgList: Array = parseMarkDown(plugin, activeView.sourceMode?.cmEditor, activeView.file.path);
+export const parseMarkDown = (plugin: ImageToolkitPlugin, cm: CodeMirror.Editor, filePath: string) => {
+ let line, lineText;
+ for (let i = 0, lastLine = cm.lastLine(); i <= lastLine; i++) {
+ if (!(line = cm.lineInfo(i))) continue;
+ if (!(lineText = line.text)) continue;
+ console.debug((i + 1) + ' line: ' + lineText);
+ }
+} */
+const parseActiveViewData = (plugin, lines, file) => {
+ if (!lines || 0 >= lines.length)
+ return null;
+ let lineText;
+ let isCodeArea = false;
+ let textArr;
+ const imgList = new Array();
+ for (let i = 0, len = lines.length; i < len; i++) {
+ if (!(lineText = lines[i]))
+ continue;
+ // console.log((i + 1) + ' line: ' + lineText);
+ if (lineText.startsWith('```')) {
+ isCodeArea = !isCodeArea;
+ continue;
+ }
+ if (isCodeArea)
+ continue;
+ if (textArr = getNonCodeAreaTexts(lineText)) {
+ for (const text of textArr) {
+ extractImage(text, imgList);
+ }
+ }
+ else {
+ extractImage(lineText, imgList);
+ }
+ }
+ const filePath = file.path;
+ for (let i = 0, len = imgList.length; i < len; i++) {
+ const img = imgList[i];
+ if (img.convert) {
+ const imageFile = plugin.app.metadataCache.getFirstLinkpathDest(decodeURIComponent(img.src), filePath);
+ img.src = imageFile ? plugin.app.vault.getResourcePath(imageFile) : '';
+ }
+ img.hash = md5Img(img.alt, img.src);
+ img.match = null;
+ img.name = null;
+ }
+ return new GalleryImgCacheCto(new FileCto(file.path, file.stat.ctime, file.stat.mtime), imgList, new Date().getTime());
+};
+const getNonCodeAreaTexts = (lineText) => {
+ let textArr = [];
+ const idx1 = lineText.indexOf('`');
+ if (0 > idx1)
+ return null;
+ const idx2 = lineText.lastIndexOf('`');
+ if (idx1 === idx2)
+ return null;
+ if (idx1 > 0)
+ textArr.push(lineText.substring(0, idx1));
+ if (lineText.length - 1 > idx2)
+ textArr.push(lineText.substring(idx2 + 1));
+ return textArr;
+};
+const IMAGE_LINK_REGEX1 = /\[\s*?(!\[(.*?)\]\((.*?)\))\s*?\]\(.*?\)/; // 1-link: [ ![alt1|alt2|...|altn|width](src) ](https://...)
+const IMAGE_REGEX1 = /!\[(.*?)\]\((.*?)\)/; // 1: ![alt1|alt2|...|altn|width](src)
+const IMAGE_LINK_REGEX2 = /\[\s*?(!\[\[(.*?[jpe?g|png|gif|svg|bmp].*?)\]\])\s*?\]\(.*?\)/i; // 2-link: [ ![[src|alt1|alt2|width]] ](https://...)
+const IMAGE_REGEX2 = /!\[\[(.*?[jpe?g|png|gif|svg|bmp].*?)\]\]/i; // 2: ![[src|alt1|alt2|width]]
+const SRC_LINK_REGEX = /[a-z][a-z0-9+\-.]+:\/.*/i; // match link: http://, file://, app://
+const SRC_IMG_REGREX = /.*?\.jpe?g|png|gif|svg|bmp/i; // match image ext: .jpg/.jpeg/.png/.gif/.svg/.bmp
+const IMG_TAG_LINK_SRC_REGEX = /).*?\/a>/i; // 3-a-img-src:
+const IMG_TAG_SRC_REGEX = //i; // 3-img-src:
+const IMG_TAG_ALT_REGEX = //i; // 3-img-alt:
+const FULL_PATH_REGEX = /^[a-z]\:.*?[jpe?g|png|gif|svg|bmp]/i;
+const BLOCKQUOTE_PREFIX = `#^`;
+const IMG_MATCH_MIN_LEN = 7;
+const extractImage = (text, imgList) => {
+ let img;
+ if (!(img = matchImage1(text))) {
+ if (!(img = matchImage2(text))) {
+ if (!(img = matchImageTag(text))) {
+ return;
+ }
+ }
+ }
+ imgList.push(img);
+ if (img.match) {
+ const idx = img.match.index + img.match[0].length;
+ if (idx > text.length - IMG_MATCH_MIN_LEN)
+ return;
+ extractImage(text.substring(idx), imgList);
+ }
+};
+/**
+ * ![alt1|alt2|...|altn|width](src)
+ * @param text
+ * @returns
+ */
+const matchImage1 = (text) => {
+ var _a;
+ let match = text.match(IMAGE_LINK_REGEX1); // 1-link: [ ![alt1|alt2|...|altn|width](src) ](https://...)
+ let link = false;
+ let alt, src;
+ if (match) {
+ link = true;
+ alt = match[2];
+ src = match[3];
+ }
+ else {
+ match = text.match(IMAGE_REGEX1); // 1: ![alt1|alt2|...|altn|width](src)
+ if (match) {
+ if (alt = match[1]) {
+ if (0 <= alt.indexOf('[') && 0 <= alt.indexOf(']'))
+ return;
+ }
+ src = match[2];
+ if (src && src.startsWith(BLOCKQUOTE_PREFIX))
+ return;
+ }
+ }
+ if (!match)
+ return null;
+ const img = new GalleryImgCto();
+ img.link = link;
+ img.match = match;
+ img.alt = alt;
+ img.src = src;
+ let width;
+ if (img.src) {
+ if (SRC_LINK_REGEX.test(img.src)) { // 1.2: match link: http://, file://, app://local/
+ if (img.src.startsWith('file://')) {
+ img.src = img.src.replace(/^file:\/+/, 'app://local/');
+ }
+ }
+ else if (SRC_IMG_REGREX.test(img.src)) { // 1.3: match image ext: .jpg/.jpeg/.png/.gif/.svg/.bmp
+ const srcArr = img.src.split('/');
+ if (srcArr && 0 < srcArr.length) {
+ img.name = srcArr[srcArr.length - 1];
+ }
+ img.convert = true;
+ }
+ }
+ const altArr = (_a = img.alt) === null || _a === void 0 ? void 0 : _a.split('\|'); // match[1] = alt1|alt2|...|altn|width
+ if (altArr && 1 < altArr.length) {
+ if (/\d+/.test(width = altArr[altArr.length - 1])) {
+ img.alt = img.alt.substring(0, img.alt.length - width.length - 1);
+ }
+ }
+ return img;
+};
+/**
+ * ![[src|alt1|alt2|width]]
+ * @param text
+ * @returns
+ */
+const matchImage2 = (text) => {
+ let match = text.match(IMAGE_LINK_REGEX2); // 2-link: [ ![[src|alt1|alt2|width]] ](https://...)
+ let link = false;
+ let content;
+ if (match) {
+ link = true;
+ content = match[2];
+ }
+ else {
+ match = text.match(IMAGE_REGEX2); // 2: ![[src|alt1|alt2|width]]
+ content = match ? match[1] : null;
+ if (content && content.startsWith(BLOCKQUOTE_PREFIX))
+ return;
+ }
+ if (!match)
+ return null;
+ const img = new GalleryImgCto();
+ img.link = link;
+ img.match = match;
+ const contentArr = content === null || content === void 0 ? void 0 : content.split('|');
+ if (contentArr && 0 < contentArr.length && (img.src = contentArr[0])) {
+ const srcArr = img.src.split('/');
+ if (srcArr && 0 < srcArr.length) {
+ img.name = srcArr[srcArr.length - 1];
+ }
+ if (1 == contentArr.length) {
+ img.alt = img.src;
+ }
+ else {
+ img.alt = '';
+ for (let i = 1; i < contentArr.length; i++) {
+ if (i == contentArr.length - 1 && /\d+/.test(contentArr[i]))
+ break;
+ if (img.alt)
+ img.alt += '|';
+ img.alt += contentArr[i];
+ }
+ }
+ img.convert = true;
+ }
+ return img;
+};
+const matchImageTag = (text) => {
+ let match = text.match(IMG_TAG_LINK_SRC_REGEX); // 3-a-img-src:
+ let link = false;
+ if (match) {
+ link = true;
+ }
+ else {
+ match = text.match(IMG_TAG_SRC_REGEX); // 3-img-src:
+ }
+ if (!match)
+ return null;
+ const img = new GalleryImgCto();
+ img.link = link;
+ img.match = match;
+ img.src = img.link ? match[2] : match[1];
+ if (img.src) {
+ if (img.src.startsWith('file://')) {
+ img.src = img.src.replace(/^file:\/+/, 'app://local/');
+ }
+ else if (FULL_PATH_REGEX.test(img.src)) {
+ img.src = 'app://local/' + img.src;
+ }
+ }
+ const matchAlt = text.match(IMG_TAG_ALT_REGEX);
+ img.alt = matchAlt ? matchAlt[1] : '';
+ return img;
+};
+const md5Img = (alt, src) => {
+ return Md5.init((alt ? alt : '') + '_' + src);
+};
+
+class GalleryNavbarView {
+ constructor(mainContainerView, plugin) {
+ // whether to display gallery navbar
+ this.state = false;
+ this.galleryNavbarEl = null;
+ this.galleryListEl = null;
+ this.galleryIsMousingDown = false;
+ this.galleryMouseDownClientX = 0;
+ this.galleryTranslateX = 0;
+ this.CACHE_LIMIT = 10;
+ this.CLICK_TIME = 150;
+ this.renderGalleryImg = (imgFooterEl) => __awaiter(this, void 0, void 0, function* () {
+ var _a;
+ if (this.state)
+ return;
+ // get all of images on the current editor
+ const activeView = this.plugin.app.workspace.getActiveViewOfType(obsidian.MarkdownView);
+ if (!activeView
+ || 'markdown' !== activeView.getViewType()
+ // modal-container: community plugin, flashcards (Space Repetition)
+ || 0 < document.getElementsByClassName('modal-container').length) {
+ if (this.galleryNavbarEl)
+ this.galleryNavbarEl.hidden = true;
+ if (this.galleryListEl)
+ this.galleryListEl.innerHTML = '';
+ return;
+ }
+ //
+ this.initGalleryNavbar(imgFooterEl);
+ const activeFile = activeView.file;
+ let galleryImg = this.getGalleryImgCache(activeFile);
+ // let hitCache: boolean = true;
+ if (!galleryImg) {
+ // hitCache = false;
+ galleryImg = parseActiveViewData(this.plugin, (_a = activeView.data) === null || _a === void 0 ? void 0 : _a.split('\n'), activeFile);
+ this.setGalleryImgCache(galleryImg);
+ }
+ // console.log('oit-gallery-navbar: ' + (hitCache ? 'hit cache' : 'miss cache') + '!', galleryImg);
+ const imgList = galleryImg.galleryImgList;
+ const imgContextHash = this.getTargetImgContextHash(this.mainContainerView.getLastClickedImgEl(), activeView.containerEl, this.plugin.imgSelector);
+ let liEl, imgEl, liElActive;
+ let imgListEl = new Array();
+ let targetImageIdx = -1, targetRealIdx = 0;
+ let isAddGalleryActive = false;
+ let prevHash, nextHash;
+ const viewImageWithALink = this.plugin.settings.viewImageWithALink;
+ for (let i = 0, len = imgList.length; i < len; i++) {
+ const img = imgList[i];
+ if (!viewImageWithALink && img.link)
+ continue;
+ //
+ this.galleryListEl.append(liEl = createEl('li'));
+ liEl.append(imgEl = createEl('img'));
+ imgEl.addClass('gallery-img');
+ imgEl.setAttr('alt', img.alt);
+ imgEl.setAttr('src', img.src);
+ imgListEl.push(imgEl);
+ this.mainContainerView.setImgViewDefaultBackground(imgEl);
+ // find the target image (which image is just clicked)
+ if (!imgContextHash || isAddGalleryActive)
+ continue;
+ if (imgContextHash[1] == img.hash) {
+ if (0 > targetImageIdx) {
+ targetImageIdx = i;
+ liElActive = liEl;
+ targetRealIdx = imgListEl.length;
+ }
+ if (0 == i) {
+ prevHash = null;
+ nextHash = 1 < len ? imgList[i + 1].hash : null;
+ }
+ else if (len - 1 == i) {
+ prevHash = imgList[i - 1].hash;
+ nextHash = null;
+ }
+ else {
+ prevHash = imgList[i - 1].hash;
+ nextHash = imgList[i + 1].hash;
+ }
+ if (imgContextHash[0] == prevHash && imgContextHash[2] == nextHash) {
+ isAddGalleryActive = true;
+ liElActive = liEl;
+ }
+ }
+ }
+ const realTotalNum = imgListEl.length;
+ this.mainContainerView.renderImgTitle(null, '[' + targetRealIdx + '/' + realTotalNum + ']');
+ imgListEl.forEach((value, index) => {
+ value.dataset.index = '[' + (index + 1) + '/' + realTotalNum + ']';
+ });
+ if (0 <= targetImageIdx) {
+ if (liElActive) {
+ liElActive.addClass('gallery-active');
+ if (this.settings.galleryImgBorderActive) {
+ liElActive.addClass('img-border-active');
+ liElActive.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor);
+ }
+ }
+ this.galleryTranslateX = (document.documentElement.clientWidth || document.body.clientWidth) / 2.5 - targetImageIdx * 52;
+ this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)';
+ }
+ });
+ this.initDefaultData = () => {
+ this.galleryMouseDownClientX = 0;
+ this.galleryTranslateX = 0;
+ if (this.galleryListEl) {
+ this.galleryListEl.style.transform = 'translateX(0px)';
+ // remove all childs (li) of gallery-list
+ this.galleryListEl.innerHTML = '';
+ }
+ };
+ this.initGalleryNavbar = (imgFooterEl) => {
+ //
+ if (!this.galleryNavbarEl) {
+ // imgInfo.imgFooterEl.append(galleryNavbarEl = createDiv());
+ imgFooterEl.append(this.galleryNavbarEl = createDiv());
+ this.galleryNavbarEl.addClass('gallery-navbar');
+ this.galleryNavbarEl.onmouseover = () => {
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarHoverColor);
+ };
+ this.galleryNavbarEl.onmouseout = () => {
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
+ };
+ // add events
+ this.galleryNavbarEl.addEventListener('mousedown', this.mouseDownGallery);
+ this.galleryNavbarEl.addEventListener('mousemove', this.mouseMoveGallery);
+ this.galleryNavbarEl.addEventListener('mouseup', this.mouseUpGallery);
+ this.galleryNavbarEl.addEventListener('mouseleave', this.mouseLeaveGallery);
+ }
+ this.galleryNavbarEl.style.setProperty('background-color', this.settings.galleryNavbarDefaultColor);
+ if (!this.galleryListEl) {
+ this.galleryNavbarEl.append(this.galleryListEl = createEl('ul')); //
+ this.galleryListEl.addClass('gallery-list');
+ }
+ this.initDefaultData();
+ this.galleryNavbarEl.hidden = false; // display 'gallery-navbar'
+ this.state = true;
+ };
+ this.closeGalleryNavbar = () => {
+ if (!this.state)
+ return;
+ this.galleryNavbarEl.hidden = true; // hide 'gallery-navbar'
+ this.state = false;
+ this.initDefaultData();
+ };
+ this.remove = () => {
+ var _a, _b;
+ this.state = false;
+ (_a = this.galleryNavbarEl) === null || _a === void 0 ? void 0 : _a.remove();
+ (_b = this.galleryListEl) === null || _b === void 0 ? void 0 : _b.remove();
+ this.galleryNavbarEl = null;
+ this.galleryListEl = null;
+ this.galleryIsMousingDown = false;
+ this.galleryMouseDownClientX = 0;
+ this.galleryTranslateX = 0;
+ this.mouseDownTime = null;
+ GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
+ this.initDefaultData();
+ };
+ this.getTargetImgContextHash = (targetImgEl, containerEl, imageSelector) => {
+ let imgEl;
+ let targetImgHash = null;
+ let targetIdx = -1;
+ const imgs = containerEl.querySelectorAll(imageSelector);
+ // console.log('IMAGE_SELECTOR>>', imageSelector, imgs);
+ const len = imgs.length;
+ for (let i = 0; i < len; i++) {
+ if ((imgEl = imgs[i])) {
+ if ('1' == imgEl.getAttribute('data-oit-target')) {
+ targetIdx = i;
+ targetImgHash = md5Img(imgEl.alt, imgEl.src);
+ break;
+ }
+ }
+ }
+ if (0 > targetIdx)
+ targetImgHash = md5Img(targetImgEl.alt, targetImgEl.src);
+ let prevHash, nextHash;
+ if (0 == targetIdx) {
+ prevHash = null;
+ nextHash = 1 < len ? md5Img(imgs[1].alt, imgs[1].src) : null;
+ }
+ else if (len - 1 == targetIdx) {
+ prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
+ nextHash = null;
+ }
+ else {
+ prevHash = md5Img(imgs[targetIdx - 1].alt, imgs[targetIdx - 1].src);
+ nextHash = md5Img(imgs[targetIdx + 1].alt, imgs[targetIdx + 1].src);
+ }
+ return [prevHash, targetImgHash, nextHash];
+ };
+ this.activateImage = (liEl, imgEL) => {
+ if (!liEl || 'LI' !== liEl.tagName)
+ return;
+ if (!imgEL) {
+ const imgELList = liEl.getElementsByTagName('img');
+ if (imgELList && 0 < imgELList.length) {
+ imgEL = imgELList[0];
+ }
+ }
+ if (imgEL) {
+ const activeImg = this.mainContainerView.getActiveImg();
+ this.mainContainerView.initDefaultData(activeImg, imgEL.style);
+ this.mainContainerView.refreshImg(activeImg, imgEL.src, imgEL.alt || '', imgEL.dataset.index);
+ }
+ liEl.addClass('gallery-active');
+ if (this.settings.galleryImgBorderActive) {
+ liEl.addClass('img-border-active');
+ liEl.style.setProperty('border-color', this.settings.galleryImgBorderActiveColor);
+ }
+ };
+ this.deactivateImage = (liEl) => {
+ if (!liEl)
+ return;
+ liEl.removeClass('gallery-active');
+ if (liEl.hasClass('img-border-active')) {
+ liEl.removeClass('img-border-active');
+ liEl.style.removeProperty('border-color');
+ }
+ };
+ this.clickGalleryImg = (event) => {
+ const targetEl = event.target;
+ if (!targetEl || 'IMG' !== targetEl.tagName)
+ return;
+ if (this.galleryListEl) {
+ const liElList = this.galleryListEl.getElementsByClassName('gallery-active');
+ for (let i = 0, len = liElList.length; i < len; i++) {
+ this.deactivateImage(liElList[i]);
+ }
+ }
+ this.activateImage(targetEl.parentElement, targetEl);
+ };
+ /**
+ * switch the image on the gallery navbar
+ * @param next true: switch to the next image; false: switch to the previous image
+ */
+ this.switchImage = (next) => {
+ if (!this.state || !this.galleryListEl)
+ return;
+ const liElList = this.galleryListEl.getElementsByTagName('li');
+ if (!liElList || 0 >= liElList.length)
+ return;
+ let liEl;
+ let toSwitchIdx = -1;
+ for (let i = 0, len = liElList.length; i < len; i++) {
+ if (!(liEl = liElList[i]))
+ continue;
+ if (liEl.hasClass('gallery-active')) {
+ toSwitchIdx = next ? (len <= (i + 1) ? 0 : i + 1) : (0 == i ? len - 1 : i - 1);
+ this.deactivateImage(liEl);
+ break;
+ }
+ }
+ if (0 >= toSwitchIdx) {
+ toSwitchIdx = 0;
+ }
+ this.activateImage(liElList[toSwitchIdx]);
+ };
+ this.mouseDownGallery = (event) => {
+ // console.log('mouse Down Gallery...');
+ event.preventDefault();
+ event.stopPropagation();
+ this.mouseDownTime = new Date().getTime();
+ this.galleryIsMousingDown = true;
+ this.galleryMouseDownClientX = event.clientX;
+ };
+ this.mouseMoveGallery = (event) => {
+ // console.log('mouse Move Gallery...');
+ event.preventDefault();
+ event.stopPropagation();
+ if (!this.galleryIsMousingDown)
+ return;
+ let moveDistance = event.clientX - this.galleryMouseDownClientX;
+ if (4 > Math.abs(moveDistance))
+ return;
+ this.galleryMouseDownClientX = event.clientX;
+ this.galleryTranslateX += moveDistance;
+ const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
+ const imgLiWidth = (this.galleryListEl.childElementCount - 1) * 52;
+ // console.log('move...', 'windowWidth=' + windowWidth, 'galleryTranslateX=' + galleryTranslateX, 'li count=' + imgInfo.galleryList.childElementCount);
+ if (this.galleryTranslateX + 50 >= windowWidth)
+ this.galleryTranslateX = windowWidth - 50;
+ if (0 > this.galleryTranslateX + imgLiWidth)
+ this.galleryTranslateX = -imgLiWidth;
+ this.galleryListEl.style.transform = 'translateX(' + this.galleryTranslateX + 'px)';
+ };
+ this.mouseUpGallery = (event) => {
+ // console.log('mouse Up Gallery>>>', event.target);
+ event.preventDefault();
+ event.stopPropagation();
+ this.galleryIsMousingDown = false;
+ if (!this.mouseDownTime || this.CLICK_TIME > new Date().getTime() - this.mouseDownTime) {
+ this.clickGalleryImg(event);
+ }
+ this.mouseDownTime = null;
+ };
+ this.mouseLeaveGallery = (event) => {
+ // console.log('mouse Leave Gallery>>>', event.target);
+ event.preventDefault();
+ event.stopPropagation();
+ this.galleryIsMousingDown = false;
+ this.mouseDownTime = null;
+ };
+ this.getGalleryImgCache = (file) => {
+ if (!file)
+ return null;
+ const md5File = this.md5File(file.path, file.stat.ctime);
+ if (!md5File)
+ return null;
+ const galleryImgCache = GalleryNavbarView.GALLERY_IMG_CACHE.get(md5File);
+ if (galleryImgCache && file.stat.mtime !== galleryImgCache.file.mtime) {
+ GalleryNavbarView.GALLERY_IMG_CACHE.delete(md5File);
+ return null;
+ }
+ return galleryImgCache;
+ };
+ this.setGalleryImgCache = (galleryImg) => {
+ const md5File = this.md5File(galleryImg.file.path, galleryImg.file.ctime);
+ if (!md5File)
+ return;
+ this.trimGalleryImgCache();
+ GalleryNavbarView.GALLERY_IMG_CACHE.set(md5File, galleryImg);
+ };
+ this.trimGalleryImgCache = () => {
+ if (GalleryNavbarView.GALLERY_IMG_CACHE.size < this.CACHE_LIMIT)
+ return;
+ let earliestMtime, earliestKey;
+ GalleryNavbarView.GALLERY_IMG_CACHE.forEach((value, key) => {
+ if (!earliestMtime) {
+ earliestMtime = value.mtime;
+ earliestKey = key;
+ }
+ else {
+ if (earliestMtime > value.mtime) {
+ earliestMtime = value.mtime;
+ earliestKey = key;
+ }
+ }
+ });
+ if (earliestKey) {
+ GalleryNavbarView.GALLERY_IMG_CACHE.delete(earliestKey);
+ }
+ };
+ this.md5File = (path, ctime) => {
+ if (!path || !ctime)
+ return;
+ return Md5.init(path + '_' + ctime);
+ };
+ this.mainContainerView = mainContainerView;
+ this.plugin = plugin;
+ this.settings = plugin.settings;
+ }
+}
+GalleryNavbarView.GALLERY_IMG_CACHE = new Map();
+
+class MainContainerView extends ContainerView {
+ constructor(plugin, containerType) {
+ super(plugin, containerType, 1);
+ //region ================== Container View ========================
+ this.initContainerViewDom = (containerEl) => {
+ let imgCto;
+ if (!this.imgInfoCto.oitContainerViewEl) {
+ // init at first time
+ // create:
+ containerEl.appendChild(this.imgInfoCto.oitContainerViewEl = createDiv('oit-main-container-view'));
+ //
+ this.imgInfoCto.oitContainerViewEl.append(this.imgInfoCto.imgContainerEl = createDiv('img-container'));
+ //
+ this.updateImgViewElAndList(this.pinMaximum);
+ //
+ this.imgInfoCto.oitContainerViewEl.appendChild(this.imgInfoCto.imgTipEl = createDiv()); // img-tip
+ this.imgInfoCto.imgTipEl.addClass('img-tip');
+ this.imgInfoCto.imgTipEl.hidden = true; // hide 'img-tip'
+ //