@kispace-io/gs-lib 0.0.0

package/src/gs-litns.ts

@@ -0,0 +1,213 @@
+// Lit namespace module - exports all lit APIs for user modules
+// Lit is required for gs-ol-adapters (uses lit.render) and for user modules
+// WebAwesome is imported here to make it available to user modules (treated as part of lit)
+
+// Re-export all Lit APIs from appspace's externals/lit module - single source of truth
+export * from "@kispace-io/appspace/externals/lit-exports";
+
+// Import specific items needed for defineComponent and lit namespace object
+import {
+    html, css, nothing, svg, LitElement, unsafeCSS,
+    when, repeat, keyed, classMap, styleMap, ifDefined,
+    guard, cache, unsafeHTML, until, live, createRef, ref, render
+} from "@kispace-io/appspace/externals/lit-exports";
+
+// Import WebAwesome components from appspace's externals/webawesome module
+// This maintains a single source of truth - Vite will optimize the build to only include what's needed
+// WebAwesome is treated as part of lit, so it's always available to user modules
+import "@kispace-io/appspace/externals/webawesome";
+
+/**
+ * Helper function to define a custom web component from a simple function.
+ * Converts a render function into a LitElement-based web component.
+ * Properties are automatically inferred from the props used in the render function.
+ * 
+ * @param tagName - The custom element tag name (must contain a hyphen)
+ * @param renderFn - Function that receives props and returns a Lit template
+ * @param options - Optional configuration (props defaults, styles, etc.)
+ * @returns The tag name of the registered component
+ * 
+ * @example
+ * ```javascript
+ * export default function ({lit: {html, css, defineComponent}}) {
+ *   // Simple component - properties inferred from props usage
+ *   defineComponent('my-button', (props) => html`
+ *     <button @click=${props.onClick}>${props.label || 'Click'}</button>
+ *   `);
+ * 
+ *   // Component with default props (auto-converted to properties)
+ *   defineComponent('my-counter', (props) => html`
+ *     <div class="counter">Count: ${props.count}</div>
+ *   `, {
+ *     props: { count: 0, label: '' },  // Simple object - auto-converted
+ *     styles: css`
+ *       .counter { font-weight: bold; }
+ *     `
+ *   });
+ * 
+ *   // Use the component in your template
+ *   return () => html`
+ *     <my-counter count="5"></my-counter>
+ *   `;
+ * }
+ * ```
+ */
+const defineComponent = (
+    tagName: string,
+    renderFn: (props: any) => any,
+    options?: {
+        props?: Record<string, any> | Record<string, { type?: any; reflect?: boolean; attribute?: string | boolean }>;
+        styles?: any;
+        shadowRootOptions?: ShadowRootInit;
+    }
+): string => {
+    if (!tagName.includes('-')) {
+        throw new Error(`Custom element tag name must contain a hyphen: ${tagName}`);
+    }
+
+    // Check if already defined
+    if (customElements.get(tagName)) {
+        return tagName;
+    }
+
+    // Convert simple props object to LitElement property definitions
+    const convertPropsToProperties = (props: Record<string, any>): Record<string, any> => {
+        const properties: Record<string, any> = {};
+        
+        for (const [key, value] of Object.entries(props)) {
+            // If it's already a LitElement property config, use it as-is
+            if (value && typeof value === 'object' && ('type' in value || 'reflect' in value || 'attribute' in value)) {
+                properties[key] = value;
+            } else {
+                // Infer type from default value
+                const type = value === null || value === undefined ? String
+                    : typeof value === 'boolean' ? Boolean
+                    : typeof value === 'number' ? Number
+                    : typeof value === 'object' ? Object
+                    : String;
+                
+                properties[key] = {
+                    type: type,
+                    // Set default value
+                    ...(value !== undefined && { value })
+                };
+            }
+        }
+        
+        return properties;
+    };
+
+    // Determine properties from options
+    let properties: Record<string, any> = {};
+    if (options?.props) {
+        properties = convertPropsToProperties(options.props);
+    }
+
+    // Track props accessed during render to auto-create properties
+    // This allows properties to be inferred from render function usage
+    const accessedProps = new Set<string>();
+    const propsProxy = new Proxy({ $this: {} }, {
+        get(_target, prop: string) {
+            // Track all property accesses except built-ins and $this
+            if (typeof prop === 'string' && 
+                prop !== '$this' &&
+                prop !== 'toJSON' && 
+                prop !== 'toString' && 
+                prop !== 'valueOf' &&
+                !prop.startsWith('Symbol.')) {
+                accessedProps.add(prop);
+            }
+            // Return a safe default value based on common patterns
+            return prop.endsWith('Handler') || prop.startsWith('on') ? (() => {}) : '';
+        }
+    });
+
+    // Do an initial render to detect accessed props
+    // This is safe because we catch all errors and the render function
+    // should be pure (no side effects)
+    try {
+        renderFn(propsProxy);
+    } catch {
+        // Ignore errors during prop detection - render function might
+        // throw if props are required, but that's okay for detection
+    }
+
+    // Add auto-detected props that weren't explicitly defined
+    // Default to String type for auto-detected props
+    for (const prop of accessedProps) {
+        if (!(prop in properties)) {
+            properties[prop] = { type: String };
+        }
+    }
+
+    class DynamicComponent extends LitElement {
+        static properties = properties;
+
+        static styles = options?.styles;
+
+        constructor() {
+            super();
+            // Initialize default values from simple props (not LitElement config objects)
+            if (options?.props) {
+                for (const [key, value] of Object.entries(options.props)) {
+                    // Only set default if it's a simple value, not a LitElement property config
+                    if (value !== undefined && !(value && typeof value === 'object' && ('type' in value || 'reflect' in value || 'attribute' in value))) {
+                        (this as any)[key] = value;
+                    }
+                }
+            }
+        }
+
+        createRenderRoot() {
+            if (options?.shadowRootOptions) {
+                return this.attachShadow(options.shadowRootOptions);
+            }
+            return super.createRenderRoot();
+        }
+
+        render() {
+            // Create a props object from element properties
+            const props: any = {
+                $this: this  // Element instance - needed for arrow functions which don't have 'this'
+            };
+            
+            // Copy all properties to props object
+            for (const key of Object.keys(properties)) {
+                props[key] = (this as any)[key];
+            }
+
+            // Bind render function to this element so 'this' refers to the element instance
+            // Note: 'this' works for regular functions, 'props.$this' works for arrow functions
+            return renderFn.call(this, props);
+        }
+    }
+
+    // Register the custom element
+    customElements.define(tagName, DynamicComponent);
+
+    return tagName;
+};
+
+// Export all lit APIs as a namespace object
+export const lit = {
+    html,
+    css,
+    unsafeCSS,
+    svg,
+    nothing,
+    when,
+    repeat,
+    keyed,
+    classMap,
+    styleMap,
+    ifDefined,
+    guard,
+    cache,
+    unsafeHTML,
+    until,
+    live,
+    ref,
+    createRef,
+    defineComponent
+};
+

package/src/gs-model.ts

@@ -0,0 +1,393 @@
+import { v4 as uuidv4 } from '@kispace-io/appspace/externals/third-party'
+
+export const KEY_LABEL = "label";
+export const KEY_NAME = "name";
+export const KEY_URL = "url";
+export const KEY_FORMAT = "format";
+export const KEY_ICON_PATH = "iconPath";
+export const KEY_STATE = "_state";
+export const KEY_SRC = "src";
+export const KEY_SOURCETYPE = "sourceType"
+export const KEY_ENV = "_env"
+export const KEY_GS_MANAGED = "gsManaged"
+export const KEY_SETTINGS = "settings"
+export const KEY_UUID = "uuid"
+export const KEY_EVENT_SUBSCRIPTIONS = "_eventSubscriptions"
+
+export const LAYER_GEOCODED_MARKERS = "geocoded-markers"
+
+export interface GsBag {
+    [key: string]: any
+}
+
+export function ensureUuid<T extends GsState>(obj: T): T {
+    if (!obj.uuid) {
+        obj.uuid = uuidv4()
+    }
+    return obj
+}
+
+export function ensureUuidsRecursive<T extends GsState>(obj: T): T {
+    ensureUuid(obj)
+    
+    if ('geometry' in obj && (obj as any).geometry) {
+        ensureUuid((obj as any).geometry)
+    }
+    
+    if ('source' in obj && (obj as any).source) {
+        const source = (obj as any).source
+        ensureUuid(source)
+        if (source.features && Array.isArray(source.features)) {
+            source.features.forEach((feature: any) => ensureUuidsRecursive(feature))
+        }
+    }
+    
+    if ('layers' in obj && Array.isArray((obj as any).layers)) {
+        (obj as any).layers.forEach((layer: any) => ensureUuidsRecursive(layer))
+    }
+    
+    if ('overlays' in obj && Array.isArray((obj as any).overlays)) {
+        (obj as any).overlays.forEach((overlay: any) => ensureUuid(overlay))
+    }
+    
+    if ('controls' in obj && Array.isArray((obj as any).controls)) {
+        (obj as any).controls.forEach((control: any) => ensureUuid(control))
+    }
+    
+    if ('interactions' in obj && Array.isArray((obj as any).interactions)) {
+        (obj as any).interactions.forEach((interaction: any) => ensureUuid(interaction))
+    }
+    
+    if ('view' in obj && (obj as any).view) {
+        ensureUuid((obj as any).view)
+    }
+    
+    return obj
+}
+
+export interface GsState {
+    uuid?: string
+    state?: GsBag
+}
+
+export enum GsSourceType {
+    OSM = "OSM", GeoJSON = "GeoJSON", Features = "Features", KML = "KML", GeoTIFF = "GeoTIFF", GPX = "GPX", BM = "BM", WMS = "WMS", WMTS = "WMTS", XYZ = "XYZ"
+}
+
+export enum GsLayerType {
+    TILE = "TILE", VECTOR = "VECTOR", GROUP = "GROUP"
+}
+
+export enum GsGeometryType {
+    Point = "Point",
+    MultiPoint = "MultiPoint",
+    Polygon = "Polygon",
+    MultiPolygon = "MultiPolygon",
+    LineString = "LineString",
+    MultiLineString = "MultiLineString",
+    Circle = "Circle",
+    LinearRing = "LinearRing"
+}
+
+export interface GsGeometry extends GsState {
+    type: GsGeometryType,
+    coordinates: number[]
+}
+
+export interface GsResource {
+}
+
+export interface GsIcon extends GsResource {
+    src: string
+}
+
+export interface GsFeature extends GsState {
+    geometry: GsGeometry
+}
+
+export interface GsSource extends GsState {
+    type: GsSourceType
+    url?: string
+    features?: GsFeature[]
+}
+
+export interface GsLayer extends GsState {
+    name?: string
+    type: GsLayerType,
+    source: GsSource,
+    visible?: boolean
+}
+
+export interface GsScript extends GsState {
+    src: string,
+}
+
+export interface GsOverlay extends GsScript {
+    position: "bottom-left" | "bottom-center" | "bottom-right" | "center-left" | "center-center" | "center-right" | "top-left" | "top-center" | "top-right",
+}
+
+export interface GsControl extends GsScript {
+}
+
+export interface GsInteraction extends GsState {
+
+}
+
+export interface GsView extends GsState {
+    center: number[],
+    zoom: number,
+    projection: string
+}
+
+export interface GsStrokeStyle {
+    color?: string
+    width?: number
+    lineDash?: number[]
+    lineCap?: 'butt' | 'round' | 'square'
+    lineJoin?: 'bevel' | 'round' | 'miter'
+    miterLimit?: number
+}
+
+export interface GsFillStyle {
+    color?: string
+}
+
+export interface GsImageStyle {
+    type: 'circle' | 'icon' | 'regular-shape'
+    
+    radius?: number
+    fill?: GsFillStyle
+    stroke?: GsStrokeStyle
+    
+    src?: string
+    scale?: number
+    anchor?: [number, number]
+    anchorXUnits?: 'fraction' | 'pixels'
+    anchorYUnits?: 'fraction' | 'pixels'
+    anchorOrigin?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+    color?: string
+    crossOrigin?: string
+    offset?: [number, number]
+    offsetOrigin?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+    size?: [number, number]
+    
+    points?: number
+    radius1?: number
+    radius2?: number
+    angle?: number
+    
+    opacity?: number
+    rotation?: number
+    rotateWithView?: boolean
+    displacement?: [number, number]
+}
+
+export interface GsTextStyle {
+    text?: string
+    font?: string
+    maxAngle?: number
+    offsetX?: number
+    offsetY?: number
+    overflow?: boolean
+    placement?: 'point' | 'line'
+    repeat?: number
+    scale?: number
+    rotateWithView?: boolean
+    rotation?: number
+    textAlign?: 'left' | 'center' | 'right' | 'end' | 'start'
+    justify?: 'left' | 'center' | 'right'
+    textBaseline?: 'bottom' | 'top' | 'middle' | 'alphabetic' | 'hanging' | 'ideographic'
+    fill?: GsFillStyle
+    stroke?: GsStrokeStyle
+    backgroundFill?: GsFillStyle
+    backgroundStroke?: GsStrokeStyle
+    padding?: [number, number, number, number]
+}
+
+export interface GsStyle {
+    id?: string
+    stroke?: GsStrokeStyle
+    fill?: GsFillStyle
+    image?: GsImageStyle
+    text?: GsTextStyle
+    zIndex?: number
+}
+
+export interface GsStylesMap {
+    [key: string]: GsStyle
+}
+
+export const DEFAULT_STYLES: GsStylesMap = {
+    'default-point': {
+        id: 'default-point',
+        image: {
+            type: 'circle',
+            radius: 5,
+            fill: { color: 'rgba(0, 100, 255, 0.8)' },
+            stroke: { color: 'white', width: 2 }
+        }
+    },
+    'default-line': {
+        id: 'default-line',
+        stroke: {
+            color: 'rgba(0, 100, 255, 0.8)',
+            width: 2
+        }
+    },
+    'default-polygon': {
+        id: 'default-polygon',
+        fill: { color: 'rgba(0, 100, 255, 0.3)' },
+        stroke: {
+            color: 'rgba(0, 100, 255, 0.8)',
+            width: 2
+        }
+    },
+    'selection': {
+        id: 'selection',
+        image: {
+            type: 'circle',
+            radius: 7,
+            fill: { color: 'rgba(255, 255, 0, 0.3)' },
+            stroke: { color: 'rgba(255, 255, 0, 1)', width: 3 }
+        },
+        stroke: {
+            color: 'rgba(255, 255, 0, 1)',
+            width: 3
+        },
+        fill: {
+            color: 'rgba(255, 255, 0, 0.3)'
+        }
+    }
+}
+
+export interface GsStyleRule {
+    id?: string
+    condition: {
+        geometryType?: GsGeometryType | GsGeometryType[]
+        layerName?: string
+        property?: {
+            key: string
+            value?: any
+            operator?: 'equals' | 'not-equals' | 'contains' | 'greater-than' | 'less-than' | 'exists'
+        }
+    }
+    styleId: string
+    priority?: number
+}
+
+export function evaluateStyleRule(rule: GsStyleRule, feature: GsFeature, layerName?: string): boolean {
+    const condition = rule.condition
+    
+    if (condition.geometryType) {
+        const types = Array.isArray(condition.geometryType) ? condition.geometryType : [condition.geometryType]
+        if (!types.includes(feature.geometry.type)) {
+            return false
+        }
+    }
+    
+    if (condition.layerName && condition.layerName !== layerName) {
+        return false
+    }
+    
+    if (condition.property) {
+        const prop = condition.property
+        const featureValue = feature.state?.[prop.key]
+        
+        if (!prop.operator || prop.operator === 'exists') {
+            return featureValue !== undefined
+        }
+        
+        if (prop.operator === 'equals') {
+            return featureValue === prop.value
+        }
+        
+        if (prop.operator === 'not-equals') {
+            return featureValue !== prop.value
+        }
+        
+        if (prop.operator === 'contains' && typeof featureValue === 'string' && typeof prop.value === 'string') {
+            return featureValue.includes(prop.value)
+        }
+        
+        if (prop.operator === 'greater-than' && typeof featureValue === 'number' && typeof prop.value === 'number') {
+            return featureValue > prop.value
+        }
+        
+        if (prop.operator === 'less-than' && typeof featureValue === 'number' && typeof prop.value === 'number') {
+            return featureValue < prop.value
+        }
+    }
+    
+    return true
+}
+
+export function getStyleForFeature(feature: GsFeature, rules: GsStyleRule[], stylesMap: GsStylesMap, layerName?: string): GsStyle | undefined {
+    const sortedRules = [...rules].sort((a, b) => (b.priority || 0) - (a.priority || 0))
+    
+    for (const rule of sortedRules) {
+        if (evaluateStyleRule(rule, feature, layerName)) {
+            return stylesMap[rule.styleId]
+        }
+    }
+    
+    return undefined
+}
+
+export interface GsMap extends GsState {
+    view: GsView,
+    layers: GsLayer[],
+    overlays: GsOverlay[],
+    controls: GsControl[],
+    interactions: GsInteraction[],
+    styles: GsStylesMap,
+    styleRules: GsStyleRule[],
+    chatHistory: any[]
+}
+
+export const DEFAULT_STYLE_RULES: GsStyleRule[] = [
+    {
+        id: 'default-points',
+        condition: {
+            geometryType: [GsGeometryType.Point, GsGeometryType.MultiPoint]
+        },
+        styleId: 'default-point',
+        priority: 0
+    },
+    {
+        id: 'default-lines',
+        condition: {
+            geometryType: [GsGeometryType.LineString, GsGeometryType.MultiLineString]
+        },
+        styleId: 'default-line',
+        priority: 0
+    },
+    {
+        id: 'default-polygons',
+        condition: {
+            geometryType: [GsGeometryType.Polygon, GsGeometryType.MultiPolygon, GsGeometryType.Circle]
+        },
+        styleId: 'default-polygon',
+        priority: 0
+    }
+]
+
+export const DEFAULT_GSMAP = ensureUuid({
+    view: ensureUuid({
+        center: [0, 0],
+        zoom: 0,
+        projection: 'EPSG:3857'
+    } as GsView),
+    layers: [ensureUuid({
+        type: GsLayerType.TILE,
+        source: ensureUuid({
+            type: GsSourceType.OSM
+        } as GsSource),
+    } as GsLayer)],
+    overlays: [] as GsOverlay[],
+    controls: [] as GsControl[],
+    interactions: [] as GsInteraction[],
+    state: {},
+    styles: { ...DEFAULT_STYLES },
+    styleRules: [...DEFAULT_STYLE_RULES]
+} as GsMap)
+

package/src/gs-ol-adapters.ts

@@ -0,0 +1,89 @@
+import {Map} from "ol";
+import {GsOlControl, GsOlOverlay} from "./gs-gs2ol";
+import {render as litRender} from "@kispace-io/appspace/externals/lit-exports";
+
+export class GsOlAdapter<T extends GsOlControl | GsOlOverlay> {
+    protected map: Map;
+    protected olObject: T;
+
+    private templateFunction?: Function;
+    protected retargetSelector?: string;
+
+    constructor(olObject: T) {
+        this.map = olObject.getMap()!
+        this.olObject = olObject
+    }
+
+    public getMap(): any {
+        return this.map;
+    }
+
+    public getElement() {
+        return this.olObject.getElement();
+    }
+
+    public render(strings?: TemplateStringsArray | Function) {
+        if (strings === undefined && this.templateFunction) {
+            strings = this.templateFunction()
+        } else if (strings instanceof Function) {
+            this.templateFunction = strings as Function
+            strings = this.templateFunction()
+        }
+        if (strings) {
+            litRender(strings, this.getElement())
+        }
+    }
+
+    protected onRendered() {
+    }
+
+    public style(styleJson: any) {
+        const style = this.getElement().style
+        for (const property in styleJson) {
+            const value = styleJson[property]
+            style.setProperty(property, value);
+        }
+    }
+}
+
+export class GsControlAdapter extends GsOlAdapter<GsOlControl> {
+    public style(styleJson: any) {
+        super.style(styleJson)
+
+        if ("--gs-contribution" in styleJson) {
+            this.retargetSelector = styleJson["--gs-contribution"]
+        }
+    }
+
+    public rendered() {
+        if (this.retargetSelector) {
+            const [parentPath, queryString] = this.retargetSelector.split("?");
+            const parent = this.map.getTargetElement().querySelector(parentPath) as HTMLElement
+            if (parent) {
+                const element = this.olObject.getElement()
+                if (queryString) {
+                    const params = new URLSearchParams(queryString);
+                    const sibling = parent.querySelector(`[name='${params.get("before")}']`) as HTMLElement
+                    if (sibling) {
+                        parent.insertBefore(element, sibling)
+                    }
+                } else {
+                    parent.appendChild(element)
+                }
+                this.olObject.setTarget(element);
+                this.render()
+            }
+        }
+    }
+}
+
+export class GsOverlayAdapter extends GsOlAdapter<GsOlOverlay> {
+    public show(coords: number[]) {
+        this.getElement().style.display = "block"
+        this.olObject.setPosition(coords)
+    }
+
+    public hide() {
+        this.getElement().style.display = "none"
+    }
+}