@pirireis/webglobeplugins 1.4.5 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pirireis/webglobeplugins",
-    "version": "1.4.5",
+    "version": "1.5.1",
     "main": "index.js",
     "author": "Toprak Nihat Deniz Ozturk",
     "license": "MIT",

package/tools/icon-factory/cookbook/ship-icon-factory/blueprint.js

@@ -0,0 +1,20 @@
+export const bluePrint = new Map([
+    ['ship', { x: 0, y: 0, width: 21, height: 31, pixelRatio: 1 }],
+    ['flag', {
+            x: 2,
+            y: 2,
+            width: 16,
+            height: 9,
+            pixelRatio: 1
+        }],
+]);
+export const bluePrint2 = new Map([
+    ['ship', { x: 0, y: 0, width: 69, height: 99, pixelRatio: 1 }],
+    ['flag', {
+            x: 9,
+            y: 7,
+            width: 49,
+            height: 22,
+            pixelRatio: 1
+        }],
+]);

package/tools/icon-factory/icon-factory.js

@@ -0,0 +1,93 @@
+import { Meta } from "./meta/meta";
+import { SingleIconPrinter } from "./printers/single-icon";
+export class IconFactory {
+    combinationMap;
+    meta;
+    printer;
+    atlasCanvas;
+    ready = false;
+    constructor(parts, bluePrint) {
+        this.combinationMap = new Map();
+        this.printer = new SingleIconPrinter(parts, bluePrint);
+        const baseSize = this.printer.baseSize;
+        this.meta = new Meta(baseSize, this.combinationMap);
+        this.atlasCanvas = document.createElement('canvas');
+        this.atlasCanvas.width = this.meta.getAtlasIconSize().x;
+        this.atlasCanvas.height = this.meta.getAtlasIconSize().y;
+    }
+    async initialize() {
+        if (this.ready) {
+            return;
+        }
+        const spriteSheetMap = this.meta.getSpriteSheetMap();
+        const ctx = this.atlasCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from atlas canvas.');
+        }
+        for (const [key, element] of spriteSheetMap.entries()) {
+            const partInput = this.combinationMap.get(key);
+            await this.printer.printImage(partInput, this.atlasCanvas, element);
+        }
+        this.ready = true;
+    }
+    async getSpriteSheet() {
+        await this.initialize();
+        return {
+            atlas: this.atlasCanvas,
+            spriteSheetMap: this.meta.getSpriteSheetMap()
+        };
+    }
+    async getIcon(attribs) {
+        const partInputs = new Map();
+        partInputs.set('ship', attribs?.ship);
+        partInputs.set('flag', attribs?.flag);
+        return this.printer.getImage(partInputs);
+    }
+    static canvasToBlobUrl(canvas) {
+        return new Promise((resolve, reject) => {
+            if (!canvas) {
+                reject(new Error('Atlas canvas is missing.'));
+                return;
+            }
+            if (typeof canvas.toBlob !== 'function') {
+                reject(new Error('Canvas toBlob is not supported.'));
+                return;
+            }
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error('Could not serialize atlas canvas.'));
+                    return;
+                }
+                resolve(URL.createObjectURL(blob));
+            }, 'image/png');
+        });
+    }
+    static jsonToBlobUrl(payload) {
+        const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
+        return URL.createObjectURL(blob);
+    }
+    async craeteAndSetToGlobeManagerIconMap(combinationsMap, atlasName, globeManager, callback) {
+        if (!(combinationsMap instanceof Map)) {
+            throw new Error('combinationsMap must be a Map instance.');
+        }
+        if (combinationsMap !== this.combinationMap) {
+            this.combinationMap = combinationsMap;
+            const baseSize = this.printer.baseSize;
+            this.meta = new Meta(baseSize, combinationsMap);
+            this.atlasCanvas = document.createElement('canvas');
+            this.atlasCanvas.width = this.meta.getAtlasIconSize().x;
+            this.atlasCanvas.height = this.meta.getAtlasIconSize().y;
+            this.ready = false;
+        }
+        const { atlas, spriteSheetMap } = await this.getSpriteSheet();
+        const spriteSheetUrl = await IconFactory.canvasToBlobUrl(atlas);
+        const spriteSheetMapUrl = IconFactory.jsonToBlobUrl(Object.fromEntries(spriteSheetMap));
+        globeManager.api_AddIconMap(atlasName, spriteSheetUrl, spriteSheetMapUrl, callback);
+        return {
+            atlas,
+            spriteSheetMap,
+            spriteSheetUrl,
+            spriteSheetMapUrl,
+        };
+    }
+}

package/tools/icon-factory/meta/meta.js

@@ -0,0 +1,23 @@
+import { createSpriteMap } from "./sprite-map";
+export class Meta {
+    atlasIconSize;
+    spriteSheetMap;
+    constructor(sourceIconSize, combinationMap) {
+        const { spriteSheetMap, atlasSize } = createSpriteMap(sourceIconSize, combinationMap);
+        this.atlasIconSize = atlasSize;
+        this.spriteSheetMap = spriteSheetMap;
+        const atlasCanvas = document.createElement('canvas');
+        atlasCanvas.width = atlasSize.x;
+        atlasCanvas.height = atlasSize.y;
+        const ctx = atlasCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from atlas canvas.');
+        }
+    }
+    getSpriteSheetMap() {
+        return this.spriteSheetMap;
+    }
+    getAtlasIconSize() {
+        return this.atlasIconSize;
+    }
+}

package/tools/icon-factory/meta/sprite-map.js

@@ -0,0 +1,42 @@
+export function createSpriteMap(iconSize, combinationMap) {
+    const spriteSheetMap = new Map();
+    const powerOf2 = (n) => {
+        let p = 1;
+        while (p < n) {
+            p *= 2;
+        }
+        return p;
+    };
+    const atlasIconSize = (() => {
+        const size = powerOf2(Math.max(iconSize.x, iconSize.y));
+        return { x: size, y: size };
+    })();
+    const atlasUnitSize = Math.ceil(Math.sqrt(combinationMap.size));
+    const atlasSize = {
+        x: atlasIconSize.x * atlasUnitSize,
+        y: atlasIconSize.y * atlasUnitSize
+    };
+    let currentRow = 0;
+    let currentCol = 0;
+    // Padding size is space the icon will be moved to the center of the atlas cell. This is needed because the icon size may be smaller than the atlas cell size.
+    const paddingSize = {
+        x: Math.floor((atlasIconSize.x - iconSize.x) / 2),
+        y: Math.floor((atlasIconSize.y - iconSize.y) / 2)
+    };
+    for (const [key, _] of combinationMap) {
+        const spriteSheetElement = {
+            x: currentCol * atlasIconSize.x + paddingSize.x,
+            y: currentRow * atlasIconSize.y + paddingSize.y,
+            width: iconSize.x,
+            height: iconSize.y,
+            pixelRatio: 1
+        };
+        spriteSheetMap.set(key, spriteSheetElement);
+        currentCol++;
+        if (currentCol >= atlasUnitSize) {
+            currentCol = 0;
+            currentRow++;
+        }
+    }
+    return { spriteSheetMap, atlasSize };
+}

package/tools/icon-factory/parts/blob-map.js

@@ -0,0 +1,52 @@
+export class BlobMapPart {
+    blobMap;
+    static imageCache = new Map();
+    constructor(blobMap) {
+        this.blobMap = blobMap;
+    }
+    getBase64Source(partInput) {
+        const source = this.blobMap.get(partInput);
+        if (!source) {
+            throw new Error(`Base64 image for key ${partInput} not found.`);
+        }
+        return source;
+    }
+    toDataUri(base64Source) {
+        if (base64Source.trimStart().startsWith("data:")) {
+            return base64Source;
+        }
+        return `data:image/png;base64,${base64Source}`;
+    }
+    loadImage(base64Source) {
+        const src = this.toDataUri(base64Source);
+        const cached = BlobMapPart.imageCache.get(src);
+        if (cached) {
+            return cached;
+        }
+        const imagePromise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => {
+                BlobMapPart.imageCache.delete(src);
+                reject(new Error(`Failed to load base64 image for src: ${src.slice(0, 64)}...`));
+            };
+            img.src = src;
+        });
+        BlobMapPart.imageCache.set(src, imagePromise);
+        return imagePromise;
+    }
+    async preparePart(partInput) {
+        const source = this.getBase64Source(partInput);
+        await this.loadImage(source);
+    }
+    async printPart(partInput, targetCanvas, partDestination) {
+        const source = this.getBase64Source(partInput);
+        const img = await this.loadImage(source);
+        const ctx = targetCanvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Failed to get 2D context from target canvas.");
+        }
+        const { x, y, width, height } = partDestination;
+        ctx.drawImage(img, 0, 0, img.width, img.height, x, y, width, height);
+    }
+}

package/tools/icon-factory/parts/png-blob-map.js

@@ -0,0 +1,52 @@
+export class PngBlobMapPart {
+    pngBlobMap;
+    imageCache = new Map();
+    constructor(pngBlobMap) {
+        this.pngBlobMap = pngBlobMap;
+    }
+    getBase64Source(partInput) {
+        const source = this.pngBlobMap.get(partInput);
+        if (!source) {
+            throw new Error(`Base64 image for key ${partInput} not found.`);
+        }
+        return source;
+    }
+    toDataUri(base64Source) {
+        if (base64Source.trimStart().startsWith("data:")) {
+            return base64Source;
+        }
+        return `data:image/png;base64,${base64Source}`;
+    }
+    loadImage(base64Source) {
+        const src = this.toDataUri(base64Source);
+        const cached = this.imageCache.get(src);
+        if (cached) {
+            return cached;
+        }
+        const imagePromise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => {
+                this.imageCache.delete(src);
+                reject(new Error(`Failed to load base64 image for src: ${src.slice(0, 64)}...`));
+            };
+            img.src = src;
+        });
+        this.imageCache.set(src, imagePromise);
+        return imagePromise;
+    }
+    async preparePart(partInput) {
+        const source = this.getBase64Source(partInput);
+        await this.loadImage(source);
+    }
+    async printPart(partInput, targetCanvas, partDestination) {
+        const source = this.getBase64Source(partInput);
+        const img = await this.loadImage(source);
+        const ctx = targetCanvas.getContext("2d");
+        if (!ctx) {
+            throw new Error("Failed to get 2D context from target canvas.");
+        }
+        const { x, y, width, height } = partDestination;
+        ctx.drawImage(img, 0, 0, img.width, img.height, x, y, width, height);
+    }
+}

package/tools/icon-factory/parts/sprite-sheet.js

@@ -0,0 +1,27 @@
+export class SpriteSheetPart {
+    image;
+    spriteJson;
+    constructor(image, spriteJson) {
+        this.image = image;
+        this.spriteJson = spriteJson;
+    }
+    async printPart(partInput, targetCanvas, partDestination) {
+        const symbolInfo = this.spriteJson[partInput];
+        if (!symbolInfo) {
+            throw new Error(`Symbol with key ${partInput} not found in sprite sheet.`);
+        }
+        const ctx = targetCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from target canvas.');
+        }
+        ctx.imageSmoothingEnabled = false;
+        // Calculate the position and size of the symbol in the sprite sheet
+        const { x, y, width, height } = symbolInfo;
+        // Draw the symbol onto the target canvas
+        const { x: destX, y: destY, width: destWidth, height: destHeight } = partDestination;
+        ctx.drawImage(this.image, x, y, width, height, // Source rectangle in the sprite sheet
+        destX, destY, // Destination start point on the target canvas
+        destWidth, destHeight // Destination width and height
+        );
+    }
+}

package/tools/icon-factory/parts/static-svg.js

@@ -0,0 +1,81 @@
+export class StaticSvgPart {
+    svgMap;
+    static svgCache = new Map();
+    constructor(svgMap) {
+        this.svgMap = svgMap;
+    }
+    getSvgSource(partInput) {
+        const svgSource = this.svgMap.get(partInput);
+        if (!svgSource) {
+            throw new Error(`SVG content for key ${partInput} not found.`);
+        }
+        return svgSource;
+    }
+    sourceToImage(svgSource) {
+        const cacheKey = svgSource;
+        const cached = StaticSvgPart.svgCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const imagePromise = new Promise((resolve, reject) => {
+            try {
+                const img = new Image();
+                img.onload = () => {
+                    resolve(img);
+                };
+                img.onerror = () => {
+                    StaticSvgPart.svgCache.delete(cacheKey);
+                    reject(new Error(`Failed to render SVG image.`));
+                };
+                if (svgSource.trimStart().startsWith("<")) {
+                    // Inline SVG markup: render through a temporary object URL.
+                    const blob = new Blob([svgSource], { type: 'image/svg+xml' });
+                    const objectUrl = URL.createObjectURL(blob);
+                    const cleanup = () => URL.revokeObjectURL(objectUrl);
+                    const prevLoad = img.onload;
+                    const prevError = img.onerror;
+                    img.onload = (event) => {
+                        cleanup();
+                        if (typeof prevLoad === "function") {
+                            prevLoad.call(img, event);
+                        }
+                    };
+                    img.onerror = (event) => {
+                        cleanup();
+                        if (typeof prevError === "function") {
+                            prevError.call(img, event);
+                        }
+                    };
+                    img.src = objectUrl;
+                }
+                else {
+                    // URL/path source from catalog (for example /icon-generator/flags/4x3/tr.svg).
+                    img.src = svgSource;
+                }
+            }
+            catch (err) {
+                reject(new Error(`Failed to convert SVG to image: ${err}`));
+            }
+        });
+        StaticSvgPart.svgCache.set(cacheKey, imagePromise);
+        return imagePromise;
+    }
+    async preparePart(partInput) {
+        const svgSource = this.getSvgSource(partInput);
+        await this.sourceToImage(svgSource);
+    }
+    async printPart(partInput, targetCanvas, partDestination) {
+        const svgSource = this.getSvgSource(partInput);
+        console.log(`Rendering SVG for part input "${partInput}"`);
+        const img = await this.sourceToImage(svgSource);
+        const ctx = targetCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from target canvas.');
+        }
+        const { x, y, width, height } = partDestination;
+        ctx.drawImage(img, 0, 0, img.width, img.height, // Source rectangle (entire SVG)
+        x, y, // Destination start point on the target canvas
+        width, height // Destination width and height
+        );
+    }
+}

package/tools/icon-factory/parts/url-image.js

@@ -0,0 +1,48 @@
+export class UrlImagePart {
+    urlMap;
+    static imageCache = new Map();
+    constructor(urlMap) {
+        this.urlMap = urlMap;
+    }
+    getUrl(partInput) {
+        const url = this.urlMap.get(partInput);
+        if (!url) {
+            throw new Error(`URL for key ${partInput} not found.`);
+        }
+        return url;
+    }
+    loadImage(url) {
+        const cached = UrlImagePart.imageCache.get(url);
+        if (cached) {
+            return cached;
+        }
+        const imagePromise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => {
+                UrlImagePart.imageCache.delete(url);
+                reject(new Error(`Failed to load image from URL: ${url}`));
+            };
+            img.src = url;
+        });
+        UrlImagePart.imageCache.set(url, imagePromise);
+        return imagePromise;
+    }
+    async preparePart(partInput) {
+        const url = this.getUrl(partInput);
+        await this.loadImage(url);
+    }
+    async printPart(partInput, targetCanvas, partDestination) {
+        const url = this.getUrl(partInput);
+        const img = await this.loadImage(url);
+        const ctx = targetCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from target canvas.');
+        }
+        const { x, y, width, height } = partDestination;
+        ctx.drawImage(img, 0, 0, img.width, img.height, // Source rectangle (entire image)
+        x, y, // Destination start point on the target canvas
+        width, height // Destination width and height
+        );
+    }
+}

package/tools/icon-factory/printers/single-icon.js

@@ -0,0 +1,65 @@
+import { calculateMinimumBaseSize } from "./util";
+export class SingleIconPrinter {
+    parts;
+    bluePrint;
+    baseSize;
+    constructor(parts, bluePrint) {
+        this.parts = parts;
+        this.bluePrint = bluePrint;
+        this.baseSize = calculateMinimumBaseSize(bluePrint);
+    }
+    async prefetchParts(partInputs) {
+        const prefetchTasks = [];
+        for (const [sourceKey] of this.bluePrint.entries()) {
+            const partInput = partInputs.get(sourceKey);
+            const part = this.parts.get(sourceKey);
+            if (!part) {
+                throw new Error(`Part with key ${sourceKey} not found.`);
+            }
+            if (part.preparePart) {
+                prefetchTasks.push(part.preparePart(partInput));
+            }
+        }
+        await Promise.all(prefetchTasks);
+    }
+    async getImage(partInputs) {
+        const targetCanvas = document.createElement('canvas');
+        targetCanvas.width = this.baseSize.x;
+        targetCanvas.height = this.baseSize.y;
+        const ctx = targetCanvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context from target canvas.');
+        }
+        // Start all network-backed part preloads in parallel.
+        await this.prefetchParts(partInputs);
+        console.log("All parts prefetched, starting rendering...");
+        for (const [sourceKey, source] of this.parts.entries()) {
+            console.log("Rendering part with key:", sourceKey);
+            const partDestination = this.bluePrint.get(sourceKey);
+            const partInput = partInputs.get(sourceKey);
+            console.log("Part input:", partInput, "Part destination:", partDestination, "Source ", source);
+            if (!partDestination || !source) {
+                throw new Error(`Source with key ${sourceKey} not found.`);
+            }
+            await source.printPart(partInput, targetCanvas, partDestination);
+        }
+        return targetCanvas;
+    }
+    async printImage(partInputs, targetCanvas, offset) {
+        for (const [partKey, part] of this.parts.entries()) {
+            const partInput = partInputs.get(partKey);
+            const partDestination = this.bluePrint.get(partKey);
+            if (!partDestination || !part) {
+                throw new Error(`Part with key ${partKey} not found.`);
+            }
+            const partDestiantionWithOffset = {
+                x: partDestination.x + offset.x,
+                y: partDestination.y + offset.y,
+                width: partDestination.width,
+                height: partDestination.height,
+                pixelRatio: partDestination.pixelRatio
+            };
+            await part.printPart(partInput, targetCanvas, partDestiantionWithOffset);
+        }
+    }
+}

package/tools/icon-factory/printers/util.js

@@ -0,0 +1,16 @@
+export function calculateMinimumBaseSize(bluePrint) {
+    let minX = 0;
+    let minY = 0;
+    bluePrint.forEach((partDestination) => {
+        const { x, y, width, height } = partDestination;
+        const endX = x + width;
+        const endY = y + height;
+        if (endX > minX) {
+            minX = endX;
+        }
+        if (endY > minY) {
+            minY = endY;
+        }
+    });
+    return { x: minX, y: minY };
+}

package/tools/icon-factory/types.js

@@ -0,0 +1,2 @@
+export {};
+// boatIconCode parametresini globe bilecek