@mapcreator/sdk 0.0.8 → 0.0.9

package/dist/esm/adornments/connectedLegend.js

@@ -0,0 +1,393 @@
+import { groupByColor, getColumnName, legendTickCount, getColorGenerator, isChoroplethColumn, } from '@/utils/choropleth';
+import { formatLocale } from 'd3-format';
+import { extent, ticks as calcTicks } from 'd3-array';
+import { lerp, unlerp, clamp } from '@/utils/helpers';
+import { escapeXML, loadFonts, measureTextBlock } from '@/utils/svgHelpers';
+import { getCategoricalLegendSvg } from '@/adornments/categoricalLegend';
+const defaultFont = 'ArialMT';
+const padding = 15;
+export function useConnectedLegend(legend, jobObject, map, vapiUrl, accessToken) {
+    const container = document.createElement('div');
+    container.className = 'adornment';
+    if (legend.showBackground) {
+        container.style.boxShadow = '0 0 7px 0 rgba(33, 37, 41, 0.25)';
+        container.style.borderRadius = '10px';
+    }
+    const fonts = [legend.titleFont ?? defaultFont, legend.labelFont ?? defaultFont];
+    const fontsToLoad = Array.from(new Set(fonts));
+    loadFonts(fontsToLoad, vapiUrl, accessToken).then(() => (container.innerHTML = getSvg(legend, jobObject, map)));
+    return container;
+}
+function getSvg(legend, jobObject, map) {
+    const { target } = legend;
+    const group = jobObject.registry?.models?.[target.modelType]?.find(g => g.id === target.groupId);
+    const bindings = group?.models ?? [];
+    const choropleth = group?.choropleth;
+    const dataColumn = getColumnName(group?.fillColor);
+    return !choropleth ||
+        !dataColumn ||
+        group.models.every(area => !(area.visible ?? true)) ||
+        !isChoroplethColumn(bindings, dataColumn)
+        ? renderBlankLegend()
+        : choropleth.colorMode === 'categorical'
+            ? renderCategoricalLegend(legend, choropleth, dataColumn)
+            : choropleth.colorMode === 'linear'
+                ? renderContinuousLegend(legend, group, map)
+                : choropleth.colorMode === 'quantile' || choropleth.colorMode === 'quantize'
+                    ? renderDiscreteLegend(legend, group, map)
+                    : renderBlankLegend();
+}
+function renderBlankLegend() {
+    return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="0"
+      height="0"
+      viewBox="0 0 0 0"
+      style="display: block;"
+    >
+    </svg>
+  `;
+}
+function renderContinuousLegend(legend, group, map) {
+    const barThickness = 15;
+    const stopCount = 32;
+    const barEndRadius = barThickness / 2;
+    const titleMargin = 10;
+    const tickLength = 20;
+    const tickLabelMargin = 5;
+    const { id, layout = 'vertical', labelFont = defaultFont, labelFontSize = 13, labelFontColor = '#000000', numberFormat = '.2~s', title = '', titleFont = defaultFont, titleFontSize = 14, titleFontColor = '#000000', showBackground = false, background = '#ffffff', } = legend;
+    const gradientId = `gradient-${id}`;
+    const isHorizontal = layout === 'horizontal';
+    const colorGenerator = getColorGenerator(group);
+    if (colorGenerator === undefined) {
+        return renderBlankLegend();
+    }
+    const children = [];
+    const [min, max] = extent(colorGenerator.domain());
+    const ticks = calcTicks(min, max, legendTickCount);
+    const formatLabel = getFormatter(numberFormat);
+    const tickLabels = ticks.map(tick => formatLabel(tick));
+    const tickLabelBoxes = tickLabels.map(label => measureTextBlock([label], labelFont, labelFontSize));
+    const stops = [];
+    for (let i = 0; i < stopCount; i++) {
+        const t = i / (stopCount - 1);
+        stops.push(`<stop offset="${t * 100}%" stop-color="${colorGenerator(min + t * (max - min))}" />`);
+    }
+    const transform = !isHorizontal ? 'rotate(90)' : '';
+    children.push(`
+    <defs>
+      <linearGradient id="${gradientId}" gradientTransform="${transform}">
+        ${stops.join('')}
+      </linearGradient>
+    </defs>
+  `);
+    const titleBox = measureTextBlock([title], titleFont, titleFontSize);
+    const hasTitle = title.trim().length > 0;
+    const labelBox = {
+        width: Math.max(0, ...tickLabelBoxes.map(b => b.width)),
+        height: Math.max(0, ...tickLabelBoxes.map(b => b.height)),
+        ascent: Math.max(0, ...tickLabelBoxes.map(b => b.ascent)),
+    };
+    const titleBoxHeight = hasTitle ? titleBox.height + titleMargin : 0;
+    const titleBoxWidth = hasTitle ? titleBox.width : 0;
+    const count = ticks.length - 1;
+    const barLength = clamp(45 * count, isHorizontal
+        ? Math.ceil((labelBox.width + 10) * count)
+        : Math.ceil((labelBox.height + 10) * count), isHorizontal
+        ? Math.floor(map.getContainer().clientWidth - 10 - padding * 2)
+        : Math.floor(map.getContainer().clientHeight - 10 - padding * 2 - titleBoxHeight));
+    const width = isHorizontal
+        ? Math.ceil(padding * 2 + Math.max(titleBoxWidth, barLength))
+        : Math.ceil(padding * 2 + Math.max(titleBoxWidth, tickLength + tickLabelMargin + labelBox.width));
+    const height = isHorizontal
+        ? Math.ceil(padding * 2 + titleBoxHeight + tickLength + tickLabelMargin + labelBox.ascent)
+        : Math.ceil(padding * 2 + titleBoxHeight + barLength);
+    if (showBackground) {
+        children.push(`
+      <rect
+        x="0"
+        y="0"
+        rx="10"
+        ry="10"
+        width="${width}"
+        height="${height}"
+        fill="${background}"
+      />
+    `);
+    }
+    const x = padding;
+    let y = padding;
+    if (hasTitle) {
+        children.push(`
+      <text
+        x="${x}"
+        y="${y + titleBox.ascent}"
+        font-family="${titleFont}"
+        font-size="${titleFontSize}"
+        fill="${titleFontColor}"
+      >
+        ${escapeXML(title)}
+      </text>
+    `);
+        y += titleBox.height + titleMargin;
+    }
+    children.push(`
+    <rect
+      x="${x}"
+      y="${y}"
+      rx="${barEndRadius}"
+      ry="${barEndRadius}"
+      width="${isHorizontal ? barLength : barThickness}"
+      height="${isHorizontal ? barThickness : barLength}"
+      fill="url(#${gradientId})"
+    />
+  `);
+    for (let i = 1; i < ticks.length - 1; i++) {
+        const tick = ticks[i];
+        const label = tickLabels[i];
+        const box = tickLabelBoxes[i];
+        const offset = lerp(0, barLength, unlerp(min, max, tick));
+        if (offset > barEndRadius && offset < barLength - barEndRadius) {
+            children.push(`
+        <line
+          x1="${isHorizontal ? Math.floor(x + offset) + 0.5 : x}"
+          y1="${isHorizontal ? y : Math.floor(y + offset) + 0.5}"
+          x2="${isHorizontal ? Math.floor(x + offset) + 0.5 : x + tickLength}"
+          y2="${isHorizontal ? y + tickLength : Math.floor(y + offset) + 0.5}"
+          stroke="#ffffff"
+        />
+      `);
+        }
+        children.push(`
+      <text
+        x="${isHorizontal ? x + offset : x + tickLength + tickLabelMargin}"
+        y="${isHorizontal
+            ? y + tickLength + tickLabelMargin + box.ascent
+            : y + offset - box.descent + box.height / 2}"
+        font-family="${labelFont}"
+        font-size="${labelFontSize}"
+        fill="${labelFontColor}"
+        text-anchor="${isHorizontal ? 'middle' : 'start'}"
+      >
+        ${escapeXML(label)}
+      </text>
+    `);
+    }
+    return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${width}"
+      height="${height}"
+      viewBox="0 0 ${width} ${height}"
+      style="display: block;"
+    >
+      ${children.join('')}
+    </svg>
+  `;
+}
+function renderDiscreteLegend(legend, group, map) {
+    const gap = 10;
+    const colorGenerator = getColorGenerator(group);
+    const colors = colorGenerator?.range();
+    const children = [];
+    let height = 0;
+    let width = 0;
+    if (colorGenerator && colors && colors.length > 1) {
+        const { layout = 'vertical', labelFont = defaultFont, labelFontSize = 13, labelFontColor = '#000000', labelStyle = 'range', numberFormat = '.2~s', title = '', titleFont = defaultFont, titleFontSize = 14, titleFontColor = '#000000', showBackground = false, background = '#ffffff', } = legend;
+        const isVertical = layout === 'vertical';
+        const isRange = labelStyle === 'range';
+        const formatLabel = getFormatter(numberFormat);
+        const labels = isRange
+            ? colors
+                .map(color => colorGenerator.invertExtent(color))
+                .map((range, index, array) => index === 0
+                ? `< ${formatLabel(range[1])}`
+                : index === array.length - 1
+                    ? `> ${formatLabel(range[0])}`
+                    : `${formatLabel(range[0])} – ${formatLabel(range[1])}`)
+            : colors
+                .map(color => colorGenerator.invertExtent(color))
+                .reduce((g, range, index) => (index && g.push(formatLabel(range[0])), g), []);
+        const lBoxes = labels.map(label => measureTextBlock([label], labelFont, labelFontSize));
+        const titleBox = measureTextBlock([title], titleFont, titleFontSize);
+        const hasTitle = title.trim().length > 0;
+        const labelBox = {
+            width: Math.max(0, ...lBoxes.map(b => b.width)),
+            height: Math.max(0, ...lBoxes.map(b => b.height)),
+            ascent: Math.max(0, ...lBoxes.map(b => b.ascent)),
+        };
+        const titleBoxHeight = hasTitle ? titleBox.height + gap : 0;
+        const titleBoxWidth = hasTitle ? titleBox.width : 0;
+        const count = colors.length;
+        let m = 45; // default segment length
+        const c = 15; // segment width
+        const r = c / 2; // radius
+        if (isVertical) {
+            m = clamp(m, Math.ceil(labelBox.height) + 10, Math.floor((map.getContainer().clientHeight - 10 - padding * 2 - titleBoxHeight) / count));
+            height = Math.ceil(padding * 2 + titleBoxHeight + count * m);
+            width = Math.ceil(padding * 2 + Math.max(titleBoxWidth, c + gap + labelBox.width));
+        }
+        else {
+            m = clamp(m, Math.ceil(labelBox.width) + 10, Math.floor((map.getContainer().clientWidth - 10 - padding * 2) / count));
+            width = Math.ceil(padding * 2 + Math.max(titleBoxWidth, count * m));
+            height = Math.ceil(padding * 2 + titleBoxHeight + c + gap + labelBox.ascent);
+        }
+        if (showBackground) {
+            children.push(`
+        <rect
+          x="0"
+          y="0"
+          rx="10"
+          ry="10"
+          width="${width}"
+          height="${height}"
+          fill="${background}"
+        />
+      `);
+        }
+        let x = padding;
+        let y = padding;
+        if (hasTitle) {
+            children.push(`
+        <text
+          x="${x}"
+          y="${y + titleBox.ascent}"
+          font-family="${titleFont}"
+          font-size="${titleFontSize}"
+          fill="${titleFontColor}"
+        >
+          ${escapeXML(title)}
+        </text>
+      `);
+            y += titleBoxHeight;
+        }
+        const w = isVertical ? c : m;
+        const h = isVertical ? m : c;
+        const dx = isVertical ? 0 : m;
+        const dy = isVertical ? m : 0;
+        const tickLength = isRange ? c : c + 5;
+        const d1 = isVertical
+            ? `M ${x} ${y + r} v ${m - r} h ${c} v ${-(m - r)} a ${r} ${r} 0 0 0 ${-c} 0 z`
+            : `M ${x + r} ${y} h ${m - r} v ${c} h ${-(m - r)} a ${r} ${r} 0 0 1 0 ${-c} z`;
+        children.push(`<path d="${d1}" fill="${colors[0]}" />`);
+        x += dx;
+        y += dy;
+        for (let i = 1; i < count - 1; i++, x += dx, y += dy) {
+            children.push(`
+        <rect
+          x="${x}"
+          y="${y}"
+          width="${w}"
+          height="${h}"
+          fill="${colors[i]}"
+        />
+      `);
+            children.push(`
+        <line
+          x1="${isVertical ? x : x + 0.5}"
+          y1="${isVertical ? y + 0.5 : y}"
+          x2="${isVertical ? x + tickLength : x + 0.5}"
+          y2="${isVertical ? y + 0.5 : y + tickLength}"
+          stroke="#ffffff"
+        />
+      `);
+        }
+        const d2 = isVertical
+            ? `M ${x} ${y} v ${m - r} a ${r} ${r} 0 0 0 ${c} 0 v ${-(m - r)} z`
+            : `M ${x} ${y} h ${m - r} a ${r} ${r} 0 0 1 0 ${c} h ${-(m - r)} z`;
+        children.push(`<path d="${d2}" fill="${colors[count - 1]}" />`);
+        children.push(`
+      <line
+        x1="${isVertical ? x : x + 0.5}"
+        y1="${isVertical ? y + 0.5 : y}"
+        x2="${isVertical ? x + tickLength : x + 0.5}"
+        y2="${isVertical ? y + 0.5 : y + tickLength}"
+        stroke="#ffffff"
+      />
+    `);
+        x = padding;
+        y = padding + titleBoxHeight;
+        for (let i = 0; i < labels.length; i++, x += dx, y += dy) {
+            children.push(`
+        <text
+          x="${isVertical ? x + c + gap : x + (isRange ? m / 2 : m)}"
+          y="${isVertical
+                ? y + (isRange ? m / 2 : m) - labelBox.height / 2 + labelBox.ascent
+                : y + c + gap + labelBox.ascent}"
+          text-anchor="${isVertical ? 'start' : 'middle'}"
+          font-family="${labelFont}"
+          font-size="${labelFontSize}"
+          fill="${labelFontColor}"
+        >
+          ${escapeXML(labels[i])}
+        </text>
+      `);
+        }
+    }
+    return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${width}"
+      height="${height}"
+      viewBox="0 0 ${width} ${height}"
+      style="display: block;"
+    >
+      ${children.join('')}
+    </svg>
+  `;
+}
+function renderCategoricalLegend(legend, choropleth, dataColumn) {
+    const categoricalGroup = choropleth.categoricalColors[dataColumn];
+    if (categoricalGroup === undefined) {
+        return renderBlankLegend();
+    }
+    const colorGroup = groupByColor(categoricalGroup.values);
+    const entries = Object.entries(categoricalGroup.colors)
+        .map(([color, meta]) => ({
+        color,
+        label: meta.title ?? colorGroup[color] ?? choropleth.defaultGroupName,
+        order: meta.order,
+        hidden: meta.hidden,
+        svg: '',
+    }))
+        .filter(entry => !entry.hidden)
+        .sort((a, b) => a.order - b.order);
+    return getCategoricalLegendSvg({
+        type: 'manualLegend',
+        id: legend.id,
+        name: legend.name,
+        position: legend.position,
+        stacking: legend.stacking ?? 'vertical',
+        layout: legend.layout ?? 'vertical',
+        title: legend.title ?? '',
+        titleFont: legend.titleFont ?? defaultFont,
+        titleFontColor: legend.titleFontColor ?? '#000000',
+        titleFontSize: legend.titleFontSize ?? 14,
+        entryFont: legend.labelFont ?? defaultFont,
+        entryFontColor: legend.labelFontColor ?? '#000000',
+        entryFontSize: legend.labelFontSize ?? 13,
+        entryShape: 'rectangle',
+        entries,
+        background: legend.background ?? '#ffffff',
+        showBackground: legend.showBackground ?? false,
+    }, defaultFont);
+}
+function getFormatter(format) {
+    const { decimal, group } = getSeparators();
+    const locale = formatLocale({
+        decimal,
+        thousands: group,
+        grouping: [3],
+        currency: ['', ''],
+    });
+    return locale.format(format);
+}
+function getSeparators() {
+    const parts = new Intl.NumberFormat(navigator.languages).formatToParts(1000.1);
+    const decimal = parts.find(part => part.type === 'decimal')?.value;
+    const group = parts.find(part => part.type === 'group')?.value;
+    return decimal !== undefined && group !== undefined
+        ? { decimal, group }
+        : { decimal: '.', group: ',' };
+}

package/dist/{adornments → esm/adornments}/customAdornment.d.ts

@@ -1,2 +1,2 @@
-import { JobObjectCustomAdornment } from '../types/jobObject';
+import type { JobObjectCustomAdornment } from '@/types/jobObject';
 export declare function useCustomAdornment(adornment: JobObjectCustomAdornment): HTMLElement;

package/dist/esm/adornments/customAdornment.js

@@ -0,0 +1,29 @@
+import { numberRe } from '@/utils/helpers';
+export function useCustomAdornment(adornment) {
+    const container = document.createElement('div');
+    container.className = 'adornment';
+    const { svg, scale = 1 } = adornment;
+    const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+    const svgEl = doc.querySelector('svg');
+    if (svgEl) {
+        const viewBoxRe = new RegExp(numberRe
+            .toString()
+            .replace(/^\/\^|\$\/$/g, '')
+            .replace(/.*/, '^($&)[, ]($&)[, ]($&)[, ]($&)$$'));
+        const width = svgEl.getAttribute('width');
+        const height = svgEl.getAttribute('height');
+        if (width && height && numberRe.test(width) && numberRe.test(height)) {
+            svgEl.setAttribute('width', String(Number(width) * scale));
+            svgEl.setAttribute('height', String(Number(height) * scale));
+        }
+        else {
+            const match = viewBoxRe.exec(svgEl.getAttribute('viewBox'));
+            const w = match ? Number(match[3]) : 300;
+            const h = match ? Number(match[4]) : 150;
+            svgEl.setAttribute('width', String(w * scale));
+            svgEl.setAttribute('height', String(h * scale));
+        }
+        container.appendChild(svgEl);
+    }
+    return container;
+}

package/dist/{adornments → esm/adornments}/heading.d.ts

@@ -1,2 +1,2 @@
-import { JobObjectHeading } from '../types/jobObject';
+import type { JobObjectHeading } from '@/types/jobObject';
 export declare function useHeading(heading: JobObjectHeading, vapiUrl: string, accessToken: string): HTMLElement;

package/dist/esm/adornments/heading.js

@@ -0,0 +1,71 @@
+import { escapeXML, loadFonts, measureTextBlock } from '@/utils/svgHelpers';
+export function useHeading(heading, vapiUrl, accessToken) {
+    const container = document.createElement('div');
+    container.className = 'adornment';
+    const defaultFont = 'ArialMT';
+    const fonts = [heading.titleFont ?? defaultFont, heading.subtitleFont ?? defaultFont];
+    const fontsToLoad = Array.from(new Set(fonts));
+    loadFonts(fontsToLoad, vapiUrl, accessToken).then(() => (container.innerHTML = getSvg(heading, defaultFont)));
+    return container;
+}
+function getSvg(heading, defaultFont) {
+    const padding = 8;
+    const radius = 6;
+    const { title, titleColor = '#000000', titleFont = defaultFont, titleFontSize = 20, titleJustify = 'center', subtitle, subtitleColor = '#000000', subtitleFont = defaultFont, subtitleFontSize = 12, subtitleJustify = 'center', background = '#ffffff', showBackground = false, } = heading;
+    let measuredWidth = 0;
+    let titleHeight = 0;
+    let subtitleHeight = 0;
+    let titleY = 0;
+    let subtitleY = 0;
+    const titleBox = title.trim().length > 0 ? measureTextBlock([title], titleFont, titleFontSize) : null;
+    const subtitleBox = subtitle.trim().length > 0
+        ? measureTextBlock([subtitle], subtitleFont, subtitleFontSize)
+        : null;
+    measuredWidth = Math.max(titleBox?.width ?? 0, subtitleBox?.width ?? 0);
+    if (titleBox) {
+        const { ascent: ta, descent: td } = titleBox;
+        titleHeight = ta + td;
+        titleY = padding + ta;
+    }
+    if (subtitleBox) {
+        const { ascent: sa, descent: sd } = subtitleBox;
+        subtitleHeight = sa + sd;
+        if (titleBox) {
+            subtitleY = titleY + titleBox.descent + sa + 6;
+        }
+        else {
+            subtitleY = padding + sa;
+        }
+    }
+    const containerWidth = measuredWidth + padding * 2;
+    const containerHeight = titleHeight + subtitleHeight + padding * 2;
+    const titleX = titleJustify === 'center'
+        ? containerWidth / 2
+        : titleJustify === 'right'
+            ? containerWidth - padding
+            : padding;
+    const subtitleX = subtitleJustify === 'center'
+        ? containerWidth / 2
+        : subtitleJustify === 'right'
+            ? containerWidth - padding
+            : padding;
+    let svg = '';
+    svg += `<svg xmlns="http://www.w3.org/2000/svg" width="${containerWidth}" height="${containerHeight}" viewBox="0 0 ${containerWidth} ${containerHeight}">`;
+    svg += `<rect x="0" y="0" width="${containerWidth}" height="${containerHeight}" fill="${background}" rx="${radius}" style="visibility:${showBackground ? 'visible' : 'hidden'}" />`;
+    if (titleBox || subtitleBox) {
+        const titleAnchor = titleJustify === 'center' ? 'middle' : titleJustify === 'right' ? 'end' : 'start';
+        const subtitleAnchor = subtitleJustify === 'center' ? 'middle' : subtitleJustify === 'right' ? 'end' : 'start';
+        svg += `<text x="${titleX}" y="${titleY}" fill="${titleColor}" font-family="${titleFont}" font-size="${titleFontSize}" text-anchor="${titleAnchor}">`;
+        if (titleBox) {
+            svg += `${escapeXML(title)}`;
+        }
+        if (subtitleBox) {
+            svg += `<tspan x="${subtitleX}" y="${subtitleY}" fill="${subtitleColor}" font-family="${subtitleFont}" font-size="${subtitleFontSize}" text-anchor="${subtitleAnchor}">`;
+            svg += `${escapeXML(subtitle)}`;
+            svg += `</tspan>`;
+        }
+        svg += `</text>`;
+    }
+    svg += `</svg>`;
+    return svg;
+}

package/dist/esm/adornments/insetMap.d.ts

@@ -0,0 +1,3 @@
+import type { Map } from '@mapcreator/maplibre-gl';
+import type { JobObjectInsetMap } from '@/types/jobObject';
+export declare function useInsetMap(insetMap: JobObjectInsetMap, map: Map, cdnUrl: string): HTMLElement;