Big maintenance update

Author: 4eb0da

.eslintrc

@@ -0,0 +1,5 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
+  }

.gitignore

@@ -1,8 +1,7 @@
+node_modules
+/dist
 *.js
 *.js.map
-!docs/convert/convertOut.js
-!docs/preview/previewOut.js
-!docs/decodeblp/decodeblpOut.js
-!docs/optframes/optframesOut.js
-!docs/shim.js
+!samples.webpack.config.js
 !third_party/decoder.js
+!docs/*/dist/*.js

.npmignore

@@ -0,0 +1 @@
+save-exact=true

.npmrc

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 4eb0da
+Copyright (c) 2017-2021 4eb0da
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -2,30 +2,37 @@
 TypeScript-based mdl/mdx (Warcraft 3 model formats) converter/renderer
 
 ## Demo
-* [MDL/MDX converter (also json-like structure-previewer)](https://4eb0da.github.io/war3-model/convert.html)
-* [WebGL model previewer](https://4eb0da.github.io/war3-model/preview.html)
-* [BLP previewer (BLP1 decoder only)](https://4eb0da.github.io/war3-model/decodeblp.html)
+* [MDL/MDX converter (also json-like structure-previewer)](https://4eb0da.github.io/war3-model/convert/convert.html)
+* [WebGL model previewer](https://4eb0da.github.io/war3-model/preview/preview.html)
+* [BLP previewer (BLP1 decoder only)](https://4eb0da.github.io/war3-model/decodeblp/decodeblp.html)
+* [Simple model optimizer](https://4eb0da.github.io/war3-model/optframes/optframes.html)
 
 ## Usage
+
+* [Usage in Node.js or with bundler (e.g. webpack)](docs/node.md)
+* [Usage in browser as external script](docs/browser-global.md)
+* [Usage in browser as ES Module directly](docs/browser-es.md)
+* [Exported APIs](docs/interface.md)
+* [How to render model in browser](docs/how-to-render.md)
+
 ```bash
 npm i war3-model --save
 ```
 
 MDL parsing/generation
 ```typescript
-import {parse as parseMDL} from 'war3-model/mdl/parse';
-import {generate as generateMDL} from 'war3-model/mdl/generate';
+import { parseMDL, generateMDL } from 'war3-model';
 
 let model = parseMDL('...');
 let mdl = generateMDL(model);
 console.log(mdl);
 ```
 
-BLP => PNG node.js converter
+BLP => PNG node.js cli converter
 ```typescript
 import * as fs from 'fs';
-import {PNG} from 'pngjs';
-import {decode, getImageData} from 'war3-model/blp/decode';
+import { PNG } from 'pngjs';
+import { decodeBLP, getBLPImageData } from 'war3-model';
 
 let blp = decode(new Uint8Array(fs.readFileSync(process.argv[2])).buffer);
 let imageData = getImageData(blp, 0);
@@ -36,6 +43,18 @@ png.data = Buffer.from(imageData.data.buffer);
 fs.writeFileSync('out.png', PNG.sync.write(png));
 ```
 
+## Is it good enough?
+
+100% of old classic Warcraft 3 models can be parsed.
+
+After conversion `mdx binary file` -> `in-memory structure` -> `mdx binary file` all of them would be byte-to-byte identical.
+
+~98.4% of models (3276/3329) would be identical after `mdx` -> `structure` -> `mdl` -> `structure` -> `mdx` (because warcraft contains extraneous data in models and because of unsupported multiple texture chunks in mdl).
+
+## What about Reforged?
+
+Nope. Currently not supported, sorry
+
 ## MDL/MDX support
 * All standart features like Sequences, Bones, Cameras, etc
 * Multiple texture chunks (mdx only)

README.md

@@ -1,4 +1,4 @@
-import * as decodeJPEG from '../third_party/decoder';
+import decodeJPEG from '../third_party/decoder';
 import {BLPImage, BLPContent, BLPType} from './blpimage';
 
 function keyword (view: DataView, offset: number): string {
@@ -16,7 +16,7 @@ function uint32 (view: DataView, offset: number): number {
 
 function bitVal (data: Uint8Array, bitCount: number, index: number): number {
     // only 1, 4 or 8 bits
-    let byte = data[Math.floor(index * bitCount / 8)],
+    const byte = data[Math.floor(index * bitCount / 8)],
         valsPerByte = 8 / bitCount;
 
     return (byte >> (valsPerByte - index % valsPerByte - 1)) & ((1 << bitCount) - 1);
@@ -42,9 +42,9 @@ function createImageData (width: number, height: number): ImageDataLike {
 }
 
 export function decode (arrayBuffer: ArrayBuffer): BLPImage {
-    let view = new DataView(arrayBuffer);
+    const view = new DataView(arrayBuffer);
 
-    let image: BLPImage = {
+    const image: BLPImage = {
         type: BLPType.BLP1,
         width: 0,
         height: 0,
@@ -54,7 +54,7 @@ export function decode (arrayBuffer: ArrayBuffer): BLPImage {
         data: arrayBuffer,
     };
 
-    let type = keyword(view, 0);
+    const type = keyword(view, 0);
 
     if (type === 'BLP0' || type === 'BLP2') {
         throw new Error('BLP0/BLP2 not supported');
@@ -74,7 +74,7 @@ export function decode (arrayBuffer: ArrayBuffer): BLPImage {
     image.height = uint32(view, 4);
 
     for (let i = 0; i < 16; ++i) {
-        let mipmap = {
+        const mipmap = {
             offset: uint32(view, 7 + i),
             size: uint32(view, 7 + 16 + i)
         };
@@ -90,20 +90,20 @@ export function decode (arrayBuffer: ArrayBuffer): BLPImage {
 }
 
 export function getImageData (blp: BLPImage, mipmapLevel: number): ImageDataLike {
-    let view = new DataView(blp.data),
+    const view = new DataView(blp.data),
         uint8Data = new Uint8Array(blp.data),
         mipmap = blp.mipmaps[mipmapLevel];
 
     if (blp.content === BLPContent.JPEG) {
-        let headerSize = uint32(view, 39),
+        const headerSize = uint32(view, 39),
             data = new Uint8Array(headerSize + mipmap.size);
 
         data.set(uint8Data.subarray(40 * 4, 40 * 4 + headerSize));
         data.set(uint8Data.subarray(mipmap.offset, mipmap.offset + mipmap.size), headerSize);
 
         return decodeJPEG(data);
     } else {
-        let palette = new Uint8Array(blp.data, 39 * 4, 256 * 4),
+        const palette = new Uint8Array(blp.data, 39 * 4, 256 * 4),
             width = blp.width / (1 << mipmapLevel),
             height = blp.height / (1 << mipmapLevel),
             size = width * height,
@@ -112,7 +112,7 @@ export function getImageData (blp: BLPImage, mipmapLevel: number): ImageDataLike
             valPerAlphaBit = 255 / ((1 << blp.alphaBits) - 1);
 
         for (let i = 0; i < size; ++i) {
-            let paletteIndex = view.getUint8(mipmap.offset + i) * 4;
+            const paletteIndex = view.getUint8(mipmap.offset + i) * 4;
             // BGRA order
             imageData.data[i * 4]     = palette[paletteIndex + 2];
             imageData.data[i * 4 + 1] = palette[paletteIndex + 1];

blp/decode.ts

@@ -0,0 +1,28 @@
+import * as model from './model';
+import {parse as parseMDL} from './mdl/parse';
+import {parse as parseMDX} from './mdx/parse';
+import {generate as generateMDL} from './mdl/generate';
+import {generate as generateMDX} from './mdx/generate';
+import * as blp from './blp/blpimage';
+import {decode as decodeBLP, getImageData as getBLPImageData} from './blp/decode';
+import {ModelRenderer} from './renderer/modelRenderer';
+
+const war3model = {
+    model,
+    parseMDX,
+    generateMDX,
+    parseMDL,
+    generateMDL,
+    blp,
+    decodeBLP,
+    getBLPImageData,
+    ModelRenderer
+};
+
+declare global {
+    interface Window {
+        war3model: typeof war3model;
+    }
+}
+
+window.war3model = war3model;

browser.ts

@@ -0,0 +1,9 @@
+## Usage in browser as ES Module directly
+
+```html
+<script type="module">
+    import { parseMDL } from './node_modules/war3-model/dist/es/war3-model.browser.js';
+
+    console.log(parseMDL('...'));
+</script>
+```

docs/browser-es.md

@@ -0,0 +1,20 @@
+## Usage in browser as external script
+
+```html
+<script src="./node_modules/war3-model/dist/war3-model.browser.js"></script>
+<script>
+    console.log(war3model.parseMDL('...'));
+</script>
+```
+
+Also there is typings for browser:
+
+```json
+// tsconfig.json
+{
+    "include": [
+        "node_modules/war3-model/dist/war3-model.browser.d.ts",
+        ...
+    ]
+}
+```

docs/browser-global.md

@@ -1,4 +1,10 @@
+html, body {
+    height: 100%;
+}
+
 body {
+    display: flex;
+    flex-direction: column;
     margin: 0;
     font: 16px sans-serif;
 }
@@ -7,9 +13,9 @@ body {
     position: relative;
     display: flex;
     flex-direction: column;
-    max-width: 600px;
-    min-height: 400px;
-    margin: 20px auto auto;
+    flex: 1 1 auto;
+    min-height: 300px;
+    margin: 20px;
     padding: 20px;
     border: 3px dashed #aaa;
     border-radius: 10px;
@@ -31,10 +37,17 @@ body {
     font-size: 120%;
 }
 
-.textarea, .CodeMirror {
+.editor {
     display: none;
     width: 100%;
     flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.editor-elem {
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
 .save {
@@ -57,8 +70,10 @@ body {
     display: none;
 }
 
-.container_with-data .textarea,
-.container_with-data .CodeMirror,
+.container_with-data .editor {
+    display: flex;
+}
+
 .container_with-data .save {
     display: block;
 }

docs/convert/codemirror-config.d.ts

@@ -3,17 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+          content="width=device-width">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>MDL/MDX Converter</title>
-    <link rel="stylesheet" type="text/css" href="convert/convertOut.css">
+    <link rel="stylesheet" type="text/css" href="convert.css">
 </head>
 <body>
 <div class="container" dropzone="copy">
     <div class="label">Drop files here</div>
-    <textarea class="textarea"></textarea>
+    <div class="editor">
+        <div class="editor-elem"></div>
+    </div>
     <button class="save">Save</button>
 </div>
-<script src="convert/convertOut.js"></script>
+<script src="dist/main.js"></script>
 </body>
 </html>