@mapcreator/sdk 0.0.9 → 0.0.10

package/dist/esm/adornments/connectedLegend.js

@@ -1,393 +0,0 @@
-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/esm/adornments/customAdornment.js

@@ -1,29 +0,0 @@
-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/esm/adornments/heading.js

@@ -1,71 +0,0 @@
-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

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