Enhanced shattering (#129)

Co-authored-by: Raphael Paul Laude <raphlaude@gmail.com>

app/.prettierrc.js

@@ -1,3 +1,16 @@
 module.exports = {
-  ...require('prettier-airbnb-config'),
+  // https://github.com/Parker-Ledoux/prettier-airbnb-config
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "avoid",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
 };

app/README.md

@@ -1,4 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
@@ -22,9 +23,11 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the
+file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to
+automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 
@@ -33,10 +36,14 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
+details.

app/next.config.mjs

@@ -1,12 +1,12 @@
-import { withSentryConfig } from "@sentry/nextjs";
+import {withSentryConfig} from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async redirects() {
     return [
       // Basic redirect
       {
-        source: "/",
-        destination: "/map",
+        source: '/',
+        destination: '/map',
         permanent: true,
       },
     ];
@@ -16,12 +16,12 @@ const nextConfig = {
   },
   resolve: {
     alias: {
-      "@src": "app/src",
-      "@components": "app/src/components",
-      "@utils": "app/src/utils",
-      "@api": "app/src/api",
-      "@store": "app/src/store",
-      "@constants": "app/src/constants",
+      '@src': 'app/src',
+      '@components': 'app/src/components',
+      '@utils': 'app/src/utils',
+      '@api': 'app/src/api',
+      '@store': 'app/src/store',
+      '@constants': 'app/src/constants',
     },
   },
 };
@@ -30,8 +30,8 @@ export default withSentryConfig(nextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
-  org: "mggg-districtr",
-  project: "districtr-v2-app",
+  org: 'mggg-districtr',
+  project: 'districtr-v2-app',
 
   // Only print logs for uploading source maps in CI
   silent: !process.env.CI,
@@ -51,7 +51,7 @@ export default withSentryConfig(nextConfig, {
   // This can increase your server load as well as your hosting bill.
   // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
   // side errors will fail.
-  tunnelRoute: "/monitoring",
+  tunnelRoute: '/monitoring',
 
   // Hides source maps from generated client bundles
   hideSourceMaps: true,

app/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prettier": "prettier --write src/**/*.{tsx,ts} --config .prettierrc.js"
   },
   "dependencies": {
     "@emotion/react": "^11.13.0",
@@ -17,6 +18,7 @@
     "@sentry/nextjs": "^8.26.0",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^5.51.11",
+    "@turf/bbox": "^7.1.0",
     "@turf/boolean-within": "^7.1.0",
     "@turf/helpers": "^7.1.0",
     "@turf/point-on-feature": "^7.1.0",
@@ -46,7 +48,7 @@
     "jest": "^29.7.0",
     "nock": "^13.5.4",
     "postcss": "^8",
-    "prettier-airbnb-config": "^1.0.0",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

app/sentry.client.config.ts

@@ -2,10 +2,10 @@
 // The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368",
+  dsn: 'https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

app/sentry.edge.config.ts

@@ -3,10 +3,10 @@
 // Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368",
+  dsn: 'https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,

app/sentry.server.config.ts

@@ -2,10 +2,10 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368",
+  dsn: 'https://e42d7ccd60a760cd2885b3f394b3a73b@o4507623009091584.ingest.us.sentry.io/4507794033082368',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
@@ -15,5 +15,4 @@ Sentry.init({
 
   // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: process.env.NODE_ENV === 'development',
-
 });

app/src/app/components/ContextMenu.tsx

@@ -1,19 +1,45 @@
 import React from 'react';
 import {ContextMenu, Text} from '@radix-ui/themes';
 import {useMapStore} from '@/app/store/mapStore';
+import {CHILD_LAYERS, PARENT_LAYERS} from '../constants/layers';
 
 export const MapContextMenu: React.FC = () => {
   const mapDocument = useMapStore(state => state.mapDocument);
   const contextMenu = useMapStore(state => state.contextMenu);
   const handleShatter = useMapStore(state => state.handleShatter);
+  const lockedFeatures = useMapStore(state => state.lockedFeatures);
+  const lockFeature = useMapStore(state => state.lockFeature);
+  const shatterMappings = useMapStore(state => state.shatterMappings);
+
+  const canShatter = Boolean(
+    mapDocument?.parent_layer &&
+      mapDocument.child_layer &&
+      mapDocument.child_layer !== contextMenu?.data.sourceLayer
+  );
+
   if (!contextMenu) return null;
+  const isChild = CHILD_LAYERS.includes(contextMenu.data.layer.id);
+  const id = contextMenu.data.id?.toString() || '';
+  const parent =
+    (isChild &&
+      Object.entries(shatterMappings).find(([key, value]) => {
+        return value.has(id);
+      })?.[0]) ||
+    false;
+  const shatterableId = isChild && parent ? parent : contextMenu?.data?.id;
+  const featureIsLocked = lockedFeatures.has(id);
 
   const handleSelect = () => {
-    if (!mapDocument || contextMenu?.data?.id === undefined) return;
-    handleShatter(mapDocument.document_id, [contextMenu.data.id.toString()]);
+    if (!mapDocument || !shatterableId) return;
+    const shatterData = isChild ? {id: shatterableId} : contextMenu.data;
+    handleShatter(mapDocument.document_id, [shatterData]);
     contextMenu.close();
   };
 
+  const handleLock = () => {
+    lockFeature(id, !featureIsLocked);
+  };
+
   return (
     <ContextMenu.Root onOpenChange={contextMenu.close}>
       <ContextMenu.Content
@@ -32,16 +58,32 @@ export const MapContextMenu: React.FC = () => {
           left: contextMenu.x,
         }}
       >
-        {contextMenu.data.id && (
-          <ContextMenu.Label>
-            <Text size="1" color="gray">
-              {contextMenu.data.id}
-            </Text>
-          </ContextMenu.Label>
+        <ContextMenu.Label>
+          <Text size="1" color="gray">
+            {id}
+          </Text>
+        </ContextMenu.Label>
+        {!isChild && (
+          <ContextMenu.Item disabled={!mapDocument?.child_layer} onSelect={handleSelect}>
+            Break to Blocks
+          </ContextMenu.Item>
         )}
-        <ContextMenu.Item disabled={!mapDocument?.child_layer} onSelect={handleSelect}>
-          Shatter
+        <ContextMenu.Item onSelect={handleLock}>
+          {featureIsLocked ? 'Unlock' : 'Lock'}
         </ContextMenu.Item>
+
+        {!!parent && (
+          <>
+            <ContextMenu.Label>
+              <Text size="1" color="gray">
+                Parent: {parent}
+              </Text>
+            </ContextMenu.Label>
+            <ContextMenu.Item disabled={!mapDocument?.child_layer} onSelect={handleSelect}>
+              Break Parent to Blocks
+            </ContextMenu.Item>
+          </>
+        )}
       </ContextMenu.Content>
     </ContextMenu.Root>
   );