update

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -10,12 +10,10 @@
 <script setup lang="ts">
 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 Data from './components/features/Data/Data.vue';
 
 import { DrawManager, GeoJSONLayerManager, MeasureManager, TIdentityGeoJSONFeature, MiddleButtonRoate, VertexEditor, useCamera } from '../../packages/maplugin-maplibre';
 import { StoreEditor } from './stores';
@@ -112,11 +110,11 @@ function handleMapLoaded(map: maplibregl.Map) {
         });
 
     createMapControl(map, ShowEditorButton);
-    createMapControl(map, IO, {
+    createMapControl(map, Data, {
+        drawManager,
         onUpload: (features: Array<TIdentityGeoJSONFeature>) => glManager.add(...features),
         onDownload: () => glManager.fc
-    });
-    createMapControl(map, Drawer, { drawManager }, 'top-left');
+    }, "top-left");
     createMapControl(map, Measurer, { measureManager }, 'top-left');
 }
 

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

@@ -47,11 +47,12 @@ function onToggleWrap(active: boolean) {
     border-radius: 6px;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
-
+    pointer-events: none;
 }
 
 .extend-pannel-content.active {
     opacity: 1;
+    pointer-events: auto;
 }
 
 .top-left {

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

@@ -0,0 +1,26 @@
+<template>
+    <div class="data">
+        <IO :onUpload="onUpload" :onDownload="onDownload"></IO>
+        <Drawer :drawManager="drawManager"></Drawer>
+    </div>
+</template>
+
+<script setup lang="ts">
+import IO from './IO.vue';
+import Drawer from './Drawer.vue';
+import { DrawManager, TIdentityGeoJSONFeature } from '../../../../../packages/maplugin-maplibre';
+
+defineProps<{
+    onUpload(features: Array<TIdentityGeoJSONFeature>): void,
+    onDownload(): GeoJSON.FeatureCollection,
+    drawManager: DrawManager
+}>();
+
+</script>
+
+<style scoped>
+.data {
+    display: flex;
+    gap: 8px;
+}
+</style>

geojson-editor/src/components/features/Drawer.vue renamed to geojson-editor/src/components/features/Data/Drawer.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import RadioButton from '../base/RadioButton.vue';
-import { DrawManager, TDrawGeometryType } from '../../../../packages/maplugin-core';
+import RadioButton from '../../base/RadioButton.vue';
+import { DrawManager, TDrawGeometryType } from '../../../../../packages/maplugin-maplibre';
 import { ref, watch } from 'vue';
 
 const radios: Record<TDrawGeometryType, string> = {

geojson-editor/src/components/features/IO.vue renamed to geojson-editor/src/components/features/Data/IO.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="up-down-load">
         <div class="upload" @click="handleUpload">
-            <svg t="1731034374048" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24"
+            <svg t="1731034374048" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32"
                 height="20">
                 <path
                     d="M576 631.466667V725.333333h170.666667c59.733333-8.533333 106.666667-64 106.666666-128 0-72.533333-55.466667-128-128-128-17.066667 0-29.866667 4.266667-42.666666 8.533334V469.333333c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666c0 17.066667 4.266667 29.866667 4.266667 46.933334-8.533333-4.266667-17.066667-4.266667-25.6-4.266667C260.266667 512 213.333333 558.933333 213.333333 618.666667S260.266667 725.333333 320 725.333333h170.666667v-93.866666l-46.933334 46.933333L384 618.666667l149.333333-149.333334 149.333334 149.333334-59.733334 59.733333-46.933333-46.933333z m0 93.866666v85.333334h-85.333333v-85.333334h-42.666667v85.333334h-128C213.333333 810.666667 128 725.333333 128 618.666667c0-85.333333 55.466667-157.866667 128-183.466667C273.066667 311.466667 379.733333 213.333333 512 213.333333c110.933333 0 209.066667 72.533333 243.2 170.666667 102.4 12.8 183.466667 102.4 183.466667 213.333333s-85.333333 200.533333-192 213.333334h-128v-85.333334h-42.666667z"
                     fill="#ccc" p-id="8232" style="--darkreader-inline-fill: #33373a;"></path>
             </svg>
         </div>
         <div class="download" @click="handleDownload">
-            <svg t="1731034330703" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24"
+            <svg t="1731034330703" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32"
                 height="20">
                 <path
                     d="M490.666667 644.266667V469.333333h85.333333v174.933334l46.933333-46.933334 59.733334 59.733334-68.266667 68.266666h132.266667c59.733333-8.533333 106.666667-64 106.666666-128 0-72.533333-55.466667-128-128-128-17.066667 0-29.866667 4.266667-42.666666 8.533334V469.333333c0-93.866667-76.8-170.666667-170.666667-170.666666s-170.666667 76.8-170.666667 170.666666c0 17.066667 4.266667 29.866667 4.266667 46.933334-8.533333-4.266667-17.066667-4.266667-25.6-4.266667C260.266667 512 213.333333 558.933333 213.333333 618.666667S260.266667 725.333333 320 725.333333h132.266667L384 657.066667l59.733333-59.733334 46.933334 46.933334z m123.733333 81.066666l-81.066667 81.066667-81.066666-81.066667H405.333333v85.333334h-85.333333C213.333333 810.666667 128 725.333333 128 618.666667c0-85.333333 55.466667-157.866667 128-183.466667C273.066667 311.466667 379.733333 213.333333 512 213.333333c110.933333 0 209.066667 72.533333 243.2 170.666667 102.4 12.8 183.466667 102.4 183.466667 213.333333s-85.333333 200.533333-192 213.333334h-85.333334v-85.333334h-46.933333z"
@@ -20,8 +20,8 @@
 </template>
 
 <script setup lang="ts">
-import { TIdentityGeoJSONFeature } from '../../../../packages/maplugin-core';
-import FileProcesses from '../../services/file-processes';
+import { TIdentityGeoJSONFeature } from '../../../../../packages/maplugin-core';
+import FileProcesses from '../../../services/file-processes';
 
 const props = defineProps<{
     onUpload(features: Array<TIdentityGeoJSONFeature>): void,
@@ -96,9 +96,12 @@ async function handleDownload() {
 }
 
 .up-down-load>div {
-    padding: 4px;
     line-height: 0;
     cursor: pointer;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .up-down-load>div:hover {