Fix graph authoring issues

CHANGELOG.md

@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Display elliptical authoring state overlays for elliptically-shaped entity elements.
 - Use provided `duration` in `CanvasApi.animateGraph()` for element transitions without the need to override the styles.
 - Trigger `keydown`, `keyup`, `scroll` and `contextMenu` canvas events only from a non-widget layer.
+- Fix marking existing relation as new or changed after moving its source or target to its original source or target.
 
 #### ⏱ Performance
 - Optimize diagram loading time by avoiding unnecessary updates and separating a measuring element sizes step from applying the sizes to the rendering state.

src/data/rdf/rdfDataProvider.ts

@@ -12,7 +12,7 @@ import { makeCaseInsensitiveFilter } from '../utils';
 
 import { MemoryDataset, IndexQuadBy, indexedDataset } from './memoryDataset';
 import * as Rdf from './rdfModel';
-import { rdf, rdfs, schema } from './vocabulary';
+import { owl, rdf, rdfs, schema } from './vocabulary';
 
 /**
  * Options for {@link RdfDataProvider}.
@@ -70,14 +70,6 @@ export interface RdfDataProviderOptions {
 
 const BLANK_PREFIX = 'urn:reactodia:blank:rdf:';
 
-const OWL_CLASS = 'http://www.w3.org/2002/07/owl#Class';
-const OWL_OBJECT_PROPERTY = 'http://www.w3.org/2002/07/owl#ObjectProperty';
-
-const RDF_PROPERTY = `${rdf.namespace}#Property` as const;
-
-const RDFS_CLASS = `${rdfs.namespace}#Class` as const;
-const RDFS_SUB_CLASS_OF = `${rdfs.namespace}#subClassOf`;
-
 /**
  * Provides graph data from in-memory [RDF/JS-compatible](https://rdf.js.org/data-model-spec/)
  * graph dataset.
@@ -113,11 +105,11 @@ export class RdfDataProvider implements DataProvider {
             ? null : this.factory.namedNode(options.labelPredicate ?? rdfs.label);
         this.imagePredicate = options.imagePredicate === null
             ? null : this.factory.namedNode(options.imagePredicate ?? schema.thumbnailUrl);
-        this.elementTypeBaseTypes = (options.elementTypeBaseTypes ?? [OWL_CLASS, RDFS_CLASS])
+        this.elementTypeBaseTypes = (options.elementTypeBaseTypes ?? [owl.Class, rdfs.Class])
             .map(iri => this.factory.namedNode(iri));
         this.elementSubtypePredicate = options.elementSubtypePredicate === null
-            ? null : this.factory.namedNode(options.elementSubtypePredicate ?? RDFS_SUB_CLASS_OF);
-        this.linkTypeBaseTypes = (options.linkTypeBaseTypes ?? [OWL_OBJECT_PROPERTY, RDF_PROPERTY])
+            ? null : this.factory.namedNode(options.elementSubtypePredicate ?? rdfs.subClassOf);
+        this.linkTypeBaseTypes = (options.linkTypeBaseTypes ?? [owl.ObjectProperty, rdf.Property])
             .map(iri => this.factory.namedNode(iri));
     }
 

src/data/rdf/vocabulary.ts

@@ -1,11 +1,25 @@
+const NAMESPACE_OWL = 'http://www.w3.org/2002/07/owl#';
+/**
+ * Vocabulary for common terms from `owl: <http://www.w3.org/2002/07/owl#>` namespace.
+ *
+ * @category Constants
+ */
+export const owl = {
+    $namespace: NAMESPACE_OWL,
+    Class: `${NAMESPACE_OWL}Class`,
+    DatatypeProperty: `${NAMESPACE_OWL}DatatypeProperty`,
+    ObjectProperty: `${NAMESPACE_OWL}ObjectProperty`,
+} as const;
+
 const NAMESPACE_RDF = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#';
 /**
  * Vocabulary for common terms from `rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>` namespace.
  *
  * @category Constants
  */
 export const rdf = {
-    namespace: NAMESPACE_RDF,
+    $namespace: NAMESPACE_RDF,
+    Property: `${NAMESPACE_RDF}Property`,
     langString: `${NAMESPACE_RDF}langString`,
     type: `${NAMESPACE_RDF}type`,
     JSON: `${NAMESPACE_RDF}JSON`,
@@ -18,8 +32,10 @@ const NAMESPACE_RDFS = 'http://www.w3.org/2000/01/rdf-schema#';
  * @category Constants
  */
 export const rdfs = {
-    namespace: NAMESPACE_RDFS,
+    $namespace: NAMESPACE_RDFS,
+    Class: `${NAMESPACE_RDFS}Class`,
     label: `${NAMESPACE_RDFS}label`,
+    subClassOf: `${NAMESPACE_RDFS}subClassOf`,
 } as const;
 
 const NAMESPACE_SCHEMA = 'http://schema.org/';
@@ -29,7 +45,7 @@ const NAMESPACE_SCHEMA = 'http://schema.org/';
  * @category Constants
  */
 export const schema = {
-    namespace: NAMESPACE_SCHEMA,
+    $namespace: NAMESPACE_SCHEMA,
     thumbnailUrl: `${NAMESPACE_SCHEMA}thumbnailUrl`,
 } as const;
 
@@ -40,6 +56,6 @@ const NAMESPACE_XSD = 'http://www.w3.org/2001/XMLSchema#';
  * @category Constants
  */
 export const xsd = {
-    namespace: NAMESPACE_XSD,
+    $namespace: NAMESPACE_XSD,
     string: `${NAMESPACE_XSD}string`,
 } as const;

src/editor/authoringState.ts

@@ -315,11 +315,18 @@ export namespace AuthoringState {
         }
         const newState = clone(state);
         const previous = state.links.get(before);
-        newState.links.set(before, {
-            type: 'relationChange',
-            before: (previous && previous.type === 'relationChange') ? previous.before : before,
-            data: after,
-        });
+        if (previous?.type === 'relationAdd') {
+            newState.links.set(before, {
+                type: 'relationAdd',
+                data: after,
+            });
+        } else {
+            newState.links.set(before, {
+                type: 'relationChange',
+                before: (previous && previous.type === 'relationChange') ? previous.before : before,
+                data: after,
+            });
+        }
         return newState;
     }
 

src/editor/editorController.tsx

@@ -478,6 +478,9 @@ export class EditorController {
     }): RelationLink {
         const {model} = this;
         const {link, newSource} = params;
+        if (link.data.sourceId === newSource.data.id) {
+            return link;
+        }
         const batch = model.history.startBatch(
             TranslatedText.text('editor_controller.relation_move_source.command')
         );
@@ -500,6 +503,9 @@ export class EditorController {
     }): RelationLink {
         const {model} = this;
         const {link, newTarget} = params;
+        if (link.data.targetId === newTarget.data.id) {
+            return link;
+        }
         const batch = model.history.startBatch(
             TranslatedText.text('editor_controller.relation_move_target.command')
         );

src/editor/overlayController.tsx

@@ -97,6 +97,11 @@ export class OverlayController {
                 this.hideDialog();
             }
         });
+        this.listener.listen(this.model.events, 'discardGraph', () => {
+            if (this.openedDialog && this.openedDialog.target) {
+                this.hideDialog();
+            }
+        });
 
         view.setCanvasWidget('selectionHandler', {
             element: <CanvasOverlayHandler onCanvasPointerUp={this.onAnyCanvasPointerUp} />,

src/widgets/classTree/classTree.tsx

@@ -408,7 +408,10 @@ class ClassTreeInner extends React.Component<ClassTreeInnerProps, State> {
         const {workspace: {model, view, editor, getCommandBus}} = this.props;
         const batch = model.history.startBatch();
 
+        this.createElementCancellation.abort();
+        this.createElementCancellation = new AbortController();
         const signal = this.createElementCancellation.signal;
+
         const elementModel = await mapAbortedToNull(
             editor.metadataProvider!.createEntity(elementType, {signal}),
             signal

styles/widgets/_classTree.scss

@@ -146,7 +146,7 @@
 
   &__create-button {
     margin-left: 5px;
-    padding: 5px;
+    padding: 5px 4px 5px 5px;
     cursor: move;
 
     &::before {