@softwarity/geojson-editor 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -40,12 +40,15 @@ A feature-rich, framework-agnostic **Web Component** for editing GeoJSON feature
40
40
  | **Type highlighting** | ✅ Contextual | ⚠️ Generic JSON | ⚠️ Generic JSON | ⚠️ Generic JSON |
41
41
  | **Invalid type detection** | ✅ Visual feedback | ❌ | ❌ | ❌ |
42
42
  | **Collapsible nodes** | ✅ Native | ✅ | ✅ Plugin | ❌ |
43
+ | **Undo/Redo** | ✅ With grouping | ✅ | ✅ | ❌ |
43
44
  | **Color picker** | ✅ Integrated | ❌ | ❌ | ❌ |
44
45
  | **Boolean checkbox** | ✅ Integrated | ❌ | ❌ | ❌ |
45
46
  | **Feature visibility toggle** | ✅ | ❌ | ❌ | ❌ |
46
47
  | **Auto-collapse coordinates** | ✅ | ❌ | ❌ | ❌ |
47
48
  | **FeatureCollection output** | ✅ Always | ❌ | ❌ | ❌ |
48
49
  | **Clear button** | ✅ | ❌ | ❌ | ❌ |
50
+ | **Save to file (Ctrl+S)** | ✅ | ❌ | ❌ | ❌ |
51
+ | **Open from file (Ctrl+O)** | ✅ | ❌ | ❌ | ❌ |
49
52
  | **Dark mode detection** | ✅ Auto | ⚠️ Manual | ⚠️ Manual | ⚠️ Manual |
50
53
  | **Dependencies** | 0 | Many | Few | 0 |
51
54
  | **Setup complexity** | 1 line | Complex | Moderate | Simple |
@@ -62,16 +65,18 @@ A feature-rich, framework-agnostic **Web Component** for editing GeoJSON feature
62
65
  - **Collapsible Nodes** - Collapse/expand JSON objects and arrays with visual indicators (`{...}` / `[...]`); use Tab to expand and Shift+Tab to collapse; `coordinates` auto-collapsed on load
63
66
  - **Virtualized Rendering** - Monaco-like architecture: only visible lines are rendered to DOM for optimal performance with large GeoJSON files
64
67
  - **Feature Visibility Toggle** - Hide/show individual Features via eye icon in gutter; hidden features are grayed out and excluded from `change` events (useful for temporary filtering without deleting data)
65
- - **Color Picker** - Built-in color picker for hex color properties (`#rrggbb`) in left gutter; click to open native color picker
66
- - **Boolean Checkbox** - Inline checkbox for boolean properties in left gutter; toggle to switch between `true`/`false` and emit changes (e.g., `marker: true` to show vertices)
67
- - **Default Properties** - Auto-inject default visualization properties (fill-color, stroke-color, etc.) into features based on configurable rules
68
- - **Dark/Light Themes** - Automatic theme detection from parent page (Bootstrap, Tailwind, custom)
68
+ - **Color Picker** - Built-in color swatch for hex color properties (`#rrggbb`) displayed inline next to the value; click to open native color picker
69
+ - **Boolean Checkbox** - Inline checkbox for boolean properties displayed next to the value; toggle to switch between `true`/`false` and emit changes (e.g., `marker: true` to show vertices)
70
+ - **Dark/Light Color Schemes** - Automatic color scheme detection from parent page (Bootstrap, Tailwind, custom)
69
71
  - **Auto-format** - Automatic JSON formatting in real-time (always enabled)
70
72
  - **Readonly Mode** - Visual indicator with diagonal stripes when editing is disabled
71
73
  - **Block Editing in Collapsed Areas** - Prevents accidental edits in collapsed sections
72
74
  - **Smart Copy/Paste** - Copy includes expanded content even from collapsed nodes
73
75
  - **FeatureCollection Output** - Emits valid FeatureCollection with all edited features
74
76
  - **Clear Button** - Discreet ✕ button in suffix area to clear all editor content (hidden in readonly mode)
77
+ - **Undo/Redo** - Full undo/redo support with Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z; rapid keystrokes grouped as single undo step
78
+ - **Save to File** - Ctrl+S to download GeoJSON as `.geojson` file; programmatic `save(filename)` method available
79
+ - **Open from File** - Ctrl+O to open a `.geojson` or `.json` file from the client filesystem; programmatic `open()` method available
75
80
 
76
81
  ## Installation
77
82
 
@@ -105,12 +110,36 @@ If you're using a bundler (Vite, Webpack, Rollup, etc.):
105
110
  npm install @softwarity/geojson-editor
106
111
  ```
107
112
 
108
- Then import in your JavaScript:
113
+ Then import in your JavaScript/TypeScript:
109
114
 
110
115
  ```javascript
111
116
  import '@softwarity/geojson-editor';
112
117
  ```
113
118
 
119
+ ### TypeScript Support
120
+
121
+ This package includes TypeScript type definitions out of the box. No additional `@types/*` package required.
122
+
123
+ ```typescript
124
+ import '@softwarity/geojson-editor';
125
+ import type { SetOptions, ThemeSettings, CursorPosition, GeometryType } from '@softwarity/geojson-editor';
126
+
127
+ // Type-safe editor access
128
+ const editor = document.querySelector('geojson-editor') as GeoJsonEditor;
129
+
130
+ // Full autocompletion and type checking
131
+ editor.set(features, { collapsed: ['coordinates'] });
132
+ editor.setTheme({ dark: { bgColor: '#1a1a1a' } });
133
+ ```
134
+
135
+ **Exported types:**
136
+ - `GeoJsonEditor` - The Web Component class
137
+ - `SetOptions` - Options for `set()`, `add()`, `insertAt()`, `open()`
138
+ - `ThemeConfig` - Theme color configuration
139
+ - `ThemeSettings` - Dark/light color scheme settings
140
+ - `CursorPosition` - Cursor position `{ line, column }`
141
+ - `GeometryType` - GeoJSON geometry types union
142
+
114
143
  ## Usage
115
144
 
116
145
  ### Basic Usage
@@ -160,13 +189,13 @@ editor.addEventListener('error', (e) => {
160
189
  | `value` | `string` | `""` | Initial editor content (features array content) |
161
190
  | `placeholder` | `string` | `""` | Placeholder text |
162
191
  | `readonly` | `boolean` | `false` | Make editor read-only |
163
- | `dark-selector` | `string` | `".dark"` | CSS selector for dark theme (if matches → dark, else → light) |
192
+ | `dark-selector` | `string` | `".dark"` | CSS selector for dark color scheme detection |
164
193
 
165
194
  **Note:** `coordinates` nodes are automatically collapsed when content is loaded to improve readability. Use Tab to expand and Shift+Tab to collapse nodes, or click the gutter toggle.
166
195
 
167
196
  ### Dark Selector Syntax
168
197
 
169
- The `dark-selector` attribute determines when the dark theme is active. If the selector matches, dark theme is applied; otherwise, light theme is used.
198
+ The `dark-selector` attribute determines when the dark color scheme is active. If the selector matches, dark colors are applied; otherwise, light colors are used.
170
199
 
171
200
  **Examples:**
172
201
 
@@ -187,32 +216,84 @@ Programmatic manipulation of features:
187
216
 
188
217
  | Method | Description |
189
218
  |--------|-------------|
190
- | `set(features[])` | Replace all features with the given array (throws if invalid) |
191
- | `add(feature)` | Add a feature at the end (throws if invalid) |
192
- | `insertAt(feature, index)` | Insert at index (negative = from end: -1 = before last) (throws if invalid) |
219
+ | `set(input, options?)` | Replace all features (throws if invalid) |
220
+ | `add(input, options?)` | Add features at the end (throws if invalid) |
221
+ | `insertAt(input, index, options?)` | Insert at index (negative = from end: -1 = before last) (throws if invalid) |
193
222
  | `removeAt(index)` | Remove feature at index (negative = from end), returns removed feature |
194
223
  | `removeAll()` | Remove all features, returns array of removed features |
195
224
  | `get(index)` | Get feature at index (negative = from end) |
196
225
  | `getAll()` | Get all features as an array |
197
226
  | `emit()` | Emit the current document on the change event |
198
227
 
199
- **Validation:** `set()`, `add()`, and `insertAt()` validate features before adding. Invalid features throw an `Error` with a descriptive message. A valid Feature must have:
228
+ **Flexible Input:** `set()`, `add()`, and `insertAt()` accept multiple input formats:
229
+ - **FeatureCollection** → extracts the `features` array
230
+ - **Feature[]** → uses the array directly
231
+ - **Feature** → wraps in an array
232
+
233
+ **Options Parameter:** `set()`, `add()`, `insertAt()`, and `open()` accept an optional `options` object:
234
+
235
+ | Option | Type | Default | Description |
236
+ |--------|------|---------|-------------|
237
+ | `collapsed` | `string[]` \| `function` | `['coordinates']` | Attributes to collapse after loading |
238
+
239
+ The `collapsed` option controls which JSON nodes are automatically collapsed:
240
+ - **`string[]`**: Static list of attribute names to collapse (e.g., `['coordinates', 'properties']`)
241
+ - **`function(feature, index) => string[]`**: Dynamic function returning attributes per feature
242
+ - **`'$root'`**: Special keyword to collapse entire features
243
+ - **Empty array `[]`**: Disables auto-collapse (nothing collapsed)
244
+
245
+ ```javascript
246
+ // Default: only coordinates collapsed
247
+ editor.set(features);
248
+
249
+ // Collapse coordinates and properties
250
+ editor.set(features, { collapsed: ['coordinates', 'properties'] });
251
+
252
+ // Collapse entire features
253
+ editor.set(features, { collapsed: ['$root'] });
254
+
255
+ // No auto-collapse
256
+ editor.set(features, { collapsed: [] });
257
+
258
+ // Dynamic: collapse geometry only for Points
259
+ editor.set(features, {
260
+ collapsed: (feature, index) => {
261
+ if (feature.geometry?.type === 'Point') {
262
+ return ['geometry'];
263
+ }
264
+ return ['coordinates'];
265
+ }
266
+ });
267
+ ```
268
+
269
+ **Validation:** All input features are validated before adding. Invalid features throw an `Error` with a descriptive message. A valid Feature must have:
200
270
  - `type: "Feature"`
201
271
  - `geometry`: object with valid type (`Point`, `LineString`, `Polygon`, etc.) and `coordinates`, or `null`
202
272
  - `properties`: object or `null`
203
273
 
274
+ **Smart Paste:** When pasting GeoJSON content (Ctrl+V), the editor automatically detects and normalizes the format (FeatureCollection, Feature[], or single Feature). Invalid GeoJSON falls back to raw text insertion.
275
+
204
276
  ```javascript
205
- // Set features
277
+ // Set features from array
206
278
  editor.set([
207
279
  { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: {} },
208
280
  { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 1] }, properties: {} }
209
281
  ]);
210
282
 
211
- // Add a feature
212
- editor.add({ type: 'Feature', geometry: { type: 'Point', coordinates: [2, 2] }, properties: {} });
283
+ // Set from FeatureCollection
284
+ editor.set({
285
+ type: 'FeatureCollection',
286
+ features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: {} }]
287
+ });
213
288
 
214
- // Insert at position 1
215
- editor.insertAt({ type: 'Feature', ... }, 1);
289
+ // Set a single feature
290
+ editor.set({ type: 'Feature', geometry: { type: 'Point', coordinates: [2, 2] }, properties: {} });
291
+
292
+ // Add multiple features at once
293
+ editor.add([feature1, feature2]);
294
+
295
+ // Insert FeatureCollection at position 1
296
+ editor.insertAt(featureCollection, 1);
216
297
 
217
298
  // Remove last feature
218
299
  const removed = editor.removeAt(-1);
@@ -240,6 +321,103 @@ editor.setTheme({
240
321
  editor.resetTheme();
241
322
  ```
242
323
 
324
+ ### Undo/Redo API
325
+
326
+ Full undo/redo support with action grouping:
327
+
328
+ | Method | Description |
329
+ |--------|-------------|
330
+ | `undo()` | Undo last action, returns `true` if successful |
331
+ | `redo()` | Redo previously undone action, returns `true` if successful |
332
+ | `canUndo()` | Check if undo is available |
333
+ | `canRedo()` | Check if redo is available |
334
+ | `clearHistory()` | Clear undo/redo history |
335
+
336
+ **Keyboard shortcuts:**
337
+ - `Ctrl+Z` / `Cmd+Z` - Undo
338
+ - `Ctrl+Y` / `Cmd+Y` - Redo
339
+ - `Ctrl+Shift+Z` / `Cmd+Shift+Z` - Redo (alternative)
340
+
341
+ **Action grouping:** Rapid keystrokes (< 500ms apart, same action type) are automatically grouped as a single undo step. This means typing "hello" quickly creates one undo entry, not five.
342
+
343
+ ```javascript
344
+ // Programmatic undo/redo
345
+ if (editor.canUndo()) {
346
+ editor.undo();
347
+ }
348
+
349
+ // Clear history after saving
350
+ editor.clearHistory();
351
+ ```
352
+
353
+ ### Save API
354
+
355
+ Save the current GeoJSON content to a file:
356
+
357
+ | Method | Description |
358
+ |--------|-------------|
359
+ | `save(filename?)` | Download GeoJSON as file, returns `true` if successful |
360
+
361
+ **Keyboard shortcut:**
362
+ - `Ctrl+S` / `Cmd+S` - Save with default filename (`features.geojson`)
363
+
364
+ ```javascript
365
+ // Save with default filename
366
+ editor.save(); // Downloads "features.geojson"
367
+
368
+ // Save with custom filename
369
+ editor.save('my-map-data.geojson');
370
+ ```
371
+
372
+ ### Open API
373
+
374
+ Open a GeoJSON file from the client filesystem:
375
+
376
+ | Method | Description |
377
+ |--------|-------------|
378
+ | `open(options?)` | Open file dialog, returns `Promise<boolean>` (true if loaded successfully) |
379
+
380
+ **Keyboard shortcut:**
381
+ - `Ctrl+O` / `Cmd+O` - Open file dialog
382
+
383
+ **Supported formats:**
384
+ - FeatureCollection (extracts features array)
385
+ - Single Feature (wraps in array)
386
+ - Array of Features
387
+
388
+ **Note:** The `Ctrl+O` shortcut is disabled in readonly mode, but `open()` remains available via API for programmatic loading.
389
+
390
+ ```javascript
391
+ // Open file dialog
392
+ const success = await editor.open();
393
+ if (success) {
394
+ console.log('File loaded:', editor.getAll());
395
+ }
396
+
397
+ // Open with custom collapse options
398
+ const success = await editor.open({ collapsed: ['$root'] });
399
+ ```
400
+
401
+ ## Keyboard Shortcuts
402
+
403
+ | Shortcut | Action |
404
+ |----------|--------|
405
+ | `Ctrl+S` / `Cmd+S` | Save to file |
406
+ | `Ctrl+O` / `Cmd+O` | Open file (disabled in readonly) |
407
+ | `Ctrl+Z` / `Cmd+Z` | Undo |
408
+ | `Ctrl+Y` / `Cmd+Y` | Redo |
409
+ | `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (alternative) |
410
+ | `Ctrl+A` / `Cmd+A` | Select all |
411
+ | `Ctrl+C` / `Cmd+C` | Copy |
412
+ | `Ctrl+X` / `Cmd+X` | Cut |
413
+ | `Ctrl+V` / `Cmd+V` | Paste |
414
+ | `Ctrl+←` / `Cmd+←` | Move cursor to previous word |
415
+ | `Ctrl+→` / `Cmd+→` | Move cursor to next word |
416
+ | `Ctrl+Shift+←` / `Cmd+Shift+←` | Select to previous word |
417
+ | `Ctrl+Shift+→` / `Cmd+Shift+→` | Select to next word |
418
+ | `Tab` | Expand collapsed node at cursor |
419
+ | `Shift+Tab` | Collapse innermost node containing cursor |
420
+
243
421
  ## Events
244
422
 
245
423
  ### `change`
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * @license MIT
3
3
  * @name @softwarity/geojson-editor
4
- * @version 1.0.14
4
+ * @version 1.0.16
5
5
  * @author Softwarity (https://www.softwarity.io/)
6
6
  * @copyright 2025 Softwarity
7
7
  * @see https://github.com/softwarity/geojson-editor
8
8
  */
9
- const e=["type","geometry","properties","coordinates","id","features"],t=["Point","MultiPoint","LineString","MultiLineString","Polygon","MultiPolygon"];class s extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.lines=[],this.collapsedNodes=/* @__PURE__ */new Set,this.hiddenFeatures=/* @__PURE__ */new Set,this._nodeIdCounter=0,this._lineToNodeId=/* @__PURE__ */new Map,this._nodeIdToLines=/* @__PURE__ */new Map,this.visibleLines=[],this.lineMetadata=/* @__PURE__ */new Map,this.featureRanges=/* @__PURE__ */new Map,this.scrollTop=0,this.viewportHeight=0,this.lineHeight=19.5,this.bufferLines=5,this._lastStartIndex=-1,this._lastEndIndex=-1,this._lastTotalLines=-1,this._scrollRaf=null,this.cursorLine=0,this.cursorColumn=0,this.selectionStart=null,this.selectionEnd=null,this.renderTimer=null,this.inputTimer=null,this.themes={dark:{},light:{}}}_generateNodeId(){return"node_"+ ++this._nodeIdCounter}_getCollapsedRangeForLine(e){for(const[t,s]of this._nodeIdToLines)if(this.collapsedNodes.has(t)&&e>s.startLine&&e<s.endLine)return{nodeId:t,...s};return null}_getCollapsedClosingLine(e){for(const[t,s]of this._nodeIdToLines)if(this.collapsedNodes.has(t)&&e===s.endLine)return{nodeId:t,...s};return null}_getClosingBracketPos(e){return Math.max(e.lastIndexOf("]"),e.lastIndexOf("}"))}_getCollapsedNodeAtLine(e){const t=this._lineToNodeId.get(e);return t&&this.collapsedNodes.has(t)?{nodeId:t,...this._nodeIdToLines.get(t)}:null}_getCollapsibleNodeAtLine(e){const t=this._lineToNodeId.get(e);if(t){const e=this._nodeIdToLines.get(t);return{nodeId:t,isCollapsed:this.collapsedNodes.has(t),...e}}return null}_getContainingExpandedNode(e){let t=null;for(const[s,i]of this._nodeIdToLines)this.collapsedNodes.has(s)||e>=i.startLine&&e<=i.endLine&&(!t||i.endLine-i.startLine<t.endLine-t.startLine)&&(t={nodeId:s,...i});return t}_deleteCollapsedNode(e){const t=e.endLine-e.startLine+1;this.lines.splice(e.startLine,t),this.cursorLine=Math.min(e.startLine,this.lines.length-1),this.cursorColumn=0,this.formatAndUpdate()}_rebuildNodeIdMappings(){const e=new Set(this.collapsedNodes),t=/* @__PURE__ */new Map;for(const[n,o]of this._nodeIdToLines)o.nodeKey&&t.set(n,o.nodeKey);const s=[];for(const n of e){const e=t.get(n);e&&s.push(e)}this._nodeIdCounter=0,this._lineToNodeId.clear(),this._nodeIdToLines.clear(),this.collapsedNodes.clear();const i=/* @__PURE__ */new Map;for(let n=0;n<this.lines.length;n++){const e=this.lines[n],t=e.match(/^\s*"([^"]+)"\s*:\s*([{\[])/),o=!t&&e.match(/^\s*([{\[]),?\s*$/);if(!t&&!o)continue;let r,l;t?(r=t[1],l=t[2]):(l=o[1],r=`__root_${l}_${n}`);const a=e.substring(e.indexOf(l)+1),c=this._countBrackets(a,l);if(c.close>c.open)continue;const h=this._findClosingLine(n,l);if(-1===h||h===n)continue;const d=this._generateNodeId();this._lineToNodeId.set(n,d),this._nodeIdToLines.set(d,{startLine:n,endLine:h,nodeKey:r,isRootFeature:!!o});const u=i.get(r)||0;i.set(r,u+1);const p=s.indexOf(r);-1!==p&&(s.splice(p,1),this.collapsedNodes.add(d))}}static get observedAttributes(){return["readonly","value","placeholder","dark-selector"]}connectedCallback(){this.render(),this.setupEventListeners(),this.updatePrefixSuffix(),this.updateThemeCSS(),this.value&&this.setValue(this.value),this.updatePlaceholderVisibility()}disconnectedCallback(){this.renderTimer&&clearTimeout(this.renderTimer),this.inputTimer&&clearTimeout(this.inputTimer);const e=document.querySelector(".geojson-color-picker-input");e&&(e._closeListener&&document.removeEventListener("click",e._closeListener,!0),e.remove())}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"value":this.setValue(s);break;case"readonly":this.updateReadonly();break;case"placeholder":this.updatePlaceholderContent();break;case"dark-selector":this.updateThemeCSS()}}get readonly(){return this.hasAttribute("readonly")}get value(){return this.getAttribute("value")||""}get placeholder(){return this.getAttribute("placeholder")||""}get prefix(){return'{"type": "FeatureCollection", "features": ['}get suffix(){return"]}"}render(){const e=document.createElement("style");e.textContent=':host *,:host *:before,:host *:after{box-sizing:border-box;font: 13px/1.5 Courier New,Courier,monospace;font-variant:normal;letter-spacing:0;word-spacing:0;text-transform:none;text-decoration:none;text-indent:0}:host{display:flex;flex-direction:column;position:relative;width:100%;height:400px;border-radius:4px;overflow:hidden}:host([readonly]) .editor-wrapper:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(128,128,128,.08),rgba(128,128,128,.08) 3px,transparent 3px,transparent 12px);z-index:1}:host([readonly]) .hidden-textarea{cursor:text}.editor-wrapper{position:relative;width:100%;flex:1;background:var(--bg-color, #fff);display:flex;overflow:hidden}.gutter{width:50px;background:var(--gutter-bg, #f0f0f0);border-right:1px solid var(--gutter-border, #e0e0e0);overflow:hidden;flex-shrink:0;position:relative}.gutter-scroll{position:absolute;inset:0;overflow:hidden;padding:8px 0}.gutter-scroll-content{position:relative;width:100%}.gutter-content{position:absolute;top:0;left:0;right:0;will-change:transform}.gutter-line{height:19.5px;display:flex;align-items:center;justify-content:flex-end;padding-right:4px}.line-number{font-size:11px;color:var(--gutter-text, #999);-webkit-user-select:none;user-select:none;min-width:20px;text-align:right}.collapse-column{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.color-indicator,.collapse-button,.boolean-checkbox{width:12px;height:12px;border-radius:2px;cursor:pointer;transition:transform .1s;flex-shrink:0}.color-indicator{border:1px solid #555}.color-indicator:hover{transform:scale(1.2);border-color:#fff}.boolean-checkbox{appearance:none;-webkit-appearance:none;background:transparent;border:1.5px solid var(--control-border, #c0c0c0);border-radius:2px;margin:0;position:relative}.boolean-checkbox:checked{border-color:var(--control-color, #000080)}.boolean-checkbox:checked:after{content:"✔";color:var(--control-color, #000080);font-size:11px;font-weight:700;position:absolute;top:-3px;right:-1px}.boolean-checkbox:hover{transform:scale(1.2);border-color:var(--control-color, #000080)}.collapse-button{background:transparent;border:none;color:var(--json-punct, #a9b7c6);font-size:10px;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.collapse-button.collapsed,.gutter:hover .collapse-button{opacity:1}.collapse-button:hover{transform:scale(1.2)}@media(hover:none),(pointer:coarse){.collapse-button{opacity:1}}.visibility-button{width:14px;height:14px;background:transparent;color:var(--control-color, #000080);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;flex-shrink:0;opacity:.7;padding:0;font-size:11px}.visibility-button:hover{opacity:1;transform:scale(1.15)}.visibility-button.hidden{opacity:.35}.editor-content{position:relative;flex:1;overflow:hidden}.hidden-textarea{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;padding:0;margin:0;border:none;outline:none;resize:none;overflow:hidden;z-index:-1;pointer-events:none;caret-color:transparent}.viewport{position:absolute;inset:0;overflow:auto;padding:8px 12px;overscroll-behavior:contain}.scroll-content{position:relative;width:100%}.lines-container{position:absolute;top:0;left:0;right:0;will-change:transform}.line{height:19.5px;white-space:pre;display:block;position:relative}.cursor{position:absolute;width:2px;height:1em;background:var(--caret-color, #000);top:.15em;pointer-events:none;animation:cursor-blink 1s step-end infinite}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:0}}.selection{position:absolute;height:100%;top:0;background:var(--selection-color, rgba(51, 153, 255, .3));pointer-events:none;z-index:0}.line-hidden>span{opacity:.35;filter:grayscale(50%)}.line-collapsed{display:none}.placeholder-layer{position:absolute;top:8px;left:12px;color:#6a6a6a;pointer-events:none;z-index:0;white-space:pre}.json-key{color:var(--json-key, #660e7a)}.json-string{color:var(--json-string, #008000)}.json-number{color:var(--json-number, #00f)}.json-boolean,.json-null{color:var(--json-boolean, #000080)}.json-punctuation{color:var(--json-punct, #000)}.json-key-invalid{color:var(--json-key-invalid, #f00)}.json-error{color:var(--json-error, #f00)}.geojson-key{color:var(--geojson-key, #660e7a);font-weight:600}.geojson-type{color:var(--geojson-type, #008000);font-weight:600}.geojson-type-invalid{color:var(--geojson-type-invalid, #f00);font-weight:600}.d-none{display:none}.collapsed-bracket-array,.collapsed-bracket-object{color:var(--json-punct, #000)}.collapsed-bracket-array:after,.collapsed-bracket-object:after{content:"…";color:var(--json-punct, #888)}.collapsed-content{display:none}.prefix-wrapper,.suffix-wrapper{display:flex;flex-shrink:0;background:var(--bg-color, #fff)}.prefix-gutter,.suffix-gutter{width:50px;background:var(--gutter-bg, #f0f0f0);border-right:1px solid var(--gutter-border, #e0e0e0);flex-shrink:0}.editor-prefix,.editor-suffix{flex:1;padding:4px 12px;color:var(--text-color, #000);background:var(--bg-color, #fff);-webkit-user-select:none;user-select:none;white-space:pre-wrap;word-wrap:break-word;opacity:.6}.prefix-wrapper{border-bottom:1px solid rgba(255,255,255,.1);position:relative}.suffix-wrapper{border-top:1px solid rgba(255,255,255,.1);position:relative}.info-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color, #000);opacity:.15;cursor:pointer;font-size:.7rem;width:1rem;height:1rem;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .2s;font-family:sans-serif}.info-btn:hover{opacity:.5}.clear-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color, #000);opacity:.3;cursor:pointer;font-size:.65rem;width:1rem;height:1rem;padding:.15rem 0 0;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}.clear-btn:hover{opacity:.7;background:#ffffff1a}.clear-btn[hidden]{display:none}.viewport::-webkit-scrollbar{width:10px;height:10px}.viewport::-webkit-scrollbar-track{background:var(--control-bg, #e8e8e8)}.viewport::-webkit-scrollbar-thumb{background:var(--control-border, #c0c0c0);border-radius:5px}.viewport::-webkit-scrollbar-thumb:hover{background:var(--control-color, #000080)}.viewport{scrollbar-width:thin;scrollbar-color:var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8)}.line .selected{background:#3399ff4d}.json-color,.json-boolean{position:relative}.json-color:before,.json-boolean:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);margin-top:-1px;width:8px;height:8px;border-radius:2px;cursor:pointer}.json-color:hover:before,.json-boolean:hover:before{transform:translateY(-50%) scale(1.2);border-color:var(--control-color, #000080)}.json-color:before{background-color:var(--swatch-color);border:1px solid var(--json-punct, #a9b7c6)}.json-boolean:before{border:1.5px solid var(--control-border, #c0c0c0);background:transparent}.json-bool-true:before{content:"✔";border-color:var(--control-color, #000080);color:var(--control-color, #000080);font-size:8px;display:flex;align-items:center;justify-content:center;line-height:8px}.line.has-visibility{position:relative}.line.has-visibility:before{content:"👁";position:absolute;left:0;top:3px;font-size:10px;color:var(--control-color, #000080);opacity:.6;cursor:pointer;z-index:1}.line.has-visibility:hover:before{opacity:1;transform:scale(1.15)}.line.has-visibility.feature-hidden:before{opacity:.5}';const t=document.createElement("div");for(t.innerHTML=function(e="",t=""){return`\n <div class="prefix-wrapper">\n <div class="prefix-gutter"></div>\n <div class="editor-prefix" id="editorPrefix"></div>\n <button class="info-btn" id="infoBtn" title="@softwarity/geojson-editor v${t}" aria-label="About">ⓘ</button>\n </div>\n <div class="editor-wrapper">\n <div class="gutter">\n <div class="gutter-scroll" id="gutterScroll">\n <div class="gutter-scroll-content" id="gutterScrollContent">\n <div class="gutter-content" id="gutterContent"></div>\n </div>\n </div>\n </div>\n <div class="editor-content">\n <div class="placeholder-layer" id="placeholderLayer">${s=e,s?s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"):""}</div>\n <textarea\n class="hidden-textarea"\n id="hiddenTextarea"\n spellcheck="false"\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n tabindex="0"\n ></textarea>\n <div class="viewport" id="viewport">\n <div class="scroll-content" id="scrollContent">\n <div class="lines-container" id="linesContainer"></div>\n </div>\n </div>\n </div>\n </div>\n <div class="suffix-wrapper">\n <div class="suffix-gutter"></div>\n <div class="editor-suffix" id="editorSuffix"></div>\n <button class="clear-btn" id="clearBtn" title="Clear editor">✕</button>\n </div>\n `;var s}(this.placeholder,"1.0.14"),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(e);t.firstChild;)this.shadowRoot.appendChild(t.firstChild)}setupEventListeners(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=this.shadowRoot.getElementById("viewport"),s=this.shadowRoot.getElementById("gutterContent"),i=this.shadowRoot.querySelector(".gutter"),n=this.shadowRoot.getElementById("clearBtn"),o=this.shadowRoot.querySelector(".editor-wrapper");this._isSelecting=!1,t.addEventListener("click",e=>{this.handleEditorClick(e)},!0),t.addEventListener("mousedown",t=>{const s=t.target.closest(".line.has-visibility");if(s){const e=s.getBoundingClientRect();if(t.clientX-e.left<14)return void(this._blockRender=!0)}if(t.target.classList.contains("json-color")||t.target.classList.contains("json-boolean")){const e=t.target.getBoundingClientRect(),s=t.clientX-e.left;if(s<0&&s>=-8)return void(this._blockRender=!0)}t.preventDefault();const i=this._getPositionFromClick(t);t.shiftKey&&this.selectionStart?(this.selectionEnd=i,this.cursorLine=i.line,this.cursorColumn=i.column):(this.cursorLine=i.line,this.cursorColumn=i.column,this.selectionStart={line:i.line,column:i.column},this.selectionEnd=null,this._isSelecting=!0),e.focus(),this._lastStartIndex=-1,this.scheduleRender()}),t.addEventListener("mousemove",e=>{if(!this._isSelecting)return;const s=this._getPositionFromClick(e);this.selectionEnd=s,this.cursorLine=s.line,this.cursorColumn=s.column;const i=t.getBoundingClientRect();e.clientY<i.top+30?t.scrollTop-=20:e.clientY>i.bottom-30&&(t.scrollTop+=20),this._lastStartIndex=-1,this.scheduleRender()}),document.addEventListener("mouseup",()=>{this._isSelecting=!1}),e.addEventListener("focus",()=>{o.classList.add("focused"),this._lastStartIndex=-1,this.scheduleRender()}),e.addEventListener("blur",()=>{o.classList.remove("focused"),this._lastStartIndex=-1,this.scheduleRender()});let r=!1;t.addEventListener("scroll",()=>{r||(this.scrollTop=t.scrollTop,this.syncGutterScroll(),this._scrollRaf||(this._scrollRaf=requestAnimationFrame(()=>{this._scrollRaf=null,r=!0,this.renderViewport(),r=!1})))}),e.addEventListener("compositionstart",()=>{this._isComposing=!0}),e.addEventListener("compositionend",()=>{this._isComposing=!1,this.handleInput()}),e.addEventListener("input",()=>{this._isComposing||this.handleInput()}),e.addEventListener("keydown",e=>{this.handleKeydown(e)}),e.addEventListener("paste",e=>{this.handlePaste(e)}),e.addEventListener("copy",e=>{this.handleCopy(e)}),e.addEventListener("cut",e=>{this.handleCut(e)}),s.addEventListener("click",e=>{this.handleGutterClick(e)}),i.addEventListener("mousedown",e=>{e.preventDefault()}),i.addEventListener("wheel",e=>{e.preventDefault(),t.scrollTop+=e.deltaY}),n.addEventListener("click",()=>{this.removeAll()}),this.updateReadonly()}setValue(e){if(e&&e.trim())try{const t="["+e+"]",s=JSON.parse(t),i=JSON.stringify(s,null,2).split("\n");this.lines=i.slice(1,-1)}catch(t){this.lines=e.split("\n")}else this.lines=[];this.collapsedNodes.clear(),this.hiddenFeatures.clear(),this._lineToNodeId.clear(),this._nodeIdToLines.clear(),this.cursorLine=0,this.cursorColumn=0,this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.lines.length>0&&requestAnimationFrame(()=>{this.autoCollapseCoordinates()}),this.emitChange()}getContent(){return this.lines.join("\n")}updateModel(){this._rebuildNodeIdMappings(),this.computeFeatureRanges(),this.computeLineMetadata(),this.computeVisibleLines()}updateView(){this.computeLineMetadata(),this.computeVisibleLines()}computeFeatureRanges(){this.featureRanges.clear();try{const e=this.lines.join("\n"),t=this.prefix+e+this.suffix,s=JSON.parse(t);if(!s.features)return;let i=0,n=0,o=!1,r=-1,l=null;for(let a=0;a<this.lines.length;a++){const e=this.lines[a];if(!o&&/"type"\s*:\s*"Feature"/.test(e)){let e=a;for(let t=a;t>=0;t--){const s=this.lines[t].trim();if("{"===s||"{,"===s){e=t;break}}r=e,o=!0,n=1;for(let t=e;t<=a;t++){const s=this._countBrackets(this.lines[t],"{");n+=t===e?s.open-1-s.close:s.open-s.close}i<s.features.length&&(l=this._getFeatureKey(s.features[i]))}else if(o){const t=this._countBrackets(e,"{");n+=t.open-t.close,n<=0&&(l&&this.featureRanges.set(l,{startLine:r,endLine:a,featureIndex:i}),i++,o=!1,l=null)}}}catch(e){}}computeLineMetadata(){this.lineMetadata.clear();const e=this._findCollapsibleRanges();for(let t=0;t<this.lines.length;t++){const s=this.lines[t],i={colors:[],booleans:[],collapseButton:null,visibilityButton:null,isHidden:!1,isCollapsed:!1,featureKey:null},n=/"([\w-]+)"\s*:\s*"(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))"/g;let o;for(;null!==(o=n.exec(s));)i.colors.push({attributeName:o[1],color:o[2]});const r=/"([\w-]+)"\s*:\s*(true|false)/g;let l;for(;null!==(l=r.exec(s));)i.booleans.push({attributeName:l[1],value:"true"===l[2]});const a=e.find(e=>e.startLine===t);a&&(i.collapseButton={nodeKey:a.nodeKey,nodeId:a.nodeId,isCollapsed:this.collapsedNodes.has(a.nodeId)}),e.find(e=>this.collapsedNodes.has(e.nodeId)&&t>e.startLine&&t<e.endLine)&&(i.isCollapsed=!0);for(const[e,c]of this.featureRanges)if(t>=c.startLine&&t<=c.endLine){i.featureKey=e,this.hiddenFeatures.has(e)&&(i.isHidden=!0),t===c.startLine&&(i.visibilityButton={featureKey:e,isHidden:this.hiddenFeatures.has(e)});break}this.lineMetadata.set(t,i)}}computeVisibleLines(){this.visibleLines=[];for(let e=0;e<this.lines.length;e++){const t=this.lineMetadata.get(e);t&&t.isCollapsed||this.visibleLines.push({index:e,content:this.lines[e],meta:t})}this._lastStartIndex=-1,this._lastEndIndex=-1,this._lastTotalLines=-1}scheduleRender(){this.renderTimer||(this.renderTimer=requestAnimationFrame(()=>{this.renderTimer=null,this.renderViewport()}))}renderViewport(){if(this._blockRender)return;const e=this.shadowRoot.getElementById("viewport"),t=this.shadowRoot.getElementById("linesContainer"),s=this.shadowRoot.getElementById("scrollContent");if(this.shadowRoot.getElementById("gutterContent"),!e||!t)return;this.viewportHeight=e.clientHeight;const i=this.visibleLines.length,n=i*this.lineHeight;s&&(s.style.height=`${n}px`);const o=e.scrollTop,r=Math.floor(o/this.lineHeight),l=Math.ceil(this.viewportHeight/this.lineHeight),a=Math.max(0,r-this.bufferLines),c=Math.min(i,r+l+this.bufferLines);if(i>0&&this._lastStartIndex===a&&this._lastEndIndex===c&&this._lastTotalLines===i)return;this._lastStartIndex=a,this._lastEndIndex=c,this._lastTotalLines=i;const h=a*this.lineHeight;t.style.transform=`translateY(${h}px)`;const d=this._buildContextMap(),u=this.shadowRoot.querySelector(".editor-wrapper"),p=u?.classList.contains("focused"),g=document.createDocumentFragment();if(0===i){const e=document.createElement("div");return e.className="line empty-line",e.dataset.lineIndex="0",p&&(e.innerHTML=this._insertCursor(0)),g.appendChild(e),t.innerHTML="",t.appendChild(g),void this.renderGutter(0,0)}for(let f=a;f<c;f++){const e=this.visibleLines[f];if(!e)continue;const t=document.createElement("div");t.className="line",t.dataset.lineIndex=e.index,e.meta?.visibilityButton&&(t.classList.add("has-visibility"),t.dataset.featureKey=e.meta.visibilityButton.featureKey,e.meta.visibilityButton.isHidden&&t.classList.add("feature-hidden")),e.meta?.isHidden&&t.classList.add("line-hidden");const s=d.get(e.index);let i=this._highlightSyntax(e.content,s,e.meta);p&&this._hasSelection()&&(i=this._addSelectionHighlight(i,e.index,e.content)),p&&e.index===this.cursorLine&&(i+=this._insertCursor(this.cursorColumn)),t.innerHTML=i,g.appendChild(t)}t.innerHTML="",t.appendChild(g),this.renderGutter(a,c)}_insertCursor(e){return`<span class="cursor" style="left: ${e*this._getCharWidth()}px"></span>`}_addSelectionHighlight(e,t,s){const{start:i,end:n}=this._normalizeSelection();if(!i||!n)return e;if(t<i.line||t>n.line)return e;const o=this._getCharWidth();let r,l;return t===i.line&&t===n.line?(r=i.column,l=n.column):t===i.line?(r=i.column,l=s.length):t===n.line?(r=0,l=n.column):(r=0,l=s.length),`<span class="selection" style="left: ${r*o}px; width: ${(l-r)*o}px"></span>`+e}_getCharWidth(){if(!this._charWidth){const e=document.createElement("canvas").getContext("2d");e.font="13px 'Courier New', Courier, monospace",this._charWidth=e.measureText("M").width}return this._charWidth}renderGutter(e,t){const s=this.shadowRoot.getElementById("gutterContent"),i=this.shadowRoot.getElementById("gutterScrollContent");if(!s)return;const n=this.visibleLines.length*this.lineHeight;i&&(i.style.height=`${n}px`);const o=e*this.lineHeight;s.style.transform=`translateY(${o}px)`;const r=document.createDocumentFragment();for(let l=e;l<t;l++){const e=this.visibleLines[l];if(!e)continue;const t=document.createElement("div");t.className="gutter-line";const s=e.meta,i=document.createElement("span");i.className="line-number",i.textContent=e.index+1,t.appendChild(i);const n=document.createElement("div");if(n.className="collapse-column",s?.collapseButton){const t=document.createElement("div");t.className="collapse-button"+(s.collapseButton.isCollapsed?" collapsed":""),t.textContent=s.collapseButton.isCollapsed?"›":"⌄",t.dataset.line=e.index,t.dataset.nodeId=s.collapseButton.nodeId,t.title=s.collapseButton.isCollapsed?"Expand":"Collapse",n.appendChild(t)}t.appendChild(n),r.appendChild(t)}s.innerHTML="",s.appendChild(r)}syncGutterScroll(){const e=this.shadowRoot.getElementById("gutterScroll"),t=this.shadowRoot.getElementById("viewport");e&&t&&(e.scrollTop=t.scrollTop)}handleInput(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=e.value;if(t)if(this._getCollapsedRangeForLine(this.cursorLine))e.value="";else{if(this._getCollapsedClosingLine(this.cursorLine)){const t=this.lines[this.cursorLine],s=this._getClosingBracketPos(t);if(this.cursorColumn<=s)return void(e.value="")}if(this._getCollapsedNodeAtLine(this.cursorLine)){const t=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>t)return void(e.value="")}if(this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine],s=e.substring(0,this.cursorColumn),i=e.substring(this.cursorColumn),n=t.split("\n");if(1===n.length)this.lines[this.cursorLine]=s+t+i,this.cursorColumn+=t.length;else{this.lines[this.cursorLine]=s+n[0];for(let t=1;t<n.length-1;t++)this.lines.splice(this.cursorLine+t,0,n[t]);const e=n[n.length-1]+i;this.lines.splice(this.cursorLine+n.length-1,0,e),this.cursorLine+=n.length-1,this.cursorColumn=n[n.length-1].length}}else{const e=t.split("\n");this.lines.push(...e),this.cursorLine=this.lines.length-1,this.cursorColumn=this.lines[this.cursorLine].length}e.value="",clearTimeout(this.inputTimer),this.inputTimer=setTimeout(()=>{this.formatAndUpdate()},150)}}handleKeydown(e){const t=this._getCollapsedRangeForLine(this.cursorLine),s=this._getCollapsedNodeAtLine(this.cursorLine),i=this._getCollapsedClosingLine(this.cursorLine);switch(e.key){case"Enter":if(e.preventDefault(),s||t)return;if(i){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);if(t>=0&&this.cursorColumn<=t)return}this.insertNewline();break;case"Backspace":if(e.preventDefault(),this._hasSelection())return this._deleteSelection(),void this.formatAndUpdate();if(i){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);return t>=0&&this.cursorColumn>t+1?void this.deleteBackward():(this.cursorColumn,void this._deleteCollapsedNode(i))}if(s&&0===this.cursorColumn)return void this._deleteCollapsedNode(s);if(t)return;if(s){const e=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>e+1)return void this._deleteCollapsedNode(s)}this.deleteBackward();break;case"Delete":if(e.preventDefault(),this._hasSelection())return this._deleteSelection(),void this.formatAndUpdate();if(i){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);return t>=0&&this.cursorColumn>t?void this.deleteForward():void this._deleteCollapsedNode(i)}if(s){const e=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>e)return void this._deleteCollapsedNode(s)}if(t)return;this.deleteForward();break;case"ArrowUp":e.preventDefault(),this._handleArrowKey(-1,0,e.shiftKey);break;case"ArrowDown":e.preventDefault(),this._handleArrowKey(1,0,e.shiftKey);break;case"ArrowLeft":e.preventDefault(),this._handleArrowKey(0,-1,e.shiftKey);break;case"ArrowRight":e.preventDefault(),this._handleArrowKey(0,1,e.shiftKey);break;case"Home":e.preventDefault(),this._handleHomeEnd("home",e.shiftKey,i);break;case"End":e.preventDefault(),this._handleHomeEnd("end",e.shiftKey,i);break;case"a":if(e.ctrlKey||e.metaKey)return e.preventDefault(),void this._selectAll();break;case"Tab":if(e.preventDefault(),e.shiftKey){const e=this._getContainingExpandedNode(this.cursorLine);if(e){const t=this.lines[e.startLine],s=t.search(/[{\[]/);this.toggleCollapse(e.nodeId),this.cursorLine=e.startLine,this.cursorColumn=s>=0?s+1:t.length,this._clearSelection(),this._scrollToCursor()}return}if(s)return void this.toggleCollapse(s.nodeId);if(i)return void this.toggleCollapse(i.nodeId);if(t)return}}insertNewline(){if(this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine],t=e.substring(0,this.cursorColumn),s=e.substring(this.cursorColumn);this.lines[this.cursorLine]=t,this.lines.splice(this.cursorLine+1,0,s),this.cursorLine++,this.cursorColumn=0}else this.lines.push(""),this.cursorLine=this.lines.length-1,this.cursorColumn=0;this.formatAndUpdate()}deleteBackward(){if(this.cursorColumn>0){const e=this.lines[this.cursorLine];this.lines[this.cursorLine]=e.substring(0,this.cursorColumn-1)+e.substring(this.cursorColumn),this.cursorColumn--}else if(this.cursorLine>0){const e=this.lines[this.cursorLine],t=this.lines[this.cursorLine-1];this.cursorColumn=t.length,this.lines[this.cursorLine-1]=t+e,this.lines.splice(this.cursorLine,1),this.cursorLine--}this.formatAndUpdate()}deleteForward(){if(this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine];this.cursorColumn<e.length?this.lines[this.cursorLine]=e.substring(0,this.cursorColumn)+e.substring(this.cursorColumn+1):this.cursorLine<this.lines.length-1&&(this.lines[this.cursorLine]=e+this.lines[this.cursorLine+1],this.lines.splice(this.cursorLine+1,1))}this.formatAndUpdate()}moveCursorSkipCollapsed(e){let t=this.cursorLine+e;for(;t>=0&&t<this.lines.length;){const s=this._getCollapsedRangeForLine(t);s&&(t=e>0?s.endLine:s.startLine);break}this.cursorLine=Math.max(0,Math.min(this.lines.length-1,t));const s=this.lines[this.cursorLine]?.length||0;this.cursorColumn=Math.min(this.cursorColumn,s),this._lastStartIndex=-1,this._scrollToCursor(),this.scheduleRender()}moveCursorHorizontal(e){const t=this.lines[this.cursorLine],s=this._getCollapsedNodeAtLine(this.cursorLine),i=this._getCollapsedClosingLine(this.cursorLine);if(e>0)if(i){const e=this._getClosingBracketPos(t);this.cursorColumn<e?this.cursorColumn=e:this.cursorColumn>=t.length?this.cursorLine<this.lines.length-1&&(this.cursorLine++,this.cursorColumn=0):this.cursorColumn++}else if(s){const e=t.search(/[{\[]/);if(this.cursorColumn<e)this.cursorColumn++;else if(this.cursorColumn===e)this.cursorColumn=e+1;else{this.cursorLine=s.endLine;const e=this.lines[this.cursorLine];this.cursorColumn=this._getClosingBracketPos(e)}}else if(this.cursorColumn>=t.length){if(this.cursorLine<this.lines.length-1){this.cursorLine++,this.cursorColumn=0;const e=this._getCollapsedRangeForLine(this.cursorLine);e&&(this.cursorLine=e.endLine,this.cursorColumn=0)}}else this.cursorColumn++;else if(i){const e=this._getClosingBracketPos(t);if(this.cursorColumn>e+1)this.cursorColumn--;else if(this.cursorColumn===e+1){this.cursorLine=i.startLine;const e=this.lines[this.cursorLine].search(/[{\[]/);this.cursorColumn=e+1}else{this.cursorLine=i.startLine;const e=this.lines[this.cursorLine].search(/[{\[]/);this.cursorColumn=e+1}}else if(s){const e=t.search(/[{\[]/);this.cursorColumn>e+1?this.cursorColumn=e+1:this.cursorColumn===e+1?this.cursorColumn=e:this.cursorColumn>0?this.cursorColumn--:this.cursorLine>0&&(this.cursorLine--,this.cursorColumn=this.lines[this.cursorLine]?.length||0)}else if(this.cursorColumn>0)this.cursorColumn--;else if(this.cursorLine>0)if(this.cursorLine--,this._getCollapsedClosingLine(this.cursorLine))this.cursorColumn=this.lines[this.cursorLine]?.length||0;else{const e=this._getCollapsedRangeForLine(this.cursorLine);if(e){this.cursorLine=e.startLine;const t=this.lines[this.cursorLine].search(/[{\[]/);this.cursorColumn=t+1}else this.cursorColumn=this.lines[this.cursorLine]?.length||0}this._lastStartIndex=-1,this._scrollToCursor(),this.scheduleRender()}_scrollToCursor(){const e=this.shadowRoot.getElementById("viewport");if(!e)return;const t=this.visibleLines.findIndex(e=>e.index===this.cursorLine);if(-1===t)return;const s=t*this.lineHeight,i=e.scrollTop,n=i+e.clientHeight;s<i?e.scrollTop=s:s+this.lineHeight>n&&(e.scrollTop=s+this.lineHeight-e.clientHeight)}moveCursor(e,t){0!==e?this.moveCursorSkipCollapsed(e):0!==t&&this.moveCursorHorizontal(t)}_handleArrowKey(e,t,s){s&&!this.selectionStart&&(this.selectionStart={line:this.cursorLine,column:this.cursorColumn}),0!==e?this.moveCursorSkipCollapsed(e):0!==t&&this.moveCursorHorizontal(t),s?this.selectionEnd={line:this.cursorLine,column:this.cursorColumn}:(this.selectionStart=null,this.selectionEnd=null)}_handleHomeEnd(e,t,s){t&&!this.selectionStart&&(this.selectionStart={line:this.cursorLine,column:this.cursorColumn}),"home"===e?(s&&(this.cursorLine=s.startLine),this.cursorColumn=0):this.cursorLine<this.lines.length&&(this.cursorColumn=this.lines[this.cursorLine].length),t?this.selectionEnd={line:this.cursorLine,column:this.cursorColumn}:(this.selectionStart=null,this.selectionEnd=null),this._lastStartIndex=-1,this._scrollToCursor(),this.scheduleRender()}_selectAll(){this.selectionStart={line:0,column:0};const e=this.lines.length-1;this.selectionEnd={line:e,column:this.lines[e]?.length||0},this.cursorLine=e,this.cursorColumn=this.lines[e]?.length||0,this._lastStartIndex=-1,this._scrollToCursor(),this.scheduleRender()}_getSelectedText(){if(!this.selectionStart||!this.selectionEnd)return"";const{start:e,end:t}=this._normalizeSelection();if(!e||!t)return"";if(e.line===t.line)return this.lines[e.line].substring(e.column,t.column);let s=this.lines[e.line].substring(e.column)+"\n";for(let i=e.line+1;i<t.line;i++)s+=this.lines[i]+"\n";return s+=this.lines[t.line].substring(0,t.column),s}_normalizeSelection(){if(!this.selectionStart||!this.selectionEnd)return{start:null,end:null};const e=this.selectionStart,t=this.selectionEnd;return e.line<t.line||e.line===t.line&&e.column<=t.column?{start:e,end:t}:{start:t,end:e}}_hasSelection(){return!(!this.selectionStart||!this.selectionEnd||this.selectionStart.line===this.selectionEnd.line&&this.selectionStart.column===this.selectionEnd.column)}_clearSelection(){this.selectionStart=null,this.selectionEnd=null}_deleteSelection(){if(!this._hasSelection())return!1;const{start:e,end:t}=this._normalizeSelection();if(e.line===t.line){const s=this.lines[e.line];this.lines[e.line]=s.substring(0,e.column)+s.substring(t.column)}else{const s=this.lines[e.line].substring(0,e.column),i=this.lines[t.line].substring(t.column);this.lines[e.line]=s+i,this.lines.splice(e.line+1,t.line-e.line)}return this.cursorLine=e.line,this.cursorColumn=e.column,this.selectionStart=null,this.selectionEnd=null,!0}insertText(e){if(this._hasSelection()&&this._deleteSelection(),!this._getCollapsedRangeForLine(this.cursorLine)){if(this._getCollapsedClosingLine(this.cursorLine)){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);if(this.cursorColumn<=t)return}if(this._getCollapsedNodeAtLine(this.cursorLine)){const e=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>e)return}if(0===this.lines.length){const t=e.split("\n");this.lines=t,this.cursorLine=t.length-1,this.cursorColumn=t[t.length-1].length}else if(this.cursorLine<this.lines.length){const t=this.lines[this.cursorLine];this.lines[this.cursorLine]=t.substring(0,this.cursorColumn)+e+t.substring(this.cursorColumn),this.cursorColumn+=e.length}this.formatAndUpdate()}}handlePaste(e){e.preventDefault();const t=e.clipboardData.getData("text/plain");if(t){const e=0===this.lines.length;this.insertText(t),e&&this.lines.length>0&&(this.renderTimer&&(cancelAnimationFrame(this.renderTimer),this.renderTimer=null),this.autoCollapseCoordinates())}}handleCopy(e){e.preventDefault(),this._hasSelection()?e.clipboardData.setData("text/plain",this._getSelectedText()):e.clipboardData.setData("text/plain",this.getContent())}handleCut(e){e.preventDefault(),this._hasSelection()?(e.clipboardData.setData("text/plain",this._getSelectedText()),this._deleteSelection(),this.formatAndUpdate()):(e.clipboardData.setData("text/plain",this.getContent()),this.lines=[],this.cursorLine=0,this.cursorColumn=0,this.formatAndUpdate())}_getPositionFromClick(e){const t=this.shadowRoot.getElementById("viewport"),s=this.shadowRoot.getElementById("linesContainer"),i=t.getBoundingClientRect(),n=e.clientY-i.top+t.scrollTop-8,o=Math.floor(n/this.lineHeight);let r=0,l=0;if(o>=0&&o<this.visibleLines.length){const n=this.visibleLines[o];r=n.index;const a=s?.querySelector(`.line[data-line-index="${n.index}"]`),c=this._getCharWidth();if(a){const t=a.getBoundingClientRect(),s=e.clientX-t.left,i=Math.round(s/c),o=n.content?.length||0;l=Math.max(0,Math.min(i,o))}else{const s=12,o=e.clientX-i.left+t.scrollLeft-s,r=Math.round(o/c),a=n.content?.length||0;l=Math.max(0,Math.min(r,a))}}return{line:r,column:l}}handleGutterClick(e){const t=e.target.closest(".visibility-button");if(t)this.toggleFeatureVisibility(t.dataset.featureKey);else if(e.target.classList.contains("collapse-button")){const t=e.target.dataset.nodeId;return void this.toggleCollapse(t)}}handleEditorClick(e){this._blockRender=!1;const t=e.target.closest(".line.has-visibility");if(t){const s=t.getBoundingClientRect();if(e.clientX-s.left<14){e.preventDefault(),e.stopPropagation();const s=t.dataset.featureKey;return void(s&&this.toggleFeatureVisibility(s))}}if(e.target.classList.contains("json-color")){const t=e.target.getBoundingClientRect(),s=e.clientX-t.left;if(s<0&&s>=-8){e.preventDefault(),e.stopPropagation();const t=e.target.dataset.color,s=e.target.closest(".line");if(s){const i=parseInt(s.dataset.lineIndex),n=this.lines[i].match(/"([\w-]+)"\s*:\s*"#/);n&&this.showColorPicker(e.target,i,t,n[1])}return}}if(e.target.classList.contains("json-boolean")){const t=e.target.getBoundingClientRect(),s=e.clientX-t.left;if(s<0&&s>=-8){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".line");if(t){const e=parseInt(t.dataset.lineIndex),s=this.lines[e].match(/"([\w-]+)"\s*:\s*(true|false)/);if(s){const t="true"===s[2];this.updateBooleanValue(e,!t,s[1])}}return}}}toggleCollapse(e){this.collapsedNodes.has(e)?this.collapsedNodes.delete(e):this.collapsedNodes.add(e),this.updateView(),this._lastStartIndex=-1,this.scheduleRender()}autoCollapseCoordinates(){const e=this._findCollapsibleRanges();for(const t of e)"coordinates"===t.nodeKey&&this.collapsedNodes.add(t.nodeId);this.updateModel(),this.scheduleRender()}toggleFeatureVisibility(e){this.hiddenFeatures.has(e)?this.hiddenFeatures.delete(e):this.hiddenFeatures.add(e),this.updateView(),this.scheduleRender(),this.emitChange()}showColorPicker(e,t,s,i){const n=document.querySelector(".geojson-color-picker-anchor");n&&n.remove();const o=document.createElement("div");o.className="geojson-color-picker-anchor";const r=e.getBoundingClientRect();o.style.cssText=`\n position: fixed;\n left: ${r.left-8}px;\n top: ${r.top+r.height}px;\n width: 10px;\n height: 10px;\n z-index: 9998;\n `,document.body.appendChild(o);const l=document.createElement("input");l.type="color",l.value=s,l.className="geojson-color-picker-input",l.style.cssText="\n position: absolute;\n left: 0;\n top: 0;\n width: 10px;\n height: 10px;\n opacity: 0;\n border: none;\n padding: 0;\n cursor: pointer;\n ",o.appendChild(l),l.addEventListener("input",e=>{this.updateColorValue(t,e.target.value,i)});const a=e=>{e.target!==l&&(document.removeEventListener("click",a,!0),o.remove())};l._closeListener=a,setTimeout(()=>{document.addEventListener("click",a,!0)},100),l.focus(),l.click()}updateColorValue(e,t,s){const i=new RegExp(`"${s}"\\s*:\\s*"#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})"`);this.lines[e]=this.lines[e].replace(i,`"${s}": "${t}"`),this.updateView(),this.scheduleRender(),this.emitChange()}updateBooleanValue(e,t,s){const i=new RegExp(`"${s}"\\s*:\\s*(true|false)`);this.lines[e]=this.lines[e].replace(i,`"${s}": ${t}`),this.updateView(),this.scheduleRender(),this.emitChange()}formatAndUpdate(){try{const e="["+this.lines.join("\n")+"]",t=JSON.parse(e),s=JSON.stringify(t,null,2).split("\n");this.lines=s.slice(1,-1)}catch(e){}this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.emitChange()}emitChange(){const e=this.getContent(),t=this.prefix+e+this.suffix;try{let s=JSON.parse(t);this.hiddenFeatures.size>0&&(s.features=s.features.filter(e=>{const t=this._getFeatureKey(e);return!this.hiddenFeatures.has(t)}));const i=this._validateGeoJSON(s);i.length>0?this.dispatchEvent(new CustomEvent("error",{detail:{error:i.join("; "),errors:i,content:e},bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0,composed:!0}))}catch(s){this.dispatchEvent(new CustomEvent("error",{detail:{error:s.message,content:e},bubbles:!0,composed:!0}))}}updateReadonly(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=this.shadowRoot.getElementById("clearBtn");e&&(e.readOnly=this.readonly),t&&(t.hidden=this.readonly)}updatePlaceholderVisibility(){const e=this.shadowRoot.getElementById("placeholderLayer");e&&(e.style.display=this.lines.length>0?"none":"block")}updatePlaceholderContent(){const e=this.shadowRoot.getElementById("placeholderLayer");e&&(e.textContent=this.placeholder),this.updatePlaceholderVisibility()}updatePrefixSuffix(){const e=this.shadowRoot.getElementById("editorPrefix"),t=this.shadowRoot.getElementById("editorSuffix");e&&(e.textContent=this.prefix),t&&(t.textContent=this.suffix)}updateThemeCSS(){const e=this.getAttribute("dark-selector")||".dark",t=this._parseSelectorToHostRule(e);let s=this.shadowRoot.getElementById("theme-styles");s||(s=document.createElement("style"),s.id="theme-styles",this.shadowRoot.insertBefore(s,this.shadowRoot.firstChild));const i=e=>Object.entries(e).map(([e,t])=>{return`--${s=e,s.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${t};`;var s}).join("\n "),n=i(this.themes.light||{});let o=n?`:host {\n ${n}\n }\n`:"";o+=`${t} {\n ${i({bgColor:"#2b2b2b",textColor:"#a9b7c6",caretColor:"#bbbbbb",gutterBg:"#313335",gutterBorder:"#3c3f41",gutterText:"#606366",jsonKey:"#9876aa",jsonString:"#6a8759",jsonNumber:"#6897bb",jsonBoolean:"#cc7832",jsonNull:"#cc7832",jsonPunct:"#a9b7c6",jsonError:"#ff6b68",controlColor:"#cc7832",controlBg:"#3c3f41",controlBorder:"#5a5a5a",geojsonKey:"#9876aa",geojsonType:"#6a8759",geojsonTypeInvalid:"#ff6b68",jsonKeyInvalid:"#ff6b68",...this.themes.dark})}\n }`,s.textContent=o}_parseSelectorToHostRule(e){return e?e.startsWith(".")&&!e.includes(" ")?`:host(${e})`:`:host-context(${e})`:':host([data-color-scheme="dark"])'}setTheme(e){e.dark&&(this.themes.dark={...this.themes.dark,...e.dark}),e.light&&(this.themes.light={...this.themes.light,...e.light}),this.updateThemeCSS()}resetTheme(){this.themes={dark:{},light:{}},this.updateThemeCSS()}_getFeatureKey(e){if(!e)return null;if(void 0!==e.id)return`id:${e.id}`;if(void 0!==e.properties?.id)return`prop:${e.properties.id}`;const t=e.geometry?.type||"null",s=JSON.stringify(e.geometry?.coordinates||[]);let i=0;for(let n=0;n<s.length;n++)i=(i<<5)-i+s.charCodeAt(n),i&=i;return`hash:${t}:${i.toString(36)}`}_countBrackets(e,t){const s="{"===t?"}":"]";let i=0,n=0,o=!1,r=!1;for(const l of e)r?r=!1:"\\"===l&&o?r=!0:'"'!==l?o||(l===t&&i++,l===s&&n++):o=!o;return{open:i,close:n}}_findCollapsibleRanges(){const e=[];for(const[t,s]of this._lineToNodeId){const i=this._nodeIdToLines.get(s);if(!i)continue;const n=this.lines[t];if(!n)continue;const o=n.match(/^\s*"([^"]+)"\s*:\s*([{\[])/),r=!o&&n.match(/^\s*([{\[]),?\s*$/);if(!o&&!r)continue;const l=o?o[2]:r[1];e.push({startLine:i.startLine,endLine:i.endLine,nodeKey:i.nodeKey||(o?o[1]:`__root_${t}`),nodeId:s,openBracket:l,isRootFeature:!!r})}return e.sort((e,t)=>e.startLine-t.startLine),e}_findClosingLine(e,t){let s=1;const i=this.lines[e],n=i.indexOf(t);if(-1!==n){const o=i.substring(n+1),r=this._countBrackets(o,t);if(s+=r.open-r.close,0===s)return e}for(let o=e+1;o<this.lines.length;o++){const e=this._countBrackets(this.lines[o],t);if(s+=e.open-e.close,0===s)return o}return-1}_buildContextMap(){const e=/* @__PURE__ */new Map,t=[];let s=null;for(let i=0;i<this.lines.length;i++){const n=this.lines[i],o=t[t.length-1]?.context||"Feature";e.set(i,o),/"geometry"\s*:/.test(n)?s="geometry":/"properties"\s*:/.test(n)?s="properties":/"features"\s*:/.test(n)&&(s="Feature");const r=(n.match(/\{/g)||[]).length,l=(n.match(/\}/g)||[]).length,a=(n.match(/\[/g)||[]).length,c=(n.match(/\]/g)||[]).length;for(let e=0;e<r+a;e++)t.push({context:s||o,isArray:e>=r}),s=null;for(let e=0;e<l+c&&t.length>0;e++)t.pop()}return e}_highlightSyntax(s,i,n){if(!s)return"";let o=s,r=null;if(n?.collapseButton?.isCollapsed){const e=s.match(/^(\s*"[^"]+"\s*:\s*)([{\[])/),t=!e&&s.match(/^(\s*)([{\[]),?\s*$/);e?(o=e[1]+e[2],r=e[2]):t&&(o=t[1]+t[2],r=t[2])}let l=o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");if(l=l.replace(/([{}[\],:])/g,'<span class="json-punctuation">$1</span>'),l=l.replace(/"([^"]+)"(<span class="json-punctuation">:<\/span>)/g,(t,s,n)=>"properties"!==i&&e.includes(s)?`<span class="geojson-key">"${s}"</span>${n}`:`<span class="json-key">"${s}"</span>${n}`),"properties"!==i&&(l=l.replace(/<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>(\s*)"([^"]*)"/g,(e,s,i)=>`<span class="geojson-key">"type"</span><span class="json-punctuation">:</span>${s}<span class="${"Feature"===i||"FeatureCollection"===i||t.includes(i)?"geojson-type":"geojson-type-invalid"}">"${i}"</span>`)),l=l.replace(/(<span class="json-punctuation">:<\/span>)(\s*)"([^"]*)"/g,(e,t,s,i)=>e.includes("geojson-type")||e.includes("json-string")?e:/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(i)?`${t}${s}<span class="json-string json-color" data-color="${i}" style="--swatch-color: ${i}">"${i}"</span>`:`${t}${s}<span class="json-string">"${i}"</span>`),l=l.replace(/(<span class="json-punctuation">:<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,'$1$2<span class="json-number">$3</span>'),l=l.replace(/(<span class="json-punctuation">[\[,]<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,'$1$2<span class="json-number">$3</span>'),l=l.replace(/^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim,'$1<span class="json-number">$2</span>'),l=l.replace(/(<span class="json-punctuation">:<\/span>)(\s*)(true|false)/g,(e,t,s,i)=>`${t}${s}<span class="json-boolean${"true"===i?" json-bool-true":" json-bool-false"}">${i}</span>`),l=l.replace(/(<span class="json-punctuation">:<\/span>)(\s*)(null)/g,'$1$2<span class="json-null">$3</span>'),r){const e="["===r?"collapsed-bracket-array":"collapsed-bracket-object";l=l.replace(new RegExp(`<span class="json-punctuation">\\${r}<\\/span>$`),`<span class="${e}">${r}</span>`)}return l=l.replace(/(<\/span>|^)([^<]+)(<span|$)/g,(e,t,s,i)=>{if(!s||/^\s*$/.test(s))return e;const n=s.split(/(\s+)/);let o=!1;const r=n.map(e=>/^\s*$/.test(e)?e:(o=!0,`<span class="json-error">${e}</span>`)).join("");return o?t+r+i:e}),l}_validateGeoJSON(e){const s=[];return e.features?(e.features.forEach((e,i)=>{"Feature"!==e.type&&s.push(`features[${i}]: type must be "Feature"`),e.geometry&&e.geometry.type&&(t.includes(e.geometry.type)||s.push(`features[${i}].geometry: invalid type "${e.geometry.type}"`))}),s):s}set(e){if(!Array.isArray(e))throw new Error("set() expects an array");const t=e.map(e=>JSON.stringify(e,null,2)).join(",\n");this.setValue(t)}add(e){const t=this._parseFeatures();t.push(e),this.set(t)}insertAt(e,t){const s=this._parseFeatures(),i=t<0?s.length+t:t;s.splice(Math.max(0,Math.min(i,s.length)),0,e),this.set(s)}removeAt(e){const t=this._parseFeatures(),s=e<0?t.length+e:e;if(s>=0&&s<t.length){const e=t.splice(s,1)[0];return this.set(t),e}}removeAll(){const e=this._parseFeatures();return this.lines=[],this.collapsedNodes.clear(),this.hiddenFeatures.clear(),this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.emitChange(),e}get(e){const t=this._parseFeatures();return t[e<0?t.length+e:e]}getAll(){return this._parseFeatures()}emit(){this.emitChange()}_parseFeatures(){try{const e=this.lines.join("\n");return e.trim()?JSON.parse("["+e+"]"):[]}catch(e){return[]}}}customElements.get("geojson-editor")||customElements.define("geojson-editor",s);export{s as default};
9
+ const e=["type","geometry","properties","coordinates","id","features"],t=["Point","MultiPoint","LineString","MultiLineString","Polygon","MultiPolygon"],s=/"geometry"\s*:/,i=/"properties"\s*:/,n=/"features"\s*:/,o=/^(\s*"[^"]+"\s*:\s*)([{\[])/,r=/^(\s*)([{\[]),?\s*$/,l=/&/g,a=/</g,h=/>/g,c=/([{}[\],:])/g,d=/"([^"]+)"(<span class="json-punctuation">:<\/span>)/g,u=/<span class="geojson-key">"type"<\/span><span class="json-punctuation">:<\/span>(\s*)"([^"]*)"/g,p=/(<span class="json-punctuation">:<\/span>)(\s*)"([^"]*)"/g,g=/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/,f=/(<span class="json-punctuation">:<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,m=/(<span class="json-punctuation">[\[,]<\/span>)(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gi,C=/^(\s*)(-?\d+\.?\d*(?:e[+-]?\d+)?)/gim,y=/(<span class="json-punctuation">:<\/span>)(\s*)(true|false)/g,v=/(<span class="json-punctuation">:<\/span>)(\s*)(null)/g,b=/(<\/span>|^)([^<]+)(<span|$)/g,L=/^\s*$/,_=/(\s+)/;class x extends HTMLElement{constructor(){super(),this.lines=[],this.collapsedNodes=/* @__PURE__ */new Set,this.hiddenFeatures=/* @__PURE__ */new Set,this._nodeIdCounter=0,this._lineToNodeId=/* @__PURE__ */new Map,this._nodeIdToLines=/* @__PURE__ */new Map,this.visibleLines=[],this.lineMetadata=/* @__PURE__ */new Map,this.featureRanges=/* @__PURE__ */new Map,this.viewportHeight=0,this.lineHeight=19.5,this.bufferLines=5,this._lastStartIndex=-1,this._lastEndIndex=-1,this._lastTotalLines=-1,this._scrollRaf=null,this.cursorLine=0,this.cursorColumn=0,this.selectionStart=null,this.selectionEnd=null,this.renderTimer=null,this.inputTimer=null,this.themes={dark:{},light:{}},this._undoStack=[],this._redoStack=[],this._maxHistorySize=100,this._lastActionTime=0,this._lastActionType=null,this._groupingDelay=500,this._isSelecting=!1,this._isComposing=!1,this._blockRender=!1,this._charWidth=null,this._contextMapCache=null,this._contextMapLinesLength=0,this._contextMapFirstLine=void 0,this._contextMapLastLine=void 0,this.attachShadow({mode:"open"})}_invalidateRenderCache(){this._lastStartIndex=-1,this._lastEndIndex=-1,this._lastTotalLines=-1}_createSnapshot(){return{lines:[...this.lines],cursorLine:this.cursorLine,cursorColumn:this.cursorColumn,timestamp:Date.now()}}_restoreSnapshot(e){this.lines=[...e.lines],this.cursorLine=e.cursorLine,this.cursorColumn=e.cursorColumn,this.updateModel(),this._invalidateRenderCache(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.emitChange()}_saveToHistory(e="edit"){const t=Date.now();if(!(e===this._lastActionType&&t-this._lastActionTime<this._groupingDelay)){const e=this._createSnapshot();this._undoStack.push(e),this._undoStack.length>this._maxHistorySize&&this._undoStack.shift(),this._redoStack=[]}this._lastActionTime=t,this._lastActionType=e}undo(){if(0===this._undoStack.length)return!1;this._redoStack.push(this._createSnapshot());const e=this._undoStack.pop();return this._restoreSnapshot(e),this._lastActionType=null,this._lastActionTime=0,!0}redo(){if(0===this._redoStack.length)return!1;this._undoStack.push(this._createSnapshot());const e=this._redoStack.pop();return this._restoreSnapshot(e),this._lastActionType=null,this._lastActionTime=0,!0}clearHistory(){this._undoStack=[],this._redoStack=[],this._lastActionType=null,this._lastActionTime=0}canUndo(){return this._undoStack.length>0}canRedo(){return this._redoStack.length>0}_generateNodeId(){return"node_"+ ++this._nodeIdCounter}_getCollapsedRangeForLine(e){for(const[t,s]of this._nodeIdToLines)if(this.collapsedNodes.has(t)&&e>s.startLine&&e<s.endLine)return{nodeId:t,...s};return null}_getCollapsedClosingLine(e){for(const[t,s]of this._nodeIdToLines)if(this.collapsedNodes.has(t)&&e===s.endLine)return{nodeId:t,...s};return null}_getClosingBracketPos(e){return Math.max(e.lastIndexOf("]"),e.lastIndexOf("}"))}_getCollapsedNodeAtLine(e){const t=this._lineToNodeId.get(e);return t&&this.collapsedNodes.has(t)?{nodeId:t,...this._nodeIdToLines.get(t)}:null}_getCollapsibleNodeAtLine(e){const t=this._lineToNodeId.get(e);if(t){const e=this._nodeIdToLines.get(t);return{nodeId:t,isCollapsed:this.collapsedNodes.has(t),...e}}return null}_getContainingExpandedNode(e){let t=null;for(const[s,i]of this._nodeIdToLines)this.collapsedNodes.has(s)||e>=i.startLine&&e<=i.endLine&&(!t||i.endLine-i.startLine<t.endLine-t.startLine)&&(t={nodeId:s,...i});return t}_deleteCollapsedNode(e){this._saveToHistory("delete");const t=e.endLine-e.startLine+1;this.lines.splice(e.startLine,t),this.cursorLine=Math.min(e.startLine,this.lines.length-1),this.cursorColumn=0,this.formatAndUpdate()}_rebuildNodeIdMappings(){const e=new Set(this.collapsedNodes),t=/* @__PURE__ */new Map;for(const[n,o]of this._nodeIdToLines)o.nodeKey&&t.set(n,o.nodeKey);const s=[];for(const n of e){const e=t.get(n);e&&s.push(e)}this._nodeIdCounter=0,this._lineToNodeId.clear(),this._nodeIdToLines.clear(),this.collapsedNodes.clear();const i=/* @__PURE__ */new Map;for(let n=0;n<this.lines.length;n++){const e=this.lines[n],t=e.match(/^\s*"([^"]+)"\s*:\s*([{\[])/),o=!t&&e.match(/^\s*([{\[]),?\s*$/);if(!t&&!o)continue;let r,l;t?(r=t[1],l=t[2]):(l=o[1],r=`__root_${l}_${n}`);const a=e.substring(e.indexOf(l)+1),h=this._countBrackets(a,l);if(h.close>h.open)continue;const c=this._findClosingLine(n,l);if(-1===c||c===n)continue;const d=this._generateNodeId();this._lineToNodeId.set(n,d),this._nodeIdToLines.set(d,{startLine:n,endLine:c,nodeKey:r,isRootFeature:!!o});const u=i.get(r)||0;i.set(r,u+1);const p=s.indexOf(r);-1!==p&&(s.splice(p,1),this.collapsedNodes.add(d))}}static get observedAttributes(){return["readonly","value","placeholder","dark-selector"]}connectedCallback(){this.render(),this.setupEventListeners(),this.updatePrefixSuffix(),this.updateThemeCSS(),this.value&&this.setValue(this.value),this.updatePlaceholderVisibility()}disconnectedCallback(){this.renderTimer&&clearTimeout(this.renderTimer),this.inputTimer&&clearTimeout(this.inputTimer);const e=document.querySelector(".geojson-color-picker-input");e&&(e._closeListener&&document.removeEventListener("click",e._closeListener,!0),e.remove())}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"value":this.setValue(s);break;case"readonly":this.updateReadonly();break;case"placeholder":this.updatePlaceholderContent();break;case"dark-selector":this.updateThemeCSS()}}get readonly(){return this.hasAttribute("readonly")}get value(){return this.getAttribute("value")||""}get placeholder(){return this.getAttribute("placeholder")||""}get prefix(){return'{"type": "FeatureCollection", "features": ['}get suffix(){return"]}"}render(){const e=document.createElement("style");e.textContent=':host *,:host *:before,:host *:after{box-sizing:border-box;font: 13px/1.5 Courier New,Courier,monospace;font-variant:normal;letter-spacing:0;word-spacing:0;text-transform:none;text-decoration:none;text-indent:0}:host{--line-height: 19.5px;--gutter-width: 50px;--editor-padding-y: 8px;--editor-padding-x: 12px;display:flex;flex-direction:column;position:relative;width:100%;height:400px;border-radius:4px;overflow:hidden}:host([readonly]) .editor-wrapper:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(128,128,128,.08),rgba(128,128,128,.08) 3px,transparent 3px,transparent 12px);z-index:1}:host([readonly]) .hidden-textarea{cursor:text}.editor-wrapper{position:relative;width:100%;flex:1;background:var(--bg-color, #fff);display:flex;overflow:hidden}.gutter{width:var(--gutter-width);background:var(--gutter-bg, #f0f0f0);border-right:1px solid var(--gutter-border, #e0e0e0);overflow:hidden;flex-shrink:0;position:relative}.gutter-scroll{position:absolute;inset:0;overflow:hidden;padding:8px 0}.gutter-scroll-content{position:relative;width:100%}.gutter-content{position:absolute;top:0;left:0;right:0;will-change:transform}.gutter-line{height:var(--line-height);display:flex;align-items:center;justify-content:flex-end;padding-right:4px}.line-number{font-size:11px;color:var(--gutter-text, #999);-webkit-user-select:none;user-select:none;min-width:20px;text-align:right}.collapse-column{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.collapse-button{width:12px;height:12px;border-radius:2px;cursor:pointer;transition:transform .1s;flex-shrink:0;background:transparent;border:none;color:var(--json-punct, #a9b7c6);font-size:10px;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;opacity:0;transition:opacity .15s}.collapse-button.collapsed,.gutter:hover .collapse-button{opacity:1}.collapse-button:hover{transform:scale(1.2)}@media(hover:none),(pointer:coarse){.collapse-button{opacity:1}}.editor-content{position:relative;flex:1;overflow:hidden}.hidden-textarea{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;padding:0;margin:0;border:none;outline:none;resize:none;overflow:hidden;z-index:-1;pointer-events:none;caret-color:transparent}.viewport{position:absolute;inset:0;overflow:auto;padding:var(--editor-padding-y) var(--editor-padding-x);overscroll-behavior:contain}.scroll-content{position:relative;width:100%}.lines-container{position:absolute;top:0;left:0;right:0;will-change:transform}.line{height:var(--line-height);white-space:pre;display:block;position:relative}.cursor{position:absolute;width:2px;height:1em;background:var(--caret-color, #000);top:.15em;pointer-events:none;animation:cursor-blink 1s step-end infinite}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:0}}.selection{position:absolute;height:100%;top:0;background:var(--selection-color, rgba(51, 153, 255, .3));pointer-events:none;z-index:0}.line-hidden>span{opacity:.35;filter:grayscale(50%)}.placeholder-layer{position:absolute;top:var(--editor-padding-y);left:var(--editor-padding-x);color:#6a6a6a;pointer-events:none;z-index:0;white-space:pre}.json-key{color:var(--json-key, #660e7a)}.json-string{color:var(--json-string, #008000)}.json-number{color:var(--json-number, #00f)}.json-boolean,.json-null{color:var(--json-boolean, #000080)}.json-punctuation{color:var(--json-punct, #000)}.json-key-invalid{color:var(--json-key-invalid, #f00)}.json-error{color:var(--json-error, #f00)}.geojson-key{color:var(--geojson-key, #660e7a);font-weight:600}.geojson-type{color:var(--geojson-type, #008000);font-weight:600}.geojson-type-invalid{color:var(--geojson-type-invalid, #f00);font-weight:600}.collapsed-bracket-array,.collapsed-bracket-object{color:var(--json-punct, #000)}.collapsed-bracket-array:after,.collapsed-bracket-object:after{content:"…";color:var(--json-punct, #888)}.prefix-wrapper,.suffix-wrapper{display:flex;flex-shrink:0;background:var(--bg-color, #fff)}.prefix-gutter,.suffix-gutter{width:var(--gutter-width);background:var(--gutter-bg, #f0f0f0);border-right:1px solid var(--gutter-border, #e0e0e0);flex-shrink:0}.editor-prefix,.editor-suffix{flex:1;padding:4px 12px;color:var(--text-color, #000);background:var(--bg-color, #fff);-webkit-user-select:none;user-select:none;white-space:pre-wrap;word-wrap:break-word;opacity:.6}.prefix-wrapper{border-bottom:1px solid rgba(255,255,255,.1);position:relative}.suffix-wrapper{border-top:1px solid rgba(255,255,255,.1);position:relative}.info-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color, #000);opacity:.15;cursor:pointer;font-size:.7rem;width:1rem;height:1rem;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .2s;font-family:sans-serif}.info-btn:hover{opacity:.5}.clear-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color, #000);opacity:.3;cursor:pointer;font-size:.65rem;width:1rem;height:1rem;padding:.15rem 0 0;border-radius:3px;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}.clear-btn:hover{opacity:.7;background:#ffffff1a}.clear-btn[hidden]{display:none}.viewport::-webkit-scrollbar{width:10px;height:10px}.viewport::-webkit-scrollbar-track{background:var(--control-bg, #e8e8e8)}.viewport::-webkit-scrollbar-thumb{background:var(--control-border, #c0c0c0);border-radius:5px}.viewport::-webkit-scrollbar-thumb:hover{background:var(--control-color, #000080)}.viewport{scrollbar-width:thin;scrollbar-color:var(--control-border, #c0c0c0) var(--control-bg, #e8e8e8)}.json-color,.json-boolean{position:relative}.json-color:before,.json-boolean:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);margin-top:-1px;width:8px;height:8px;border-radius:2px;cursor:pointer}.json-color:hover:before,.json-boolean:hover:before{transform:translateY(-50%) scale(1.2);border-color:var(--control-color, #000080)}.json-color:before{background-color:var(--swatch-color);border:1px solid var(--json-punct, #a9b7c6)}.json-boolean:before{border:1.5px solid var(--control-border, #c0c0c0);background:transparent}.json-bool-true:before{content:"✔";border-color:var(--control-color, #000080);color:var(--control-color, #000080);font-size:8px;display:flex;align-items:center;justify-content:center;line-height:8px}.line.has-visibility:before{content:"👁";position:absolute;left:0;top:3px;font-size:10px;color:var(--control-color, #000080);opacity:.6;cursor:pointer;z-index:1}.line.has-visibility:hover:before{opacity:1;transform:scale(1.15)}.line.has-visibility.feature-hidden:before{opacity:.5}';const t=document.createElement("div");for(t.innerHTML=function(e="",t=""){return`\n <div class="prefix-wrapper">\n <div class="prefix-gutter"></div>\n <div class="editor-prefix" id="editorPrefix"></div>\n <button class="info-btn" id="infoBtn" title="@softwarity/geojson-editor v${t}" aria-label="About">ⓘ</button>\n </div>\n <div class="editor-wrapper">\n <div class="gutter">\n <div class="gutter-scroll" id="gutterScroll">\n <div class="gutter-scroll-content" id="gutterScrollContent">\n <div class="gutter-content" id="gutterContent"></div>\n </div>\n </div>\n </div>\n <div class="editor-content">\n <div class="placeholder-layer" id="placeholderLayer">${s=e,s?s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"):""}</div>\n <textarea\n class="hidden-textarea"\n id="hiddenTextarea"\n spellcheck="false"\n autocomplete="off"\n autocorrect="off"\n autocapitalize="off"\n tabindex="0"\n ></textarea>\n <div class="viewport" id="viewport">\n <div class="scroll-content" id="scrollContent">\n <div class="lines-container" id="linesContainer"></div>\n </div>\n </div>\n </div>\n </div>\n <div class="suffix-wrapper">\n <div class="suffix-gutter"></div>\n <div class="editor-suffix" id="editorSuffix"></div>\n <button class="clear-btn" id="clearBtn" title="Clear editor">✕</button>\n </div>\n `;var s}(this.placeholder,"1.0.16"),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(e);t.firstChild;)this.shadowRoot.appendChild(t.firstChild)}setupEventListeners(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=this.shadowRoot.getElementById("viewport"),s=this.shadowRoot.getElementById("gutterContent"),i=this.shadowRoot.querySelector(".gutter"),n=this.shadowRoot.getElementById("clearBtn"),o=this.shadowRoot.querySelector(".editor-wrapper");this._isSelecting=!1,t.addEventListener("click",e=>{this.handleEditorClick(e)},!0),t.addEventListener("mousedown",t=>{const s=t.target,i=s.closest(".line.has-visibility");if(i){const e=i.getBoundingClientRect();if(t.clientX-e.left<14)return void(this._blockRender=!0)}if(s.classList.contains("json-color")||s.classList.contains("json-boolean")){const e=s.getBoundingClientRect(),i=t.clientX-e.left;if(i<0&&i>=-8)return void(this._blockRender=!0)}t.preventDefault();const n=this._getPositionFromClick(t);t.shiftKey&&this.selectionStart?(this.selectionEnd=n,this.cursorLine=n.line,this.cursorColumn=n.column):(this.cursorLine=n.line,this.cursorColumn=n.column,this.selectionStart={line:n.line,column:n.column},this.selectionEnd=null,this._isSelecting=!0),e.focus(),this._invalidateRenderCache(),this.scheduleRender()}),t.addEventListener("mousemove",e=>{if(!this._isSelecting)return;const s=this._getPositionFromClick(e);this.selectionEnd=s,this.cursorLine=s.line,this.cursorColumn=s.column;const i=t.getBoundingClientRect();e.clientY<i.top+30?t.scrollTop-=20:e.clientY>i.bottom-30&&(t.scrollTop+=20),this._invalidateRenderCache(),this.scheduleRender()}),document.addEventListener("mouseup",()=>{this._isSelecting=!1}),e.addEventListener("focus",()=>{o.classList.add("focused"),this._invalidateRenderCache(),this.scheduleRender()}),e.addEventListener("blur",()=>{o.classList.remove("focused"),this._invalidateRenderCache(),this.scheduleRender()});let r=!1;t.addEventListener("scroll",()=>{r||(this.syncGutterScroll(),this._scrollRaf||(this._scrollRaf=requestAnimationFrame(()=>{this._scrollRaf=null,r=!0,this.renderViewport(),r=!1})))}),e.addEventListener("compositionstart",()=>{this._isComposing=!0}),e.addEventListener("compositionend",()=>{this._isComposing=!1,this.handleInput()}),e.addEventListener("input",()=>{this._isComposing||this.handleInput()}),e.addEventListener("keydown",e=>{this.handleKeydown(e)}),e.addEventListener("paste",e=>{this.handlePaste(e)}),e.addEventListener("copy",e=>{this.handleCopy(e)}),e.addEventListener("cut",e=>{this.handleCut(e)}),s.addEventListener("click",e=>{this.handleGutterClick(e)}),i.addEventListener("mousedown",e=>{e.preventDefault()}),i.addEventListener("wheel",e=>{e.preventDefault(),t.scrollTop+=e.deltaY}),n.addEventListener("click",()=>{this.removeAll()}),this.updateReadonly()}setValue(e,t=!0){if(this.lines.length>0&&this._saveToHistory("setValue"),e&&e.trim())try{const t="["+e+"]",s=JSON.parse(t),i=JSON.stringify(s,null,2).split("\n");this.lines=i.slice(1,-1)}catch(s){this.lines=e.split("\n")}else this.lines=[];this.collapsedNodes.clear(),this.hiddenFeatures.clear(),this._lineToNodeId.clear(),this._nodeIdToLines.clear(),this.cursorLine=0,this.cursorColumn=0,this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),t&&this.lines.length>0&&requestAnimationFrame(()=>{this.autoCollapseCoordinates()}),this.emitChange()}getContent(){return this.lines.join("\n")}updateModel(){this._contextMapCache=null,this._rebuildNodeIdMappings(),this.computeFeatureRanges(),this.computeLineMetadata(),this.computeVisibleLines()}updateView(){this.computeLineMetadata(),this.computeVisibleLines()}computeFeatureRanges(){this.featureRanges.clear();try{const e=this.lines.join("\n"),t=this.prefix+e+this.suffix,s=JSON.parse(t);if(!s.features)return;let i=0,n=0,o=!1,r=-1,l=null;for(let a=0;a<this.lines.length;a++){const e=this.lines[a];if(!o&&/"type"\s*:\s*"Feature"/.test(e)){let e=a;for(let t=a;t>=0;t--){const s=this.lines[t].trim();if("{"===s||"{,"===s){e=t;break}}r=e,o=!0,n=1;for(let t=e;t<=a;t++){const s=this._countBrackets(this.lines[t],"{");n+=t===e?s.open-1-s.close:s.open-s.close}i<s.features.length&&(l=this._getFeatureKey(s.features[i]))}else if(o){const t=this._countBrackets(e,"{");n+=t.open-t.close,n<=0&&(l&&this.featureRanges.set(l,{startLine:r,endLine:a,featureIndex:i}),i++,o=!1,l=null)}}}catch(e){}}computeLineMetadata(){this.lineMetadata.clear();const e=this._findCollapsibleRanges();for(let t=0;t<this.lines.length;t++){const s=this.lines[t],i={colors:[],booleans:[],collapseButton:null,visibilityButton:null,isHidden:!1,isCollapsed:!1,featureKey:null},n=/"([\w-]+)"\s*:\s*"(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}))"/g;let o;for(;null!==(o=n.exec(s));)i.colors.push({attributeName:o[1],color:o[2]});const r=/"([\w-]+)"\s*:\s*(true|false)/g;let l;for(;null!==(l=r.exec(s));)i.booleans.push({attributeName:l[1],value:"true"===l[2]});const a=e.find(e=>e.startLine===t);a&&(i.collapseButton={nodeKey:a.nodeKey,nodeId:a.nodeId,isCollapsed:this.collapsedNodes.has(a.nodeId)}),e.find(e=>this.collapsedNodes.has(e.nodeId)&&t>e.startLine&&t<e.endLine)&&(i.isCollapsed=!0);for(const[e,h]of this.featureRanges)if(t>=h.startLine&&t<=h.endLine){i.featureKey=e,this.hiddenFeatures.has(e)&&(i.isHidden=!0),t===h.startLine&&(i.visibilityButton={featureKey:e,isHidden:this.hiddenFeatures.has(e)});break}this.lineMetadata.set(t,i)}}computeVisibleLines(){this.visibleLines=[];for(let e=0;e<this.lines.length;e++){const t=this.lineMetadata.get(e);t&&t.isCollapsed||this.visibleLines.push({index:e,content:this.lines[e],meta:t})}this._invalidateRenderCache(),this._lastEndIndex=-1,this._lastTotalLines=-1}scheduleRender(){this.renderTimer||(this.renderTimer=requestAnimationFrame(()=>{this.renderTimer=null,this.renderViewport()}))}renderViewport(){if(this._blockRender)return;const e=this.shadowRoot.getElementById("viewport"),t=this.shadowRoot.getElementById("linesContainer"),s=this.shadowRoot.getElementById("scrollContent");if(this.shadowRoot.getElementById("gutterContent"),!e||!t)return;this.viewportHeight=e.clientHeight;const i=this.visibleLines.length,n=i*this.lineHeight;s&&(s.style.height=`${n}px`);const o=e.scrollTop,r=Math.floor(o/this.lineHeight),l=Math.ceil(this.viewportHeight/this.lineHeight),a=Math.max(0,r-this.bufferLines),h=Math.min(i,r+l+this.bufferLines);if(i>0&&this._lastStartIndex===a&&this._lastEndIndex===h&&this._lastTotalLines===i)return;this._lastStartIndex=a,this._lastEndIndex=h,this._lastTotalLines=i;const c=a*this.lineHeight;t.style.transform=`translateY(${c}px)`;const d=this._buildContextMap(),u=this.shadowRoot.querySelector(".editor-wrapper"),p=u?.classList.contains("focused"),g=document.createDocumentFragment();if(0===i){const e=document.createElement("div");return e.className="line empty-line",e.dataset.lineIndex="0",p&&(e.innerHTML=this._insertCursor(0)),g.appendChild(e),t.innerHTML="",t.appendChild(g),void this.renderGutter(0,0)}for(let f=a;f<h;f++){const e=this.visibleLines[f];if(!e)continue;const t=document.createElement("div");t.className="line",t.dataset.lineIndex=String(e.index),e.meta?.visibilityButton&&(t.classList.add("has-visibility"),t.dataset.featureKey=e.meta.visibilityButton.featureKey,e.meta.visibilityButton.isHidden&&t.classList.add("feature-hidden")),e.meta?.isHidden&&t.classList.add("line-hidden");const s=d.get(e.index);let i=this._highlightSyntax(e.content,s,e.meta);p&&this._hasSelection()&&(i=this._addSelectionHighlight(i,e.index,e.content)),p&&e.index===this.cursorLine&&(i+=this._insertCursor(this.cursorColumn)),t.innerHTML=i,g.appendChild(t)}t.innerHTML="",t.appendChild(g),this.renderGutter(a,h)}_insertCursor(e){return`<span class="cursor" style="left: ${e*this._getCharWidth()}px"></span>`}_addSelectionHighlight(e,t,s){const{start:i,end:n}=this._normalizeSelection();if(!i||!n)return e;if(t<i.line||t>n.line)return e;const o=this._getCharWidth();let r,l;return t===i.line&&t===n.line?(r=i.column,l=n.column):t===i.line?(r=i.column,l=s.length):t===n.line?(r=0,l=n.column):(r=0,l=s.length),`<span class="selection" style="left: ${r*o}px; width: ${(l-r)*o}px"></span>`+e}_getCharWidth(){if(!this._charWidth){const e=document.createElement("canvas").getContext("2d");e.font="13px 'Courier New', Courier, monospace",this._charWidth=e.measureText("M").width}return this._charWidth}renderGutter(e,t){const s=this.shadowRoot.getElementById("gutterContent"),i=this.shadowRoot.getElementById("gutterScrollContent");if(!s)return;const n=this.visibleLines.length*this.lineHeight;i&&(i.style.height=`${n}px`);const o=e*this.lineHeight;s.style.transform=`translateY(${o}px)`;const r=document.createDocumentFragment();for(let l=e;l<t;l++){const e=this.visibleLines[l];if(!e)continue;const t=document.createElement("div");t.className="gutter-line";const s=e.meta,i=document.createElement("span");i.className="line-number",i.textContent=String(e.index+1),t.appendChild(i);const n=document.createElement("div");if(n.className="collapse-column",s?.collapseButton){const t=document.createElement("div");t.className="collapse-button"+(s.collapseButton.isCollapsed?" collapsed":""),t.textContent=s.collapseButton.isCollapsed?"›":"⌄",t.dataset.line=String(e.index),t.dataset.nodeId=s.collapseButton.nodeId,t.title=s.collapseButton.isCollapsed?"Expand":"Collapse",n.appendChild(t)}t.appendChild(n),r.appendChild(t)}s.innerHTML="",s.appendChild(r)}syncGutterScroll(){const e=this.shadowRoot.getElementById("gutterScroll"),t=this.shadowRoot.getElementById("viewport");e&&t&&(e.scrollTop=t.scrollTop)}handleInput(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=e.value;if(t)if(this._getCollapsedRangeForLine(this.cursorLine))e.value="";else{if(this._getCollapsedClosingLine(this.cursorLine)){const t=this.lines[this.cursorLine],s=this._getClosingBracketPos(t);if(this.cursorColumn<=s)return void(e.value="")}if(this._getCollapsedNodeAtLine(this.cursorLine)){const t=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>t)return void(e.value="")}if(this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine],s=e.substring(0,this.cursorColumn),i=e.substring(this.cursorColumn),n=t.split("\n");if(1===n.length)this.lines[this.cursorLine]=s+t+i,this.cursorColumn+=t.length;else{this.lines[this.cursorLine]=s+n[0];for(let t=1;t<n.length-1;t++)this.lines.splice(this.cursorLine+t,0,n[t]);const e=n[n.length-1]+i;this.lines.splice(this.cursorLine+n.length-1,0,e),this.cursorLine+=n.length-1,this.cursorColumn=n[n.length-1].length}}else{const e=t.split("\n");this.lines.push(...e),this.cursorLine=this.lines.length-1,this.cursorColumn=this.lines[this.cursorLine].length}e.value="",clearTimeout(this.inputTimer),this.inputTimer=setTimeout(()=>{this.formatAndUpdate()},150)}}handleKeydown(e){const t={inCollapsedZone:this._getCollapsedRangeForLine(this.cursorLine),onCollapsedNode:this._getCollapsedNodeAtLine(this.cursorLine),onClosingLine:this._getCollapsedClosingLine(this.cursorLine)},s={Enter:()=>this._handleEnter(t),Backspace:()=>this._handleBackspace(t),Delete:()=>this._handleDelete(t),ArrowUp:()=>this._handleArrowKey(-1,0,e.shiftKey,e.ctrlKey||e.metaKey),ArrowDown:()=>this._handleArrowKey(1,0,e.shiftKey,e.ctrlKey||e.metaKey),ArrowLeft:()=>this._handleArrowKey(0,-1,e.shiftKey,e.ctrlKey||e.metaKey),ArrowRight:()=>this._handleArrowKey(0,1,e.shiftKey,e.ctrlKey||e.metaKey),Home:()=>this._handleHomeEnd("home",e.shiftKey,t.onClosingLine),End:()=>this._handleHomeEnd("end",e.shiftKey,t.onClosingLine),Tab:()=>this._handleTab(e.shiftKey,t)},i={a:()=>this._selectAll(),z:()=>e.shiftKey?this.redo():this.undo(),y:()=>this.redo(),s:()=>this.save(),o:()=>!this.hasAttribute("readonly")&&this.open()};if(s[e.key])return e.preventDefault(),void s[e.key]();(e.ctrlKey||e.metaKey)&&i[e.key]&&(e.preventDefault(),i[e.key]())}_handleEnter(e){if(!e.onCollapsedNode&&!e.inCollapsedZone){if(e.onClosingLine){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);if(t>=0&&this.cursorColumn<=t)return}this.insertNewline()}}_handleBackspace(e){if(this._hasSelection())return this._deleteSelection(),void this.formatAndUpdate();if(e.onClosingLine){const t=this.lines[this.cursorLine],s=this._getClosingBracketPos(t);return s>=0&&this.cursorColumn>s+1?void this.deleteBackward():void this._deleteCollapsedNode(e.onClosingLine)}if(e.onCollapsedNode&&0===this.cursorColumn)this._deleteCollapsedNode(e.onCollapsedNode);else if(!e.inCollapsedZone){if(e.onCollapsedNode){const t=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>t+1)return void this._deleteCollapsedNode(e.onCollapsedNode)}this.deleteBackward()}}_handleDelete(e){if(this._hasSelection())return this._deleteSelection(),void this.formatAndUpdate();if(e.onClosingLine){const t=this.lines[this.cursorLine],s=this._getClosingBracketPos(t);return s>=0&&this.cursorColumn>s?void this.deleteForward():void this._deleteCollapsedNode(e.onClosingLine)}if(e.onCollapsedNode){const t=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>t)return void this._deleteCollapsedNode(e.onCollapsedNode)}e.inCollapsedZone||this.deleteForward()}_handleTab(e,t){if(e){const e=this._getContainingExpandedNode(this.cursorLine);if(e){const t=this.lines[e.startLine],s=t.search(/[{\[]/);this.toggleCollapse(e.nodeId),this.cursorLine=e.startLine,this.cursorColumn=s>=0?s+1:t.length,this._clearSelection(),this._scrollToCursor()}return}t.onCollapsedNode?this.toggleCollapse(t.onCollapsedNode.nodeId):t.onClosingLine&&this.toggleCollapse(t.onClosingLine.nodeId)}insertNewline(){if(this._saveToHistory("newline"),this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine],t=e.substring(0,this.cursorColumn),s=e.substring(this.cursorColumn);this.lines[this.cursorLine]=t,this.lines.splice(this.cursorLine+1,0,s),this.cursorLine++,this.cursorColumn=0}else this.lines.push(""),this.cursorLine=this.lines.length-1,this.cursorColumn=0;this.formatAndUpdate()}deleteBackward(){if(this._saveToHistory("delete"),this.cursorColumn>0){const e=this.lines[this.cursorLine];this.lines[this.cursorLine]=e.substring(0,this.cursorColumn-1)+e.substring(this.cursorColumn),this.cursorColumn--}else if(this.cursorLine>0){const e=this.lines[this.cursorLine],t=this.lines[this.cursorLine-1];this.cursorColumn=t.length,this.lines[this.cursorLine-1]=t+e,this.lines.splice(this.cursorLine,1),this.cursorLine--}this.formatAndUpdate()}deleteForward(){if(this._saveToHistory("delete"),this.cursorLine<this.lines.length){const e=this.lines[this.cursorLine];this.cursorColumn<e.length?this.lines[this.cursorLine]=e.substring(0,this.cursorColumn)+e.substring(this.cursorColumn+1):this.cursorLine<this.lines.length-1&&(this.lines[this.cursorLine]=e+this.lines[this.cursorLine+1],this.lines.splice(this.cursorLine+1,1))}this.formatAndUpdate()}moveCursorSkipCollapsed(e){let t=this.cursorLine+e;for(;t>=0&&t<this.lines.length;){const s=this._getCollapsedRangeForLine(t);s&&(t=e>0?s.endLine:s.startLine);break}this.cursorLine=Math.max(0,Math.min(this.lines.length-1,t));const s=this.lines[this.cursorLine]?.length||0;this.cursorColumn=Math.min(this.cursorColumn,s),this._invalidateRenderCache(),this._scrollToCursor(),this.scheduleRender()}moveCursorHorizontal(e){e>0?this._moveCursorRight():this._moveCursorLeft(),this._invalidateRenderCache(),this._scrollToCursor(),this.scheduleRender()}_moveCursorRight(){const e=this.lines[this.cursorLine],t=this._getCollapsedNodeAtLine(this.cursorLine);if(this._getCollapsedClosingLine(this.cursorLine)){const t=this._getClosingBracketPos(e);this.cursorColumn<t?this.cursorColumn=t:this.cursorColumn>=e.length?this.cursorLine<this.lines.length-1&&(this.cursorLine++,this.cursorColumn=0):this.cursorColumn++}else if(t){const s=e.search(/[{\[]/);this.cursorColumn<s?this.cursorColumn++:this.cursorColumn===s?this.cursorColumn=s+1:(this.cursorLine=t.endLine,this.cursorColumn=this._getClosingBracketPos(this.lines[this.cursorLine]))}else if(this.cursorColumn>=e.length){if(this.cursorLine<this.lines.length-1){this.cursorLine++,this.cursorColumn=0;const e=this._getCollapsedRangeForLine(this.cursorLine);e&&(this.cursorLine=e.endLine,this.cursorColumn=0)}}else this.cursorColumn++}_moveCursorLeft(){const e=this.lines[this.cursorLine],t=this._getCollapsedNodeAtLine(this.cursorLine),s=this._getCollapsedClosingLine(this.cursorLine);if(s){const t=this._getClosingBracketPos(e);if(this.cursorColumn>t+1)this.cursorColumn--;else{this.cursorLine=s.startLine;const e=this.lines[this.cursorLine];this.cursorColumn=e.search(/[{\[]/)+1}}else if(t){const t=e.search(/[{\[]/);this.cursorColumn>t+1?this.cursorColumn=t+1:this.cursorColumn===t+1?this.cursorColumn=t:this.cursorColumn>0?this.cursorColumn--:this.cursorLine>0&&(this.cursorLine--,this.cursorColumn=this.lines[this.cursorLine]?.length||0)}else if(this.cursorColumn>0)this.cursorColumn--;else if(this.cursorLine>0)if(this.cursorLine--,this._getCollapsedClosingLine(this.cursorLine))this.cursorColumn=this.lines[this.cursorLine]?.length||0;else{const e=this._getCollapsedRangeForLine(this.cursorLine);if(e){this.cursorLine=e.startLine;const t=this.lines[this.cursorLine];this.cursorColumn=t.search(/[{\[]/)+1}else this.cursorColumn=this.lines[this.cursorLine]?.length||0}}_scrollToCursor(){const e=this.shadowRoot.getElementById("viewport");if(!e)return;const t=this.visibleLines.findIndex(e=>e.index===this.cursorLine);if(-1===t)return;const s=t*this.lineHeight,i=e.scrollTop,n=i+e.clientHeight;s<i?e.scrollTop=s:s+this.lineHeight>n&&(e.scrollTop=s+this.lineHeight-e.clientHeight)}_handleArrowKey(e,t,s,i=!1){s&&!this.selectionStart&&(this.selectionStart={line:this.cursorLine,column:this.cursorColumn}),0!==e?this.moveCursorSkipCollapsed(e):0!==t&&(i?this._moveCursorByWord(t):this.moveCursorHorizontal(t)),s?this.selectionEnd={line:this.cursorLine,column:this.cursorColumn}:(this.selectionStart=null,this.selectionEnd=null)}_moveCursorByWord(e){const t=this.lines[this.cursorLine]||"",s=e=>/[\w-]/.test(e);if(e>0){let e=this.cursorColumn;if(e>=t.length)this.cursorLine<this.lines.length-1&&(this.cursorLine++,this.cursorColumn=0);else if(s(t[e])){for(;e<t.length&&s(t[e]);)e++;this.cursorColumn=e}else{for(;e<t.length&&!s(t[e]);)e++;this.cursorColumn=e}}else{let e=this.cursorColumn;if(0===e)this.cursorLine>0&&(this.cursorLine--,this.cursorColumn=this.lines[this.cursorLine].length);else if(e>0&&s(t[e-1])){for(;e>0&&s(t[e-1]);)e--;this.cursorColumn=e}else{for(;e>0&&!s(t[e-1]);)e--;for(;e>0&&s(t[e-1]);)e--;this.cursorColumn=e}}this._invalidateRenderCache(),this._scrollToCursor(),this.scheduleRender()}_handleHomeEnd(e,t,s){t&&!this.selectionStart&&(this.selectionStart={line:this.cursorLine,column:this.cursorColumn}),"home"===e?(s&&(this.cursorLine=s.startLine),this.cursorColumn=0):this.cursorLine<this.lines.length&&(this.cursorColumn=this.lines[this.cursorLine].length),t?this.selectionEnd={line:this.cursorLine,column:this.cursorColumn}:(this.selectionStart=null,this.selectionEnd=null),this._invalidateRenderCache(),this._scrollToCursor(),this.scheduleRender()}_selectAll(){this.selectionStart={line:0,column:0};const e=this.lines.length-1;this.selectionEnd={line:e,column:this.lines[e]?.length||0},this.cursorLine=e,this.cursorColumn=this.lines[e]?.length||0,this._invalidateRenderCache(),this._scrollToCursor(),this.scheduleRender()}_getSelectedText(){if(!this.selectionStart||!this.selectionEnd)return"";const{start:e,end:t}=this._normalizeSelection();if(!e||!t)return"";if(e.line===t.line)return this.lines[e.line].substring(e.column,t.column);let s=this.lines[e.line].substring(e.column)+"\n";for(let i=e.line+1;i<t.line;i++)s+=this.lines[i]+"\n";return s+=this.lines[t.line].substring(0,t.column),s}_normalizeSelection(){if(!this.selectionStart||!this.selectionEnd)return{start:null,end:null};const e=this.selectionStart,t=this.selectionEnd;return e.line<t.line||e.line===t.line&&e.column<=t.column?{start:e,end:t}:{start:t,end:e}}_hasSelection(){return!(!this.selectionStart||!this.selectionEnd||this.selectionStart.line===this.selectionEnd.line&&this.selectionStart.column===this.selectionEnd.column)}_clearSelection(){this.selectionStart=null,this.selectionEnd=null}_deleteSelection(){if(!this._hasSelection())return!1;this._saveToHistory("delete");const{start:e,end:t}=this._normalizeSelection();if(e.line===t.line){const s=this.lines[e.line];this.lines[e.line]=s.substring(0,e.column)+s.substring(t.column)}else{const s=this.lines[e.line].substring(0,e.column),i=this.lines[t.line].substring(t.column);this.lines[e.line]=s+i,this.lines.splice(e.line+1,t.line-e.line)}return this.cursorLine=e.line,this.cursorColumn=e.column,this.selectionStart=null,this.selectionEnd=null,!0}insertText(e){if(this._hasSelection()&&this._deleteSelection(),!this._getCollapsedRangeForLine(this.cursorLine)){if(this._getCollapsedClosingLine(this.cursorLine)){const e=this.lines[this.cursorLine],t=this._getClosingBracketPos(e);if(this.cursorColumn<=t)return}if(this._getCollapsedNodeAtLine(this.cursorLine)){const e=this.lines[this.cursorLine].search(/[{\[]/);if(this.cursorColumn>e)return}if(this._saveToHistory("insert"),0===this.lines.length){const t=e.split("\n");this.lines=t,this.cursorLine=t.length-1,this.cursorColumn=t[t.length-1].length}else if(this.cursorLine<this.lines.length){const t=this.lines[this.cursorLine];this.lines[this.cursorLine]=t.substring(0,this.cursorColumn)+e+t.substring(this.cursorColumn),this.cursorColumn+=e.length}this.formatAndUpdate()}}handlePaste(e){e.preventDefault();const t=e.clipboardData.getData("text/plain");if(!t)return;const s=0===this.lines.length;try{const e=JSON.parse(t),s=this._normalizeToFeatures(e).map(e=>JSON.stringify(e,null,2)).join(",\n");this.insertText(s)}catch{this.insertText(t)}s&&this.lines.length>0&&(this.renderTimer&&(cancelAnimationFrame(this.renderTimer),this.renderTimer=null),this.autoCollapseCoordinates())}handleCopy(e){e.preventDefault(),this._hasSelection()?e.clipboardData.setData("text/plain",this._getSelectedText()):e.clipboardData.setData("text/plain",this.getContent())}handleCut(e){e.preventDefault(),this._hasSelection()?(e.clipboardData.setData("text/plain",this._getSelectedText()),this._saveToHistory("cut"),this._deleteSelection(),this.formatAndUpdate()):(e.clipboardData.setData("text/plain",this.getContent()),this._saveToHistory("cut"),this.lines=[],this.cursorLine=0,this.cursorColumn=0,this.formatAndUpdate())}_getPositionFromClick(e){const t=this.shadowRoot.getElementById("viewport"),s=this.shadowRoot.getElementById("linesContainer"),i=t.getBoundingClientRect(),n=e.clientY-i.top+t.scrollTop-8,o=Math.floor(n/this.lineHeight);let r=0,l=0;if(o>=0&&o<this.visibleLines.length){const n=this.visibleLines[o];r=n.index;const a=s?.querySelector(`.line[data-line-index="${n.index}"]`),h=this._getCharWidth();if(a){const t=a.getBoundingClientRect(),s=e.clientX-t.left,i=Math.round(s/h),o=n.content?.length||0;l=Math.max(0,Math.min(i,o))}else{const s=12,o=e.clientX-i.left+t.scrollLeft-s,r=Math.round(o/h),a=n.content?.length||0;l=Math.max(0,Math.min(r,a))}}return{line:r,column:l}}handleGutterClick(e){const t=e.target.closest(".visibility-button");if(t)this.toggleFeatureVisibility(t.dataset.featureKey);else if(e.target.classList.contains("collapse-button")){const t=e.target.dataset.nodeId;return void this.toggleCollapse(t)}}handleEditorClick(e){this._blockRender=!1;const t=e.target.closest(".line.has-visibility");if(t){const s=t.getBoundingClientRect();if(e.clientX-s.left<14){e.preventDefault(),e.stopPropagation();const s=t.dataset.featureKey;return void(s&&this.toggleFeatureVisibility(s))}}if(e.target.classList.contains("json-color")){const t=e.target.getBoundingClientRect(),s=e.clientX-t.left;if(s<0&&s>=-8){e.preventDefault(),e.stopPropagation();const t=e.target.dataset.color,s=e.target.closest(".line");if(s){const i=parseInt(s.dataset.lineIndex),n=this.lines[i].match(/"([\w-]+)"\s*:\s*"#/);n&&this.showColorPicker(e.target,i,t,n[1])}return}}if(e.target.classList.contains("json-boolean")){const t=e.target.getBoundingClientRect(),s=e.clientX-t.left;if(s<0&&s>=-8){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".line");if(t){const e=parseInt(t.dataset.lineIndex),s=this.lines[e].match(/"([\w-]+)"\s*:\s*(true|false)/);if(s){const t="true"===s[2];this.updateBooleanValue(e,!t,s[1])}}return}}}toggleCollapse(e){this.collapsedNodes.has(e)?this.collapsedNodes.delete(e):this.collapsedNodes.add(e),this.updateView(),this._invalidateRenderCache(),this.scheduleRender()}autoCollapseCoordinates(){this._applyCollapsedOption(["coordinates"])}_applyCollapsedFromOptions(e,t){const s=void 0!==e.collapsed?e.collapsed:["coordinates"];s&&(!Array.isArray(s)||s.length>0)&&this._applyCollapsedOption(s,t)}_applyCollapsedOption(e,t=null){const s=this._findCollapsibleRanges(),i=s.filter(e=>e.isRootFeature);for(const n of s){let s=!1;if("function"==typeof e){const o=i.findIndex(e=>n.startLine>=e.startLine&&n.endLine<=e.endLine),r=e(t?.[o]||null,o);s=n.isRootFeature?r.includes("$root"):r.includes(n.nodeKey)}else Array.isArray(e)&&(s=n.isRootFeature?e.includes("$root"):e.includes(n.nodeKey));s&&this.collapsedNodes.add(n.nodeId)}this.updateModel(),this.scheduleRender()}toggleFeatureVisibility(e){this.hiddenFeatures.has(e)?this.hiddenFeatures.delete(e):this.hiddenFeatures.add(e),this.updateView(),this.scheduleRender(),this.emitChange()}showColorPicker(e,t,s,i){const n=document.querySelector(".geojson-color-picker-anchor");n&&n.remove();const o=document.createElement("div");o.className="geojson-color-picker-anchor";const r=e.getBoundingClientRect();o.style.cssText=`\n position: fixed;\n left: ${r.left-8}px;\n top: ${r.top+r.height}px;\n width: 10px;\n height: 10px;\n z-index: 9998;\n `,document.body.appendChild(o);const l=document.createElement("input");l.type="color",l.value=s,l.className="geojson-color-picker-input",l.style.cssText="\n position: absolute;\n left: 0;\n top: 0;\n width: 10px;\n height: 10px;\n opacity: 0;\n border: none;\n padding: 0;\n cursor: pointer;\n ",o.appendChild(l),l.addEventListener("input",e=>{this.updateColorValue(t,e.target.value,i)});const a=e=>{e.target!==l&&(document.removeEventListener("click",a,!0),o.remove())};l._closeListener=a,setTimeout(()=>{document.addEventListener("click",a,!0)},100),l.focus(),l.click()}updateColorValue(e,t,s){const i=new RegExp(`"${s}"\\s*:\\s*"#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})"`);this.lines[e]=this.lines[e].replace(i,`"${s}": "${t}"`),this.updateView(),this.scheduleRender(),this.emitChange()}updateBooleanValue(e,t,s){const i=new RegExp(`"${s}"\\s*:\\s*(true|false)`);this.lines[e]=this.lines[e].replace(i,`"${s}": ${t}`),this.updateView(),this.scheduleRender(),this.emitChange()}formatAndUpdate(){try{const e="["+this.lines.join("\n")+"]",t=JSON.parse(e),s=JSON.stringify(t,null,2).split("\n");this.lines=s.slice(1,-1)}catch(e){}this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.emitChange()}emitChange(){const e=this.getContent(),t=this.prefix+e+this.suffix;try{let s=JSON.parse(t);this.hiddenFeatures.size>0&&(s.features=s.features.filter(e=>{const t=this._getFeatureKey(e);return!this.hiddenFeatures.has(t)}));const i=this._validateGeoJSON(s);i.length>0?this.dispatchEvent(new CustomEvent("error",{detail:{error:i.join("; "),errors:i,content:e},bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0,composed:!0}))}catch(s){this.dispatchEvent(new CustomEvent("error",{detail:{error:s.message,content:e},bubbles:!0,composed:!0}))}}updateReadonly(){const e=this.shadowRoot.getElementById("hiddenTextarea"),t=this.shadowRoot.getElementById("clearBtn");e&&(e.readOnly=this.readonly),t&&(t.hidden=this.readonly)}updatePlaceholderVisibility(){const e=this.shadowRoot.getElementById("placeholderLayer");e&&(e.style.display=this.lines.length>0?"none":"block")}updatePlaceholderContent(){const e=this.shadowRoot.getElementById("placeholderLayer");e&&(e.textContent=this.placeholder),this.updatePlaceholderVisibility()}updatePrefixSuffix(){const e=this.shadowRoot.getElementById("editorPrefix"),t=this.shadowRoot.getElementById("editorSuffix");e&&(e.textContent=this.prefix),t&&(t.textContent=this.suffix)}updateThemeCSS(){const e=this.getAttribute("dark-selector")||".dark",t=this._parseSelectorToHostRule(e);let s=this.shadowRoot.getElementById("theme-styles");s||(s=document.createElement("style"),s.id="theme-styles",this.shadowRoot.insertBefore(s,this.shadowRoot.firstChild));const i=e=>Object.entries(e).map(([e,t])=>{return`--${s=e,s.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${t};`;var s}).join("\n "),n=i(this.themes.light||{});let o=n?`:host {\n ${n}\n }\n`:"";o+=`${t} {\n ${i({bgColor:"#2b2b2b",textColor:"#a9b7c6",caretColor:"#bbbbbb",gutterBg:"#313335",gutterBorder:"#3c3f41",gutterText:"#606366",jsonKey:"#9876aa",jsonString:"#6a8759",jsonNumber:"#6897bb",jsonBoolean:"#cc7832",jsonNull:"#cc7832",jsonPunct:"#a9b7c6",jsonError:"#ff6b68",controlColor:"#cc7832",controlBg:"#3c3f41",controlBorder:"#5a5a5a",geojsonKey:"#9876aa",geojsonType:"#6a8759",geojsonTypeInvalid:"#ff6b68",jsonKeyInvalid:"#ff6b68",...this.themes.dark})}\n }`,s.textContent=o}_parseSelectorToHostRule(e){return e?e.startsWith(".")&&!e.includes(" ")?`:host(${e})`:`:host-context(${e})`:':host([data-color-scheme="dark"])'}setTheme(e){e.dark&&(this.themes.dark={...this.themes.dark,...e.dark}),e.light&&(this.themes.light={...this.themes.light,...e.light}),this.updateThemeCSS()}resetTheme(){this.themes={dark:{},light:{}},this.updateThemeCSS()}_getFeatureKey(e){if(!e)return null;if(void 0!==e.id)return`id:${e.id}`;if(void 0!==e.properties?.id)return`prop:${e.properties.id}`;const t=e.geometry?.type||"null",s=JSON.stringify(e.geometry?.coordinates||[]);let i=0;for(let n=0;n<s.length;n++)i=(i<<5)-i+s.charCodeAt(n),i&=i;return`hash:${t}:${i.toString(36)}`}_countBrackets(e,t){const s="{"===t?"}":"]";let i=0,n=0,o=!1,r=!1;for(const l of e)r?r=!1:"\\"===l&&o?r=!0:'"'!==l?o||(l===t&&i++,l===s&&n++):o=!o;return{open:i,close:n}}_findCollapsibleRanges(){const e=[];for(const[t,s]of this._lineToNodeId){const i=this._nodeIdToLines.get(s);if(!i)continue;const n=this.lines[t];if(!n)continue;const o=n.match(/^\s*"([^"]+)"\s*:\s*([{\[])/),r=!o&&n.match(/^\s*([{\[]),?\s*$/);if(!o&&!r)continue;const l=o?o[2]:r[1];e.push({startLine:i.startLine,endLine:i.endLine,nodeKey:i.nodeKey||(o?o[1]:`__root_${t}`),nodeId:s,openBracket:l,isRootFeature:!!r})}return e.sort((e,t)=>e.startLine-t.startLine),e}_findClosingLine(e,t){let s=1;const i=this.lines[e],n=i.indexOf(t);if(-1!==n){const o=i.substring(n+1),r=this._countBrackets(o,t);if(s+=r.open-r.close,0===s)return e}for(let o=e+1;o<this.lines.length;o++){const e=this._countBrackets(this.lines[o],t);if(s+=e.open-e.close,0===s)return o}return-1}_buildContextMap(){const e=this.lines.length;if(this._contextMapCache&&this._contextMapLinesLength===e&&this._contextMapFirstLine===this.lines[0]&&this._contextMapLastLine===this.lines[e-1])return this._contextMapCache;const t=/* @__PURE__ */new Map,o=[];let r=null;for(let l=0;l<e;l++){const e=this.lines[l],a=o[o.length-1]?.context||"Feature";t.set(l,a),s.test(e)?r="geometry":i.test(e)?r="properties":n.test(e)&&(r="Feature");const h=(e.match(/\{/g)||[]).length,c=(e.match(/\}/g)||[]).length,d=(e.match(/\[/g)||[]).length,u=(e.match(/\]/g)||[]).length;for(let t=0;t<h+d;t++)o.push({context:r||a,isArray:t>=h}),r=null;for(let t=0;t<c+u&&o.length>0;t++)o.pop()}return this._contextMapCache=t,this._contextMapLinesLength=e,this._contextMapFirstLine=this.lines[0],this._contextMapLastLine=this.lines[e-1],t}_highlightSyntax(s,i,n){if(!s)return"";let x=s,w=null;if(n?.collapseButton?.isCollapsed){const e=s.match(o),t=!e&&s.match(r);e?(x=e[1]+e[2],w=e[2]):t&&(x=t[1]+t[2],w=t[2])}let k=x.replace(l,"&amp;").replace(a,"&lt;").replace(h,"&gt;");if(k=k.replace(c,'<span class="json-punctuation">$1</span>'),d.lastIndex=0,k=k.replace(d,(t,s,n)=>"properties"!==i&&e.includes(s)?`<span class="geojson-key">"${s}"</span>${n}`:`<span class="json-key">"${s}"</span>${n}`),"properties"!==i&&(u.lastIndex=0,k=k.replace(u,(e,s,i)=>`<span class="geojson-key">"type"</span><span class="json-punctuation">:</span>${s}<span class="${"Feature"===i||"FeatureCollection"===i||t.includes(i)?"geojson-type":"geojson-type-invalid"}">"${i}"</span>`)),p.lastIndex=0,k=k.replace(p,(e,t,s,i)=>e.includes("geojson-type")||e.includes("json-string")?e:g.test(i)?`${t}${s}<span class="json-string json-color" data-color="${i}" style="--swatch-color: ${i}">"${i}"</span>`:`${t}${s}<span class="json-string">"${i}"</span>`),f.lastIndex=0,k=k.replace(f,'$1$2<span class="json-number">$3</span>'),m.lastIndex=0,k=k.replace(m,'$1$2<span class="json-number">$3</span>'),C.lastIndex=0,k=k.replace(C,'$1<span class="json-number">$2</span>'),y.lastIndex=0,k=k.replace(y,(e,t,s,i)=>`${t}${s}<span class="json-boolean${"true"===i?" json-bool-true":" json-bool-false"}">${i}</span>`),v.lastIndex=0,k=k.replace(v,'$1$2<span class="json-null">$3</span>'),w){const e="["===w?"collapsed-bracket-array":"collapsed-bracket-object";k=k.replace(new RegExp(`<span class="json-punctuation">\\${w}<\\/span>$`),`<span class="${e}">${w}</span>`)}return b.lastIndex=0,k=k.replace(b,(e,t,s,i)=>{if(!s||L.test(s))return e;const n=s.split(_);let o=!1;const r=n.map(e=>L.test(e)?e:(o=!0,`<span class="json-error">${e}</span>`)).join("");return o?t+r+i:e}),k}_validateGeoJSON(e){const s=[];return e.features?(e.features.forEach((e,i)=>{"Feature"!==e.type&&s.push(`features[${i}]: type must be "Feature"`),e.geometry&&e.geometry.type&&(t.includes(e.geometry.type)||s.push(`features[${i}].geometry: invalid type "${e.geometry.type}"`))}),s):s}_validateFeature(e){if(!e||"object"!=typeof e)throw new Error("Feature must be an object");if("Feature"!==e.type)throw new Error('Feature type must be "Feature"');if(!("geometry"in e))throw new Error("Feature must have a geometry property");if(!("properties"in e))throw new Error("Feature must have a properties property");if(null!==e.geometry){if(!e.geometry||"object"!=typeof e.geometry)throw new Error("Feature geometry must be an object or null");if(!e.geometry.type)throw new Error("Feature geometry must have a type");if(!t.includes(e.geometry.type))throw new Error(`Invalid geometry type: "${e.geometry.type}"`);if(!("coordinates"in e.geometry))throw new Error("Feature geometry must have coordinates")}if(null!==e.properties&&"object"!=typeof e.properties)throw new Error("Feature properties must be an object or null")}_normalizeToFeatures(e){let t=[];if(Array.isArray(e))t=e;else{if(!e||"object"!=typeof e)throw new Error("Input must be a Feature, array of Features, or FeatureCollection");if("FeatureCollection"===e.type&&Array.isArray(e.features))t=e.features;else{if("Feature"!==e.type)throw new Error("Input must be a Feature, array of Features, or FeatureCollection");t=[e]}}for(const s of t)this._validateFeature(s);return t}set(e,t={}){const s=this._normalizeToFeatures(e),i=s.map(e=>JSON.stringify(e,null,2)).join(",\n");this.setValue(i,!1),this._applyCollapsedFromOptions(t,s)}add(e,t={}){const s=this._normalizeToFeatures(e),i=[...this._parseFeatures(),...s],n=i.map(e=>JSON.stringify(e,null,2)).join(",\n");this.setValue(n,!1),this._applyCollapsedFromOptions(t,i)}insertAt(e,t,s={}){const i=this._normalizeToFeatures(e),n=this._parseFeatures(),o=t<0?n.length+t:t;n.splice(Math.max(0,Math.min(o,n.length)),0,...i);const r=n.map(e=>JSON.stringify(e,null,2)).join(",\n");this.setValue(r,!1),this._applyCollapsedFromOptions(s,n)}removeAt(e){const t=this._parseFeatures(),s=e<0?t.length+e:e;if(s>=0&&s<t.length){const e=t.splice(s,1)[0];return this.set(t),e}}removeAll(){this.lines.length>0&&this._saveToHistory("removeAll");const e=this._parseFeatures();return this.lines=[],this.collapsedNodes.clear(),this.hiddenFeatures.clear(),this.updateModel(),this.scheduleRender(),this.updatePlaceholderVisibility(),this.emitChange(),e}get(e){const t=this._parseFeatures();return t[e<0?t.length+e:e]}getAll(){return this._parseFeatures()}emit(){this.emitChange()}save(e="features.geojson"){try{const t={type:"FeatureCollection",features:this._parseFeatures()},s=JSON.stringify(t,null,2),i=new Blob([s],{type:"application/geo+json"}),n=URL.createObjectURL(i),o=document.createElement("a");return o.href=n,o.download=e,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(n),!0}catch(t){return!1}}open(e={}){return new Promise(t=>{const s=document.createElement("input");s.type="file",s.accept=".geojson,.json,application/geo+json,application/json",s.style.display="none",s.addEventListener("change",i=>{const n=i.target.files?.[0];if(!n)return document.body.removeChild(s),void t(!1);const o=new FileReader;o.onload=i=>{try{const n=i.target?.result,o=JSON.parse(n),r=this._normalizeToFeatures(o);this._saveToHistory("open"),this.set(r,e),this.clearHistory(),document.body.removeChild(s),t(!0)}catch(n){document.body.removeChild(s),t(!1)}},o.onerror=()=>{document.body.removeChild(s),t(!1)},o.readAsText(n)}),s.addEventListener("cancel",()=>{document.body.removeChild(s),t(!1)}),document.body.appendChild(s),s.click()})}_parseFeatures(){try{const e=this.lines.join("\n");return e.trim()?JSON.parse("["+e+"]"):[]}catch(e){return[]}}}customElements.get("geojson-editor")||customElements.define("geojson-editor",x);export{x as default};
package/package.json CHANGED
@@ -1,25 +1,30 @@
1
1
  {
2
2
  "name": "@softwarity/geojson-editor",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "A feature-rich GeoJSON editor Web Component with syntax highlighting, collapsible nodes, and color picker",
5
5
  "type": "module",
6
6
  "main": "./dist/geojson-editor.js",
7
7
  "module": "./dist/geojson-editor.js",
8
+ "types": "./types/geojson-editor.d.ts",
8
9
  "exports": {
9
10
  ".": {
10
- "import": "./dist/geojson-editor.js"
11
+ "import": "./dist/geojson-editor.js",
12
+ "types": "./types/geojson-editor.d.ts"
11
13
  }
12
14
  },
13
15
  "files": [
14
16
  "dist",
15
- "src"
17
+ "src",
18
+ "types"
16
19
  ],
17
20
  "scripts": {
18
21
  "dev": "vite",
19
- "build": "vite build",
22
+ "build": "vite build && npm run build:types",
23
+ "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir types",
20
24
  "preview": "vite preview",
21
25
  "test": "web-test-runner",
22
- "test:watch": "web-test-runner --watch"
26
+ "test:watch": "web-test-runner --watch",
27
+ "typecheck": "tsc --noEmit"
23
28
  },
24
29
  "repository": {
25
30
  "type": "git",
@@ -42,10 +47,12 @@
42
47
  "devDependencies": {
43
48
  "@esm-bundle/chai": "^4.3.4-fix.0",
44
49
  "@open-wc/testing": "^4.0.0",
50
+ "@types/geojson": "^7946.0.16",
45
51
  "@web/dev-server-esbuild": "^1.0.4",
46
52
  "@web/test-runner": "^0.20.2",
47
53
  "@web/test-runner-playwright": "^0.11.1",
48
54
  "minify-literals": "^1.0.10",
55
+ "typescript": "^5.9.3",
49
56
  "vite": "^7.2.4"
50
57
  }
51
58
  }