@mongoosejs/studio 0.2.5 → 0.2.6

package/frontend/src/document-details/document-property/document-property.html

@@ -1,9 +1,10 @@
-<div class="border border-gray-200 bg-white rounded-lg mb-2">
+<div class="border border-gray-200 bg-white rounded-lg mb-2" style="overflow: visible;">
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
     class="p-1 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
     :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-gray-100': !highlight }"
+    style="overflow: visible; position: relative;"
   >
     <div class="flex items-center" >
       <svg
@@ -17,6 +18,56 @@
       </svg>
       <span class="font-medium text-gray-900">{{path.path}}</span>
       <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
+      <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
+        <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
+          <button
+            type="button"
+            class="rounded-full px-2.5 py-0.5 transition"
+            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :style="detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''"
+            @click.stop="setDetailViewMode('text')">
+            Text
+          </button>
+          <button
+            type="button"
+            class="rounded-full px-2.5 py-0.5 transition"
+            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :style="detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''"
+            @click.stop="setDetailViewMode('map')">
+            Map
+          </button>
+        </div>
+        <!-- Info icon with tooltip -->
+        <div v-if="editting" class="relative inline-block" style="z-index: 10002;" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false" @click.stop>
+          <svg
+            ref="infoIcon"
+            class="w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <div
+            v-show="showTooltip"
+            ref="tooltip"
+            class="absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl"
+            style="z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;"
+            :style="getTooltipStyle()"
+          >
+            <div class="font-semibold mb-2">Map Controls:</div>
+            <div v-if="isGeoJsonPoint" class="space-y-1">
+              <div>• Drag pin to move location</div>
+            </div>
+            <div v-else-if="isGeoJsonPolygon" class="space-y-1">
+              <div>• Drag vertices to reshape polygon</div>
+              <div v-if="isMultiPolygon">• Right-click edge to add new vertex</div>
+              <div>• Right-click vertex to delete</div>
+            </div>
+            <div class="absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="flex items-center gap-2">
       <button
@@ -69,7 +120,18 @@
 
     <!-- Field Content -->
     <div v-if="editting && path.path !== '_id'">
+      <!-- Use detail-default with map editing for GeoJSON geometries -->
+      <component
+        v-if="isGeoJsonGeometry"
+        :is="getComponentForPath(path)"
+        :value="getEditValueForPath(path)"
+        :view-mode="detailViewMode"
+        :on-change="handleInputChange"
+        >
+      </component>
+      <!-- Use standard edit components for other types -->
       <component
+        v-else
         :is="getEditComponentForPath(path)"
         :value="getEditValueForPath(path)"
         :format="dateType"
@@ -131,7 +193,10 @@
       </div>
       <!-- Expanded view -->
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
-        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+        <component
+          :is="getComponentForPath(path)"
+          :value="getValueForPath(path.path)"
+          :view-mode="detailViewMode"></component>
         <button
           @click="toggleValueExpansion"
           class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
@@ -144,7 +209,10 @@
       </div>
       <!-- Full view (no truncation needed) -->
       <div v-else>
-        <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
+        <component
+          :is="getComponentForPath(path)"
+          :value="getValueForPath(path.path)"
+          :view-mode="detailViewMode"></component>
       </div>
     </div>
   </div>

package/frontend/src/document-details/document-property/document-property.js

@@ -17,8 +17,10 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker', // picker, iso
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
+      detailViewMode: 'text',
       copyButtonLabel: 'Copy',
-      copyResetTimeoutId: null
+      copyResetTimeoutId: null,
+      showTooltip: false
     };
   },
   beforeDestroy() {
@@ -92,9 +94,58 @@ module.exports = app => app.component('document-property', {
         return this.arrayValue.length - 2;
       }
       return 0;
+    },
+    isGeoJsonGeometry() {
+      const value = this.getValueForPath(this.path.path);
+      return value != null
+        && typeof value === 'object'
+        && !Array.isArray(value)
+        && Object.prototype.hasOwnProperty.call(value, 'type')
+        && Object.prototype.hasOwnProperty.call(value, 'coordinates');
+    },
+    isGeoJsonPoint() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'Point';
+    },
+    isGeoJsonPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && (value.type === 'Polygon' || value.type === 'MultiPolygon');
+    },
+    isMultiPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'MultiPolygon';
+    }
+  },
+  watch: {
+    isGeoJsonGeometry(newValue) {
+      if (!newValue) {
+        this.detailViewMode = 'text';
+      } else if (this.editting) {
+        // Default to map view when editing GeoJSON
+        this.detailViewMode = 'map';
+      }
+    },
+    editting(newValue) {
+      // When entering edit mode for GeoJSON, default to map view
+      if (newValue && this.isGeoJsonGeometry) {
+        this.detailViewMode = 'map';
+      }
     }
   },
   methods: {
+    setDetailViewMode(mode) {
+      this.detailViewMode = mode;
+      
+      // When switching to map view, expand the container and value so the map is visible
+      if (mode === 'map' && this.isGeoJsonGeometry) {
+        if (this.isCollapsed) {
+          this.isCollapsed = false;
+        }
+        if (this.needsTruncation && !this.isValueExpanded) {
+          this.isValueExpanded = true;
+        }
+      }
+    },
     handleInputChange(newValue) {
       const currentValue = this.getValueForPath(this.path.path);
 
@@ -165,6 +216,11 @@ module.exports = app => app.component('document-property', {
       if (!this.document) {
         return;
       }
+      // If there are unsaved changes for this path, use the changed value
+      if (Object.prototype.hasOwnProperty.call(this.changes, path)) {
+        return this.changes[path];
+      }
+      // Otherwise, use the document value
       const documentValue = mpath.get(path, this.document);
       return documentValue;
     },
@@ -184,6 +240,16 @@ module.exports = app => app.component('document-property', {
         this.copyResetTimeoutId = null;
       }, 5000);
     },
+    getTooltipStyle() {
+      if (!this.$refs.infoIcon || !this.showTooltip) {
+        return {};
+      }
+      const rect = this.$refs.infoIcon.getBoundingClientRect();
+      return {
+        left: (rect.right + 8) + 'px',
+        top: rect.top + 'px'
+      };
+    },
     copyPropertyValue() {
       const textToCopy = this.valueAsString;
       if (textToCopy == null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {