Chore: Block Manager + Variant ID Polishing (#18321)

* use observablePart()

* methods for variant ID

* move into a gotManager method
This commit is contained in:
Niels Lyngsø
2025-02-20 09:35:53 +01:00
committed by GitHub
parent b10a11b5b7
commit edff2c1c8c
3 changed files with 114 additions and 86 deletions

View File

@@ -92,89 +92,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
this.#retrieveBlockManager = this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
this.#blockManager = manager;
this.observe(
manager.liveEditingMode,
(liveEditingMode) => {
this.#liveEditingMode = liveEditingMode ?? false;
},
'observeLiveEditingMode',
);
this.observe(
observeMultiple([
manager.variantId,
this.content.structure.variesByCulture,
this.content.structure.variesBySegment,
]),
([variantId, variesByCulture, variesBySegment]) => {
if (!variantId || variesByCulture === undefined || variesBySegment === undefined) return;
if (!variesBySegment && !variesByCulture) {
variantId = UmbVariantId.CreateInvariant();
} else if (!variesBySegment) {
variantId = variantId.toSegmentInvariant();
} else if (!variesByCulture) {
variantId = variantId.toCultureInvariant();
}
this.#variantId.setValue(variantId);
},
'observeVariantIds',
);
this.removeUmbControllerByAlias('observeHasExpose');
this.observe(
observeMultiple([this.contentKey, this.variantId]),
([contentKey, variantId]) => {
if (!contentKey || !variantId) return;
this.observe(
manager.hasExposeOf(contentKey, variantId),
(exposed) => {
this.#exposed.setValue(exposed);
},
'observeHasExpose',
);
},
'observeContentKeyAndVariantId',
);
this.observe(
observeMultiple([manager.readOnlyState.isReadOnly, this.variantId]),
([isReadOnly, variantId]) => {
const unique = 'UMB_BLOCK_MANAGER_CONTEXT';
if (variantId === undefined) return;
if (isReadOnly) {
const state = {
unique,
variantId,
message: '',
};
this.readOnlyState?.addState(state);
} else {
this.readOnlyState?.removeState(unique);
}
},
'observeIsReadOnly',
);
this.observe(
this.content.contentTypeId,
(contentTypeId) => {
this.observe(
contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined,
(blockType) => {
if (blockType?.editorSize) {
this.setEditorSize(blockType.editorSize);
}
},
'observeBlockType',
);
},
'observeContentTypeId',
);
this.#gotManager();
});
this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
@@ -216,6 +134,95 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
]);
}
#gotManager() {
if (!this.#blockManager) return;
const manager = this.#blockManager;
this.observe(
manager.liveEditingMode,
(liveEditingMode) => {
this.#liveEditingMode = liveEditingMode ?? false;
},
'observeLiveEditingMode',
);
this.observe(
observeMultiple([
manager.variantId,
this.content.structure.variesByCulture,
this.content.structure.variesBySegment,
]),
([variantId, variesByCulture, variesBySegment]) => {
if (!variantId || variesByCulture === undefined || variesBySegment === undefined) return;
if (!variesBySegment && !variesByCulture) {
variantId = UmbVariantId.CreateInvariant();
} else if (!variesBySegment) {
variantId = variantId.toSegmentInvariant();
} else if (!variesByCulture) {
variantId = variantId.toCultureInvariant();
}
this.#variantId.setValue(variantId);
},
'observeVariantIds',
);
this.removeUmbControllerByAlias('observeHasExpose');
this.observe(
observeMultiple([this.contentKey, this.variantId]),
([contentKey, variantId]) => {
if (!contentKey || !variantId) return;
this.observe(
manager.hasExposeOf(contentKey, variantId),
(exposed) => {
this.#exposed.setValue(exposed);
},
'observeHasExpose',
);
},
'observeContentKeyAndVariantId',
);
this.observe(
observeMultiple([manager.readOnlyState.isReadOnly, this.variantId]),
([isReadOnly, variantId]) => {
const unique = 'UMB_BLOCK_MANAGER_CONTEXT';
if (variantId === undefined) return;
if (isReadOnly) {
const state = {
unique,
variantId,
message: '',
};
this.readOnlyState?.addState(state);
} else {
this.readOnlyState?.removeState(unique);
}
},
'observeIsReadOnly',
);
this.observe(
this.content.contentTypeId,
(contentTypeId) => {
this.observe(
contentTypeId ? manager.blockTypeOf(contentTypeId) : undefined,
(blockType) => {
if (blockType?.editorSize) {
this.setEditorSize(blockType.editorSize);
}
},
'observeBlockType',
);
},
'observeContentTypeId',
);
}
setEditorSize(editorSize: UUIModalSidebarSize) {
this.#modalContext?.setModalSize(editorSize);
}

View File

@@ -1,3 +1,5 @@
import { UmbDeprecation } from '../utils/index.js';
export type UmbObjectWithVariantProperties = {
culture: string | null;
segment: string | null;
@@ -5,9 +7,16 @@ export type UmbObjectWithVariantProperties = {
/**
*
* @param variant
* @param {UmbObjectWithVariantProperties} variant - An object with variant specifying properties to convert to a string.
* @returns {string} A string representation of the variant properties.
* @deprecated Use UmbVariantId to make this conversion. Will ve removed in v.17
*/
export function variantPropertiesObjectToString(variant: UmbObjectWithVariantProperties): string {
new UmbDeprecation({
deprecated: 'Method `variantPropertiesObjectToString` is deprecated',
removeInVersion: '17',
solution: 'Use UmbVariantId to make this conversion',
}).warn();
// Currently a direct copy of the toString method of variantId.
return (variant.culture || UMB_INVARIANT_CULTURE) + (variant.segment ? `_${variant.segment}` : '');
}
@@ -79,6 +88,10 @@ export class UmbVariantId {
return this.culture === null && this.segment === null;
}
public clone(): UmbVariantId {
return new UmbVariantId(null, this.segment);
}
public toObject(): UmbObjectWithVariantProperties {
return { culture: this.culture, segment: this.segment };
}
@@ -89,6 +102,14 @@ export class UmbVariantId {
public toCultureInvariant(): UmbVariantId {
return Object.freeze(new UmbVariantId(null, this.segment));
}
public toCulture(culture: string | null): UmbVariantId {
return Object.freeze(new UmbVariantId(culture, this.segment));
}
public toSegment(segment: string | null): UmbVariantId {
return Object.freeze(new UmbVariantId(this.culture, segment));
}
public toVariant(varyByCulture?: boolean, varyBySegment?: boolean): UmbVariantId {
return Object.freeze(new UmbVariantId(varyByCulture ? this.culture : null, varyBySegment ? this.segment : null));
}

View File

@@ -1,7 +1,7 @@
import { UmbLanguageCollectionRepository } from '../collection/index.js';
import type { UmbLanguageDetailModel } from '../types.js';
import { UMB_APP_LANGUAGE_CONTEXT } from './app-language.context-token.js';
import { UmbArrayState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
@@ -20,7 +20,7 @@ export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext>
public readonly appLanguageReadOnlyState = new UmbReadOnlyStateManager(this);
public readonly appDefaultLanguage = createObservablePart(this.#languages.asObservable(), (languages) =>
public readonly appDefaultLanguage = this.#languages.asObservablePart((languages) =>
languages.find((language) => language.isDefault),
);