- Cadmus Bricks Shell V3
This project was generated using Angular CLI version 20.0.0.
🚀 You can play with the demo at https://cadmus-bricks-v3.fusi-soft.com (except for some services I did not put in the demo server).
This is Cadmus bricks version 3, derived from Cadmus bricks version 2. In Cadmus, bricks are small UI widgets providing frequently used logic and UX, and used as the building blocks for part or fragment editors.
V2 retains its own repository for compatibility purposes, while new development will occur on V3 only. The API of the components has not changed, except for these
- all the image annotation components have been moved to a separate new repository, refactored for Annotorious V3. Bricks V2 still depend on Annotorious V2, which is now deprecated. In this repository, a new separate library provides the core wrapper for using Annotorious V3 in Angular. Cadmus bricks V3 libraries depend on it, and are found in the same repository.
- a new flags set brick replaces the legacy (V2) Cadmus UI flags picker, which was much harder to use, and also provides new features in addition to all those provided by the legacy V2 component. So, if your components relied on that legacy component, you should upgrade them to use the new one, which is a very simple procedure.
All the V3 bricks start from major version number 8, and align with modern Angular, so they are standalone components, and use signal-based input and output properties.
To use a brick:
- install the package with NPM. If additional third-party dependencies or configuration is required, this is documented in the package README (see the list below).
- import the component(s) you want to use.
- use the brick via its selector in your component template, binding it to your code as required by its API.
🐋 Quick Docker image build (the only purpose of this image is letting testers play with controls in the incubator):
pnpm run build-lib.- ensure to update the version in
env.js(anddocker-compose.yml), andng build --configuration production. docker build . -t vedph2020/cadmus-bricks-v3:10.0.9 -t vedph2020/cadmus-bricks-v3:latest(replace with the current version).
Use publish.bat to publish the libraries to NPM.
All imaging libraries have been moved into a separate repository: @myrmidon/ngx-annotorious.
- @myrmidon/cadmus-mat-physical-grid
- @myrmidon/cadmus-mat-physical-size
- @myrmidon/cadmus-mat-physical-state
- @myrmidon/cadmus-text-block-view
- @myrmidon/cadmus-text-ed
- @myrmidon/cadmus-text-ed-md
- @myrmidon/cadmus-text-ed-txt
- @myrmidon/cadmus-ui-custom-action-bar
- @myrmidon/cadmus-ui-flag-set
- @myrmidon/cadmus-ui-note-set
- @myrmidon/cadmus-ui-object-view
@cisstech/nge, you must follow these configuration steps to avoid build errors.
Angular 21 uses a new esbuild-based builder which has stricter requirements for handling Monaco Editor dependencies. You may encounter these errors:
- TypeScript error:
Cannot find namespace 'monaco' - Build error:
No loader is configured for ".ttf" files: ...monaco-editor/.../codicon.ttf
@cisstech/nge@18.3.0 requires monaco-editor@^0.43.0. Do not use monaco-editor@0.55.x or newer, as these versions have breaking changes that cause TTF font loading issues with Angular 21's esbuild.
In your package.json:
{
"dependencies": {
"@cisstech/nge": "^18.3.0",
"monaco-editor": "^0.43.0"
}
}Add monaco-editor to the types array in your tsconfig.app.json to make the monaco namespace globally available:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"@angular/localize",
"monaco-editor"
]
}
}In your app.config.ts (or equivalent application configuration file):
import { NgeMonacoModule } from '@cisstech/nge/monaco';
export const appConfig: ApplicationConfig = {
providers: [
// ... other providers
importProvidersFrom(NgeMonacoModule.forRoot({})),
],
};By default, @cisstech/nge loads Monaco Editor from CDN (https://cdn.jsdelivr.net/npm/monaco-editor@0.20.0), so you don't need to configure asset paths unless you want to serve Monaco from your own server.
You can now use the monaco namespace in your components without importing it:
import { Component } from '@angular/core';
import { NgeMonacoModule } from '@cisstech/nge/monaco';
@Component({
selector: 'app-my-editor',
imports: [NgeMonacoModule],
template: `<nge-monaco-editor (onInit)="onEditorInit($event)"></nge-monaco-editor>`
})
export class MyEditorComponent {
private editor?: monaco.editor.IStandaloneCodeEditor;
onEditorInit(editor: monaco.editor.IEditor) {
this.editor = editor as monaco.editor.IStandaloneCodeEditor;
// Configure editor...
}
}Why these steps are necessary:
- Version compatibility:
@cisstech/nge@18.3.0was built and tested withmonaco-editor@^0.43.0. Newer versions (0.50+) introduce breaking changes in how fonts are loaded. - Type definitions: The
monaconamespace is provided by monaco-editor's type definitions. Adding it to the TypeScript configuration makes these types globally available without explicit imports. - Angular 21 esbuild: The new Angular builder has different handling of CSS imports and font files compared to webpack, making newer Monaco versions incompatible without additional configuration.
If you still encounter issues:
- Clear build cache: Delete
node_modules,package-lock.json(orpnpm-lock.yaml), and.angularfolder, then reinstall. - Verify versions: Run
npm list monaco-editororpnpm list monaco-editorto ensure the correct version is installed. - Check for conflicting configs: Ensure no other TypeScript config files are overriding the types configuration.
Additional Resources:
- Monaco Editor - Loading TTF in Angular 17+ - Stack Overflow
- Angular CLI TTF loader issue - GitHub
- @cisstech/nge Documentation
I created this workspace with these commands:
ng new cadmus-bricks-shell-v3
cd cadmus-bricks-shell-v3
ng add @angular/material
ng add @angular/localize
ng g library @myrmidon/cadmus-cod-location --prefix cadmus
ng g library @myrmidon/cadmus-geo-location --prefix cadmus
ng g library @myrmidon/cadmus-mat-physical-grid --prefix cadmus
ng g library @myrmidon/cadmus-mat-physical-size --prefix cadmus
ng g library @myrmidon/cadmus-mat-physical-state --prefix cadmus
ng g library @myrmidon/cadmus-refs-asserted-chronotope --prefix cadmus
ng g library @myrmidon/cadmus-refs-asserted-ids --prefix cadmus
ng g library @myrmidon/cadmus-refs-assertion --prefix cadmus
ng g library @myrmidon/cadmus-refs-chronotope --prefix cadmus
ng g library @myrmidon/cadmus-refs-citation --prefix cadmus
ng g library @myrmidon/cadmus-refs-dbpedia-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-decorated-counts --prefix cadmus
ng g library @myrmidon/cadmus-refs-decorated-ids --prefix cadmus
ng g library @myrmidon/cadmus-refs-doc-references --prefix cadmus
ng g library @myrmidon/cadmus-refs-external-ids --prefix cadmus
ng g library @myrmidon/cadmus-refs-geonames-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-historical-date --prefix cadmus
ng g library @myrmidon/cadmus-refs-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-mol-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-mufi-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-proper-name --prefix cadmus
ng g library @myrmidon/cadmus-refs-viaf-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-whg-lookup --prefix cadmus
ng g library @myrmidon/cadmus-refs-zotero-lookup --prefix cadmus
ng g library @myrmidon/cadmus-text-block-view --prefix cadmus
ng g library @myrmidon/cadmus-text-ed --prefix cadmus
ng g library @myrmidon/cadmus-text-ed-md --prefix cadmus
ng g library @myrmidon/cadmus-text-ed-txt --prefix cadmus
ng g library @myrmidon/cadmus-ui-custom-action-bar --prefix cadmus
ng g library @myrmidon/cadmus-ui-flag-set --prefix cadmus
ng g library @myrmidon/cadmus-ui-note-set --prefix cadmus
ng g library @myrmidon/cadmus-ui-object-view --prefix cadmus⌛ History