diff --git a/extension/icon.svg b/extension/icon.svg new file mode 100644 index 0000000..cb8c745 --- /dev/null +++ b/extension/icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + diff --git a/extension/main.js b/extension/main.js new file mode 100644 index 0000000..e64a162 --- /dev/null +++ b/extension/main.js @@ -0,0 +1,89 @@ +extensionId = 'extension-toggleview-id'.split('-')[1]; // this format is needed to set the Extension ID during install +manifest = easyeda.extension.instances[extensionId].manifest; + +commands = new Array(); +commands[`extension-${extensionId}-toggle`] = () => { + obj = document.querySelectorAll('#tabbar_bodies div[uuid]').filter(e=>e.style.display=='block')[0]; // get active tab + obj = obj.querySelector('iframe'); + if(!obj) return; + if(obj.style.transform == 'scaleX(-1)') { + obj.removeEventListener ('mousemove',flipmousevent,{capture: true}); + obj.removeEventListener('mouseup',flipmousevent,{capture: true}); + obj.removeEventListener('mousedown',flipmousevent,{capture: true}); + obj.style.transform = ''; + } else { + obj.addEventListener('mousemove',flipmousevent,{capture: true}); + obj.addEventListener('mouseup',flipmousevent,{capture: true}); + obj.addEventListener('mousedown',flipmousevent,{capture: true}); + obj.style.transform = 'scaleX(-1)'; + } +}; +commands[`extension-${extensionId}-about`] = () => { + aboutdlg.dialog('open'); +}; + +api('createCommand', commands); + +api('createToolbarButton', { + icon: api('getRes', { file: 'icon.svg' }), + title: 'Toggle PCB view', + fordoctype: 'pcb', + menu:[ + { + text: "Toggle View", + cmd: `extension-${extensionId}-toggle`, + title: 'Toggle PCB View between Top and Bottom', + icon: api('getRes', { file: 'icon.svg' }) + }, + { + text: "About", + cmd: `extension-${extensionId}-about` + } + ] +}); + +var aboutdlg = api('createDialog', { + title: `${manifest.name} - About`, + content : ` +
+

${manifest.name}

+

Version: ${manifest.version}

+

Icons by freepik from www.flaticon.com

+

Visit ${manifest.homepage} for updates

+
+`, + width : 320, + modal : true, + collapsible: false, + resizable: false, + buttons : [{ + text : 'Close', + cmd : 'dialog-close' + } + ] +}); + +flipmousevent = (e) => { + if(e.isTrusted) { + e.stopImmediatePropagation(); + w = e.target.clientWidth; + f = new MouseEvent(e.type, { + x: w-e.x, + y: e.y, + clientX: w-e.clientX, + clientY: e.clientY, + movementX: e.movementX*-1, + movementY: e.movementY, + button: e.button, + buttons: e.buttons, + screenX: e.screenX, + screenY: e.screenY, + bubbles: e.bubbles, + altKey: e.altKey, + ctrlKey: e.ctrlKey, + metaKey: e.metaKey, + shiftKey: e.shiftKey + }); + e.target.dispatchEvent(f); + } +} \ No newline at end of file diff --git a/extension/manifest.json b/extension/manifest.json new file mode 100644 index 0000000..1e8ebcf --- /dev/null +++ b/extension/manifest.json @@ -0,0 +1,10 @@ +{ + "name": "ToggleView", + "description": "Allows you to switch the PCB View between Top and Bottom View.", + "version": "1.0", + "homepage": "https://github.com/xsrf/easyeda-toggleview", + "icons": { + "default": "icon.svg" + }, + "scripts": [ "main.js" ] +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..d9e1901 --- /dev/null +++ b/readme.md @@ -0,0 +1,15 @@ +EasyEDA ToggleView Extension +============================ +Download this code, open [EasyEDA](https://easyeda.com/editor), go to "Advanced" > "Extensions" > "Extensions Settings ..." > "Load Extension..." > "Select Files ..." > Select all files from the "extension" directory > "Load Extension". + +A "ToggleView" Menu should appear in the main menu in PCB view. + +Known Issues +------------ +The X ruler is not flipped correctly + +How does it work? +----------------- +This is just a hacky workaround until EasyEDA implements it correctly. +It basically applies the style `transform: scaleX(-1)` to the editor to flip it in X direction. +To still be able to interact (click) with the flipped view with your mouse correctly, all mouse events also need to be catched and flipped in x direction. \ No newline at end of file