terra-draw-route-snap-mode 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "terra-draw-route-snap-mode",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "A mode for Terra Draw to provide snapping to a route network",
     "scripts": {
         "docs": "typedoc",

package/.github/FUNDING.yml

@@ -1,4 +0,0 @@
-# These are supported funding model platforms
-
-github: [JamesLMilner]
-

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,30 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve Terra Route Snap Mode
-title: "[Bug]"
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**Terra Route Snap Mode npm version**
-Please tell us exactly which version of Terra Route Snap Mode you are using
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Additional context**
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/chore.md

@@ -1,11 +0,0 @@
----
-name: Chore
-about: Technical improvement tasks like updating a dependency etc
-title: '[Chore]'
-labels: chore
-assignees: ''
-
----
-
-**What technical task needs doing?**
-A clear and concise description of what technical task requires doing, such as updating a dependency, fixing a GitHub action, making a change to GitHub repo settings etc

package/.github/ISSUE_TEMPLATE/documentation-improvement.md

@@ -1,14 +0,0 @@
----
-name: Documentation improvement
-about: Suggest an improvement to the project documentation
-title: ''
-labels: documentation
-assignees: ''
-
----
-
-**What area of the project documentation is missing, lacking or could be clearer?**
-Please write clearly and concisely to explain what problems you hit with the documentation
-
-**How could this documentation be improved? What would you like to see here?**
-Suggestions help guide documentation going forward into the future

package/.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for Terra Route Snap Mode
-title: "[Feature Request]"
-labels: enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. 
-
-**Describe your proposed idea for the solution to this problem**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered. For example would this be possible with a custom mode or adapter?
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

package/.github/pull_request_template.md

@@ -1,14 +0,0 @@
-## Description of Changes
-
-<!--- Please provide a summary of the changes you have made -->
-
-## Link to Issue
-
-<!--- Please provide a link to the issue for reference. If you have not created an issue, please do so before raising a PR so that it is possible to discuss the changes in advance -->
-
-## PR Checklist
-
-- [ ] The PR title follows the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/#summary) standard
-- [ ] There is a associated GitHub issue 
-- [ ] If I have added significant code changes, there are relevant tests
-- [ ] If there are behaviour changes these are documented 

package/.github/workflows/ci.yml

@@ -1,67 +0,0 @@
-name: CI
-
-permissions:
-  contents: read
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    types: [opened, synchronize, reopened, ready_for_review]
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-      - name: Install Parent Folder
-        run: npm install
-      - name: Run linting
-        run: npm run lint
-
-  unused:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-      - name: Install Parent Folder
-        run: npm install
-      - name: Run unused code checking
-        run: npm run unused
-
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-      - name: Install Parent Folder
-        run: npm install
-      - name: Ensure no package-lock.json changes
-        run: git diff --exit-code
-      - name: Build
-        run: npm run build
-
-  unit-tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-      - name: Install Parent Folder
-        run: npm install
-      - name: Test
-        run: npm run test
-        env:
-          CI: true

package/.github/workflows/conventional-commit-prs.yml

@@ -1,18 +0,0 @@
-name: PR Conventional Commit Validation
-
-permissions: 
-  pull-requests: read
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, edited]
-
-jobs:
-  validate-pr-title:
-    runs-on: ubuntu-latest
-    steps:
-      - name: PR Conventional Commit Validation
-        uses:  ytanikin/PRConventionalCommits@1.1.0
-        with:
-          task_types: '["feat","fix","docs","test","ci","refactor","perf","chore","revert"]'
-          add_label: 'false'

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}

package/CNAME

@@ -1 +0,0 @@
-terradraw.io

package/demo/components/app.tsx

@@ -1,18 +0,0 @@
-import { h } from "preact";
-// import { Route, Router, CustomHistory } from "preact-router";
-// import { createHashHistory } from "history";
-import Header from "./header/Header";
-
-// Code-splitting is automated for `routes` directory
-import Home from "../routes/home";
-
-console.log('App.tsx');
-
-const App = () => (
-  <div id="app">
-    <Header />
-    <Home />
-  </div>
-);
-
-export default App;

package/demo/components/geojson-tab/GeoJSONTab.tsx

@@ -1,42 +0,0 @@
-import { h } from "preact";
-import style from "./style.module.css";
-import { useMemo } from "preact/hooks";
-import { GeoJSONStoreFeatures } from "../../node_modules/terra-draw/dist/store/store";
-import { useDownloadJSON } from "./useDownloadJSON";
-import { fileDate } from "../../utils/dates";
-
-const GeoJSONTab = ({ features }: { features: GeoJSONStoreFeatures[] }) => {
-  // Create a FeatureCollection when features changes
-  const featureCollection = useMemo(
-    () => ({
-      type: "FeatureCollection",
-      features,
-    }),
-    [features]
-  );
-
-  // Turn it into a string so it can be rendered,
-  // again only when features change
-  const featureCollectionString = useMemo(() => {
-    return JSON.stringify(featureCollection, null, 4);
-  }, [featureCollection]);
-
-  const downloadJSON = useDownloadJSON();
-
-  // Download to a file called terradraw.geojson
-  const downloadGeoJSON = () =>
-    downloadJSON(featureCollection, `terradraw_${fileDate()}.geojson`);
-
-  return (
-    <div class={style.container}>
-      <textarea class={style.geojson} readonly>
-        {featureCollectionString}
-      </textarea>
-      <button class={style.download} onClick={downloadGeoJSON}>
-        Download GeoJSON
-      </button>
-    </div>
-  );
-};
-
-export default GeoJSONTab;

package/demo/components/geojson-tab/style.module.css

@@ -1,30 +0,0 @@
-.geojson {
-  resize: none;
-  width: 100%;
-  flex-grow: 1;
-  height: calc(100vh - 193px);
-  /** accomidate the 3px margin top for the download button **/
-}
-
-.container {
-  padding: 20px;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
-
-.download {
-  padding: 10px;
-  font-weight: bold;
-  background: #00d088;
-  color: white;
-  border: 0;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  margin-top: 3px;
-}
-
-.download:hover {
-  background: #00d088c4;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-}

package/demo/components/geojson-tab/useDownloadJSON.ts

@@ -1,34 +0,0 @@
-import { useCallback } from "preact/hooks";
-
-export function useDownloadJSON() {
-  const downloadJSON = useCallback(
-    (json: Record<string, any>, filename: string) => {
-      // Turn the JSON object into a string
-      const data = JSON.stringify(json, null, 4);
-
-      // Pass the string to a Blob and turn it
-      // into an ObjectURL
-      const blob = new Blob([data], { type: "text/plain" });
-      const jsonObjectUrl = URL.createObjectURL(blob);
-
-      // Create an anchor element, set it's
-      // href to be the Object URL we have created
-      // and set the download property to be the file name
-      // we want to set
-      const anchorEl = document.createElement("a");
-      anchorEl.href = jsonObjectUrl;
-      anchorEl.download = filename;
-
-      // There is no need to actually attach the DOM
-      // element but we do need to click on it
-      anchorEl.click();
-
-      // We don't want to keep a reference to the file
-      // any longer so we release it manually
-      URL.revokeObjectURL(jsonObjectUrl);
-    },
-    []
-  );
-
-  return downloadJSON;
-}

package/demo/components/header/Header.tsx

@@ -1,25 +0,0 @@
-import { h } from "preact";
-import { Link } from "preact-router/match";
-import style from "./style.module.css";
-import logo from "../../assets/imgs/logo.png";
-import github from "../../assets/imgs/github.png";
-
-const Header = () => (
-  <header class={style.header}>
-    <div class={style.nav}>
-      <img class={style.logo} src={logo} />
-      <nav>
-        <Link activeClassName={style.active} href="/">
-          Home
-        </Link>
-      </nav>
-    </div>
-    <div class={style.github}>
-      <a href="https://www.github.com/JamesLMilner/terra-draw">
-        <img src={github} />
-      </a>
-    </div>
-  </header>
-);
-
-export default Header;

package/demo/components/header/style.module.css

@@ -1,78 +0,0 @@
-.header {
-  width: 100%;
-  height: 70px;
-  padding: 0;
-  background: #fdfdfd;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-  z-index: 50;
-  display: flex;
-  color: #565656;
-  display: flex;
-  justify-content: space-between;
-}
-
-.header .nav {
-  width: 100%;
-  display: flex;
-}
-
-.github {
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  margin-right: 20px;
-}
-
-.logo {
-  height: 35px;
-  display: flex;
-  align-self: center;
-  padding-left: 20px;
-}
-
-.header h1 {
-  float: left;
-  margin: 0;
-  padding: 0 15px;
-  font-size: 24px;
-  line-height: 70px;
-  font-weight: 400;
-  color: #fdfdfd;
-}
-
-.header nav {
-  font-size: 100%;
-  margin-left: 20px;
-}
-
-.header nav a {
-  display: inline-block;
-  height: 70px;
-  line-height: 70px;
-  padding: 0 15px;
-  min-width: 50px;
-  text-align: center;
-  background: fdfdfd;
-  text-decoration: none;
-  color: #565656;
-  will-change: background-color;
-}
-
-.header nav a:hover,
-.header nav a:active {
-  border-bottom: solid 5px #00d088;
-}
-
-.header nav a.active {
-  border-bottom: solid 5px #00d088;
-}
-
-@media screen and (max-width: 500px) {
-  .logo {
-    display: none;
-  }
-
-  .header nav {
-    margin-left: 0px;
-  }
-}

package/demo/components/info-tab/InfoTab.tsx

@@ -1,101 +0,0 @@
-import { h } from "preact";
-import style from "./style.module.css";
-import { getHHMMSS } from "../../utils/dates";
-import { area, length } from "../../utils/geo";
-import { useMemo } from "preact/hooks";
-import { GeoJSONStoreFeatures } from "../../node_modules/terra-draw/dist/store/store";
-
-const InfoTab = ({
-  selected,
-  features,
-}: {
-  selected: undefined | GeoJSONStoreFeatures;
-  features: GeoJSONStoreFeatures[];
-}) => {
-  const { points, lines, polygons } = useMemo(() => {
-    const points: GeoJSONStoreFeatures[] = [];
-    const lines: GeoJSONStoreFeatures[] = [];
-    const polygons: GeoJSONStoreFeatures[] = [];
-    features.forEach((f) => {
-      if (f.geometry.type === "Point") {
-        points.push(f);
-      }
-      if (f.geometry.type === "LineString") {
-        lines.push(f);
-      }
-      if (f.geometry.type === "Polygon") {
-        polygons.push(f);
-      }
-    });
-
-    return { points, lines, polygons };
-  }, [features]);
-
-  return (
-    <div class={style.container}>
-      <div class={style.all}>
-        <h3 class={style.header}> All Features </h3>
-        <span class={style.row}>
-          <span class={style.type}>Total</span> {features.length}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Polygons:</span>
-          {polygons.length}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>LineStrings:</span>
-          {lines.length}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Points:</span>
-          {points.length}
-        </span>
-      </div>
-      <div class={style.current}>
-        <h3 class={style.header}> Selected Feature </h3>
-        <span class={style.row}>
-          <span class={style.type}>ID</span>
-          {selected ? (selected.id as string).slice(0, 8) + "..." : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Geometry Type</span>
-          {selected ? selected.geometry.type : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Created</span>
-          {selected
-            ? getHHMMSS(selected.properties.createdAt as number)
-            : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Updated</span>
-          {selected
-            ? getHHMMSS(selected.properties.updatedAt as number)
-            : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Coordinates</span>
-          {selected && selected.geometry.type === "Polygon"
-            ? selected.geometry.coordinates[0].length
-            : selected && selected.geometry.type === "LineString"
-              ? selected.geometry.coordinates.length
-              : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Area (m2)</span>
-          {selected && selected.geometry.type === "Polygon"
-            ? area(selected).toFixed(2)
-            : "N/A"}
-        </span>
-        <span class={style.row}>
-          <span class={style.type}>Length (km)</span>
-          {selected && selected.geometry.type === "LineString"
-            ? length(selected).toFixed(2)
-            : "N/A"}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default InfoTab;

package/demo/components/info-tab/style.module.css

@@ -1,42 +0,0 @@
-.current,
-.all {
-  display: flex;
-  flex-direction: column;
-  border-radius: 20px;
-  border: solid 3px #565656;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.header {
-  margin-top: 0;
-  font-weight: bolder;
-  font-size: 20px;
-  text-transform: capitalize;
-}
-
-.type {
-  display: inline-block;
-  width: 150px;
-}
-
-button:hover {
-  background: white;
-  border: solid 3px #222222;
-}
-
-.container {
-  width: 100%;
-  padding: 20px;
-}
-
-.row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid #d9d9d9;
-  margin-bottom: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

package/demo/components/map-button/ClearButton.tsx

@@ -1,24 +0,0 @@
-import { h } from "preact";
-import style from "./style.module.css";
-
-const ClearButton = ({
-  label,
-  onClick,
-}: {
-  onClick: () => void;
-  label?: string;
-}) => {
-  return (
-    <button
-      id={'clear'}
-      class={style.button}
-      onClick={() => {
-        onClick()
-      }}
-    >
-      {label}
-    </button>
-  );
-};
-
-export default ClearButton;

package/demo/components/map-button/MapButton.tsx

@@ -1,41 +0,0 @@
-import { h } from "preact";
-import style from "./style.module.css";
-import { titleCase } from "../../utils/casing";
-
-const MapButton = ({
-  mode,
-  currentMode,
-  changeMode,
-  label,
-  hiddenOnTouch,
-}: {
-  mode: string;
-  currentMode: string;
-  changeMode: (mode: string) => void;
-  label?: string;
-  hiddenOnTouch?: boolean;
-}) => {
-  let classes = style.button;
-
-  if (hiddenOnTouch) {
-    classes = `${style.hiddenOnMobile} ${classes}`;
-  }
-
-  if (currentMode === mode) {
-    classes = `${style.active} ${classes}`;
-  }
-
-  return (
-    <button
-      id={mode}
-      class={classes}
-      onClick={() => {
-        changeMode(mode);
-      }}
-    >
-      {label ? label : titleCase(mode)}
-    </button>
-  );
-};
-
-export default MapButton;