elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Studio: theme editing

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-30 13:45:44 +01:00
parent 6e7eccf9de
commit 3aa9a21dea
34 changed files with 975 additions and 350 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/UI/Base/LoginToggle.svelte
View file

@ -41,5 +41,5 @@
<slot />
{:else if $loadingStatus === "not-attempted"}
<slot name="not-logged-in" />
{/if}
{/if}
{/if}

78
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -1,35 +1,37 @@
<script lang="ts">
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig"
import {Store, UIEventSource} from "../../../Logic/UIEventSource"
import type { Feature } from "geojson"
import type { SpecialVisualizationState } from "../../SpecialVisualization"
import TagRenderingAnswer from "./TagRenderingAnswer.svelte"
import { PencilAltIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import TagRenderingQuestion from "./TagRenderingQuestion.svelte"
import { onDestroy } from "svelte"
import Tr from "../../Base/Tr.svelte"
import Translations from "../../i18n/Translations.js"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { Utils } from "../../../Utils"
import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig";
import { Store, UIEventSource } from "../../../Logic/UIEventSource";
import type { Feature } from "geojson";
import type { SpecialVisualizationState } from "../../SpecialVisualization";
import TagRenderingAnswer from "./TagRenderingAnswer.svelte";
import { PencilAltIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
import TagRenderingQuestion from "./TagRenderingQuestion.svelte";
import { onDestroy } from "svelte";
import Tr from "../../Base/Tr.svelte";
import Translations from "../../i18n/Translations.js";
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
import { Utils } from "../../../Utils";
export let config: TagRenderingConfig
export let tags: UIEventSource<Record<string, string>>
export let selectedElement: Feature | undefined
export let state: SpecialVisualizationState
export let layer: LayerConfig = undefined
export let config: TagRenderingConfig;
export let tags: UIEventSource<Record<string, string>>;
export let selectedElement: Feature | undefined;
export let state: SpecialVisualizationState;
export let layer: LayerConfig = undefined;
export let editingEnabled : Store<boolean> | undefined = state?.featureSwitchUserbadge
export let editingEnabled: Store<boolean> | undefined = state?.featureSwitchUserbadge;
export let highlightedRendering: UIEventSource<string> = undefined
export let showQuestionIfUnknown: boolean = false
let editMode = false
onDestroy(
tags.addCallbackAndRunD((tags) => {
editMode = showQuestionIfUnknown && !config.IsKnown(tags)
})
)
export let highlightedRendering: UIEventSource<string> = undefined;
export let showQuestionIfUnknown: boolean = false;
let editMode = false;
if (tags) {
onDestroy(
tags.addCallbackAndRunD((tags) => {
editMode = showQuestionIfUnknown && !config.IsKnown(tags);
})
);
}
let htmlElem: HTMLDivElement
let htmlElem: HTMLDivElement;
$: {
if (editMode && htmlElem !== undefined) {
// EditMode switched to true, so the person wants to make a change
@ -37,32 +39,32 @@
// Some delay is applied to give Svelte the time to render the _question_
window.setTimeout(() => {
Utils.scrollIntoView(<any> htmlElem)
}, 50)
Utils.scrollIntoView(<any>htmlElem);
}, 50);
}
}
const _htmlElement = new UIEventSource<HTMLElement>(undefined)
$: _htmlElement.setData(htmlElem)
const _htmlElement = new UIEventSource<HTMLElement>(undefined);
$: _htmlElement.setData(htmlElem);
function setHighlighting() {
if (highlightedRendering === undefined) {
return
return;
}
if (htmlElem === undefined) {
return
return;
}
const highlighted = highlightedRendering.data
const highlighted = highlightedRendering.data;
if (config.id === highlighted) {
htmlElem.classList.add("glowing-shadow")
htmlElem.classList.add("glowing-shadow");
} else {
htmlElem.classList.remove("glowing-shadow")
htmlElem.classList.remove("glowing-shadow");
}
}
if (highlightedRendering) {
onDestroy(highlightedRendering?.addCallbackAndRun(() => setHighlighting()))
onDestroy(_htmlElement.addCallbackAndRun(() => setHighlighting()))
onDestroy(highlightedRendering?.addCallbackAndRun(() => setHighlighting()));
onDestroy(_htmlElement.addCallbackAndRun(() => setHighlighting()));
}
</script>

2
src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -170,7 +170,7 @@
let featureSwitchIsDebugging = state?.featureSwitches?.featureSwitchIsDebugging ?? new ImmutableStore(false);
let showTags = state?.userRelatedState?.showTags ?? new ImmutableStore(undefined);
let numberOfCs = state?.osmConnection?.userDetails?.data?.csCount ?? 0;
if (state) {
if (state?.osmConnection) {
onDestroy(
state.osmConnection?.userDetails?.addCallbackAndRun((ud) => {
numberOfCs = ud.csCount;

2
src/UI/Studio/ChooseLayerToEdit.svelte
View file

@ -22,7 +22,7 @@
<slot name="title" />
<div class="flex flex-wrap">
{#each Array.from(layerIds) as layer}
<NextButton clss="small" on:click={() => dispatch("layerSelected", layer.id)}>
<NextButton clss="small" on:click={() => dispatch("layerSelected", layer)}>
<div class="w-4 h-4 mr-1">
<Marker icons={fetchIconDescription(layer.id)} />
</div>

1
src/UI/Studio/EditLayerState.ts
View file

@ -209,6 +209,7 @@ export abstract class EditJsonState<T> {
try {
prepare.convert(<T>config, context)
} catch (e) {
console.error(e)
context.err(e)
}
return context.messages

90
src/UI/Studio/EditTheme.svelte
View file

@ -8,7 +8,7 @@
import Region from "./Region.svelte";
export let state: EditThemeState;
let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0 && schema.path[0] !== "layers");
let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0);
let config = state.configuration;
const messages = state.messages;
const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
@ -18,47 +18,61 @@
const perRegion: Record<string, ConfigMeta[]> = {};
for (const schemaElement of schema) {
const key = schemaElement.hints.group ?? "no-group"
const list = perRegion[key] ?? (perRegion[key] = [])
list.push(schemaElement)
const key = schemaElement.hints.group ?? "no-group";
const list = perRegion[key] ?? (perRegion[key] = []);
list.push(schemaElement);
}
console.log({perRegion, schema})
</script>
<div class="flex flex-col h-screen">
<div class="w-full flex justify-between my-2">
<slot />
<h3>Editing theme {$title}</h3>
{#if $hasErrors > 0}
<div class="alert">{$hasErrors} errors detected</div>
{:else}
<a class="primary button" href={baseUrl+state.server.urlFor($title, "themes")} target="_blank" rel="noopener">
Try it out
<ChevronRightIcon class="h-6 w-6 shrink-0" />
</a>
{/if}
</div>
<div class="w-full flex justify-between my-2">
<slot />
<h3>Editing theme {$title}</h3>
{#if $hasErrors > 0}
<div class="alert">{$hasErrors} errors detected</div>
{:else}
<a class="primary button" href={baseUrl+state.server.urlFor($title, "themes")} target="_blank" rel="noopener">
Try it out
<ChevronRightIcon class="h-6 w-6 shrink-0" />
</a>
{/if}
</div>
<div class="m4 h-full overflow-y-auto">
{Object.keys(perRegion).join(";")}
<TabbedGroup>
<div slot="title0">Basic properties</div>
<div slot="content0">
<Region {state} configs={perRegion["basic"]} path={[]}></Region>
<Region {state} configs={perRegion["no-group"]} path={[]}></Region>
</div>
<div slot="title1">Feature switches</div>
<div slot="content1">
<Region {state} configs={perRegion["feature_switches"]} path={[]}></Region>
</div>
<div slot="title2">Configuration file</div>
<div slot="content2">
<div class="literal-code">
{JSON.stringify($config)}
<div class="m4 h-full overflow-y-auto">
{Object.keys(perRegion).join(";")}
<TabbedGroup>
<div slot="title0">Basic properties</div>
<div slot="content0">
<Region configs={perRegion["basic"]} path={[]} {state} title="Basic properties"/>
<Region configs={perRegion["start_location"]} path={[]} {state} title="Start location"/>
</div>
<div slot="title1">Layers</div>
<div slot="content1">
<Region configs={perRegion["layers"]} path={[]} {state} />
</div>
<div slot="title2">Feature switches</div>
<div slot="content2">
<Region configs={perRegion["feature_switches"]} path={[]} {state}></Region>
</div>
<ShowConversionMessages messages={$messages}></ShowConversionMessages>
<div slot="title3">Advanced options</div>
<div slot="content3">
<Region configs={perRegion["advanced"]} path={[]} {state}></Region>
</div>
<div slot="title4">Configuration file</div>
<div slot="content4">
<div class="literal-code">
{JSON.stringify($config)}
</div>
<ShowConversionMessages messages={$messages}></ShowConversionMessages>
</div>
</TabbedGroup>
</div>
</div>
</TabbedGroup>
</div>

9
src/UI/Studio/SchemaBasedArray.svelte
View file

@ -7,6 +7,7 @@
import { TrashIcon } from "@babeard/svelte-heroicons/mini";
import QuestionPreview from "./QuestionPreview.svelte";
import { Utils } from "../../Utils";
import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte";
export let state: EditLayerState;
export let schema: ConfigMeta;
@ -105,6 +106,12 @@
} while (currentIndex !== targetIndex);
}
function schemaForMultitype() {
const sch = {...schema}
sch.hints.typehint = undefined
return sch
}
</script>
<div class="pl-2">
@ -168,6 +175,8 @@
{/if}
</QuestionPreview>
{:else if schema.hints.types}
<SchemaBasedMultiType {state} path={fusePath(value, [])} schema={schemaForMultitype()}/>
{:else}
{#each subparts as subpart}
<SchemaBasedInput {state} path={fusePath(value, subpart.path)} schema={subpart} />

2
src/UI/Studio/SchemaBasedInput.svelte
View file

@ -11,7 +11,7 @@
export let path: (string | number)[] = [];
</script>
{#if schema.hints.typehint === "tagrendering[]"}
{#if schema.hints?.typehint?.endsWith("[]")}
<!-- We cheat a bit here by matching this 'magical' type... -->
<SchemaBasedArray {path} {state} {schema} />
{:else if schema.type === "array" && schema.hints.multianswer === "true"}

31
src/UI/Studio/SchemaBasedMultiType.svelte
View file

@ -89,6 +89,8 @@
const existingValue = state.getCurrentValueFor(path);
let hasOverride = existingValue?.override !== undefined;
console.log({existingValue, hasOverride})
if (hasBooleanOption >= 0 && (existingValue === true || existingValue === false)) {
tags.setData({ value: "" + existingValue });
} else if (lastIsString && typeof existingValue === "string") {
@ -200,18 +202,23 @@
<h3>{schema.hints.title}</h3>
<div> {schema.description} </div>
{/if}
<div>
<TagRenderingEditable {config} selectedElement={undefined} showQuestionIfUnknown={true} {state} {tags} />
</div>
{#if hasOverride}
This object refers to {existingValue.builtin} and overrides some properties. This cannot be edited with MapComplete
Studio
{:else}
<div>
<TagRenderingEditable {config} selectedElement={undefined} showQuestionIfUnknown={true} {state} {tags} />
</div>
{#if chosenOption !== undefined}
{#each subSchemas as subschema}
<SchemaBasedInput {state} schema={subschema}
path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
{/each}
{:else if $messages.length > 0}
{#each $messages as msg}
<div class="alert">{msg.message}</div>
{/each}
{#if chosenOption !== undefined}
{#each subSchemas as subschema}
<SchemaBasedInput {state} schema={subschema}
path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
{/each}
{:else if $messages.length > 0}
{#each $messages as msg}
<div class="alert">{msg.message}</div>
{/each}
{/if}
{/if}
</div>

29
src/UI/Studio/StudioServer.ts
View file

@ -20,12 +20,8 @@ export default class StudioServer {
}[]
> {
const uid = this._userId.data
let uidQueryParam = ""
if (this._userId.data !== undefined) {
uidQueryParam = "?userId=" + uid
}
const { allFiles } = <{ allFiles: string[] }>(
await Utils.downloadJson(this.url + "/overview" + uidQueryParam)
await Utils.downloadJson(this.url + "/overview")
)
const layerOverview: {
id: string
@ -33,12 +29,15 @@ export default class StudioServer {
category: "layers" | "themes"
}[] = []
for (let file of allFiles) {
let owner = undefined
if (file.startsWith("" + uid)) {
owner = uid
let parts = file.split("/")
let owner = Number(parts[0])
if (!isNaN(owner)) {
parts.splice(0, 1)
file = file.substring(file.indexOf("/") + 1)
} else {
owner = undefined
}
const category = <"layers" | "themes">file.substring(0, file.indexOf("/"))
const category = <"layers" | "themes">parts[0]
const id = file.substring(file.lastIndexOf("/") + 1, file.length - ".json".length)
if (Constants.priviliged_layers.indexOf(<any>id) > 0) {
continue
@ -48,9 +47,13 @@ export default class StudioServer {
return layerOverview
}
async fetch(layerId: string, category: "layers" | "themes"): Promise<LayerConfigJson> {
async fetch(
layerId: string,
category: "layers" | "themes",
uid?: number
): Promise<LayerConfigJson> {
try {
return await Utils.downloadJson(this.urlFor(layerId, category))
return await Utils.downloadJson(this.urlFor(layerId, category, uid))
} catch (e) {
return undefined
}
@ -73,8 +76,8 @@ export default class StudioServer {
return this.urlFor(id, "layers")
}
public urlFor(id: string, category: "layers" | "themes") {
const uid = this._userId.data
public urlFor(id: string, category: "layers" | "themes", uid?: number) {
uid ??= this._userId.data
const uidStr = uid !== undefined ? "/" + uid : ""
return `${this.url}${uidStr}/${category}/${id}/${id}.json`
}

74
src/UI/StudioGUI.svelte
View file

@ -3,7 +3,7 @@
import NextButton from "./Base/NextButton.svelte";
import { Store, UIEventSource } from "../Logic/UIEventSource";
import EditLayerState from "./Studio/EditLayerState";
import EditLayerState, { EditThemeState } from "./Studio/EditLayerState";
import EditLayer from "./Studio/EditLayer.svelte";
import Loading from "../assets/svg/Loading.svelte";
import StudioServer from "./Studio/StudioServer";
@ -12,6 +12,8 @@
import { QueryParameters } from "../Logic/Web/QueryParameters";
import layerSchemaRaw from "../../src/assets/schemas/layerconfigmeta.json";
import layoutSchemaRaw from "../../src/assets/schemas/layoutconfigmeta.json";
import If from "./Base/If.svelte";
import BackButton from "./Base/BackButton.svelte";
import ChooseLayerToEdit from "./Studio/ChooseLayerToEdit.svelte";
@ -21,6 +23,7 @@
import * as intro from "../assets/studio_introduction.json";
import { QuestionMarkCircleIcon } from "@babeard/svelte-heroicons/mini";
import type { ConfigMeta } from "./Studio/configMeta";
import EditTheme from "./Studio/EditTheme.svelte";
export let studioUrl = window.location.hostname === "127.0.0.1" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org";
@ -35,32 +38,47 @@
const uid = osmConnection.userDetails.map(ud => ud?.uid);
const studio = new StudioServer(studioUrl, uid);
let layersWithErr = uid.bind(uid => UIEventSource.FromPromiseWithErr(studio.fetchLayerOverview()));
let layers: Store<{ owner: number }[]> = layersWithErr.mapD(l => l.success);
let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchOverview());
let layers: Store<{ owner: number }[]> = layersWithErr.mapD(l => l.success?.filter(l => l.category === "layers"));
let selfLayers = layers.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
let otherLayers = layers.mapD(ls => ls.filter(l => l.owner !== uid.data), [uid]);
let otherLayers = layers.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
let officialLayers = layers.mapD(ls => ls.filter(l => l.owner === undefined), [uid]);
let themes: Store<{ owner: number }[]> = layersWithErr.mapD(l => l.success?.filter(l => l.category === "themes"));
let selfThemes = themes.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
let otherThemes = themes.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
let officialThemes = themes.mapD(ls => ls.filter(l => l.owner === undefined), [uid]);
let state: undefined | "edit_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
let initialLayerConfig: { id: string };
let state: undefined | "edit_layer" | "edit_theme" | "editing_layer" | "editing_theme" | "loading" = undefined;
const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
let editLayerState = new EditLayerState(layerSchema, studio, osmConnection);
const layoutSchema: ConfigMeta[] = <any>layoutSchemaRaw;
let editThemeState = new EditThemeState(layoutSchema, studio);
let layerId = editLayerState.configuration.map(layerConfig => layerConfig.id);
let showIntro = UIEventSource.asBoolean(LocalStorageSource.Get("studio-show-intro", "true"));
async function editLayer(event: Event) {
const layerId = event.detail;
const layerId: {owner: number, id: string} = event.detail;
state = "loading";
initialLayerConfig = await studio.fetchLayer(layerId);
editLayerState.configuration.setData(await studio.fetch(layerId.id, "layers", layerId.owner));
state = "editing_layer";
}
async function editTheme(event: Event) {
const id : {id: string, owner: number} = event.detail;
state = "loading";
editThemeState.configuration.setData(await studio.fetch(id.id, "themes", id.owner));
state = "editing_theme";
}
async function createNewLayer() {
state = "loading";
initialLayerConfig = {
const initialLayerConfig = {
credits: createdBy,
minzoom: 15,
pointRendering: [
@ -77,6 +95,7 @@
color: "blue"
}]
};
editLayerState.configuration.setData(initialLayerConfig);
state = "editing_layer";
}
@ -123,14 +142,12 @@
<NextButton on:click={() => createNewLayer()}>
Create a new layer
</NextButton>
<!--
<NextButton on:click={() => state = "edit_theme"}>
Edit a theme
</NextButton>
<NextButton on:click={() => state = "new_theme"}>
<NextButton on:click={() => {editThemeState.configuration.setData({}); state = "editing_theme"}}>
Create a new theme
</NextButton>
-->
<NextButton clss="small" on:click={() => {showIntro.setData(true)} }>
<QuestionMarkCircleIcon class="w-6 h-6" />
Show the introduction again
@ -146,25 +163,48 @@
<ChooseLayerToEdit layerIds={$selfLayers} on:layerSelected={editLayer}>
<h3 slot="title">Your layers</h3>
</ChooseLayerToEdit>
<h3>Official layers</h3>
<h3>Layers by other contributors</h3>
<ChooseLayerToEdit layerIds={$otherLayers} on:layerSelected={editLayer} />
<h3>Official layers by MapComplete</h3>
<ChooseLayerToEdit layerIds={$officialLayers} on:layerSelected={editLayer} />
</div>
{:else if state === "edit_theme"}
<div class="flex flex-col m-4">
<BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio
</BackButton>
<h2>Choose a theme to edit</h2>
<ChooseLayerToEdit layerIds={$selfThemes} on:layerSelected={editTheme}>
<h3 slot="title">Your themes</h3>
</ChooseLayerToEdit>
<h3>Themes by other contributors</h3>
<ChooseLayerToEdit layerIds={$otherThemes} on:layerSelected={editTheme} />
<h3>Official themes by MapComplete</h3>
<ChooseLayerToEdit layerIds={$officialThemes} on:layerSelected={editTheme} />
</div>
{:else if state === "loading"}
<div class="w-8 h-8">
<Loading />
</div>
{:else if state === "editing_layer"}
<EditLayer {initialLayerConfig} state={editLayerState}>
<EditLayer state={editLayerState}>
<BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio
</BackButton>
</EditLayer>
{:else if state === "editing_theme"}
<EditTheme state={editThemeState} >
<BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio
</BackButton>
</EditTheme>
{/if}
</LoginToggle>
</If>
{#if $showIntro}
<FloatOver>
<FloatOver on:close={() => {showIntro.setData(false)}}>
<div class="flex p-4 h-full">
<Walkthrough pages={intro.sections} on:done={() => {showIntro.setData(false)}} />
</div>