'use strict'; var obsidian = require('obsidian'); var crypto = require('crypto'); /****************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { var e = new Error(message); return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; }; // English var en = { // >>>Common Settings: VIEW_MODE_NAME: 'Choose a mode to view images', VIEW_MODE_NORMAL: '🖼 Normal', VIEW_MODE_PIN: '📌 Pin', RESET: 'reset to default', // >>>View Trigger Settings: VIEW_TRIGGER_SETTINGS: 'View trigger', VIEW_IMAGE_GLOBAL_NAME: 'Click and view an image globally', VIEW_IMAGE_GLOBAL_DESC: 'You can zoom, rotate, drag, and invert it on the popup layer when clicking an image.', VIEW_IMAGE_IN_EDITOR_NAME: 'Click and view an image in the Editor Area', VIEW_IMAGE_IN_EDITOR_DESC: 'Turn on this option if you want to click and view an image in the Editor Area.', // CPB = COMMUNITY_PLUGINS_BROWSER VIEW_IMAGE_IN_CPB_NAME: 'Click and view an image in the Community Plugins browser', VIEW_IMAGE_IN_CPB_DESC: 'Turn on this option if you want to click and view an image in the Community Plugins browser.', VIEW_IMAGE_WITH_A_LINK_NAME: 'Click and view an image with a link', VIEW_IMAGE_WITH_A_LINK_DESC: 'Turn on this option if you want to click and view an image with a link. (NOTE: The browser will be opened for you to visit the link and the image will be popped up for being viewed at the same time when you click the image.)', VIEW_IMAGE_OTHER_NAME: 'Click and view in the other areas except the above', VIEW_IMAGE_OTHER_DESC: 'Except for the above mentioned, it also supports other areas, like some modal user interface components.', // >>> PIN_MODE_SETTINGS PIN_MODE_SETTINGS: "Pin mode", PIN_MODE_NAME: "📌 Pin an image", PIN_MODE_DESC: "You can pin an image onto the top of the screen. And have more options by right click. (press Esc to close the image where your mouse cursor is hovering)", PIN_MAXIMUM_NAME: "The maximum images you can pin", PIN_COVER_NAME: "Cover mode", PIN_COVER_DESC: "After those pinned images reach maximum, you can cover the earliest pinned image when you click an image once again.", PIN_MAXIMUM_NOTICE: "Exceeded maximum images you can pin (non cover mode)", // >>>View Detail Settings: VIEW_DETAILS_SETTINGS: 'View details', IMAGE_MOVE_SPEED_NAME: 'Set the moving speed of the image', IMAGE_MOVE_SPEED_DESC: 'When you move an image on the popup layer by keyboard (up, down, left, right), the moving speed of the image can be set here.', IMAGE_TIP_TOGGLE_NAME: "Display the image's zoom number", IMAGE_TIP_TOGGLE_DESC: "Turn on this option if you want to display the zoom number when you zoom the image.", IMG_FULL_SCREEN_MODE_NAME: 'Full-screen preview mode', // preview mode options: FIT: 'Fit', FILL: 'Fill', STRETCH: 'Stretch', IMG_VIEW_BACKGROUND_COLOR_NAME: "Background color of the previewed image (Only support the image with transparent background)", // >>>Image Border Settings: IMAGE_BORDER_SETTINGS: 'Image border', IMAGE_BORDER_TOGGLE_NAME: "Display the image's border", IMAGE_BORDER_TOGGLE_DESC: "The clicked image's border can be displayed after you exit previewing and close the popup layer.", IMAGE_BORDER_WIDTH_NAME: "Image border width", IMAGE_BORDER_STYLE_NAME: "Image border style", IMAGE_BORDER_COLOR_NAME: "Image border color", // IMG_BORDER_WIDTH options: THIN: 'thin', MEDIUM: 'medium', THICK: 'thick', // IMG_BORDER_STYLE options: //HIDDEN: 'hidden', DOTTED: 'dotted', DASHED: 'dashed', SOLID: 'solid', DOUBLE: 'double', GROOVE: 'groove', RIDGE: 'ridge', INSET: 'inset', OUTSET: 'outset', // IMAGE_BORDER_COLOR_NAME options: BLACK: 'black', BLUE: 'blue', DARK_GREEN: 'dark green', GREEN: 'green', LIME: 'lime', STEEL_BLUE: 'steel blue', INDIGO: 'indigo', PURPLE: 'purple', GRAY: 'gray', DARK_RED: 'dark red', LIGHT_GREEN: 'light green', BROWN: 'brown', LIGHT_BLUE: 'light blue', SILVER: 'silver', RED: 'red', PINK: 'pink', ORANGE: 'orange', GOLD: 'gold', YELLOW: 'yellow', // >>>Gallery Navbar Settings: GALLERY_NAVBAR_SETTINGS: 'Gallery navbar (experimental)', GALLERY_NAVBAR_TOGGLE_NAME: "Display gallery navbar", GALLERY_NAVBAR_TOGGLE_DESC: "All of the images in the current pane view can be displayed at the bottom of the popup layer.", GALLERY_NAVBAR_DEFAULT_COLOR_NAME: "Background color of the gallery navbar (default state)", GALLERY_NAVBAR_HOVER_COLOR_NAME: "Background color of the gallery navbar (hovering state)", GALLERY_IMG_BORDER_TOGGLE_NAME: "Display the selected image on the gallery navbar", GALLERY_IMG_BORDER_TOGGLE_DESC: "When you select an image, the image's border will be displayed, so you can know which image is currently active.", GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME: 'Border color of the selected image', // >>>HOTKEYS_SETTINGS: HOTKEY_SETTINGS: "Hotkeys", HOTKEY_SETTINGS_DESC: "📢 You cannot set the same hotkey for 'Move the image' and 'Switch the image' at the same time. (NOT SUPPORT in Pin Mode)", MOVE_THE_IMAGE_NAME: "Hotkey for moving the image", MOVE_THE_IMAGE_DESC: "You can move the image on the popup layer by hotkey.", SWITCH_THE_IMAGE_NAME: "Hotkey for switching the image", SWITCH_THE_IMAGE_DESC: "You can switch to the previous/next image on the gallery navbar by hotkey. (NOTE: You need to turn on 'Display gallery navbar' first, if you wanna use this hotkey.)", DOUBLE_CLICK_TOOLBAR_NAME: "Double click", VIEW_TRIGGER_HOTKEY_NAME: "Hotkey for triggering viewing an image", VIEW_TRIGGER_HOTKEY_DESC: "When you set 'None', you can directly click and preview an image without holding any modifier keys; otherwise, you must hold the configured modifier keys to click and preview an image.", // MODIFIER_HOTKEYS NONE: "None", CTRL: "Ctrl", ALT: "Alt", SHIFT: "Shift", CTRL_ALT: "Ctrl+Alt", CTRL_SHIFT: "Ctrl+Shift", SHIFT_ALT: "Shift+Alt", CTRL_SHIFT_ALT: "Ctrl+Shift+Alt", // toolbar icon title ZOOM_TO_100: "zoom to 100%", ZOOM_IN: "zoom in", ZOOM_OUT: "zoom out", FULL_SCREEN: 'full screen', REFRESH: "refresh", ROTATE_LEFT: "rotate left", ROTATE_RIGHT: "rotate right", SCALE_X: 'flip along x-axis', SCALE_Y: 'flip along y-axis', INVERT_COLOR: 'invert color', COPY: 'copy', CLOSE: 'close', // tip: COPY_IMAGE_SUCCESS: 'Copy the image successfully!', COPY_IMAGE_ERROR: 'Fail to copy the image!' }; // 简体中文 var zhCN = { VIEW_MODE_NAME: '选择查看模式', VIEW_MODE_NORMAL: '🖼 普通', VIEW_MODE_PIN: '📌 贴图', // >>> 预览触发配置： VIEW_TRIGGER_SETTINGS: '预览触发配置', VIEW_IMAGE_GLOBAL_NAME: '支持全局预览图片', VIEW_IMAGE_GLOBAL_DESC: '开启后，在任何地方点击图片都可以弹出预览界面，可对图片进行缩放、旋转、拖动、和反色等。', VIEW_IMAGE_IN_EDITOR_NAME: '支持在编辑区域预览图片', VIEW_IMAGE_IN_EDITOR_DESC: '开启后，支持在编辑区域，点击图片预览。', // CPB = COMMUNITY_PLUGINS_BROWSER VIEW_IMAGE_IN_CPB_NAME: '支持在社区插件页面预览图片', VIEW_IMAGE_IN_CPB_DESC: '开启后，支持在社区插件页面，点击图片预览。', VIEW_IMAGE_WITH_A_LINK_NAME: '支持预览带链接的图片', VIEW_IMAGE_WITH_A_LINK_DESC: '开启后，支持点击带链接的图片（注意：点击该图片，会同时打开浏览器访问指定地址和弹出预览图片）', VIEW_IMAGE_OTHER_NAME: '支持除上述其他地方来预览图片', VIEW_IMAGE_OTHER_DESC: '除上述支持范围外，还支持一些其他区域，如Modal用户界面组件。', // >>> PIN_MODE_SETTINGS PIN_MODE_SETTINGS: "贴图模式设置", PIN_MODE_NAME: "📌 将所点击的图片贴到屏幕上", PIN_MODE_DESC: "你可以将当前所点击的图片贴到屏幕上，并且可以通过右击图片选择更多操作（按 Esc 关闭已贴图片的展示）", PIN_MAXIMUM_NAME: "最大贴图数量", PIN_COVER_NAME: "覆盖模式", PIN_COVER_DESC: "当贴图数量达到最大值后，此时再次点击图片，该图片会覆盖最早弹出的那个贴图。", PIN_MAXIMUM_NOTICE: "超过最大Pin图设置（非覆盖模式）", // >>>查看细节设置： VIEW_DETAILS_SETTINGS: '查看细节设置', IMAGE_MOVE_SPEED_NAME: '图片移动速度设置', IMAGE_MOVE_SPEED_DESC: '当使用键盘（上、下、左、右）移动图片时，可对图片移动速度进行设置。', IMAGE_TIP_TOGGLE_NAME: "展示缩放比例提示", IMAGE_TIP_TOGGLE_DESC: "开启后，当你缩放图片时会展示当前缩放的比例。", IMG_FULL_SCREEN_MODE_NAME: '全屏预览模式', // 全屏预览模式 下拉： FIT: '自适应', FILL: '填充', STRETCH: '拉伸', IMG_VIEW_BACKGROUND_COLOR_NAME: "设置预览图片的背景色（仅对透明背景的图片生效）", // >>>图片边框设置： IMAGE_BORDER_SETTINGS: '图片边框设置', IMAGE_BORDER_TOGGLE_NAME: "展示被点击图片的边框", IMAGE_BORDER_TOGGLE_DESC: "当离开图片预览和关闭弹出层后，突出展示被点击图片的边框。", IMAGE_BORDER_WIDTH_NAME: "设置图片边框宽度", IMAGE_BORDER_STYLE_NAME: "设置图片边框样式", IMAGE_BORDER_COLOR_NAME: "设置图片边框颜色", // IMG_BORDER_WIDTH 下拉： THIN: '较细', MEDIUM: '正常', THICK: '较粗', // IMG_BORDER_STYLE 下拉： //HIDDEN: '隐藏', DOTTED: '点状', DASHED: '虚线', SOLID: '实线', DOUBLE: '双线', GROOVE: '凹槽', RIDGE: ' 垄状', INSET: '凹边', OUTSET: '凸边', // IMAGE_BORDER_COLOR_NAME 下拉： BLACK: '黑色', BLUE: '蓝色', DARK_GREEN: '深绿色', GREEN: '绿色', LIME: '淡黄绿色', STEEL_BLUE: '钢青色', INDIGO: '靛蓝色', PURPLE: '紫色', GRAY: '灰色', DARK_RED: '深红色', LIGHT_GREEN: '浅绿色', BROWN: '棕色', LIGHT_BLUE: '浅蓝色', SILVER: '银色', RED: '红色', PINK: '粉红色', ORANGE: '橘黄色', GOLD: '金色', YELLOW: '黄色', // >>>Gallery Navbar Settings: GALLERY_NAVBAR_SETTINGS: '图片导航设置 (体验版)', GALLERY_NAVBAR_TOGGLE_NAME: "展示图片导航", GALLERY_NAVBAR_TOGGLE_DESC: "当前文档的所有图片会展示在弹出层的底部，可随意切换展示不同图片。", GALLERY_NAVBAR_DEFAULT_COLOR_NAME: "设置图片导航底栏背景色（默认展示）", GALLERY_NAVBAR_HOVER_COLOR_NAME: "设置图片导航底栏背景色（鼠标悬浮时）", GALLERY_IMG_BORDER_TOGGLE_NAME: "展示图片导航上被选中的图片", GALLERY_IMG_BORDER_TOGGLE_DESC: "当你选中正查看某一图片，对应图片导航底栏上将突出显示该缩略图片的边框。", GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME: '设置被选中图片的边框色', // >>>HOTKEYS_SETTINGS: HOTKEY_SETTINGS: "快捷键设置", HOTKEY_SETTINGS_DESC: "📢 你无法为'移动图片'和'切换图片'设置相同的快捷键。（不支持贴图模式）", MOVE_THE_IMAGE_NAME: "为移动图片设置快捷键", MOVE_THE_IMAGE_DESC: "你可以利用快捷键来移动弹出层上的图片。", SWITCH_THE_IMAGE_NAME: "为切换图片设置快捷键", SWITCH_THE_IMAGE_DESC: "你可以利用快捷键来切换在图片导航栏上的图片至上一张/下一张。(注意: 仅当开启“展示图片导航”后，才能使用该快捷键来控制切换图片。)", DOUBLE_CLICK_TOOLBAR_NAME: "双击", VIEW_TRIGGER_HOTKEY_NAME: "为触发弹出查看图片设置快捷键", VIEW_TRIGGER_HOTKEY_DESC: "当你设置为“无”，你可以直接点击预览图片；否则，须按住已配置的修改键（Ctrl、Alt、Shift）才能点击查看某个图片。", // MODIFIER_HOTKEYS NONE: "无", // toolbar icon title ZOOM_TO_100: "缩放至100%", ZOOM_IN: "放大", ZOOM_OUT: "缩小", FULL_SCREEN: "全屏", REFRESH: "刷新", ROTATE_LEFT: "左旋", ROTATE_RIGHT: "右旋", SCALE_X: 'x轴翻转', SCALE_Y: 'y轴翻转', INVERT_COLOR: '反色', COPY: '复制', CLOSE: '关闭', // tip: COPY_IMAGE_SUCCESS: '拷贝图片成功！', COPY_IMAGE_ERROR: '拷贝图片失败！' }; // 繁體中文 var zhTW = { // toolbar icon title ZOOM_IN: "放大", ZOOM_OUT: "縮小", FULL_SCREEN: '全螢幕', REFRESH: "重整", ROTATE_LEFT: "向左旋轉", ROTATE_RIGHT: "向右旋轉", SCALE_X: 'x 軸縮放', SCALE_Y: 'y 軸縮放', INVERT_COLOR: '色彩反轉', COPY: '複製', COPY_IMAGE_SUCCESS: '成功複製圖片！' }; const localeMap = { en, "zh-cn": zhCN, "zh-tw": zhTW, }; const locale = localeMap[obsidian.moment.locale()]; function t(str) { if (!locale) { console.error("[oit] Image toolkit locale not found", obsidian.moment.locale()); } return (locale && locale[str]) || en[str]; } var ViewMode; (function (ViewMode) { ViewMode["Normal"] = "Normal"; ViewMode["Pin"] = "Pin"; })(ViewMode || (ViewMode = {})); const DEFAULT_VIEW_MODE = ViewMode.Normal; const OIT_CLASS = { CONTAINER_ROOT: 'oit', CONTAINER_NORMAL: 'oit-normal', CONTAINER_PIN: 'oit-pin', // the place for storing images IMG_CONTAINER: 'oit-img-container', IMG_VIEW: 'oit-img-view', IMG_TTP: 'oit-img-tip', IMG_FOOTER: 'oit-img-footer', IMG_TITLE: 'oit-img-title', IMG_TITLE_NAME: 'oit-img-title-name', IMG_TITLE_INDEX: 'oit-img-title-index', IMG_TOOLBAR: 'oit-img-toolbar', IMG_PLAYER: 'img-player', IMG_FULLSCREEN: 'img-fullscreen', }; const ZOOM_FACTOR = 0.8; const IMG_VIEW_MIN = 30; const ICONS = [{ id: 'zoom-to-100', svg: ` 1:1 ` }]; const SEPARATOR_SYMBOL = "---"; const TOOLBAR_CONF = [{ title: "ZOOM_TO_100", class: 'toolbar_zoom_to_100', icon: 'zoom-to-100', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "ZOOM_IN", class: 'toolbar_zoom_in', icon: 'zoom-in', enableToolbarIcon: true, enableMenu: false, enableHotKey: true }, { title: "ZOOM_OUT", class: 'toolbar_zoom_out', icon: 'zoom-out', enableToolbarIcon: true, enableMenu: false, enableHotKey: true }, { title: "FULL_SCREEN", class: 'toolbar_full_screen', icon: 'expand', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "REFRESH", class: 'toolbar_refresh', icon: 'refresh-ccw', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "ROTATE_LEFT", class: 'toolbar_rotate_left', icon: 'rotate-ccw', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "ROTATE_RIGHT", class: 'toolbar_rotate_right', icon: 'rotate-cw', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "SCALE_X", class: 'toolbar_scale_x', icon: 'move-horizontal', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "SCALE_Y", class: 'toolbar_scale_y', icon: 'move-vertical', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "INVERT_COLOR", class: 'toolbar_invert_color', icon: 'droplet', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: "COPY", class: 'toolbar_copy', icon: 'copy', enableToolbarIcon: true, enableMenu: true, enableHotKey: true }, { title: SEPARATOR_SYMBOL, enableToolbarIcon: false, enableMenu: true, enableHotKey: false }, { title: "CLOSE", class: 'toolbar_close', icon: 'trash', enableToolbarIcon: false, enableMenu: true, enableHotKey: true }]; const IMG_FULL_SCREEN_MODE = { FIT: 'FIT', FILL: 'FILL', STRETCH: 'STRETCH' }; const VIEW_IMG_SELECTOR = { EDITOR_AREAS: `.workspace-leaf-content[data-type='markdown'] img,.workspace-leaf-content[data-type='image'] img`, EDITOR_AREAS_NO_LINK: `.workspace-leaf-content[data-type='markdown'] img:not(a img),.workspace-leaf-content[data-type='image'] img:not(a img)`, CPB: `.community-modal-details img`, CPB_NO_LINK: `.community-modal-details img:not(a img)`, OTHER: `.modal-content img`, OTHER_NO_LINK: `.modal-content img:not(a img)`, }; const IMG_BORDER_WIDTH = { THIN: 'thin', MEDIUM: 'medium', THICK: 'thick' }; const IMG_BORDER_STYLE = { // HIDDEN: 'hidden', DOTTED: 'dotted', DASHED: 'dashed', SOLID: 'solid', DOUBLE: 'double', GROOVE: 'groove', RIDGE: 'ridge', INSET: 'inset', OUTSET: 'outset' }; // https://www.runoob.com/cssref/css-colorsfull.html const IMG_BORDER_COLOR = { BLACK: 'black', BLUE: 'blue', DARK_GREEN: 'darkgreen', GREEN: 'green', LIME: 'lime', STEEL_BLUE: 'steelblue', INDIGO: 'indigo', PURPLE: 'purple', GRAY: 'gray', DARK_RED: 'darkred', LIGHT_GREEN: 'lightgreen', BROWN: 'brown', LIGHT_BLUE: 'lightblue', SILVER: 'silver', RED: 'red', PINK: 'pink', ORANGE: 'orange', GOLD: 'gold', YELLOW: 'yellow' }; const GALLERY_NAVBAR_DEFAULT_COLOR = '#0000001A'; // rgba(0, 0, 0, 0.1) const GALLERY_NAVBAR_HOVER_COLOR = '#0000004D'; // rgba(0, 0, 0, 0.3) const GALLERY_IMG_BORDER_ACTIVE_COLOR = '#FF0000'; // red const MODIFIER_HOTKEYS = { NONE: "NONE", CTRL: "CTRL", ALT: "ALT", SHIFT: "SHIFT", CTRL_ALT: "CTRL_ALT", CTRL_SHIFT: "CTRL_SHIFT", SHIFT_ALT: "SHIFT_ALT", CTRL_SHIFT_ALT: "CTRL_SHIFT_ALT" }; const MOVE_THE_IMAGE = { CODE: "MOVE_THE_IMAGE", DEFAULT_HOTKEY: MODIFIER_HOTKEYS.NONE, SVG: `` }; const SWITCH_THE_IMAGE = { CODE: "SWITCH_THE_IMAGE", DEFAULT_HOTKEY: MODIFIER_HOTKEYS.CTRL, SVG: `` }; const IMG_DEFAULT_BACKGROUND_COLOR = '#00000000'; const DEFAULT_SETTINGS = { viewMode: ViewMode.Normal, viewImageInEditor: true, viewImageInCPB: true, viewImageWithLink: 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(); // Common Settings: this.displayCommonSettings(containerEl); // View Trigger Settings: this.displayViewTriggerSettings(containerEl); // Pin Mode Settings: this.displayPinModeSettings(containerEl); //region >>> VIEW_DETAILS_SETTINGS new obsidian.Setting(containerEl).setName(t("VIEW_DETAILS_SETTINGS")).setHeading(); 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(); })); })); new obsidian.Setting(containerEl) .setName(t("IMG_VIEW_BACKGROUND_COLOR_NAME")) .addColorPicker(picker => { picker .setValue(this.plugin.settings.imgViewBackgroundColor || DEFAULT_SETTINGS.imgViewBackgroundColor) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.imgViewBackgroundColor = value; yield this.plugin.saveSettings(); })); }) .addExtraButton(button => { button.setIcon('rotate-ccw') .setTooltip(t('RESET')) .onClick(() => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.imgViewBackgroundColor = DEFAULT_SETTINGS.imgViewBackgroundColor; yield this.plugin.saveSettings(); this.display(); })); }); //endregion //region >>> IMAGE_BORDER_SETTINGS new obsidian.Setting(containerEl).setName(t("IMAGE_BORDER_SETTINGS")).setHeading(); 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: Setting, galleryNavbarHoverColorSetting: Setting, // galleryImgBorderToggleSetting: Setting, galleryImgBorderActiveColorSetting: Setting; new obsidian.Setting(containerEl).setName(t("GALLERY_NAVBAR_SETTINGS")).setHeading(); 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(); }))); const galleryNavbarDefaultColorSetting = new obsidian.Setting(containerEl) .setName(t("GALLERY_NAVBAR_DEFAULT_COLOR_NAME")) .addColorPicker(picker => { picker .setValue(this.plugin.settings.galleryNavbarDefaultColor || DEFAULT_SETTINGS.galleryNavbarDefaultColor) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.galleryNavbarDefaultColor = value; yield this.plugin.saveSettings(); })); }) .addExtraButton(button => { button.setIcon('rotate-ccw') .setTooltip(t('RESET')) .onClick(() => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.galleryNavbarDefaultColor = DEFAULT_SETTINGS.galleryNavbarDefaultColor; yield this.plugin.saveSettings(); this.display(); })); }); const galleryNavbarHoverColorSetting = new obsidian.Setting(containerEl) .setName(t("GALLERY_NAVBAR_HOVER_COLOR_NAME")) .addColorPicker(picker => { picker .setValue(this.plugin.settings.galleryNavbarHoverColor || DEFAULT_SETTINGS.galleryNavbarHoverColor) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.galleryNavbarHoverColor = value; yield this.plugin.saveSettings(); })); }) .addExtraButton(button => { button.setIcon('rotate-ccw') .setTooltip(t('RESET')) .onClick(() => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.galleryNavbarHoverColor = DEFAULT_SETTINGS.galleryNavbarHoverColor; yield this.plugin.saveSettings(); this.display(); })); }); const 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(); }))); const galleryImgBorderActiveColorSetting = new obsidian.Setting(containerEl) .setName(t("GALLERY_IMG_BORDER_ACTIVE_COLOR_NAME")) .addColorPicker(picker => { picker.setValue(this.plugin.settings.galleryImgBorderActiveColor || DEFAULT_SETTINGS.galleryImgBorderActiveColor) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.galleryImgBorderActiveColor = value; yield this.plugin.saveSettings(); })); }) .addExtraButton(button => { button.setIcon('rotate-ccw') .setTooltip(t('RESET')) .onClick(() => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.imgViewBackgroundColor = DEFAULT_SETTINGS.galleryImgBorderActiveColor; yield this.plugin.saveSettings(); this.display(); })); }); this.switchSettingsDisabled(!this.plugin.settings.galleryNavbarToggle, galleryNavbarDefaultColorSetting, galleryNavbarHoverColorSetting, galleryImgBorderToggleSetting, galleryImgBorderActiveColorSetting); //endregion //region >>> HOTKEYS_SETTINGS new obsidian.Setting(containerEl).setName(t("HOTKEY_SETTINGS")).setDesc(t("HOTKEY_SETTINGS_DESC")).setHeading(); 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.addExtraButton(button => { button.setIcon('plus').setDisabled(true); }); setting.controlEl.appendChild(obsidian.sanitizeHTMLToDom(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.addExtraButton(button => { button.setIcon('plus').setDisabled(true); }); setting.controlEl.appendChild(obsidian.sanitizeHTMLToDom(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 } displayCommonSettings(containerEl) { new obsidian.Setting(containerEl) .setName(t("VIEW_MODE_NAME")) .addDropdown((dropdown) => __awaiter(this, void 0, void 0, function* () { for (const key in ViewMode) { // @ts-ignore dropdown.addOption(key, t('VIEW_MODE_' + key.toUpperCase())); } dropdown.setValue(this.plugin.settings.viewMode); dropdown.onChange((option) => __awaiter(this, void 0, void 0, function* () { yield this.plugin.switchViewMode(option); })); })); } displayViewTriggerSettings(containerEl) { new obsidian.Setting(containerEl).setName(t("VIEW_TRIGGER_SETTINGS")).setHeading(); new obsidian.Setting(containerEl) .setName(t("VIEW_IMAGE_IN_EDITOR_NAME")) .setDesc(t("VIEW_IMAGE_IN_EDITOR_DESC")) .addToggle(toggle => toggle .setValue(this.plugin.settings.viewImageInEditor) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.viewImageInEditor = value; this.plugin.refreshViewTrigger(); 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.refreshViewTrigger(); 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.viewImageWithLink) .onChange((value) => __awaiter(this, void 0, void 0, function* () { this.plugin.settings.viewImageWithLink = value; this.plugin.refreshViewTrigger(); 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.refreshViewTrigger(); yield this.plugin.saveSettings(); }))); } displayPinModeSettings(containerEl) { //region >>> PIN_MODE_SETTINGS let pinMaximumSetting; new obsidian.Setting(containerEl).setName(t("PIN_MODE_SETTINGS")).setHeading(); /*new Setting(containerEl) .setName(t("PIN_MODE_NAME")) .setDesc(t("PIN_MODE_DESC")) .addToggle(toggle => toggle .setValue(this.plugin.settings.pinMode) .onChange(async (value) => { this.plugin.settings.pinMode = value; this.switchSettingsDisabled(!value, pinMaximumSetting, pinCoverSetting); //this.plugin.togglePinMode(value); await 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* () { pinMaximumScaleText.innerText = " " + value.toString(); this.plugin.settings.pinMaximum = value; // this.plugin.containerView?.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(); }); 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 } switchSettingsDisabled(disabled, ...settings) { for (const setting of settings) { setting === null || setting === void 0 ? void 0 : setting.setDisabled(disabled); } } 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; } } } } /** * ts class object: image operating status */ 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; /*--layer-status-bar*/ this.clickCount = 0; } } /** * ts class object: image information including all html elements */ 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, windowWidth, windowHeight) => { if (!windowWidth) { windowWidth = document.documentElement.clientWidth || document.body.clientWidth; } if (!windowHeight) { 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) { this.lastClickedImgDefaultStyle = { borderWidth: '', borderStyle: '', borderColor: '' }; this.imgGlobalStatus = new ImgStatusCto(); this.imgInfo = new ImgInfoCto(); this.getViewMode = () => { return this.plugin.settings.viewMode; }; this.isPinMode = () => { return ViewMode.Pin === this.getViewMode(); }; this.isNormalMode = () => { return ViewMode.Normal === this.getViewMode(); }; this.setMenuView = (menuView) => { this.menuView = menuView; }; this.getPlugin = () => { return this.plugin; }; this.getLastClickedImgEl = () => { return this.lastClickedImgEl; }; this.getActiveImg = () => { return this.imgGlobalStatus.activeImg; }; this.getDoc = () => { return this.doc; }; /*public setPinMaximum = (val: number) => { this.pinMaximum = val; }*/ this.getOitContainerViewEl = () => { return this.imgInfo.imgContainerEl; }; this.getParentContainerEl = (targetEl) => { if (!targetEl) { return this.parentContainerEl; } if (!this.parentContainerEl) { this.parentContainerEl = targetEl.matchParent('body'); this.doc = this.parentContainerEl.ownerDocument; } return this.parentContainerEl; }; //region ================== Container View & Init ======================== /** * Render when clicking an image (core step) * @param targetEl clicked image's element * @returns */ this.renderContainer = (targetEl) => { if (!this.checkStatus()) return; const matchedImg = this.initContainerView(targetEl, this.getParentContainerEl(targetEl)); if (!matchedImg) return; this.openOitContainerView(matchedImg); this.renderGalleryNavbar(); this.refreshImg(matchedImg, targetEl.src, targetEl.alt); matchedImg.mtime = new Date().getTime(); }; /** * initContainerDom -> * @param targetEl * @param parentContainerEl targetEl's body */ this.initContainerView = (targetEl, parentContainerEl) => { const matchedImg = this.initContainerDom(parentContainerEl); 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.imgInfo.oitContainerEl) === null || _a === void 0 ? void 0 : _a.remove(); this.imgInfo.oitContainerEl = null; this.imgInfo.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.imgInfo.imgList.length = 0; }; this.checkStatus = () => { const viewMode = this.plugin.getViewMode(); if (!viewMode) return false; // none of popped-up-images if (!this.imgGlobalStatus.popup) return true; // Pin mode && Cover mode if (this.isPinMode() && this.plugin.settings.pinCoverMode) return true; // configured max images > current pop-up images if (this.getConfiguredPinMaximum() > this.imgInfo.getPopupImgNum()) return true; new obsidian.Notice(t("PIN_MAXIMUM_NOTICE")); return false; }; this.getConfiguredPinMaximum = () => { if (this.isPinMode()) return this.plugin.settings.pinMaximum; return 1; }; 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 = (imgInfo) => { if (!(imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.imgContainerEl)) return; const pinMaximum = this.getConfiguredPinMaximum(); const imgNum = this.imgInfo.imgList.length; if (pinMaximum < imgNum) { // remove all imgViewEl and imgList imgInfo.imgContainerEl.innerHTML = ''; // clear imgList imgInfo.imgList.length = 0; } // let isUpdate: boolean = false; const curTime = new Date().getTime(); for (let i = imgNum; i < pinMaximum; i++) { //
``
let imgViewEl = createEl('img'); imgViewEl.addClass(OIT_CLASS.IMG_VIEW); imgViewEl.hidden = true; // hide 'oit-img-view' for now imgViewEl.dataset.index = i + ''; // set data-index this.setImgViewDefaultBackground(imgViewEl); imgInfo.imgContainerEl.appendChild(imgViewEl); // cache imgList imgInfo.imgList.push(new ImgCto(i, curTime, imgViewEl)); // isUpdate = true; } }; this.getMatchedImg = () => { let earliestImg; for (const img of this.imgInfo.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) => { var _a, _b; if (realImg.width > 0 || realImg.height > 0) { clearInterval(imgCto.refreshImgInterval); imgCto.refreshImgInterval = null; this.setImgViewPosition(ImgUtil.calculateImgZoomSize(realImg, imgCto, (_a = this.parentContainerEl) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.parentContainerEl) === null || _b === void 0 ? void 0 : _b.clientHeight), 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.imgInfo.imgTipEl && activeImg.realWidth > 0 && activeImg.curWidth > 0) { if (this.imgInfo.imgTipTimeout) { clearTimeout(this.imgInfo.imgTipTimeout); } if (this.plugin.settings.imgTipToggle) { this.imgInfo.imgTipEl.hidden = false; // display 'oit-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.imgInfo.imgTipEl.style.setProperty("width", width + 'px'); this.imgInfo.imgTipEl.style.setProperty("font-size", isSingleDigit || 100 >= activeImg.curWidth ? 'xx-small' : 'x-small'); this.imgInfo.imgTipEl.style.setProperty("left", left + 'px'); this.imgInfo.imgTipEl.style.setProperty("top", top + 'px'); this.imgInfo.imgTipEl.style.setProperty("z-index", activeImg.zIndex + ''); this.imgInfo.imgTipEl.setText(parseInt(ratio + '') + '%'); this.imgInfo.imgTipTimeout = setTimeout(() => { this.imgInfo.imgTipEl.hidden = true; }, 1000); } else { this.imgInfo.imgTipEl.hidden = true; // hide 'oit-img-tip' this.imgInfo.imgTipTimeout = null; } } }; this.setImgViewDefaultBackgroundForImgList = () => { for (const imgCto of this.imgInfo.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 'oit-img-footer' // show the img-player this.imgInfo.imgPlayerEl.style.setProperty('display', 'block'); this.imgInfo.imgPlayerEl.style.setProperty('z-index', (this.imgGlobalStatus.activeImgZIndex + 10) + ''); this.imgInfo.imgPlayerEl.addEventListener('click', this.closePlayerImg); const windowWidth = this.doc.documentElement.clientWidth || this.doc.body.clientWidth; const windowHeight = this.doc.documentElement.clientHeight || this.doc.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.imgInfo.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.imgInfo.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.imgInfo.imgPlayerEl) { this.imgInfo.imgPlayerEl.style.setProperty('display', 'none'); // hide 'img-player' this.imgInfo.imgPlayerEl.removeEventListener('click', this.closePlayerImg); } if (this.imgInfo.imgPlayerImgViewEl) { this.imgInfo.imgPlayerImgViewEl.setAttribute('src', ''); this.imgInfo.imgPlayerImgViewEl.setAttribute('alt', ''); } this.imgGlobalStatus.fullScreen = false; }; //endregion //region ================== events ======================== this.addOrRemoveEvents = (matchedImg, isAdd) => { if (isAdd) { if (!this.imgGlobalStatus.popup) { this.doc.addEventListener('keydown', this.triggerKeydown); this.doc.addEventListener('keyup', this.triggerKeyup); } if (this.isNormalMode()) { // click event: hide container view this.imgInfo.oitContainerEl.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) { this.doc.removeEventListener('keydown', this.triggerKeydown); this.doc.removeEventListener('keyup', this.triggerKeyup); if (this.imgGlobalStatus.clickTimer) { clearTimeout(this.imgGlobalStatus.clickTimer); this.imgGlobalStatus.clickTimer = null; this.imgGlobalStatus.clickCount = 0; } } if (!this.isPinMode()) { this.imgInfo.oitContainerEl.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) => { // console.log("[oit] checkHotkeySettings: ", event.ctrlKey, event.altKey, event.shiftKey) 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.imgInfo.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; } } 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 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; } } class FileCto { constructor(path, ctime, mtime) { this.path = path; this.ctime = ctime; 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://...) // markdown: `![alt1|alt2|...|altn|width](src)` -> 1: alt (alt+width), 2: src const RE_MARKDOWN_IMAGE = /!\[(.*?)\]\(\s*(.*?\.(jpe?g|png|svg|gif|bmp|webp))\s*\)/i; // 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://...) // RE_WIKILINK_IMAGE wikilink: `![[bird.png|alt1|alt2|2.1|50]]` -> 1: src+alt+width const RE_WIKILINK_IMAGE = /!\[\[(.*?\.(jpe?g|png|svg|gif|bmp|webp).*?)\]\]/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) => { text = text.replace('\\|', '|'); 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(RE_MARKDOWN_IMAGE); // 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(RE_WIKILINK_IMAGE); // 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].trim())) { 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 < this.mainContainerView.getDoc().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 viewImageWithLink = this.plugin.settings.viewImageWithLink; for (let i = 0, len = imgList.length; i < len; i++) { const img = imgList[i]; if (!viewImageWithLink && img.link) continue; //
    • this.galleryListEl.append(liEl = createEl('li')); liEl.append(imgEl = createEl('img')); imgEl.addClass('gallery-img', 'oit-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 = (this.mainContainerView.getDoc().documentElement.clientWidth || this.mainContainerView.getDoc().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 = this.mainContainerView.getDoc().documentElement.clientWidth || this.mainContainerView.getDoc().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 NormalContainerView extends ContainerView { constructor(plugin) { super(plugin); //region ================== Container View ======================== this.initContainerDom = (parentContainerEl) => { let imgCto; if (!this.imgInfo.oitContainerEl) { // init `oit-normal` dom at first time //
      ...
      (this.imgInfo.oitContainerEl = createDiv()).addClass(OIT_CLASS.CONTAINER_ROOT, OIT_CLASS.CONTAINER_NORMAL); parentContainerEl.appendChild(this.imgInfo.oitContainerEl); // 1.
      ...
      this.imgInfo.oitContainerEl.append(this.imgInfo.imgContainerEl = createDiv(OIT_CLASS.IMG_CONTAINER)); // 1.1.
      ``
      this.updateImgViewElAndList(this.imgInfo); // 2.
      this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgTipEl = createDiv(OIT_CLASS.IMG_TTP)); this.imgInfo.imgTipEl.hidden = true; // 3.
      ...
      this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgFooterEl = createDiv(OIT_CLASS.IMG_FOOTER)); // 3.1.
      this.imgInfo.imgFooterEl.appendChild(this.imgInfo.imgTitleEl = createDiv(OIT_CLASS.IMG_TITLE)); // this.imgInfo.imgTitleEl.appendChild(this.imgInfo.imgTitleNameEl = createSpan(OIT_CLASS.IMG_TITLE_NAME)); // this.imgInfo.imgTitleEl.appendChild(this.imgInfo.imgTitleIndexEl = createSpan(OIT_CLASS.IMG_TITLE_INDEX)); // 3.2.
        const imgToolbarUlEL = createEl('ul'); imgToolbarUlEL.addClass(OIT_CLASS.IMG_TOOLBAR); this.imgInfo.imgFooterEl.appendChild(imgToolbarUlEL); let toolbarLi; for (const toolbar of TOOLBAR_CONF) { if (!toolbar.enableToolbarIcon) continue; imgToolbarUlEL.appendChild(toolbarLi = createEl('li')); toolbarLi.addClass(toolbar.class); toolbarLi.setAttribute('alt', toolbar.title); // @ts-ignore toolbarLi.setAttribute('title', t(toolbar.title)); } // add event: for oit-img-toolbar ul imgToolbarUlEL.addEventListener('click', this.clickImgToolbar); //
        this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgPlayerEl = createDiv(OIT_CLASS.IMG_PLAYER)); // img-player for full screen mode this.imgInfo.imgPlayerEl.appendChild(this.imgInfo.imgPlayerImgViewEl = createEl('img')); this.imgInfo.imgPlayerImgViewEl.addClass(OIT_CLASS.IMG_FULLSCREEN); } imgCto = this.imgInfo.imgList[0]; this.imgGlobalStatus.activeImg = imgCto; return imgCto; }; this.openOitContainerView = (matchedImg) => { if (!this.imgInfo.oitContainerEl) { console.error('obsidian-image-toolkit: oit-*-container-view has not been initialized!'); return; } matchedImg.popup = true; this.imgGlobalStatus.popup = true; // display 'oit-normal' this.imgInfo.oitContainerEl.style.setProperty('display', 'block'); }; this.closeContainerView = (event, activeImg) => { if (event) { const target = event.target; if (!target || !(target.hasClass(OIT_CLASS.CONTAINER_ROOT) || target.hasClass(OIT_CLASS.IMG_CONTAINER))) return; } if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg)) return; if (this.imgInfo.oitContainerEl) { this.imgInfo.oitContainerEl.style.setProperty('display', 'none'); // hide 'oit-normal' this.renderImgTitle('', ''); this.renderImgView(activeImg.imgViewEl, '', ''); // remove events this.imgGlobalStatus.popup = false; activeImg.popup = false; activeImg.mtime = 0; this.addOrRemoveEvents(activeImg, false); } if (this.plugin.settings.galleryNavbarToggle && this.galleryNavbarView) { this.galleryNavbarView.closeGalleryNavbar(); } }; //endregion //region ================== Gallery Navbar ======================== this.renderGalleryNavbar = () => { //
        if (!this.plugin.settings.galleryNavbarToggle) return; if (!this.galleryNavbarView) { this.galleryNavbarView = new GalleryNavbarView(this, this.plugin); } this.galleryNavbarView.renderGalleryImg(this.imgInfo.imgFooterEl); }; this.removeGalleryNavbar = () => { if (!this.galleryNavbarView) return; this.galleryNavbarView.remove(); this.galleryNavbarView = null; }; //endregion this.renderImgTitle = (name, index) => { var _a, _b; if (undefined !== name && null !== name) (_a = this.imgInfo.imgTitleNameEl) === null || _a === void 0 ? void 0 : _a.setText(name); if (undefined !== index && null !== index) (_b = this.imgInfo.imgTitleIndexEl) === null || _b === void 0 ? void 0 : _b.setText(' ' + index); }; this.switchImageOnGalleryNavBar = (event, next) => { var _a; if (!this.checkHotkeySettings(event, this.plugin.settings.switchTheImageHotkey)) return; (_a = this.galleryNavbarView) === null || _a === void 0 ? void 0 : _a.switchImage(next); }; } setActiveImgForMouseEvent(imgCto) { } } /** * Right click menu */ class MenuView { constructor(pinContainerView) { this.init = () => { if (this.menu) return; this.menu = new obsidian.Menu(); for (const itemConf of TOOLBAR_CONF) { if (!itemConf.enableMenu) continue; if (SEPARATOR_SYMBOL === itemConf.title) { this.menu.addSeparator(); continue; } this.menu.addItem(item => { if (itemConf.icon) item.setIcon(itemConf.icon); // @ts-ignore item.setTitle(t(itemConf.title)) .onClick(() => { this.pinContainerView.clickImgToolbar(null, itemConf.class, MenuView.activeImg); }); }); } }; this.show = (event, activeImg) => { MenuView.activeImg = activeImg; this.init(); this.menu.showAtPosition({ x: event.clientX, y: event.clientY }); }; this.pinContainerView = pinContainerView; } } /** * PinContainerView: Pin an image on the top * @Support: move an image by mouse; close an image by Esc * @Nonsupport: move an image by keyboard; display gallery navbar */ class PinContainerView extends ContainerView { constructor(plugin /*, viewMode: ViewMode*/) { super(plugin /*, viewMode, plugin.settings.pinMaximum*/); //region ================== Container View ======================== this.initContainerDom = (parentContainerEl) => { /*
        ...
        */ if (!this.imgInfo.oitContainerEl) { // init at first time // create:
        (this.imgInfo.oitContainerEl = createDiv()).addClass(OIT_CLASS.CONTAINER_ROOT, OIT_CLASS.CONTAINER_PIN); parentContainerEl.appendChild(this.imgInfo.oitContainerEl); //
        this.imgInfo.oitContainerEl.append(this.imgInfo.imgContainerEl = createDiv(OIT_CLASS.IMG_CONTAINER)); //
        this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgTipEl = createDiv(OIT_CLASS.IMG_TTP)); // oit-img-tip this.imgInfo.imgTipEl.hidden = true; // hide 'oit-img-tip' //
        this.imgInfo.oitContainerEl.appendChild(this.imgInfo.imgPlayerEl = createDiv(OIT_CLASS.IMG_PLAYER)); // img-player for full screen mode this.imgInfo.imgPlayerEl.appendChild(this.imgInfo.imgPlayerImgViewEl = createEl('img')); this.imgInfo.imgPlayerImgViewEl.addClass(OIT_CLASS.IMG_FULLSCREEN); } //
        this.updateImgViewElAndList(this.imgInfo); return this.getMatchedImg(); }; this.openOitContainerView = (matchedImg) => { if (!this.imgInfo.oitContainerEl) { console.error('obsidian-image-toolkit: oit-*-container-view has not been initialized!'); return; } matchedImg.popup = true; if (!this.imgGlobalStatus.popup) { this.imgGlobalStatus.popup = true; this.imgGlobalStatus.activeImgZIndex = 0; this.imgInfo.imgList.forEach(value => { value.zIndex = 0; }); } else { matchedImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex); } matchedImg.imgViewEl.style.setProperty('z-index', matchedImg.zIndex + ''); // display 'oit-pin-container-view' this.imgInfo.oitContainerEl.style.setProperty('display', 'block'); }; /** * hide container view * @param event not null: click event; null: keyboard event (Esc) * @param activeImg */ this.closeContainerView = (event, activeImg) => { if (event && !activeImg) { // PinContainerView doesn't need click event to hide container for now return; } if (!this.imgInfo.oitContainerEl) return; if (!activeImg && !(activeImg = this.imgGlobalStatus.activeImg)) return; // console.log('closeContainerView', event, activeImg) this.renderImgView(activeImg.imgViewEl, '', ''); activeImg.popup = false; activeImg.mtime = 0; let globalPopupFlag = false; for (const imgCto of this.imgInfo.imgList) { if (imgCto.popup) { globalPopupFlag = true; break; } } if (!globalPopupFlag) { this.imgInfo.oitContainerEl.style.setProperty('display', 'none'); // hide 'oit-pin-container-view' this.imgGlobalStatus.activeImgZIndex = 0; this.imgInfo.imgList.forEach(value => { value.zIndex = 0; }); } this.imgGlobalStatus.popup = globalPopupFlag; this.addOrRemoveEvents(activeImg, false); }; //endregion this.setActiveImgZIndex = (activeImg) => { var _a; let isUpdate = false; for (const imgCto of this.imgInfo.imgList) { if (activeImg.index !== imgCto.index && activeImg.zIndex <= imgCto.zIndex) { isUpdate = true; break; } } if (isUpdate) { activeImg.zIndex = (++this.imgGlobalStatus.activeImgZIndex); (_a = activeImg.imgViewEl) === null || _a === void 0 ? void 0 : _a.style.setProperty("z-index", activeImg.zIndex + ''); } }; this.setMenuView(new MenuView(this)); } setActiveImgForMouseEvent(imgCto) { this.imgGlobalStatus.activeImg = imgCto; } } class ContainerFactory { constructor() { // popout window containers: hash -> ContainerView this.popoutContainers = new Map(); this.setMainContainer = (container) => { this.mainContainer = container; }; this.getMainContainer = () => { return this.mainContainer; }; this.setPopoutContainer = (key, container) => { this.popoutContainers.set(key, container); }; this.getPopoutContainer = (key) => { return this.popoutContainers.get(key); }; this.getPopoutContainers = () => { return this.popoutContainers; }; this.getContainer = (targetEl) => { const bodyEl = targetEl === null || targetEl === void 0 ? void 0 : targetEl.matchParent('body'); if (!bodyEl) return null; const oitEventKey = bodyEl.getAttribute('data-oit-event'); if (oitEventKey) { //popout window return this.getPopoutContainer(oitEventKey); } return this.mainContainer; }; this.getAllContainers = () => { let allContainerViews = [this.mainContainer]; for (let value of this.popoutContainers.values()) { allContainerViews.push(value); } return allContainerViews; }; this.clearAll = () => { this.mainContainer = null; this.popoutContainers.clear(); }; } } class ImageToolkitPlugin extends obsidian.Plugin { constructor() { super(...arguments); this.containerFactory = new ContainerFactory(); this.imgSelector = ``; this.addIcons = () => __awaiter(this, void 0, void 0, function* () { for (const icon of ICONS) { obsidian.addIcon(icon.id, icon.svg); } }); this.getViewMode = () => { return this.settings.viewMode; }; this.setViewMode = (viewMode) => { return this.settings.viewMode = viewMode; }; this.checkViewMode = (viewMode) => __awaiter(this, void 0, void 0, function* () { for (const key in ViewMode) { if (key == viewMode) { return; } } this.setViewMode(DEFAULT_VIEW_MODE); console.log('[oit] Reset view mode: %s', DEFAULT_VIEW_MODE); yield this.saveSettings(); }); this.getAllContainerViews = () => { return this.containerFactory.getAllContainers(); }; this.initContainer = (viewMode, popoutWindowEventId) => __awaiter(this, void 0, void 0, function* () { const container = yield this.initContainerByViewMode(viewMode); if (!container) { console.error('[oit] Cannot init container'); return; } if (popoutWindowEventId) { // popoutWindowEventId will be recorded into data-oit-event'of body tag this.containerFactory.setPopoutContainer(popoutWindowEventId, container); } else { this.containerFactory.setMainContainer(container); } }); this.initContainerByViewMode = (viewMode, fromDefault) => __awaiter(this, void 0, void 0, function* () { switch (viewMode) { case ViewMode.Normal: return new NormalContainerView(this); case ViewMode.Pin: return new PinContainerView(this); default: if (fromDefault) { return null; } this.setViewMode(viewMode = DEFAULT_VIEW_MODE); yield this.saveSettings(); console.log('[oit] Reset view mode to: %s', viewMode); return this.initContainerByViewMode(viewMode, true); } }); this.isImageElement = (imgEl) => { return imgEl && 'IMG' === imgEl.tagName; }; this.isClickable = (targetEl, event) => { let container; if (this.isImageElement(targetEl) && (container = this.containerFactory.getContainer(targetEl)) && container.checkHotkeySettings(event, this.settings.viewTriggerHotkey)) { return container; } return null; }; this.switchViewMode = (viewMode) => __awaiter(this, void 0, void 0, function* () { this.settings.viewMode = viewMode; yield this.saveSettings(); this.getAllContainerViews().forEach(container => { var _a; container.removeOitContainerView(); this.initContainer(viewMode, (_a = container.getParentContainerEl()) === null || _a === void 0 ? void 0 : _a.getAttribute('data-oit-event')); }); }); /** * refresh events for main container */ this.refreshViewTrigger = (doc) => { // .workspace-leaf-content[data-type='markdown'] img,.workspace-leaf-content[data-type='image'] img const viewImageInEditor = this.settings.viewImageInEditor; // .community-modal-details img const viewImageInCPB = this.settings.viewImageInCPB; // false: ... img:not(a img) const viewImageWithLink = this.settings.viewImageWithLink; // #sr-flashcard-view img const viewImageOther = this.settings.viewImageOther; if (!doc) { doc = document; } if (this.imgSelector) { doc.off('click', this.imgSelector, this.clickImage); doc.off('mouseover', this.imgSelector, this.mouseoverImg); doc.off('mouseout', this.imgSelector, this.mouseoutImg); } if (!viewImageOther && !viewImageInEditor && !viewImageInCPB && !viewImageWithLink) { return; } let selector = ``; if (viewImageInEditor) { selector += (viewImageWithLink ? VIEW_IMG_SELECTOR.EDITOR_AREAS : VIEW_IMG_SELECTOR.EDITOR_AREAS_NO_LINK); } if (viewImageInCPB) { selector += (1 < selector.length ? `,` : ``) + (viewImageWithLink ? VIEW_IMG_SELECTOR.CPB : VIEW_IMG_SELECTOR.CPB_NO_LINK); } if (viewImageOther) { selector += (1 < selector.length ? `,` : ``) + (viewImageWithLink ? VIEW_IMG_SELECTOR.OTHER : VIEW_IMG_SELECTOR.OTHER_NO_LINK); } if (selector) { this.imgSelector = selector; // doc.onclick = (event: MouseEvent) =>{ // console.log(event.target); // } doc.on('click', this.imgSelector, this.clickImage); doc.on('mouseover', this.imgSelector, this.mouseoverImg); doc.on('mouseout', this.imgSelector, this.mouseoutImg); } }; this.clickImage = (event) => { const targetEl = event.target; let container = this.isClickable(targetEl, event); if (container) { container.renderContainer(targetEl); } }; this.mouseoverImg = (event) => { const targetEl = event.target; if (!this.isClickable(targetEl, event)) { return; } if (null == targetEl.getAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR)) { targetEl.setAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR, targetEl.style.cursor || ''); } targetEl.style.cursor = 'zoom-in'; }; this.mouseoutImg = (event) => { const targetEl = event.target; if (!this.isClickable(targetEl, event)) { return; } targetEl.style.cursor = targetEl.getAttribute(ImageToolkitPlugin.IMG_ORIGIN_CURSOR); }; } onload() { return __awaiter(this, void 0, void 0, function* () { console.log('loading %s plugin v%s ...', this.manifest.id, this.manifest.version); yield this.loadSettings(); this.addSettingTab(new ImageToolkitSettingTab(this.app, this)); // this.registerCommands(); yield this.initContainer(this.settings.viewMode); this.refreshViewTrigger(); // addEventListener for opened new windows this.app.workspace.on('layout-change', () => { this.app.workspace.iterateAllLeaves((leaf) => { var _a; if (['markdown', 'image'].includes((_a = leaf.getViewState()) === null || _a === void 0 ? void 0 : _a.type)) { const bodyEl = leaf.view.containerEl.matchParent('body'); if (bodyEl === null || bodyEl === void 0 ? void 0 : bodyEl.hasClass('is-popout-window')) { if (!bodyEl.hasAttribute(ImageToolkitPlugin.POPOUT_WINDOW_EVENT)) { console.log('popout leaf:', leaf, leaf.getDisplayText()); const eventId = crypto.randomUUID(); this.initContainer(this.settings.viewMode, eventId); bodyEl.setAttr(ImageToolkitPlugin.POPOUT_WINDOW_EVENT, eventId); this.refreshViewTrigger(bodyEl.ownerDocument); } } } }); }); }); } onunload() { console.log('unloading ' + this.manifest.id + ' plugin...'); this.getAllContainerViews().forEach(container => { container.removeOitContainerView(); }); this.containerFactory.clearAll(); document.off('click', this.imgSelector, this.clickImage); document.off('mouseover', this.imgSelector, this.mouseoverImg); document.off('mouseout', this.imgSelector, this.mouseoutImg); } loadSettings() { return __awaiter(this, void 0, void 0, function* () { this.settings = Object.assign({}, DEFAULT_SETTINGS, yield this.loadData()); yield this.checkViewMode(this.getViewMode()); yield this.addIcons(); }); } saveSettings() { return __awaiter(this, void 0, void 0, function* () { yield this.saveData(this.settings); }); } registerCommands() { return __awaiter(this, void 0, void 0, function* () { /* this.addCommand({ "id": "oit-move-up-image", "name": "move up the image", hotkeys: [{ modifiers: ["Ctrl"], key: "ArrowUp" }], checkCallback: (checking: boolean) => { if (checking) return false; this.containerView.moveImgViewByHotkey('UP'); }, }); */ }); } } ImageToolkitPlugin.IMG_ORIGIN_CURSOR = 'data-oit-origin-cursor'; // data-oit-event: 标识new window是否已addEventListener for click ImageToolkitPlugin.POPOUT_WINDOW_EVENT = 'data-oit-event'; module.exports = ImageToolkitPlugin; /* nosourcemap */