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) 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..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,5 +1,8 @@ .default-input { background-color: rgba(83, 192, 255, 0.4); + height: auto; + + scrollbar-color: var(--gray-800) transparent; } .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..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 @@ -1,24 +1,40 @@ -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(); + 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(newVal?: string) { + return JSON.stringify(newVal ?? this.settings[this.key], null, 2); + } openJsonEditor() { const ref = this.dialog.open(JsonEditorComponent, { @@ -39,10 +55,21 @@ 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; this.updateType(value); }, 500); } + }