增加扩展组件

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -8,13 +8,14 @@
 </template>
 
 <script setup lang="ts">
-import { Component, createApp, ref, watch } from 'vue';
+import { Component, createApp, h, ref, watch } from 'vue';
 import Map from '../../packages/maplugin-maplibre/demo/Map.vue';
 import Drawer from './components/features/Drawer.vue';
 import Measurer from './components/features/Measurer.vue';
 import FeatureCollectionEditor from './components/features/FeatureCollectionEditor.vue';
 import ShowEditorButton from './components/features/ShowEditorButton.vue';
 import IO from './components/features/IO.vue';
+import ExtendPannel from './components/base/ExtendPannel.vue';
 
 import { DrawManager, GeoJSONLayerManager, MeasureManager, TIdentityGeoJSONFeature, MiddleButtonRoate, VertexEditor, useCamera } from '../../packages/maplugin-maplibre';
 import { StoreEditor } from './stores';
@@ -47,7 +48,7 @@ function handleMapLoaded(map: maplibregl.Map) {
         if (lng && lat) map.setCenter([lng, lat]);
         if (bearing) map.setBearing(bearing);
         if (pitch) map.setPitch(pitch);
-    }else{
+    } else {
         map.setCenter([121, 31]);
         map.setZoom(8);
     }

geojson-editor/src/components/base/ExtendPannel.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="extend-pannel">
+        <ToggleButton :content="title" :default-active="defaultActive" :onToggle="onToggleWrap"></ToggleButton>
+        <div :class="extendPannelContentClass">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import ToggleButton from './ToggleButton.vue';
+
+const props = withDefaults(defineProps<{
+    title: string,
+    defaultActive?: boolean,
+    onToggle?: (active: boolean) => void,
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+}>(), {
+    defaultActive: false
+});
+
+const activeRef = ref(props.defaultActive);
+const extendPannelContentClass = computed(() => {
+    let ret = `extend-pannel-content ${props.position}`;
+    if (activeRef.value) {
+        ret += " active";
+    }
+
+    return ret;
+});
+function onToggleWrap(active: boolean) {
+    props.onToggle?.(active);
+    activeRef.value = active;
+}
+</script>
+
+<style scoped>
+.extend-pannel {
+    position: relative;
+}
+
+.extend-pannel-content {
+    position: absolute;
+    background-color: var(--color-bg);
+    padding: 8px;
+    border-radius: 6px;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+
+}
+
+.extend-pannel-content.active {
+    opacity: 1;
+}
+
+.top-left {
+    top: 0;
+    right: 0;
+    transform: translateX(calc(100% + 8px));
+}
+
+.top-right {
+    top: 0;
+    left: 0;
+    transform: translateX(calc(-100% - 8px));
+}
+
+.bottom-left {
+    bottom: 0;
+    right: 0;
+    transform: translateX(calc(100% + 8px));
+}
+
+.bottom-right {
+    bottom: 0;
+    left: 0;
+    transform: translateX(calc(-100% - 8px));
+}
+</style>

geojson-editor/src/components/base/ToggleButton.vue

@@ -8,13 +8,13 @@ import { ref } from 'vue';
 const props = defineProps<{
     content: string,
     defaultActive: boolean,
-    onChange: (val: boolean) => void
+    onToggle: (val: boolean) => void
 }>();
 
 const active = ref(props.defaultActive);
 
-function handleClick(v: boolean) {
-    props.onChange(!active.value);
+function handleClick() {
+    props.onToggle(!active.value);
     active.value = !active.value;
 }
 </script>

geojson-editor/src/components/features/ShowEditorButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <ToggleButton content="编辑器" :defaultActive="StoreEditor.show.value" :onChange="v => StoreEditor.showEditor(v)">
+    <ToggleButton content="编辑器" :defaultActive="StoreEditor.show.value" :onToggle="v => StoreEditor.showEditor(v)">
     </ToggleButton>
 </template>