|
| 1 | +import { AbstractViewField } from 'packages/core/src/fields/viewFields/AbstractViewField'; |
| 2 | +import { type ViewFieldBase } from 'packages/core/src/fields/viewFields/ViewFieldBase'; |
| 3 | +import { MDLinkParser } from 'packages/core/src/parsers/MarkdownLinkParser'; |
| 4 | +import { type BindTargetDeclaration } from 'packages/core/src/parsers/bindTargetParser/BindTargetDeclaration'; |
| 5 | +import { Signal } from 'packages/core/src/utils/Signal'; |
| 6 | +import { getUUID } from 'packages/core/src/utils/Utils'; |
| 7 | +import { |
| 8 | + ErrorLevel, |
| 9 | + MetaBindExpressionError, |
| 10 | + MetaBindValidationError, |
| 11 | +} from 'packages/core/src/utils/errors/MetaBindErrors'; |
| 12 | +import ImageGrid from 'packages/core/src/utils/components/ImageGrid.svelte'; |
| 13 | + |
| 14 | +export class ImageVF extends AbstractViewField { |
| 15 | + component?: ImageGrid; |
| 16 | + |
| 17 | + constructor(base: ViewFieldBase) { |
| 18 | + super(base); |
| 19 | + } |
| 20 | + |
| 21 | + protected buildVariables(): void { |
| 22 | + // filter out empty strings |
| 23 | + const entries: (string | BindTargetDeclaration)[] = this.base |
| 24 | + .getDeclaration() |
| 25 | + .declarationArray.filter(x => (typeof x === 'string' ? x : true)); |
| 26 | + |
| 27 | + if (entries.length !== 1) { |
| 28 | + throw new MetaBindValidationError({ |
| 29 | + errorLevel: ErrorLevel.ERROR, |
| 30 | + effect: 'can not create view field', |
| 31 | + cause: 'image view filed only supports exactly a single bind target and not text content', |
| 32 | + }); |
| 33 | + } |
| 34 | + |
| 35 | + const firstEntry = entries[0]; |
| 36 | + if (typeof firstEntry === 'string') { |
| 37 | + throw new MetaBindValidationError({ |
| 38 | + errorLevel: ErrorLevel.ERROR, |
| 39 | + effect: 'can not create view field', |
| 40 | + cause: 'image view filed only supports exactly a single bind target and not text content', |
| 41 | + }); |
| 42 | + } |
| 43 | + |
| 44 | + firstEntry.listenToChildren = true; |
| 45 | + |
| 46 | + this.variables = [ |
| 47 | + { |
| 48 | + bindTargetDeclaration: firstEntry, |
| 49 | + inputSignal: new Signal<unknown>(undefined), |
| 50 | + uuid: getUUID(), |
| 51 | + contextName: `MB_VAR_0`, |
| 52 | + }, |
| 53 | + ]; |
| 54 | + } |
| 55 | + |
| 56 | + protected computeValue(): string { |
| 57 | + if (this.variables.length !== 1) { |
| 58 | + throw new MetaBindExpressionError({ |
| 59 | + errorLevel: ErrorLevel.CRITICAL, |
| 60 | + effect: 'failed to evaluate image view field', |
| 61 | + cause: 'there should be exactly one variable', |
| 62 | + }); |
| 63 | + } |
| 64 | + |
| 65 | + const variable = this.variables[0]; |
| 66 | + const content = variable.inputSignal.get(); |
| 67 | + |
| 68 | + // we want the return value to be a human-readable string, since someone could save this to the frontmatter |
| 69 | + if (typeof content === 'string') { |
| 70 | + return MDLinkParser.convertToLinkString(content); |
| 71 | + } else if (Array.isArray(content)) { |
| 72 | + const strings = content.filter(x => typeof x === 'string') as string[]; |
| 73 | + return strings |
| 74 | + .map(x => MDLinkParser.convertToLinkString(x)) |
| 75 | + .filter(x => x !== '') |
| 76 | + .join(', '); |
| 77 | + } else { |
| 78 | + return ''; |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + protected onInitialRender(container: HTMLElement): void { |
| 83 | + this.component = new ImageGrid({ |
| 84 | + target: container, |
| 85 | + props: { |
| 86 | + images: [], |
| 87 | + plugin: this.base.plugin, |
| 88 | + }, |
| 89 | + }); |
| 90 | + } |
| 91 | + |
| 92 | + protected async onRerender(container: HTMLElement, text: string): Promise<void> { |
| 93 | + const linkList = MDLinkParser.parseLinkList(text); |
| 94 | + this.component?.$destroy(); |
| 95 | + this.component = new ImageGrid({ |
| 96 | + target: container, |
| 97 | + props: { |
| 98 | + images: linkList.map(x => x.target), |
| 99 | + plugin: this.base.plugin, |
| 100 | + }, |
| 101 | + }); |
| 102 | + } |
| 103 | + |
| 104 | + protected onUnmount(): void { |
| 105 | + super.onUnmount(); |
| 106 | + |
| 107 | + this.component?.$destroy(); |
| 108 | + } |
| 109 | +} |
0 commit comments