Update docs for @reactodia/workspace@0.33.0

.github/workflows/ci-checks.yml

@@ -10,7 +10,7 @@ on:
     branches: [ "main" ]
 
 env:
-  reactodia_workspace_ref: 'v0.32.0'
+  reactodia_workspace_ref: 'v0.33.0'
 
 jobs:
   build:

.github/workflows/deploy-pages.yml

@@ -8,7 +8,7 @@ on:
   workflow_dispatch:
 
 env:
-  reactodia_workspace_ref: 'v0.32.0'
+  reactodia_workspace_ref: 'v0.33.0'
 
 jobs:
   build:

docs/concepts/i18n.md

@@ -75,7 +75,7 @@ function MultipleTranslations() {
 
 The localization mechanism can be used for a custom component nested inside the [`Workspace`](/docs/components/workspace.md) by getting a [`Translation`](/docs/api/workspace/interfaces/Translation.md) instance which can be used to format localizable strings.
 
-[`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook can be used to acquire the `Translation` object; alternatively it is available as part of the [`WorkspaceContext`](/docs/concepts/workspace-context.md) via [`WorkspaceContext.translation`](/docs/api/workspace/interfaces/WorkspaceContext.md) property.
+[`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook can be used to acquire the `Translation` object.
 
 In the following example, additional custom translation keys are added to the workspace to provide localizable component labels:
 ```tsx live noInline

docs/concepts/workspace-context.md

@@ -16,7 +16,6 @@ The [`WorkspaceContext`](/docs/api/workspace/interfaces/WorkspaceContext) contai
 | `view`        | [`SharedCanvasState`](/docs/api/workspace/classes/SharedCanvasState.md) | Stores common state and settings for all [canvases](/docs/components/canvas.md) in the workspace. |
 | `editor`      | [`EditorController`](/docs/api/workspace/classes/EditorController.md) | Stores, modifies and validates changes from the visual graph authoring.<br/>See [graph authoring](/docs/concepts/graph-authoring). |
 | `overlay`     | [`OverlayController`](/docs/api/workspace/classes/OverlayController.md) | Controls UI overlays for the canvases, including dialogs and tasks. |
-| `translation` | [`Translation`](/docs/api/workspace/interfaces/Translation.md) | Provides a translation for UI text strings.<br/>See [i18n](/docs/concepts/i18n). |
 
 ## Getting the workspace context
 
@@ -68,5 +67,5 @@ function Example() {
 ```
 
 :::note
-The library also uses separate context for [i18n](/docs/concepts/i18n) (which is accessible by [`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook and `translation` property of the workspace context) and a nested context for the [`Canvas`](/docs/components/canvas.md).
+The library also uses separate context for [i18n](/docs/concepts/i18n) (accessible with [`useTranslation()`](/docs/api/workspace/functions/useTranslation.md) hook) and a nested context for the [`Canvas`](/docs/components/canvas.md) (accessible with [`useCanvas()`](/docs/api/workspace/functions/useCanvas.md) hook).
 :::

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactodia/reactodia.github.io",
-  "version": "0.31.2",
+  "version": "0.33.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -21,7 +21,7 @@
     "@easyops-cn/docusaurus-search-local": "^0.51.0",
     "@mdx-js/react": "^3.1.0",
     "@reactodia/hashmap": "^0.2.1",
-    "@reactodia/workspace": "^0.32.0",
+    "@reactodia/workspace": "^0.33.0",
     "clsx": "^2.1.1",
     "n3": "^1.17.2",
     "prism-react-renderer": "^2.4.1",

src/examples/ExampleMetadata.ts

@@ -145,23 +145,27 @@ export class ExampleMetadataProvider extends Reactodia.BaseMetadataProvider {
         await Reactodia.delay(SIMULATED_DELAY, {signal});
         const properties = new Map<Reactodia.PropertyTypeIri, Reactodia.MetadataPropertyShape>();
         if (types.some(type => this.editableTypes.has(type))) {
-          properties.set(rdfs.comment, {
+          properties.set(Reactodia.rdfs.label, {
             valueShape: {termType: 'Literal'},
+            order: 1,
           });
-          properties.set(Reactodia.rdfs.label, {
+          properties.set(rdfs.comment, {
             valueShape: {termType: 'Literal'},
+            order: 2,
           });
           properties.set(Reactodia.schema.thumbnailUrl, {
             valueShape: {termType: 'NamedNode'},
             maxCount: 1,
+            order: 3,
           });
           properties.set(rdfs.seeAlso, {
             valueShape: {termType: 'NamedNode'},
+            order: 4,
           });
         }
         return {properties};
       },
-      getRelationShape: async (linkType, {signal}) => {
+      getRelationShape: async (linkType, source, target, {signal}) => {
         await Reactodia.delay(SIMULATED_DELAY, {signal});
         const properties = new Map<Reactodia.PropertyTypeIri, Reactodia.MetadataPropertyShape>();
         if (this.editableRelations.has(linkType)) {
@@ -183,11 +187,16 @@ export class ExampleValidationProvider implements Reactodia.ValidationProvider {
   async validate(
     event: Reactodia.ValidationEvent
   ): Promise<Reactodia.ValidationResult> {
+    const {target, outboundLinks, graph, state, translation, language, signal} = event;
     const items: Array<Reactodia.ValidatedElement | Reactodia.ValidatedLink> = [];
 
-    if (event.target.types.includes(owl.Class)) {
-      event.state.links.forEach(e => {
-        if (e.type === 'relationAdd' && e.data.sourceId === event.target.id) {
+    if (target.types.includes(owl.Class)) {
+      for (const e of state.links.values()) {
+        if (e.type === 'relationAdd' && e.data.sourceId === target.id) {
+          const linkType = graph.getLinkType(e.data.linkTypeId);
+          const linkLabel = translation.formatLabel(
+              linkType?.data?.label, e.data.linkTypeId, language
+          );
           items.push({
             type: 'link',
             target: e.data,
@@ -196,41 +205,42 @@ export class ExampleValidationProvider implements Reactodia.ValidationProvider {
           });
           items.push({
             type: 'element',
-            target: event.target.id,
+            target: target.id,
             severity: 'warning',
-            message: `Cannot create <${e.data.linkTypeId}> link from a Class`,
+            message: `Cannot create "${linkLabel}" relation from a Class`,
           });
         }
-      });
+      }
     }
 
     if (
-      event.state.elements.has(event.target.id) &&
-      event.target.types.includes(owl.ObjectProperty)
+      state.elements.has(target.id) &&
+      target.types.includes(owl.ObjectProperty)
     ) {
-      if (!event.outboundLinks.some(link => link.linkTypeId === rdfs.subPropertyOf)) {
+      if (!outboundLinks.some(link => link.linkTypeId === rdfs.subPropertyOf)) {
         items.push({
           type: 'element',
-          target: event.target.id,
+          target: target.id,
           severity: 'info',
           message: 'It might be a good idea to make the property a sub-property of another',
         });
       }
     }
 
-    for (const link of event.outboundLinks) {
+    for (const link of outboundLinks) {
       const {[rdfs.comment]: comments} = link.properties;
       if (comments && !comments.every(comment => comment.termType === 'Literal' && comment.language)) {
         items.push({
           type: 'link',
           target: link,
           severity: 'error',
-          message: 'rdfs:comment value should have a language',
+          message: 'value should have a language',
+          propertyType: rdfs.comment,
         });
       }
     }
 
-    await Reactodia.delay(SIMULATED_DELAY, {signal: event.signal});
+    await Reactodia.delay(SIMULATED_DELAY, {signal});
     return {items};
   }
 }