From e0d97df8c844eedb88e9a77fe0b103d6cbf182cd Mon Sep 17 00:00:00 2001 From: Wassim SAMAD Date: Fri, 6 Mar 2026 13:04:52 +0100 Subject: [PATCH] Revert "Restore inline zone label editing on canvas (#134)" This reverts commit 036344d705a98f8ed5a2cc886ea81e330d9ad108. --- apps/editor/components/editor/index.tsx | 2 +- .../components/systems/zone/zone-system.tsx | 4 - bun.lock | 32 ++-- package.json | 4 +- .../renderers/zone/zone-renderer.tsx | 181 +----------------- .../viewer/src/components/viewer/index.tsx | 14 +- packages/viewer/src/store/use-viewer.ts | 4 - 7 files changed, 26 insertions(+), 215 deletions(-) diff --git a/apps/editor/components/editor/index.tsx b/apps/editor/components/editor/index.tsx index eae98561..ff8af373 100644 --- a/apps/editor/components/editor/index.tsx +++ b/apps/editor/components/editor/index.tsx @@ -138,7 +138,7 @@ export default function Editor({ projectId }: EditorProps) { }> - + diff --git a/apps/editor/components/systems/zone/zone-system.tsx b/apps/editor/components/systems/zone/zone-system.tsx index 64ef6ee2..63f1399e 100644 --- a/apps/editor/components/systems/zone/zone-system.tsx +++ b/apps/editor/components/systems/zone/zone-system.tsx @@ -30,14 +30,10 @@ export const ZoneSystem = () => { // Hide label if zone layer is off OR if in solo mode on a different level const showLabel = visible && !hideInSoloMode const targetOpacity = showLabel ? '1' : '0' - const targetPointerEvents = showLabel ? 'auto' : 'none' const labelEl = document.getElementById(`${zoneId}-label`) if (labelEl && labelEl.style.opacity !== targetOpacity) { labelEl.style.opacity = targetOpacity } - if (labelEl && labelEl.style.pointerEvents !== targetPointerEvents) { - labelEl.style.pointerEvents = targetPointerEvents - } }) }) diff --git a/bun.lock b/bun.lock index 1ce8aca1..3184b003 100644 --- a/bun.lock +++ b/bun.lock @@ -215,23 +215,23 @@ "@better-fetch/fetch": ["@better-fetch/fetch@1.1.21", "", {}, "sha512-/ImESw0sskqlVR94jB+5+Pxjf+xBwDZF/N5+y2/q4EqD7IARUTSpPfIo8uf39SYpCxyOCtbyYpUrZ3F/k0zT4A=="], - "@biomejs/biome": ["@biomejs/biome@2.4.6", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.4.6", "@biomejs/cli-darwin-x64": "2.4.6", "@biomejs/cli-linux-arm64": "2.4.6", "@biomejs/cli-linux-arm64-musl": "2.4.6", "@biomejs/cli-linux-x64": "2.4.6", "@biomejs/cli-linux-x64-musl": "2.4.6", "@biomejs/cli-win32-arm64": "2.4.6", "@biomejs/cli-win32-x64": "2.4.6" }, "bin": { "biome": "bin/biome" } }, "sha512-QnHe81PMslpy3mnpL8DnO2M4S4ZnYPkjlGCLWBZT/3R9M6b5daArWMMtEfP52/n174RKnwRIf3oT8+wc9ihSfQ=="], + "@biomejs/biome": ["@biomejs/biome@2.4.4", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.4.4", "@biomejs/cli-darwin-x64": "2.4.4", "@biomejs/cli-linux-arm64": "2.4.4", "@biomejs/cli-linux-arm64-musl": "2.4.4", "@biomejs/cli-linux-x64": "2.4.4", "@biomejs/cli-linux-x64-musl": "2.4.4", "@biomejs/cli-win32-arm64": "2.4.4", "@biomejs/cli-win32-x64": "2.4.4" }, "bin": { "biome": "bin/biome" } }, "sha512-tigwWS5KfJf0cABVd52NVaXyAVv4qpUXOWJ1rxFL8xF1RVoeS2q/LK+FHgYoKMclJCuRoCWAPy1IXaN9/mS61Q=="], - "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.4.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-NW18GSyxr+8sJIqgoGwVp5Zqm4SALH4b4gftIA0n62PTuBs6G2tHlwNAOj0Vq0KKSs7Sf88VjjmHh0O36EnzrQ=="], + "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.4.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A=="], - "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.4.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-4uiE/9tuI7cnjtY9b07RgS7gGyYOAfIAGeVJWEfeCnAarOAS7qVmuRyX6d7JTKw28/mt+rUzMasYeZ+0R/U1Mw=="], + "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.4.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg=="], - "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.4.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-kMLaI7OF5GN1Q8Doymjro1P8rVEoy7BKQALNz6fiR8IC1WKduoNyteBtJlHT7ASIL0Cx2jR6VUOBIbcB1B8pew=="], + "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.4.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-V/NFfbWhsUU6w+m5WYbBenlEAz8eYnSqRMDMAW3K+3v0tYVkNyZn8VU0XPxk/lOqNXLSCCrV7FmV/u3SjCBShg=="], - "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.4.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-F/JdB7eN22txiTqHM5KhIVt0jVkzZwVYrdTR1O3Y4auBOQcXxHK4dxULf4z43QyZI5tsnQJrRBHZy7wwtL+B3A=="], + "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.4.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ=="], - "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.4.6", "", { "os": "linux", "cpu": "x64" }, "sha512-oHXmUFEoH8Lql1xfc3QkFLiC1hGR7qedv5eKNlC185or+o4/4HiaU7vYODAH3peRCfsuLr1g6v2fK9dFFOYdyw=="], + "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.4.4", "", { "os": "linux", "cpu": "x64" }, "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg=="], - "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.4.6", "", { "os": "linux", "cpu": "x64" }, "sha512-C9s98IPDu7DYarjlZNuzJKTjVHN03RUnmHV5htvqsx6vEUXCDSJ59DNwjKVD5XYoSS4N+BYhq3RTBAL8X6svEg=="], + "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.4.4", "", { "os": "linux", "cpu": "x64" }, "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g=="], - "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.4.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-xzThn87Pf3YrOGTEODFGONmqXpTwUNxovQb72iaUOdcw8sBSY3+3WD8Hm9IhMYLnPi0n32s3L3NWU6+eSjfqFg=="], + "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.4.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q=="], - "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.6", "", { "os": "win32", "cpu": "x64" }, "sha512-7++XhnsPlr1HDbor5amovPjOH6vsrFOCdp93iKXhFn6bcMUI6soodj3WWKfgEO6JosKU1W5n3uky3WW9RlRjTg=="], + "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.4", "", { "os": "win32", "cpu": "x64" }, "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A=="], "@chevrotain/cst-dts-gen": ["@chevrotain/cst-dts-gen@10.5.0", "", { "dependencies": { "@chevrotain/gast": "10.5.0", "@chevrotain/types": "10.5.0", "lodash": "4.17.21" } }, "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw=="], @@ -1669,19 +1669,19 @@ "tunnel-rat": ["tunnel-rat@0.1.2", "", { "dependencies": { "zustand": "^4.3.2" } }, "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ=="], - "turbo": ["turbo@2.8.13", "", { "optionalDependencies": { "turbo-darwin-64": "2.8.13", "turbo-darwin-arm64": "2.8.13", "turbo-linux-64": "2.8.13", "turbo-linux-arm64": "2.8.13", "turbo-windows-64": "2.8.13", "turbo-windows-arm64": "2.8.13" }, "bin": { "turbo": "bin/turbo" } }, "sha512-nyM99hwFB9/DHaFyKEqatdayGjsMNYsQ/XBNO6MITc7roncZetKb97MpHxWf3uiU+LB9c9HUlU3Jp2Ixei2k1A=="], + "turbo": ["turbo@2.8.12", "", { "optionalDependencies": { "turbo-darwin-64": "2.8.12", "turbo-darwin-arm64": "2.8.12", "turbo-linux-64": "2.8.12", "turbo-linux-arm64": "2.8.12", "turbo-windows-64": "2.8.12", "turbo-windows-arm64": "2.8.12" }, "bin": { "turbo": "bin/turbo" } }, "sha512-auUAMLmi0eJhxDhQrxzvuhfEbICnVt0CTiYQYY8WyRJ5nwCDZxD0JG8bCSxT4nusI2CwJzmZAay5BfF6LmK7Hw=="], - "turbo-darwin-64": ["turbo-darwin-64@2.8.13", "", { "os": "darwin", "cpu": "x64" }, "sha512-PmOvodQNiOj77+Zwoqku70vwVjKzL34RTNxxoARjp5RU5FOj/CGiC6vcDQhNtFPUOWSAaogHF5qIka9TBhX4XA=="], + "turbo-darwin-64": ["turbo-darwin-64@2.8.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-EiHJmW2MeQQx+21x8hjMHw/uPhXt9PIxvDrxzOtyVwrXzL0tQmsxtO4qHf2l7uA+K6PUJ4+TjY1MHZDuCvWXrw=="], - "turbo-darwin-arm64": ["turbo-darwin-arm64@2.8.13", "", { "os": "darwin", "cpu": "arm64" }, "sha512-kI+anKcLIM4L8h+NsM7mtAUpElkCOxv5LgiQVQR8BASyDFfc8Efj5kCk3cqxuxOvIqx0sLfCX7atrHQ2kwuNJQ=="], + "turbo-darwin-arm64": ["turbo-darwin-arm64@2.8.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cbqqGN0vd7ly2TeuaM8k9AK9u1CABO4kBA5KPSqovTiLL3sORccn/mZzJSbvQf0EsYRfU34MgW5FotfwW3kx8Q=="], - "turbo-linux-64": ["turbo-linux-64@2.8.13", "", { "os": "linux", "cpu": "x64" }, "sha512-j29KnQhHyzdzgCykBFeBqUPS4Wj7lWMnZ8CHqytlYDap4Jy70l4RNG46pOL9+lGu6DepK2s1rE86zQfo0IOdPw=="], + "turbo-linux-64": ["turbo-linux-64@2.8.12", "", { "os": "linux", "cpu": "x64" }, "sha512-jXKw9j4r4q6s0goSXuKI3aKbQK2qiNeP25lGGEnq018TM6SWRW1CCpPMxyG91aCKrub7wDm/K45sGNT4ZFBcFQ=="], - "turbo-linux-arm64": ["turbo-linux-arm64@2.8.13", "", { "os": "linux", "cpu": "arm64" }, "sha512-OEl1YocXGZDRDh28doOUn49QwNe82kXljO1HXApjU0LapkDiGpfl3jkAlPKxEkGDSYWc8MH5Ll8S16Rf5tEBYg=="], + "turbo-linux-arm64": ["turbo-linux-arm64@2.8.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-BRJCMdyXjyBoL0GYpvj9d2WNfMHwc3tKmJG5ATn2Efvil9LsiOsd/93/NxDqW0jACtHFNVOPnd/CBwXRPiRbwA=="], - "turbo-windows-64": ["turbo-windows-64@2.8.13", "", { "os": "win32", "cpu": "x64" }, "sha512-717bVk1+Pn2Jody7OmWludhEirEe0okoj1NpRbSm5kVZz/yNN/jfjbxWC6ilimXMz7xoMT3IDfQFJsFR3PMANA=="], + "turbo-windows-64": ["turbo-windows-64@2.8.12", "", { "os": "win32", "cpu": "x64" }, "sha512-vyFOlpFFzQFkikvSVhVkESEfzIopgs2J7J1rYvtSwSHQ4zmHxkC95Q8Kjkus8gg+8X2mZyP1GS5jirmaypGiPw=="], - "turbo-windows-arm64": ["turbo-windows-arm64@2.8.13", "", { "os": "win32", "cpu": "arm64" }, "sha512-R819HShLIT0Wj6zWVnIsYvSNtRNj1q9VIyaUz0P24SMcLCbQZIm1sV09F4SDbg+KCCumqD2lcaR2UViQ8SnUJA=="], + "turbo-windows-arm64": ["turbo-windows-arm64@2.8.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-9nRnlw5DF0LkJClkIws1evaIF36dmmMEO84J5Uj4oQ8C0QTHwlH7DNe5Kq2Jdmu8GXESCNDNuUYG8Cx6W/vm3g=="], "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="], diff --git a/package.json b/package.json index 99d9eec6..9221542e 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,9 @@ "portless": "^0.4.2" }, "devDependencies": { - "@biomejs/biome": "^2.4.6", + "@biomejs/biome": "^2.4.4", "supabase": "2.76.15", - "turbo": "^2.8.13", + "turbo": "^2.8.12", "typescript": "5.9.3", "ultracite": "^7.2.4" }, diff --git a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx index b6516d7f..8719d848 100644 --- a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx +++ b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx @@ -1,11 +1,10 @@ -import { useRegistry, useScene, type ZoneNode } from '@pascal-app/core' +import { useRegistry, type ZoneNode } from '@pascal-app/core' import { Html } from '@react-three/drei' -import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useMemo, useRef } from 'react' import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three' import { color, float, uniform, uv } from 'three/tsl' import { MeshBasicNodeMaterial } from 'three/webgpu' import { useNodeEvents } from '../../../hooks/use-node-events' -import useViewer from '../../../store/use-viewer' const Y_OFFSET = 0.01 const WALL_HEIGHT = 2.3 @@ -105,75 +104,9 @@ const createWallGeometry = (polygon: Array<[number, number]>): BufferGeometry => export const ZoneRenderer = ({ node }: { node: ZoneNode }) => { const ref = useRef(null!) - const inputRef = useRef(null) - const ignoreBlurSaveRef = useRef(false) - const updateNode = useScene((state) => state.updateNode) - const setSelection = useViewer((state) => state.setSelection) - const setHoveredId = useViewer((state) => state.setHoveredId) - const allowZoneLabelEditing = useViewer((state) => state.allowZoneLabelEditing) - const [isEditingLabel, setIsEditingLabel] = useState(false) - const [isLabelHovered, setIsLabelHovered] = useState(false) - const [labelValue, setLabelValue] = useState(node.name || '') useRegistry(node.id, 'zone', ref) - useEffect(() => { - if (!isEditingLabel) { - setLabelValue(node.name || '') - } - }, [isEditingLabel, node.name]) - - useEffect(() => { - if (!isEditingLabel || !inputRef.current) return - inputRef.current.focus() - inputRef.current.select() - }, [isEditingLabel]) - - const stopLabelEditing = useCallback( - (save: boolean) => { - if (save) { - const trimmed = labelValue.trim() - if (trimmed !== (node.name || '')) { - updateNode(node.id, { name: trimmed || undefined }) - } - } else { - setLabelValue(node.name || '') - } - setIsEditingLabel(false) - }, - [labelValue, node.id, node.name, updateNode], - ) - - const startLabelEditing = useCallback( - (event?: { stopPropagation: () => void; preventDefault: () => void }) => { - if (!allowZoneLabelEditing) return - event?.stopPropagation() - event?.preventDefault() - setSelection({ zoneId: node.id }) - ignoreBlurSaveRef.current = false - setIsEditingLabel(true) - setLabelValue(node.name || '') - }, - [allowZoneLabelEditing, node.id, node.name, setSelection], - ) - - useEffect(() => { - if (!isEditingLabel) return - - const onPointerDownOutside = (event: PointerEvent) => { - const target = event.target - if (!(target instanceof Node)) return - if (inputRef.current?.contains(target)) return - ignoreBlurSaveRef.current = true - stopLabelEditing(true) - } - - window.addEventListener('pointerdown', onPointerDownOutside, true) - return () => { - window.removeEventListener('pointerdown', onPointerDownOutside, true) - } - }, [isEditingLabel, stopLabelEditing]) - // Create floor shape from polygon const floorShape = useMemo(() => { if (!node?.polygon || node.polygon.length < 3) return null @@ -243,12 +176,13 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => { return null } + return (
{ textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`, textAlign: 'center', }} - onMouseEnter={() => { - setHoveredId(node.id) - setIsLabelHovered(true) - }} - onMouseLeave={() => { - setHoveredId(null) - setIsLabelHovered(false) - }} - onMouseDown={(event) => { - if (allowZoneLabelEditing) { - event.stopPropagation() - } - }} > - {allowZoneLabelEditing && isEditingLabel ? ( - setLabelValue(event.target.value)} - onBlur={() => { - if (ignoreBlurSaveRef.current) { - ignoreBlurSaveRef.current = false - return - } - stopLabelEditing(true) - }} - onClick={(event) => event.stopPropagation()} - onMouseDown={(event) => { - event.stopPropagation() - }} - onKeyDown={(event) => { - event.stopPropagation() - if (event.key === 'Enter') { - event.preventDefault() - ignoreBlurSaveRef.current = true - stopLabelEditing(true) - return - } - if (event.key === 'Escape') { - event.preventDefault() - ignoreBlurSaveRef.current = true - stopLabelEditing(false) - } - }} - style={{ - width: `${Math.max((labelValue || node.name || '').length + 1, 4)}ch`, - maxWidth: '220px', - border: 'none', - borderBottom: `1px solid ${node.color}`, - backgroundColor: 'transparent', - color: 'white', - textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`, - outline: 'none', - padding: 0, - margin: 0, - fontSize: 'inherit', - lineHeight: 'inherit', - fontFamily: 'inherit', - }} - /> - ) : ( - - )} + {node.name}
{ marginTop: '2px', opacity: 0, transition: 'opacity 0.5s ease-in-out', - pointerEvents: 'none', }} >
= ({ - children, - selectionManager = 'default', - allowZoneLabelEditing = false, -}) => { +const Viewer: React.FC = ({ children, selectionManager = 'default' }) => { const theme = useViewer((state) => state.theme) - const setAllowZoneLabelEditing = useViewer((state) => state.setAllowZoneLabelEditing) - - useEffect(() => { - setAllowZoneLabelEditing(allowZoneLabelEditing) - }, [allowZoneLabelEditing, setAllowZoneLabelEditing]) return ( void - allowZoneLabelEditing: boolean - setAllowZoneLabelEditing: (allow: boolean) => void cameraMode: 'perspective' | 'orthographic' setCameraMode: (mode: 'perspective' | 'orthographic') => void @@ -76,8 +74,6 @@ const useViewer = create()( selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] }, hoveredId: null, setHoveredId: (id) => set({ hoveredId: id }), - allowZoneLabelEditing: false, - setAllowZoneLabelEditing: (allow) => set({ allowZoneLabelEditing: allow }), cameraMode: "perspective", setCameraMode: (mode) => set({ cameraMode: mode }),