feat: mas skinning

lunarwtr · May 14, 2022 · c8365e9 · c8365e9
1 parent 35f736b
commit c8365e9
Show file tree

Hide file tree

Showing 14 changed files with 43,785 additions and 1,982 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## [1.0.12] - 2022-05-14
+### Added
+- Improvement: Skinning preview nearly complete
+- Improvement: New Setting to keep converted TGA in skin asset folder
+- Improvement: Setting to open preview Beside editor or not
+- Fix: Skin is now merged with base skin definition to suppliment what is left out by author
+
 ## [1.0.11] - 2022-05-07
 ### Added
 - Improvement: Initial work for rendering skins in a webview (work in progress)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "lotro-api",
     "displayName": "LotRO API",
     "description": "Lord of the Rings Online API - Adds IntelliSense features for LotRO API.",
-    "version": "1.0.11",
+    "version": "1.0.12",
     "publisher": "lunarwtr",
     "repository": {
         "type": "git",
@@ -88,6 +88,20 @@
                     "type": "string",
                     "default": null,
                     "description": "Path to Skinning Assets Folder.\n\nDownload and unzip to your machine from Lotro Interface (https://www.lotrointerface.com/downloads/info1173-UnofficialUpdate32SkinningPack.html)"
+                },
+                "lotro-api.keepConvertedAssets": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "Keep converted TGA to PNG skinning assets in Skinning Assets Folder.\n\n(Speeds up Skinning Preview rendering speed)"
+                },
+                "lotro-api.skinningPreviewColumn": {
+                    "type": "string",
+                    "enum": [
+                        "Active",
+                        "Beside"
+                    ],
+                    "default": "Beside",
+                    "description": "How to open the Skinning Preview screen (vscode.ViewColumn)"
                 }
             }
         }
@@ -117,7 +131,7 @@
         "mocha": "^9.2.1",
         "ts-loader": "^9.2.6",
         "typescript": "^4.5.5",
-        "webpack": "^5.69.1",
+        "webpack": "^5.72.1",
         "webpack-cli": "^4.9.2"
     },
     "dependencies": {

diff --git a/resources/img/vscode-lotro-api.png b/resources/img/vscode-lotro-api.png
diff --git a/resources/media/main.js b/resources/media/main.js
@@ -5,19 +5,8 @@
     const vscode = acquireVsCodeApi();
     const regexp = /scale\(([0-9\.]+)\)/;
 
-    // Handle messages sent from the extension to the webview
-    window.addEventListener('message', (event) => {
-        const message = event.data // The json data that the extension sent
-        switch (message.command) {
-            case 'refactor':
-                currentCount = Math.ceil(currentCount * 0.5)
-                counter.textContent = `${currentCount}`
-                break
-        }
-    })
-
     // Set VS Code state
-    let state = JSON.parse(document.getElementById('skin-panel-container').getAttribute('data-state'))
+    let state = JSON.parse(document.getElementById('skin-panel').getAttribute('data-state'))
     vscode.setState(state)
 
     window.addEventListener(
@@ -34,32 +23,48 @@
             document.getElementById('zoom_reset').addEventListener('click', zoomReset)
             document.getElementById('zoom_fit').addEventListener('click', zoomFit)
             document.getElementById('skin-panel-ddl').addEventListener('change', selectPanel)
-            var cont = document.getElementById('skin-panel-container')
+            document.getElementById('show_skin_border').addEventListener('click', toggleBorders)
+            var cont = document.getElementById('skin-panel')
             cont.style.transform = 'scale(' + (state.zoom === 'fit' ? calcFitScale() || 1 : state.zoom) + ')'
         },
         false
     )
     function selectPanel() {
-        var ddl = document.getElementById('skin-panel-ddl')
-        state.selectedPanelID = ddl.value
-        vscode.setState(state)
+        var ddl = document.getElementById('skin-panel-ddl');
+        state.selectedPanelID = ddl.value;
+        vscode.setState(state);
         vscode.postMessage({
             command: 'setState',
             body: state,
-        })
+        });
+    }
+    function toggleBorders() {
+        var cbx = document.getElementById('show_skin_border');
+        var cont = document.getElementById('skin-panel');
+        if (cbx.checked) {
+            cont.classList.add('display-borders');
+        } else {
+            cont.classList.remove('display-borders');
+        }
+        state.showBorders = cbx.checked;
+        vscode.setState(state);
+        vscode.postMessage({
+            command: 'setState',
+            body: state,
+        });
     }
     function zoomIn() {
-        var cont = document.getElementById('skin-panel-container')
-        var zoomFloat = currentZoomValue(cont)
-        zoomFloat += zoomFloat * 0.1
-        setZoom(cont, zoomFloat)
+        var cont = document.getElementById('skin-panel');
+        var zoomFloat = currentZoomValue(cont);
+        zoomFloat += zoomFloat * 0.1;
+        setZoom(cont, zoomFloat);
     }
     function zoomOut() {
-        var cont = document.getElementById('skin-panel-container')
-        var zoomFloat = currentZoomValue(cont)
-        zoomFloat -= zoomFloat * 0.1
+        var cont = document.getElementById('skin-panel');
+        var zoomFloat = currentZoomValue(cont);
+        zoomFloat -= zoomFloat * 0.1;
         if (zoomFloat < 0.1) return
-        setZoom(cont, zoomFloat)
+        setZoom(cont, zoomFloat);
     }
     function setZoom(cont, zoomFloat, isFit) {
         cont.style.transform = 'scale(' + zoomFloat + ')'
@@ -71,17 +76,17 @@
         })
     }
     function zoomReset() {
-        var cont = document.getElementById('skin-panel-container')
+        var cont = document.getElementById('skin-panel')
         setZoom(cont, 1.0)
     }
     function calcFitScale() {
-        var cont = document.getElementById('skin-panel-container')
-        var scale = Math.min((document.documentElement.clientWidth - 15) / cont.offsetWidth, (document.documentElement.clientHeight - 15) / cont.offsetHeight)
+        var cont = document.getElementById('skin-panel')
+        var scale = Math.min((document.documentElement.clientWidth - 25) / cont.offsetWidth, (document.documentElement.clientHeight - 60) / cont.offsetHeight)
         return scale
     }
     function zoomFit() {
         var scale = calcFitScale()
-        setZoom(document.getElementById('skin-panel-container'), scale, true)
+        setZoom(document.getElementById('skin-panel'), scale, true)
     }
     function currentZoomValue(cont) {
         if (cont.style.transform) {