waibu-maps 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ardhi Lukianto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# waibu-maps

package/bajo/.alias

@@ -0,0 +1 @@
+wmaps

package/bajo/config.json

@@ -0,0 +1,10 @@
+{
+  "waibu": {
+    "prefix": "wmaps"
+  },
+  "mapOptions": {
+    "center": [106.8229, -6.1944],
+    "zoom": 7
+  },
+  "dependencies": ["bajo-spatial"]
+}

package/bajoI18N/resource/en-US.json

@@ -0,0 +1,17 @@
+{
+  "dirE": "E",
+  "dirW": "W",
+  "dirN": "N",
+  "dirS": "S",
+  "mapControl": {
+    "csrc": "Search",
+    "navigation-control": "Navigation",
+    "crlr": "Measurement",
+    "scale-control": "Map Scale",
+    "attribution-control": "Attribution",
+    "fullscreen-control": "Fullscreen",
+    "geolocate-control": "Geolocate",
+    "czbp": "Zoom/Bearing/Pitch",
+    "cmp": "Mouse Position"
+  }
+}

package/bajoI18N/resource/id.json

@@ -0,0 +1,19 @@
+{
+  "Lng": "Bjr",
+  "Lat": "Ltg",
+  "dirE": "T",
+  "dirW": "B",
+  "dirN": "U",
+  "dirS": "S",
+  "mapControl": {
+    "csrc": "Search",
+    "navigation-control": "Navigation",
+    "crlr": "Measurement",
+    "scale-control": "Map Scale",
+    "attribution-control": "Attribution",
+    "fullscreen-control": "Fullscreen",
+    "geolocate-control": "Geolocate",
+    "czbp": "Zoom/Bearing/Pitch",
+    "cmp": "Mouse Position"
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "waibu-maps",
+  "version": "1.0.1",
+  "description": "Maps for Waibu MPA",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ardhi/waibu-maps.git"
+  },
+  "keywords": [
+    "maps",
+    "waibu",
+    "web",
+    "webserver",
+    "bajo",
+    "framework",
+    "fastify",
+    "modular"
+  ],
+  "author": "Ardhi Lukianto <ardhi@lukianto.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ardhi/waibu-maps/issues"
+  },
+  "homepage": "https://github.com/ardhi/waibu-maps#readme",
+  "dependencies": {
+    "maplibre-gl": "^4.7.1",
+    "terra-draw": "^1.0.0-beta.8"
+  }
+}

package/waibuBootstrap/theme/component/factory/control-attribution.js

@@ -0,0 +1,29 @@
+import control from './control.js'
+
+async function controlAttribution () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlAttribution extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { isString } = this.plugin.app.bajo.lib._
+      const opts = {
+        compact: !this.params.attr.noCompact
+      }
+      if (isString(this.params.attr.text)) opts.customAttribution = this.params.attr.text
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
+      opts.classSelector = 'maplibregl-ctrl-attrib'
+      this.block.control.push(`
+        await wmaps.createControlNative('AttributionControl', ${jsonStringify(opts, true)})
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlAttribution

package/waibuBootstrap/theme/component/factory/control-buttons-item.js

@@ -0,0 +1,14 @@
+import wmapsBase from '../wmaps-base.js'
+
+async function controlButtonsItem () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsControlButtonsItem extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.params.tag = 'div'
+    }
+  }
+}
+
+export default controlButtonsItem

package/waibuBootstrap/theme/component/factory/control-buttons.js

@@ -0,0 +1,67 @@
+import control from './control.js'
+
+async function controlButtons () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlButtons extends WmapsControl {
+    static scripts = [
+      ...super.scripts,
+      'waibuMaps.asset:/js/control-buttons.js'
+    ]
+
+    static css = [
+      ...super.css,
+      'waibuMaps.asset:/css/control-buttons.css'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { routePath } = this.plugin.app.waibu
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { isEmpty, isString, pick, camelCase } = this.plugin.app.bajo.lib._
+      const { $ } = this.component
+      const pos = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-right'
+      const items = []
+      $(`<div>${this.params.html}</div>`).find('div').each(function () {
+        const attrs = {}
+        for (const k in this.attribs) {
+          attrs[camelCase(k)] = this.attribs[k]
+        }
+        const opts = { id: attrs.id ?? generateId('alpha') }
+        if (attrs.minZoom) opts.minZoom = Number(attrs.minZoom) || 0
+        if (attrs.class) opts.class = attrs.class
+        if (attrs.dropdown) {
+          opts.fn = attrs.dropdown
+          opts.fnParams = opts.id
+          opts.dropdown = true
+        } else if (attrs.openTab) {
+          opts.url = attrs.openTab
+          opts.tab = true
+        } else if (attrs.openUrl) {
+          opts.url = attrs.openTab
+        } else if (isString(attrs.dataBsTarget)) {
+          opts.attrib = pick(attrs, ['dataBsTarget', 'dataBsToggle', 'ariaControls'])
+        } else if (attrs.fn) {
+          opts.fn = attrs.fn
+        }
+        if (isString(attrs.imageUrl)) opts.imageUrl = routePath(attrs.imageUrl)
+        opts.icon = $(this).find('i').prop('class')
+        items.push(opts)
+      })
+      this.params.html = ''
+      if (!isEmpty(items)) {
+        this.block.control.push(`
+          map.addControl(new ControlButtons(_.merge(${jsonStringify({ items, position: pos }, true)}, { scopeId: this.$store.map.id }))${pos ? `, '${pos}'` : ''})
+        `)
+        this.params.html = this.writeBlock()
+      }
+    }
+  }
+}
+
+export default controlButtons

package/waibuBootstrap/theme/component/factory/control-center-position.js

@@ -0,0 +1,28 @@
+import control from './control.js'
+const storeKey = 'mapControl.centerPos'
+
+async function controlCenterPosition () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlCenterPosition extends WmapsControl {
+    static scripts = [
+      ...super.scripts,
+      'waibuMaps.asset:/js/control-center-position.js'
+    ]
+
+    static css = [
+      ...super.css,
+      'waibuMaps.asset:/css/control-center-position.css'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+      this.params.html = `<div class="childmap maplibregl-ctrl-center" x-data>
+        <div x-show="$store.mapControl ? $store.${storeKey} : true"></div>
+      </div>`
+    }
+  }
+}
+
+export default controlCenterPosition

package/waibuBootstrap/theme/component/factory/control-draw.js

@@ -0,0 +1,43 @@
+import control from './control.js'
+
+async function controlDraw () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlDraw extends WmapsControl {
+    static scripts = [
+      ...super.scripts,
+      'waibuMaps.virtual:/terra-draw/terra-draw.umd.js'
+    ]
+
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { isString } = this.plugin.app.bajo.lib._
+      const opts = {}
+      if (['imperial', 'metric', 'nautical'].includes(this.params.attr.unit)) opts.unit = this.params.attr.unit
+      if (isString(this.params.attr.maxWidth) && Number(this.params.attr.maxWidth)) opts.maxWidth = Number(this.params.attr.maxWidth)
+      // const pos = ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
+      this.block.control.push(`<script>
+        draw = new terraDraw.TerraDraw({
+          adapter: new terraDraw.TerraDrawMapLibreGLAdapter({
+            map,
+            lib: maplibregl
+          }),
+          modes: [new terraDraw.TerraDrawFreehandMode()]
+        })
+        this.draw = draw
+        this.draw.start()
+        this.draw.setMode('freehand')
+      `)
+      this.block.nonReactive(`
+        let draw
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlDraw

package/waibuBootstrap/theme/component/factory/control-fullscreen.js

@@ -0,0 +1,26 @@
+import control from './control.js'
+
+async function controlFullscreen () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlFullscreen extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { isString } = this.plugin.app.bajo.lib._
+      const opts = {}
+      if (isString(this.params.attr.container)) opts.container = this.params.attr.container
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
+      this.block.control.push(`
+        await wmaps.createControlNative('FullscreenControl', ${jsonStringify(opts, true)})
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlFullscreen

package/waibuBootstrap/theme/component/factory/control-geolocate.js

@@ -0,0 +1,27 @@
+import control from './control.js'
+
+async function controlGeolocate () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlGeolocate extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { jsonStringify } = this.plugin.app.waibuMpa
+      const { set } = this.plugin.app.bajo.lib._
+      const opts = {}
+      if (this.params.attr.highAccuracy) set(opts, 'positionOptions.enableHighAccuracy', true)
+      if (this.params.attr.trackUserLocation) opts.trackUserLocation = true
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'bottom-right'
+      this.block.control.push(`
+        await wmaps.createControlNative('GeolocateControl', ${jsonStringify(opts, true)})
+      `)
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlGeolocate

package/waibuBootstrap/theme/component/factory/control-group-button.js

@@ -0,0 +1,15 @@
+import wmapsBase from '../wmaps-base.js'
+const prefix = 'cgrb'
+
+async function controlGroupButton () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsControlGroupButton extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.component.normalizeAttr(this.params, { tag: 'button', cls: `control-group-button ${prefix}`, autoId: true })
+    }
+  }
+}
+
+export default controlGroupButton

package/waibuBootstrap/theme/component/factory/control-group-menu.js

@@ -0,0 +1,45 @@
+import wmapsBase from '../wmaps-base.js'
+const prefix = 'cgrm'
+
+async function controlGroupMenu () {
+  const WmapsBase = await wmapsBase.call(this)
+
+  return class WmapsControlGroupMenu extends WmapsBase {
+    constructor (options) {
+      super(options)
+      this.component.normalizeAttr(this.params, { tag: 'button', cls: `control-group-menu ${prefix}`, autoId: true })
+      this.params.attr.class.push('dropdown', 'dropstart')
+    }
+
+    async build () {
+      const { $ } = this.component
+      const { fastGlob } = this.plugin.app.bajo.lib
+      const { isString } = this.plugin.app.bajo.lib._
+      const { routePath } = this.plugin.app.waibu
+      let icon
+      let image = ''
+      const items = []
+      $(`<div>${this.params.html}</div>`).children().each(function () {
+        if (this.name === 'i') icon = $(this).prop('class')
+        else items.push($(this).prop('outerHTML'))
+      })
+      if (isString(this.params.attr.image)) {
+        if (this.params.attr.image === 'logo') {
+          let logo = 'waibu'
+          const files = await fastGlob(`${this.plugin.app.main.dir.pkg}/bajo/logo.*`)
+          if (files.length > 0) logo = 'main'
+          image = routePath(`waibuMpa:/logo/${logo}`)
+        } else image = routePath(this.params.attr.image)
+      }
+      this.params.html = `
+        <div class="var">
+          <div class="icon">${icon}</div>
+          <div class="image">${image}</div>
+          <div class="html">${items.join('\n')}</div>
+        </div>
+      `
+    }
+  }
+}
+
+export default controlGroupMenu

package/waibuBootstrap/theme/component/factory/control-group.js

@@ -0,0 +1,94 @@
+import control from './control.js'
+const prefix = 'cgr'
+
+async function controlGroup () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlGroup extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { generateId } = this.plugin.app.bajo
+      const { jsonStringify, minify } = this.plugin.app.waibuMpa
+      const { isString, trim } = this.plugin.app.bajo.lib._
+      const { $ } = this.component
+      const tpl = await this.component.buildSentence(this.loadTemplate('waibuMaps.partial:/menu.html', { escape: true }), {}, { minify: true })
+      const id = isString(this.params.attr.id) ? this.params.attr.id : generateId('alpha')
+      const opts = {}
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
+      opts.class = prefix + ' maplibregl-ctrl-group'
+      const items = []
+      const params = []
+      $(`<div>${this.params.html}</div>`).find('button[class^="control-group-"]').each(function () {
+        const vars = $(this).find('.var').length
+        if (vars > 0) {
+          params.push({
+            image: $(this).find('.var .image').text() ?? '',
+            icon: $(this).find('.var .icon').text() ?? '',
+            html: $(this).find('.var .html').prop('innerHTML') ?? '',
+            wrapper: $(this).html('{%= cmp %}').prop('outerHTML') ?? ''
+          })
+        } else {
+          const item = trim($(this).removeAttr('octag').prop('outerHTML'))
+          items.push(item)
+        }
+      })
+      for (const param of params) {
+        for (const type of ['html', 'wrapper']) {
+          param[type] = await minify(param[type])
+        }
+      }
+      for (const idx in items) {
+        items[idx] = await minify(items[idx])
+      }
+      this.readBlock()
+      this.block.reactive.push(`
+        ${prefix}MenuTpl: _.template('${tpl}')
+      `, `
+        async ${prefix}Trigger (evt) {
+          const el = evt.target.closest('button')
+          if (!el) return
+          const menu = el.querySelector('.dropdown-menu')
+          if (!menu) return
+          if (menu.children.length > 0) return
+          await wmpa.addComponent('<c:' + el.getAttribute('component') + '/>', menu)
+        }
+      `, `
+        async ${prefix}Builder (params) {
+          const items = []
+          for (const param of params) {
+            const args = {
+              click: '',
+              image: param.image,
+              icon: param.icon,
+              html: param.html
+            }
+            if (param.wrapper.includes('component=')) {
+              args.html = ''
+              args.click = '${prefix}Trigger'
+            }
+            const wfn = _.template(param.wrapper)
+            const inner = this.${prefix}MenuTpl(args)
+            const outer = wfn({ cmp: inner })
+            items.push(wmpa.createComponentFromHtml(outer))
+          }
+          return items
+        }
+      `)
+      this.block.control.push({
+        id,
+        group: true,
+        content: `
+          await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder, params: ${jsonStringify(params, true)} }))
+        `
+      })
+
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlGroup

package/waibuBootstrap/theme/component/factory/control-image.js

@@ -0,0 +1,43 @@
+import control from './control.js'
+const prefix = 'cimg'
+
+async function controlImage () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlImage extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { routePath } = this.plugin.app.waibu
+      const { jsonStringify, groupAttrs, attribsStringify } = this.plugin.app.waibuMpa
+      const { isString, isEmpty } = this.plugin.app.bajo.lib._
+      const opts = {}
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
+      const group = groupAttrs(this.params.attr, ['img'])
+      const img = group.img ?? {}
+      opts.class = prefix + (isEmpty(img.class) ? '' : (' ' + img.class.join(' ')))
+      const url = isString(this.params.attr.url) ? routePath(this.params.attr.url) : null
+      let animate = '@mouseenter="$el.style.opacity = 1" @mouseleave="$el.style.opacity = 0.3" '
+      if (this.params.attr.noAnimate) animate = ''
+      this.block.reactive.push(`
+        async ${prefix}Builder () {
+          const body = ['<c:${url ? `a url="${url}"` : 'div'}><c:img ${attribsStringify(img)} ']
+          body.push('${animate}')
+          body.push('/></c:${url ? 'a' : 'div'}>')
+          return await wmpa.createComponent(body)
+        }
+      `)
+
+      this.block.control.push(`
+        await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
+      `)
+
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlImage

package/waibuBootstrap/theme/component/factory/control-loader.js

@@ -0,0 +1,27 @@
+import control from './control.js'
+
+async function controlLoader () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlLoader extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { groupAttrs, attribsStringify } = this.plugin.app.waibuMpa
+      const group = groupAttrs(this.params.attr, ['progress'])
+      const attr = group.progress ?? {}
+      attr.value = '100'
+      attr.strip = 'animated'
+      if (!attr.height) attr.height = 3
+      if (!attr.background) attr.background = 'color:danger'
+      this.params.html = await this.component.buildSentence(`<c:div class="childmap maplibregl-ctrl-loader">
+        <c:progress ${attribsStringify(attr)} x-show="$store.wmpa.loading"/>
+      </c:div>`)
+    }
+  }
+}
+
+export default controlLoader

package/waibuBootstrap/theme/component/factory/control-logo.js

@@ -0,0 +1,50 @@
+import control from './control.js'
+const prefix = 'clogo'
+
+async function controlLogo () {
+  const WmapsControl = await control.call(this)
+
+  return class WmapsControlLogo extends WmapsControl {
+    constructor (options) {
+      super(options)
+      this.params.noTag = true
+    }
+
+    async build () {
+      const { fastGlob } = this.plugin.app.bajo.lib
+      const { routePath } = this.plugin.app.waibu
+      const { jsonStringify, groupAttrs, attribsStringify } = this.plugin.app.waibuMpa
+      const opts = { class: prefix }
+      opts.position = this.ctrlPos.includes(this.params.attr.position) ? this.params.attr.position : 'top-left'
+      const group = groupAttrs(this.params.attr, ['img'])
+      const img = group.img ?? {}
+      let logo = 'waibu'
+      const files = await fastGlob(`${this.plugin.app.main.dir.pkg}/bajo/logo.*`)
+      if (files.length > 0) logo = 'main'
+      img.src = routePath(`waibuMpa:/logo/${logo}`)
+      let animate = '@mouseenter="$el.style.opacity = 1" @mouseleave="$el.style.opacity = 0.3" '
+      if (this.params.attr.noAnimate) {
+        animate = ''
+      } else {
+        img.style = img.style ?? {}
+        img.style.opacity = 0.3
+      }
+      this.block.reactive.push(`
+        async ${prefix}Builder () {
+          const body = ['<c:a href="#" @click="wbs.appLauncher(\\'user - fullscreen darkmode language\\')">']
+          body.push('<c:img ${attribsStringify(img)} ${animate} />')
+          body.push('</c:a>')
+          return await wmpa.createComponent(body)
+        }
+      `)
+
+      this.block.control.push(`
+        await wmaps.createControl(_.merge(${jsonStringify(opts, true)}, { builder: this.${prefix}Builder }))
+      `)
+
+      this.params.html = this.writeBlock()
+    }
+  }
+}
+
+export default controlLogo