From 712b654d68fb876f3091f4a23c0e60eace41a11f Mon Sep 17 00:00:00 2001 From: Kavehhn174 Date: Sun, 30 Aug 2026 10:59:41 +0330 Subject: [PATCH] feat(map): improve co-located properties with smart grouping, layered pin badges, popup navigation, and spread mode --- src/views/pages/Property/PropertyMap.vue | 821 ++++++++++++++++++++--- 1 file changed, 733 insertions(+), 88 deletions(-) diff --git a/src/views/pages/Property/PropertyMap.vue b/src/views/pages/Property/PropertyMap.vue index a4020ce..87587f3 100644 --- a/src/views/pages/Property/PropertyMap.vue +++ b/src/views/pages/Property/PropertyMap.vue @@ -13,12 +13,14 @@ + + + + +
- {{ propertiesWithCoords.length }} ملک روی نقشه + {{ propertiesWithCoords.length }} ملک + + ({{ locationGroups.length }} موقعیت) +
@@ -77,81 +107,221 @@ - - - -
- -
- - - {{ getCategoryName(prop) }} - - - کد: {{ prop.propertyCode }} - + + - -
-

{{ prop.name || 'ملک بدون نام' }}

+ + @@ -209,6 +379,10 @@ const hoverCoords = ref(null); const isLocating = ref(false); const isFullscreen = ref(false); const mapReady = ref(false); +const isSpreadMode = ref(false); + +// Active property index tracking for multi-property location groups: { [groupId]: activePropertyIndex } +const activeGroupIndexMap = ref({}); // Default fallback image const DEFAULT_IMAGE = 'https://cloud.mbmanager.ir/images/item-no-image.png'; @@ -246,7 +420,7 @@ const resolveCoordinates = (prop) => { const c1 = parseFloat(rawCoords[1]); if (!isNaN(c0) && !isNaN(c1) && !(c0 === 0 && c1 === 0)) { - // Check orientation: Iran latitude is ~25-40, longitude is ~44-68 + // Check orientation: Iran latitude is ~20-45, longitude is ~40-68 if (c0 >= 20 && c0 <= 45 && c1 >= 40 && c1 <= 68) { return [c0, c1]; // [lat, lng] } @@ -297,8 +471,91 @@ const propertiesWithCoords = computed(() => { .filter(Boolean); }); +/** + * Group properties by identical / near-identical coordinates (~1m precision) + */ +const locationGroups = computed(() => { + const groupsMap = new Map(); + + propertiesWithCoords.value.forEach((prop) => { + const [lat, lng] = prop.resolvedCoords; + // Group key with 5 decimal places (~1.1 meter precision) + const key = `${lat.toFixed(5)},${lng.toFixed(5)}`; + + if (!groupsMap.has(key)) { + groupsMap.set(key, { + id: key, + coords: [lat, lng], + properties: [] + }); + } + groupsMap.get(key).properties.push(prop); + }); + + return Array.from(groupsMap.values()).map((group) => { + const count = group.properties.length; + const codes = group.properties.map((p) => (p.propertyCode ? `#${p.propertyCode}` : null)).filter(Boolean); + const totalDong = group.properties.reduce((sum, p) => sum + (parseFloat(p.dong) || 0), 0); + + return { + ...group, + count, + codes, + totalDong, + isGroup: count > 1 + }; + }); +}); + +/** + * Checks if there is at least one location with 2 or more properties + */ +const hasCoLocatedProperties = computed(() => { + return locationGroups.value.some((g) => g.count > 1); +}); + +/** + * Spread / Spiderfy offset calculator for Spread Mode + */ +const spreadMarkersList = computed(() => { + const list = []; + const radius = 0.00018; // ~18 meters offset + + locationGroups.value.forEach((group) => { + if (group.count === 1) { + list.push({ + prop: group.properties[0], + coords: group.coords, + isOffset: false + }); + } else { + const [baseLat, baseLng] = group.coords; + const N = group.count; + + group.properties.forEach((prop, i) => { + const angle = (2 * Math.PI * i) / N - Math.PI / 2; + const latOffset = radius * Math.cos(angle); + const lngOffset = (radius * Math.sin(angle)) / Math.cos((baseLat * Math.PI) / 180); + + list.push({ + prop, + coords: [baseLat + latOffset, baseLng + lngOffset], + isOffset: true + }); + }); + } + }); + + return list; +}); + +const toggleSpreadMode = () => { + isSpreadMode.value = !isSpreadMode.value; +}; + // Helper functions for property fields const getPropertyImage = (prop) => { + if (!prop) return DEFAULT_IMAGE; return prop.imageUrl || prop.mainImageUrls?.[0] || prop.signedMainImageUrls?.[0] || DEFAULT_IMAGE; }; @@ -307,6 +564,7 @@ const handleImageError = (e) => { }; const getCategoryName = (prop) => { + if (!prop) return ''; if (prop.nativeCategory) return prop.nativeCategory; if (typeof prop.category === 'object' && prop.category?.nativeName) return prop.category.nativeName; if (typeof prop.category === 'string') return prop.category; @@ -314,20 +572,93 @@ const getCategoryName = (prop) => { }; /** - * Creates custom Airbnb-style Leaflet pin icon + * Group active property index helper */ -const getMarkerIcon = (prop) => { - const propId = prop._id || prop.id; - const isSelected = props.selectedPropertyId === propId; - const isHovered = props.hoveredPropertyId === propId; - const code = prop.propertyCode ? `#${prop.propertyCode}` : ''; - const cat = getCategoryName(prop) || 'ملک'; +const getActiveGroupIndex = (group) => { + if (!group || !group.id) return 0; + const idx = activeGroupIndexMap.value[group.id]; + if (typeof idx === 'number' && idx >= 0 && idx < group.properties.length) { + return idx; + } + return 0; +}; + +const getActiveProperty = (group) => { + if (!group || !group.properties || group.properties.length === 0) return null; + const idx = getActiveGroupIndex(group); + return group.properties[idx] || group.properties[0]; +}; + +const setActiveGroupIndex = (group, index) => { + if (!group || !group.properties) return; + const boundedIndex = Math.max(0, Math.min(index, group.properties.length - 1)); + activeGroupIndexMap.value[group.id] = boundedIndex; + + const prop = group.properties[boundedIndex]; + if (prop) { + emit('select-property', prop._id || prop.id); + } +}; + +const nextGroupProperty = (group) => { + const currentIdx = getActiveGroupIndex(group); + const nextIdx = (currentIdx + 1) % group.properties.length; + setActiveGroupIndex(group, nextIdx); +}; + +const prevGroupProperty = (group) => { + const currentIdx = getActiveGroupIndex(group); + const prevIdx = (currentIdx - 1 + group.properties.length) % group.properties.length; + setActiveGroupIndex(group, prevIdx); +}; + +/** + * Creates custom Leaflet pin icon for Location Groups (Smart Multi-Property Pill) + */ +const getGroupMarkerIcon = (group) => { + const propIds = group.properties.map((p) => p._id || p.id); + const isSelected = propIds.includes(props.selectedPropertyId); + const isHovered = propIds.includes(props.hoveredPropertyId); + + if (!group.isGroup) { + // Single property pin + const prop = group.properties[0]; + const code = prop.propertyCode ? `#${prop.propertyCode}` : ''; + const cat = getCategoryName(prop) || 'ملک'; + + const html = ` +
+
+ 🏠 + ${code || cat} +
+
+
+ `; + + return L.divIcon({ + className: 'airbnb-marker-wrapper', + html: html, + iconSize: [68, 38], + iconAnchor: [34, 38], + popupAnchor: [0, -38] + }); + } + + // Multi-property group pin + let labelText = ''; + if (group.codes.length > 0 && group.codes.length <= 2) { + labelText = group.codes.join(' • '); + } else { + labelText = `${group.count} سهم`; + } const html = ` -
+
- 🏠 - ${code || cat} + 🏢 + ${labelText} + ${group.count}
@@ -336,8 +667,38 @@ const getMarkerIcon = (prop) => { return L.divIcon({ className: 'airbnb-marker-wrapper', html: html, - iconSize: [64, 38], - iconAnchor: [32, 38], + iconSize: [84, 40], + iconAnchor: [42, 40], + popupAnchor: [0, -40] + }); +}; + +/** + * Creates custom Leaflet pin icon for Individual (Spread Mode) Markers + */ +const getIndividualMarkerIcon = (prop, isOffset = false) => { + const propId = prop._id || prop.id; + const isSelected = props.selectedPropertyId === propId; + const isHovered = props.hoveredPropertyId === propId; + const code = prop.propertyCode ? `#${prop.propertyCode}` : ''; + const cat = getCategoryName(prop) || 'ملک'; + + const html = ` +
+
+ 🏠 + ${code || cat} + ${prop.dong ? `${prop.dong}د` : ''} +
+
+
+ `; + + return L.divIcon({ + className: 'airbnb-marker-wrapper', + html: html, + iconSize: [68, 38], + iconAnchor: [34, 38], popupAnchor: [0, -38] }); }; @@ -371,7 +732,15 @@ const onMarkerClick = (prop) => { emit('select-property', prop._id || prop.id); }; +const onGroupMarkerClick = (group) => { + const activeProp = getActiveProperty(group); + if (activeProp) { + emit('select-property', activeProp._id || activeProp.id); + } +}; + const onEditClick = (prop) => { + if (!prop) return; const id = prop._id || prop.id; emit('edit-property', id); router.push(`/property/edit-property/${id}`); @@ -442,11 +811,19 @@ onBeforeUnmount(() => { } }); -// Watch for selected property changes to zoom to it +// Watch for selected property changes to zoom and sync group active index watch( () => props.selectedPropertyId, (newId) => { if (newId) { + // Find which group contains this property + locationGroups.value.forEach((group) => { + const idx = group.properties.findIndex((p) => (p._id || p.id) === newId); + if (idx !== -1) { + activeGroupIndexMap.value[group.id] = idx; + } + }); + flyToProperty(newId); } } @@ -515,6 +892,12 @@ defineExpose({ border: 1px solid rgba(255, 255, 255, 0.6); } +.badge-subcount { + font-size: 11px; + color: #64748b; + font-weight: 500; +} + .action-buttons { top: 14px; right: 14px; @@ -571,6 +954,19 @@ defineExpose({ box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45); } +.map-btn-spread { + background: #8b5cf6; + box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35); +} +.map-btn-spread:hover:not(:disabled) { + background: #7c3aed; + box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45); +} +.map-btn-spread.is-active { + background: #ec4899; + box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4); +} + .map-btn.locating { animation: pulse-btn 1s infinite; } @@ -637,11 +1033,12 @@ defineExpose({ } .airbnb-pin { - display: flex; + position: relative; + display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; - transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .airbnb-pin:hover, @@ -651,17 +1048,18 @@ defineExpose({ } .airbnb-pin.is-selected { - transform: scale(1.2) translateY(-6px); + transform: scale(1.22) translateY(-6px); z-index: 1001 !important; } .pin-content { + position: relative; display: flex; align-items: center; gap: 5px; background: #ffffff; color: #1e293b; - padding: 5px 10px; + padding: 5px 11px; border-radius: 20px; font-weight: 700; font-size: 12px; @@ -671,6 +1069,64 @@ defineExpose({ transition: all 0.2s ease; } +/* ── Multi-Property Pin Layered Styling ── */ +.airbnb-pin.is-multi-pin .pin-content { + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + border: 2px solid #6366f1; + box-shadow: + 0 4px 16px rgba(99, 102, 241, 0.3), + 3px -3px 0 0 #4338ca, + 6px -6px 0 0 #312e81; + padding-right: 8px; + padding-left: 24px; +} + +.group-count-badge { + position: absolute; + left: -8px; + top: -8px; + background: linear-gradient(135deg, #ec4899, #8b5cf6); + color: #ffffff; + font-size: 11px; + font-weight: 800; + min-width: 20px; + height: 20px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 4px; + box-shadow: 0 2px 8px rgba(236, 72, 153, 0.5); + border: 1.5px solid #ffffff; + animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes badge-pop { + 0% { transform: scale(0); } + 100% { transform: scale(1); } +} + +.airbnb-pin.is-multi-pin:hover .pin-content, +.airbnb-pin.is-multi-pin.is-hovered .pin-content { + background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); + color: #ffffff; + box-shadow: + 0 8px 24px rgba(79, 70, 229, 0.45), + 4px -4px 0 0 #3730a3, + 8px -8px 0 0 #1e1b4b; +} + +.airbnb-pin.is-multi-pin.is-selected .pin-content { + background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%); + color: #ffffff; + border-color: #ffffff; + box-shadow: + 0 0 0 3px rgba(99, 102, 241, 0.45), + 0 10px 28px rgba(79, 70, 229, 0.55), + 4px -4px 0 0 #3730a3, + 8px -8px 0 0 #1e1b4b; +} + .airbnb-pin:hover .pin-content, .airbnb-pin.is-hovered .pin-content { background: #4f46e5; @@ -689,6 +1145,21 @@ defineExpose({ font-size: 13px; } +.pin-dong-tag { + background: rgba(79, 70, 229, 0.12); + color: #4f46e5; + padding: 1px 5px; + border-radius: 4px; + font-size: 10px; + margin-right: 2px; +} + +.airbnb-pin:hover .pin-dong-tag, +.airbnb-pin.is-selected .pin-dong-tag { + background: rgba(255, 255, 255, 0.25); + color: #ffffff; +} + .pin-pointer { width: 0; height: 0; @@ -698,12 +1169,16 @@ defineExpose({ margin-top: -1px; } +.airbnb-pin.is-multi-pin .pin-pointer { + border-top-color: #6366f1; +} + /* ── Airbnb Popup Card ── */ .airbnb-custom-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); + box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24); direction: rtl; text-align: right; font-family: 'Estedad', sans-serif !important; @@ -728,6 +1203,113 @@ defineExpose({ overflow: hidden; } +/* ── Multi-Property Group Popup Header & Switcher ── */ +.popup-group-header { + background: #f8fafc; + border-bottom: 1px solid #e2e8f0; + padding: 10px 14px 8px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.group-header-top { + display: flex; + align-items: center; + justify-content: space-between; +} + +.group-header-title { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 700; + color: #334155; +} + +.group-header-icon { + font-size: 14px; +} + +.group-nav-controls { + display: flex; + align-items: center; + gap: 6px; +} + +.group-nav-btn { + width: 26px; + height: 26px; + border-radius: 8px; + border: 1px solid #cbd5e1; + background: #ffffff; + color: #475569; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 11px; + transition: all 0.15s ease; +} + +.group-nav-btn:hover { + background: #4f46e5; + color: #ffffff; + border-color: #4f46e5; +} + +.group-step-indicator { + font-size: 11px; + font-weight: 600; + color: #64748b; + min-width: 36px; + text-align: center; +} + +.group-tabs-bar { + display: flex; + align-items: center; + gap: 6px; + overflow-x: auto; + padding-bottom: 2px; + scrollbar-width: thin; +} + +.group-tab-chip { + display: flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + border-radius: 20px; + border: 1px solid #e2e8f0; + background: #ffffff; + color: #475569; + font-size: 11px; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.15s ease; +} + +.group-tab-chip:hover { + background: #f1f5f9; + border-color: #cbd5e1; +} + +.group-tab-chip.is-active { + background: #4f46e5; + color: #ffffff; + border-color: #4f46e5; + box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); +} + +.tab-chip-dong { + font-size: 10px; + opacity: 0.85; +} + +/* ── Popup Image & Badges ── */ .popup-image-container { position: relative; width: 100%; @@ -774,6 +1356,19 @@ defineExpose({ font-family: 'Courier New', monospace; } +.popup-dong-badge { + position: absolute; + top: 10px; + left: 10px; + background: rgba(16, 185, 129, 0.9); + backdrop-filter: blur(4px); + color: #ffffff; + font-size: 11px; + font-weight: 700; + padding: 3px 8px; + border-radius: 6px; +} + .popup-content-body { padding: 14px; display: flex; @@ -884,6 +1479,10 @@ defineExpose({ color: #f1f5f9; } +.app-dark .badge-subcount { + color: #94a3b8; +} + .app-dark .airbnb-custom-popup .leaflet-popup-content-wrapper { background: #1e293b; color: #f1f5f9; @@ -894,6 +1493,43 @@ defineExpose({ color: #f1f5f9; } +.app-dark .popup-group-header { + background: #0f172a; + border-bottom-color: #334155; +} + +.app-dark .group-header-title { + color: #f1f5f9; +} + +.app-dark .group-nav-btn { + background: #1e293b; + border-color: #475569; + color: #cbd5e1; +} + +.app-dark .group-nav-btn:hover { + background: #6366f1; + color: #ffffff; + border-color: #6366f1; +} + +.app-dark .group-tab-chip { + background: #1e293b; + border-color: #334155; + color: #cbd5e1; +} + +.app-dark .group-tab-chip:hover { + background: #334155; +} + +.app-dark .group-tab-chip.is-active { + background: #6366f1; + color: #ffffff; + border-color: #6366f1; +} + .app-dark .popup-title { color: #f8fafc; } @@ -923,4 +1559,13 @@ defineExpose({ color: #f8fafc; border-color: #6366f1; } + +.app-dark .airbnb-pin.is-multi-pin .pin-content { + background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); + border-color: #818cf8; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.4), + 3px -3px 0 0 #4f46e5, + 6px -6px 0 0 #3730a3; +}