Using checkbox tree control

src/data/buildings.js

@@ -1,8 +1,14 @@
 import { Deck, defineGroup, Garage, House, Porch } from "../lib/yard-features.js";
 
-export const housePartsGroup = defineGroup("group:house-parts", "House Parts");
+export const buildingsGroup = defineGroup("group:buildings", "Buildings", {
+  categoryId: "structures",
+});
+export const housePartsGroup = defineGroup("group:house-parts", "House Parts", {
+  categoryId: "structures",
+  parentGroupId: buildingsGroup.id,
+});
 
-const house = new House().withId("feature:house-main").trace([
+const house = new House().withId("feature:house-main").inGroup(buildingsGroup).trace([
   [-100.89883475400929, 46.826808023423844],
   [-100.8986668040935, 46.826830709973976],
   [-100.89866031675769, 46.826807530237865],
@@ -11,7 +17,7 @@ const house = new House().withId("feature:house-main").trace([
   [-100.89881168792644, 46.82673552503637],
 ]);
 
-const garage = new Garage().trace([
+const garage = new Garage().inGroup(buildingsGroup).trace([
   [-100.89850173743805, 46.82679569377302],
   [-100.89839289435957, 46.82681098253964],
   [-100.89837054909181, 46.82674095008918],
@@ -39,4 +45,4 @@ const deck = new Deck().childOf(house).inGroup(housePartsGroup).trace([
 ]);
 
 export const buildingFeatures = [house, garage, porch, deck];
-export const buildingGroups = [housePartsGroup];
+export const buildingGroups = [buildingsGroup, housePartsGroup];

src/data/grid.js

@@ -8,7 +8,9 @@ const MAX_EAST_FEET = 180;
 const MIN_NORTH_FEET = -140;
 const MAX_NORTH_FEET = 20;
 
-export const yardGridGroup = defineGroup("group:yard-grid", "Yard Grid");
+export const yardGridGroup = defineGroup("group:yard-grid", "Yard Grid", {
+  categoryId: "reference",
+});
 
 function localPoint(eastFeet, northFeet) {
   return geo.offset(

src/data/pavement.js

@@ -1,6 +1,10 @@
-import { Driveway, Walkway } from "../lib/yard-features.js";
+import { defineGroup, Driveway, Walkway } from "../lib/yard-features.js";
 
-const frontWalk = new Walkway("Front walk").trace([
+export const pavedSurfacesGroup = defineGroup("group:paved-surfaces", "Paved Surfaces", {
+  categoryId: "structures",
+});
+
+const frontWalk = new Walkway("Front walk").inGroup(pavedSurfacesGroup).trace([
   [-100.89894913835376, 46.82676927748655],
   [-100.89887345276941, 46.82677975769509],
   [-100.89887849847504, 46.82679985503042],
@@ -22,14 +26,14 @@ const frontWalk = new Walkway("Front walk").trace([
   [-100.8989459622624, 46.826758196205],
 ]);
 
-const driveway = new Driveway().trace([
+const driveway = new Driveway().inGroup(pavedSurfacesGroup).trace([
   [-100.89851482473702, 46.82685818966149],
   [-100.8984941013032, 46.826796541436565],
   [-100.89837336477572, 46.82681355635369],
   [-100.89839320971627, 46.8268766687031],
 ]);
 
-const garageWalk = new Walkway("Garage walk").trace([
+const garageWalk = new Walkway("Garage walk").inGroup(pavedSurfacesGroup).trace([
   [-100.89862628077022, 46.82677780036217],
   [-100.8986050167251, 46.82677755376906],
   [-100.89853023215954, 46.82678544474858],
@@ -41,11 +45,12 @@ const garageWalk = new Walkway("Garage walk").trace([
   [-100.89862267669479, 46.82676559400101],
 ]);
 
-const stepPad = new Walkway("Step pad").trace([
+const stepPad = new Walkway("Step pad").inGroup(pavedSurfacesGroup).trace([
   [-100.89837579752665, 46.82675708653554],
   [-100.89835705633432, 46.826759675764286],
   [-100.89835309185132, 46.82674722280572],
   [-100.89837111222856, 46.82674500346631],
 ]);
 
-export const pavementFeatures = [frontWalk, driveway, garageWalk, stepPad];
+export const pavementFeatures = [frontWalk, driveway, garageWalk, stepPad];
+export const pavementGroups = [pavedSurfacesGroup];

src/data/plants.js

@@ -1,8 +1,11 @@
-import { Daylily, defineGroup, Flower, FlowerBed, Tree } from "../lib/yard-features.js";
+import { Bush, Daylily, defineGroup, Flower, FlowerBed, Tree } from "../lib/yard-features.js";
 import * as geo from "../lib/geometry.js";
 import { lotCorner } from "./anchors.js";
 
-export const juniperTreesGroup = defineGroup("group:juniper-trees", "Juniper Trees");
+export const juniperTreesGroup = defineGroup("group:juniper-trees", "Junipers", {
+  categoryId: "plants",
+  parentKind: "bush",
+});
 
 const flowerBeds = [
   new FlowerBed("Herbs").trace([
@@ -311,55 +314,55 @@ const trees = [
 ];
 
 const bushes = [
-  new Tree("Medora Juniper 1", {
+  new Bush("Medora Juniper 1", {
     species: "Medora Juniper",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(8.2) }],
     plantedDate: "2021-09-21",
     pricePaid: 96.50,
   }).inGroup(juniperTreesGroup).add(geo.lngLat(-100.89880933964611, 46.826705259550664)),
-  new Tree("Medora Juniper 2", {
+  new Bush("Medora Juniper 2", {
     species: "Medora Juniper",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(8.2) }],
     plantedDate: "2021-09-21",
     pricePaid: 96.50,
   }).inGroup(juniperTreesGroup).add(geo.lngLat(-100.89877004677517, 46.82670396593881)),
-  new Tree("Medora Juniper 3", {
+  new Bush("Medora Juniper 3", {
     species: "Medora Juniper",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(8.2) }],
     plantedDate: "2021-09-21",
     pricePaid: 96.50,
   }).inGroup(juniperTreesGroup).add(geo.lngLat(-100.898799106227, 46.82669830398086)),
-  new Tree("Medora Juniper 4", {
+  new Bush("Medora Juniper 4", {
     species: "Medora Juniper",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(8.2) }],
     plantedDate: "2021-09-21",
     pricePaid: 96.50,
   }).inGroup(juniperTreesGroup).add(geo.lngLat(-100.89878871410515, 46.82669251034885)),
-  new Tree("Medora Juniper 5", {
+  new Bush("Medora Juniper 5", {
     species: "Medora Juniper",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(8.2) }],
     plantedDate: "2021-09-21",
     pricePaid: 96.50,
   }).inGroup(juniperTreesGroup).add(geo.lngLat(-100.8987812086838, 46.82671120797719)),
-  new Tree("Black Currant", {
+  new Bush("Black Currant", {
     species: "Black Currant",
     measurements: [{ canopyDiameter: geo.ft(6.56), height: geo.ft(6.56) }],
     gardenOrgId: "87767",
   }).add(geo.offset(lotCorner), geo.east(geo.ft(107)), geo.south(geo.ft(3))),
-  new Tree("Elderberry", {
+  new Bush("Elderberry", {
     species: "Elderberry",
     measurements: [{ canopyDiameter: geo.ft(9.84), height: geo.ft(9.84) }],
     gardenOrgId: "78882",
   }).add(geo.offset(lotCorner), geo.east(geo.ft(142)), geo.south(geo.ft(52))),
-  new Tree("Spirea", {
+  new Bush("Spirea", {
     species: "Spirea",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(3.28) }],
   }).add(geo.offset(lotCorner), geo.east(geo.ft(70)), geo.south(geo.ft(31))),
-  new Tree("Spirea", {
+  new Bush("Spirea", {
     species: "Spirea",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(3.28) }],
   }).add(geo.offset(lotCorner), geo.east(geo.ft(74)), geo.south(geo.ft(31))),
-  new Tree("Spirea", {
+  new Bush("Spirea", {
     species: "Spirea",
     measurements: [{ canopyDiameter: geo.ft(4.92), height: geo.ft(3.28) }],
   }).add(geo.offset(lotCorner), geo.east(geo.ft(78)), geo.south(geo.ft(31))),

src/data/yard.js

@@ -3,7 +3,7 @@ import { boundaryFeatures } from "./boundaries.js";
 import { buildingFeatures, buildingGroups } from "./buildings.js";
 import { gridFeatures, gridGroups } from "./grid.js";
 import { irrigationFeatures } from "./irrigation.js";
-import { pavementFeatures } from "./pavement.js";
+import { pavementFeatures, pavementGroups } from "./pavement.js";
 import { plantFeatures, plantGroups } from "./plants.js";
 
 export const yardGeoJSON = collectYardData(
@@ -18,6 +18,7 @@ export const yardGeoJSON = collectYardData(
   [
     ...buildingGroups,
     ...gridGroups,
+    ...pavementGroups,
     ...plantGroups,
   ],
 );