From d0d02247128dbdded2c439cf1cd3c58571bb37dd Mon Sep 17 00:00:00 2001 From: cramerL Date: Tue, 17 Mar 2026 18:15:08 +0100 Subject: [PATCH 1/4] updated json widget to scale 1-5 rows depending on input --- .../json-widget/json-widget.component.html | 9 ++++--- .../json-widget/json-widget.component.scss | 1 + .../json-widget/json-widget.component.ts | 27 ++++++++++++++----- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/webapp/src/app/components/widgets/json-widget/json-widget.component.html b/webapp/src/app/components/widgets/json-widget/json-widget.component.html index 37c99e53..a1dc7a45 100644 --- a/webapp/src/app/components/widgets/json-widget/json-widget.component.html +++ b/webapp/src/app/components/widgets/json-widget/json-widget.component.html @@ -2,9 +2,12 @@ @if (!noPropName) { } - diff --git a/webapp/src/app/components/widgets/json-widget/json-widget.component.scss b/webapp/src/app/components/widgets/json-widget/json-widget.component.scss index 3711ed8a..eb792cbf 100644 --- a/webapp/src/app/components/widgets/json-widget/json-widget.component.scss +++ b/webapp/src/app/components/widgets/json-widget/json-widget.component.scss @@ -1,5 +1,6 @@ .default-input { background-color: rgba(83, 192, 255, 0.4); + height: auto; } .mini-button { diff --git a/webapp/src/app/components/widgets/json-widget/json-widget.component.ts b/webapp/src/app/components/widgets/json-widget/json-widget.component.ts index c63428f1..384ecaee 100644 --- a/webapp/src/app/components/widgets/json-widget/json-widget.component.ts +++ b/webapp/src/app/components/widgets/json-widget/json-widget.component.ts @@ -1,24 +1,36 @@ -import { Component, Input, inject } from '@angular/core'; +import { Component, inject, Input, signal } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { JsonEditorComponent } from '../../json-editor/json-editor.component'; import { AbstractWidget } from '../abstract-widget'; import { FlexModule } from '@angular/flex-layout/flex'; import { MatTooltip } from '@angular/material/tooltip'; import { FormsModule } from '@angular/forms'; +import { Helper } from '../../../services/phaser/helper'; @Component({ - selector: 'app-json-widget', - templateUrl: './json-widget.component.html', - styleUrls: ['./json-widget.component.scss', '../widget.scss'], - imports: [FlexModule, MatTooltip, FormsModule] + selector: 'app-json-widget', + templateUrl: './json-widget.component.html', + styleUrls: ['./json-widget.component.scss', '../widget.scss'], + imports: [FlexModule, MatTooltip, FormsModule] }) export class JsonWidgetComponent extends AbstractWidget { private dialog = inject(MatDialog); - @Input() noPropName = false; private timer = -1; - json = JSON; + + rows = signal(1); + + override ngOnInit() { + super.ngOnInit(); + const setting = this.getJsonVal(); + const rows = setting?.split('\n').length ?? 1; + this.rows.set(Helper.clamp(rows, 1, 5)); + } + + getJsonVal() { + return JSON.stringify(this.settings[this.key], null, 2); + } openJsonEditor() { const ref = this.dialog.open(JsonEditorComponent, { @@ -45,4 +57,5 @@ export class JsonWidgetComponent extends AbstractWidget { this.updateType(value); }, 500); } + } From dea4eaead624f527a2d117456e6343981db74f01 Mon Sep 17 00:00:00 2001 From: cramerL Date: Tue, 17 Mar 2026 18:23:45 +0100 Subject: [PATCH 2/4] scale json widget when copy pasting into empty field --- .../json-widget/json-widget.component.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/webapp/src/app/components/widgets/json-widget/json-widget.component.ts b/webapp/src/app/components/widgets/json-widget/json-widget.component.ts index 384ecaee..680e07ea 100644 --- a/webapp/src/app/components/widgets/json-widget/json-widget.component.ts +++ b/webapp/src/app/components/widgets/json-widget/json-widget.component.ts @@ -23,13 +23,17 @@ export class JsonWidgetComponent extends AbstractWidget { override ngOnInit() { super.ngOnInit(); - const setting = this.getJsonVal(); + this.updateRows(); + } + + private updateRows(newVal?: string) { + const setting = this.getJsonVal(newVal); const rows = setting?.split('\n').length ?? 1; this.rows.set(Helper.clamp(rows, 1, 5)); } - getJsonVal() { - return JSON.stringify(this.settings[this.key], null, 2); + getJsonVal(newVal?: string) { + return JSON.stringify(newVal ?? this.settings[this.key], null, 2); } openJsonEditor() { @@ -51,6 +55,16 @@ export class JsonWidgetComponent extends AbstractWidget { if (this.timer >= 0) { clearTimeout(this.timer); } + + // scales textarea when copy pasting into empty field + try { + const newVal = JSON.parse(value); + const prev = this.settings[key]; + if (!prev && newVal) { + this.updateRows(newVal); + } + } catch (e) {} + this.timer = window.setTimeout(() => { value = JSON.parse(value); this.settings[key] = value; From fc30c624a57e296a8a4b157a167762151e8d9e84 Mon Sep 17 00:00:00 2001 From: cramerL Date: Tue, 17 Mar 2026 18:27:01 +0100 Subject: [PATCH 3/4] make scrollbar more visible in json widget --- .../components/widgets/json-widget/json-widget.component.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webapp/src/app/components/widgets/json-widget/json-widget.component.scss b/webapp/src/app/components/widgets/json-widget/json-widget.component.scss index eb792cbf..f786b704 100644 --- a/webapp/src/app/components/widgets/json-widget/json-widget.component.scss +++ b/webapp/src/app/components/widgets/json-widget/json-widget.component.scss @@ -1,6 +1,8 @@ .default-input { background-color: rgba(83, 192, 255, 0.4); height: auto; + + scrollbar-color: var(--gray-800) transparent; } .mini-button { From b8e38aed6b15af007113a3c7064329d90b959933 Mon Sep 17 00:00:00 2001 From: cramerL Date: Tue, 17 Mar 2026 18:31:11 +0100 Subject: [PATCH 4/4] updated changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94510aca..eb6a4a1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Changed +- Changed scaling behaviour for json widget. Depending on content, it scales to 1-5 rows initially. When the user pastes multi-line json it also rescales to fit the content. [#344](https://github.com/CCDirectLink/crosscode-map-editor/issues/344) + ## [2.0.1] 2026-03-16 ### Fixed - Added scrollbar back to character selector [#342](https://github.com/CCDirectLink/crosscode-map-editor/issues/342)