add a mod that can use to scale the notion view

2025-04-18 18:59:01 +00:00 · 2021-07-10 20:34:52 +08:00 · 2021-07-10 20:34:52 +08:00 · bfa0e11278
commit bfa0e11278
parent 8393aa325b
2 changed files with 174 additions and 0 deletions
--- a/mods/view-scale/app.css
+++ b/mods/view-scale/app.css
@ -0,0 +1,59 @@
+/*
+ * view-scale
+ * (c) 2020 SP12893678 (https://github.com/SP12893678)
+ * under the MIT license
+ */
+
+ .bottom-right-buttons {
+    position: absolute;
+    bottom: 33px;
+    right: 33px;
+    z-index: 101;
+    cursor: default;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+  
+  .bottom-right-buttons > div {
+    margin-top: 8px;
+    pointer-events: auto;
+    user-select: none;
+    position: static !important;
+    width: 40px;
+    border-radius: 100%;
+    font-size: 20px;
+    box-shadow: rgba(50, 50, 50, 0.05) 0px 0px 0px 1px, rgba(50, 50, 50, 0.05) 0px 2px 4px;
+}
+
+.notion-scale-contaienr{
+    border: 1px solid rgba(200, 200, 200, 0.5);
+    border-radius: 8px !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.notion-scale-contaienr div{
+    margin: 4px 0px;
+    cursor: pointer;
+}
+
+.notion-scale-view{
+    font-size: 12px;
+    font-weight: bold;
+}
+  
+.notion-scale-button{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: bold;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    background: var(--theme--interactive_hover);
+}
--- a/mods/view-scale/mod.js
+++ b/mods/view-scale/mod.js
@ -0,0 +1,115 @@
+/*
+ * view-scale
+ * (c) 2020 SP12893678 (https://github.com/SP12893678)
+ * under the MIT license
+ */
+
+'use strict';
+const electron = require('electron');
+const { createElement } = require('../../pkg/helpers.js');
+
+module.exports = {
+  id: 'e71ce1e0-024c-435e-a25e-7dd50448d1df',
+  tags: ['extension'],
+  name: 'view-scale',
+  desc: 'scale the notion view',
+  version: '1.0.0',
+  author: 'SP12893678',
+  options: [
+    {
+      key: 'showUI',
+      label: 'show scale ui',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'offset',
+      label: 'set scale plus and minus offset',
+      type: 'input',
+      value: 10,
+    },
+    {
+        key: 'zoom',
+        label: 'set scale default value',
+        type: 'input',
+        value: 100,
+    }
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+        document.addEventListener('readystatechange', (event) => {
+            if (document.readyState !== 'complete') return false;
+            
+            const attempt_interval = setInterval(enhance, 500);
+            function enhance() {
+                if (!document.querySelector('.notion-frame')) return;
+                clearInterval(attempt_interval);
+
+                electron.webFrame.setZoomFactor(store().zoom / 100) 
+                let zoom = store().zoom / 100
+                let offset = store().offset / 100
+                let minZoom = 0.5
+                let maxZoom = 2
+
+                const $container = document.createElement('div');
+                const $helpButton = document.querySelector('.notion-help-button');
+
+                const $scaleSet = createElement('<div class="notion-scale-contaienr"></div>');
+                const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
+                const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
+                const $scaleMinusButton = createElement('<div class="notion-scale-button">－</div>');
+
+                if(store().showUI){
+                    $scalePlusButton.addEventListener('click',()=>{
+                        zoomPlus()
+                        if(store().showUI) changeScaleViewUIValue()
+                    })
+                    $scaleMinusButton.addEventListener('click',()=>{
+                        zoomMinus()
+                        if(store().showUI) changeScaleViewUIValue()
+                    })
+    
+                    $scaleSet.append($scalePlusButton)
+                    $scaleSet.append($scaleView)
+                    $scaleSet.append($scaleMinusButton)
+                    
+                    $container.className = 'bottom-right-buttons';
+                    $helpButton.after($container);
+                    $container.append($scaleSet);
+                    $container.append($helpButton);
+
+                    changeScaleViewUIValue()
+                }
+
+                document.defaultView.addEventListener('keydown', (event) => {
+                    if (event.key == '+' && event.ctrlKey){
+                        zoomPlus()
+                        if(store().showUI) changeScaleViewUIValue()
+                    }
+                        
+                    if (event.key == '-' && event.ctrlKey){
+                        zoomMinus()
+                        if(store().showUI) changeScaleViewUIValue()
+                    }
+                })
+        
+                function zoomPlus() {
+                    if(zoom + offset > maxZoom) return
+                    zoom += offset
+                    electron.webFrame.setZoomFactor(zoom)
+                }
+        
+                function zoomMinus() {
+                    if(zoom + offset < minZoom) return
+                    zoom -= offset
+                    electron.webFrame.setZoomFactor(zoom)    
+                }
+
+                function changeScaleViewUIValue() {
+                    $scaleView.innerHTML = Math.round(zoom * 100) + "%"
+                }
+            }
+        })
+    },
+  },
+};