|
| 1 | +# Edit Event API |
| 2 | + |
| 3 | +Open SCD offers an API for editing the scd document which can be used with [Html Custom Events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent). The main Open SCD components listens to events of the type `oscd-edit`, applies the changes to the `doc` and updates the `editCount` property. |
| 4 | + |
| 5 | +The edits to the `doc` will be done in place, e.g. the `doc` changes but will keep the same reference. If your plugin needs to react to changes in the doc, you should listen to changes in the `editCount` property. |
| 6 | + |
| 7 | +## Event factory |
| 8 | + |
| 9 | +Open SCD core exports a factory function for edit events, so you do not have to build them manually. |
| 10 | + |
| 11 | +```ts |
| 12 | +function newEditEvent<E extends Edit>( |
| 13 | + edit: E, |
| 14 | + initiator: Initiator = 'user' |
| 15 | +): EditEvent |
| 16 | + |
| 17 | +type Edit = Insert | Update | Remove | Edit[]; |
| 18 | + |
| 19 | +type Initiator = 'user' | 'system' | 'undo' | 'redo' | string; |
| 20 | + |
| 21 | +``` |
| 22 | + |
| 23 | +Example for remove. |
| 24 | + |
| 25 | +```ts |
| 26 | +import { newEditEvent, Remove } from '@openscd/core'; |
| 27 | + |
| 28 | +const remove: Remove = { node: someNode }; |
| 29 | +const removeEvent = newEditEvent(remove); |
| 30 | + |
| 31 | +someComponent.dispatchEvent(removeEvent); |
| 32 | + |
| 33 | +``` |
| 34 | + |
| 35 | + |
| 36 | +### Insert |
| 37 | + |
| 38 | +Insert events can be used to add new nodes or move existing nodes in the document. Since a node can only have one parent, using an insert on an existing node will replace it's previous parent with the new parent, essentially moving the node to a different position in the xml tree. |
| 39 | + |
| 40 | +If the reference is not `null`, the node will be inserted before the reference node. The reference has to be a child node of the parent. And if the reference is `null` the node will be added as the last child of the parent. |
| 41 | + |
| 42 | +```ts |
| 43 | +interface Insert { |
| 44 | + parent: Node; |
| 45 | + node: Node; |
| 46 | + reference: Node | null; |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | + |
| 51 | +### Remove |
| 52 | + |
| 53 | +This event will remove the node from the document. |
| 54 | + |
| 55 | +```ts |
| 56 | +interface Remove { |
| 57 | + node: Node; |
| 58 | +} |
| 59 | +``` |
| 60 | + |
| 61 | + |
| 62 | +### Update |
| 63 | + |
| 64 | +Update can add, remove or change attributes on an existing node. Existing attributes will only be removed, if `null` is passed as value in the event's `attributes` property. |
| 65 | + |
| 66 | + |
| 67 | +```ts |
| 68 | +interface Update { |
| 69 | + element: Element; |
| 70 | + attributes: Partial<Record<string, AttributeValue>>; |
| 71 | +} |
| 72 | + |
| 73 | +// Attirubte value |
| 74 | + |
| 75 | +type AttributeValue = string | null | NamespacedAttributeValue; |
| 76 | + |
| 77 | +type NamespacedAttributeValue = { |
| 78 | + value: string | null; |
| 79 | + namespaceURI: string | null; |
| 80 | +}; |
| 81 | +``` |
| 82 | + |
| 83 | +Example for adding and changing values. |
| 84 | + |
| 85 | +```ts |
| 86 | + |
| 87 | +const update: Update = { |
| 88 | + element: elementToUpdate, |
| 89 | + attributes: { |
| 90 | + name: 'new name', |
| 91 | + value: 'new value' |
| 92 | + } |
| 93 | +}; |
| 94 | + |
| 95 | +``` |
| 96 | + |
| 97 | +To remove an existing value pass `null` as value. |
| 98 | + |
| 99 | +```ts |
| 100 | + |
| 101 | +const update: Update = { |
| 102 | + element: elementToUpdate, |
| 103 | + attributes: { |
| 104 | + attributeToRemove: null |
| 105 | + } |
| 106 | +}; |
| 107 | + |
| 108 | +``` |
| 109 | + |
| 110 | +Update also supports [Xml namespaces](https://developer.mozilla.org/en-US/docs/Related/IMSC/Namespaces#namespaced_attributes) for attributes. To change namespaced attributes you need to pass an `NamespacedAttributeValue` instead of a plain `string`. |
| 111 | + |
| 112 | +```ts |
| 113 | + |
| 114 | +const update: Update = { |
| 115 | + element: elementToUpdate, |
| 116 | + attributes: { |
| 117 | + name: { |
| 118 | + value: 'namespaced name', |
| 119 | + namespaceURI: 'http://www.iec.ch/61850/2003/SCLcoordinates' |
| 120 | + }, |
| 121 | + type: { |
| 122 | + value: 'namespaced type', |
| 123 | + namespaceURI: 'http://www.iec.ch/61850/2003/SCLcoordinates' |
| 124 | + }, |
| 125 | + } |
| 126 | +}; |
| 127 | + |
| 128 | +``` |
| 129 | + |
| 130 | +Adding, updating and removing attributes with and without namespaces can be combined in a single `Update`. |
| 131 | + |
| 132 | +### Complex edits |
| 133 | + |
| 134 | +Complex edits can be used to apply multiple edits as a single event. This will create a single entry in the history. You can create complex edit events by passing an array of edit events to the `newEditEvent` factory function. |
| 135 | + |
| 136 | +```ts |
| 137 | +import { newEditEvent } from '@openscd/core'; |
| 138 | + |
| 139 | +const complexEditEvent = newEditEvent([ insert, update, remove ]); |
| 140 | + |
| 141 | +someComponent.dispatchEvent(complexEditEvent); |
| 142 | + |
| 143 | +``` |
| 144 | + |
| 145 | + |
| 146 | + |
| 147 | +## History |
| 148 | + |
| 149 | +All edit events with initiator `user` will create a history log entry and can be undone and redone through the history addon. |
| 150 | + |
| 151 | +## Breaking changes due to migration |
| 152 | +Before the edit event API the editor action API was used to edit the `doc`. It is also custom event based and listens to the events of the type `editor-action`. |
| 153 | +For backwards compatibility the API is still supported, but it is recommended to use the edit event API instead. Internally editor actions are converted to edit events. |
| 154 | +With open SCD version **v0.36.0** and higher some editor action features are no longer supported see [Deprecated Editor Action API](#archives---editor-action-api-deprecated). |
| 155 | +* The editor action properties `derived` and `checkValidity` do not have any effect. |
| 156 | +* All validation checks have been removed (i.e. check for unique `id` attribute on element before create). |
| 157 | +* The `title` for `ComplexAction` does not have any effect. |
| 158 | + |
| 159 | +--- |
| 160 | + |
| 161 | +# Archives - Editor Action API (deprecated) |
| 162 | + |
| 163 | +### Event factory |
| 164 | + |
| 165 | +```ts |
| 166 | + |
| 167 | +function newActionEvent<T extends EditorAction>( |
| 168 | + action: T, |
| 169 | + initiator: Initiator = 'user', |
| 170 | + eventInitDict?: CustomEventInit<Partial<EditorActionDetail<T>>> |
| 171 | +): EditorActionEvent<T> |
| 172 | + |
| 173 | +type SimpleAction = Update | Create | Replace | Delete | Move; |
| 174 | +type ComplexAction = { |
| 175 | + actions: SimpleAction[]; |
| 176 | + title: string; |
| 177 | + derived?: boolean; |
| 178 | +}; |
| 179 | +type EditorAction = SimpleAction | ComplexAction; |
| 180 | + |
| 181 | +``` |
| 182 | + |
| 183 | + |
| 184 | +### Create |
| 185 | + |
| 186 | +`Create` actions are converted to `Insert` events. |
| 187 | + |
| 188 | +```ts |
| 189 | +interface Create { |
| 190 | + new: { parent: Node; element: Node; reference?: Node | null }; |
| 191 | + derived?: boolean; |
| 192 | + checkValidity?: () => boolean; |
| 193 | +} |
| 194 | +``` |
| 195 | + |
| 196 | +### Move |
| 197 | + |
| 198 | +`Move` actions are converted to `Insert` events. |
| 199 | + |
| 200 | +```ts |
| 201 | +interface Move { |
| 202 | + old: { parent: Element; element: Element; reference?: Node | null }; |
| 203 | + new: { parent: Element; reference?: Node | null }; |
| 204 | + derived?: boolean; |
| 205 | + checkValidity?: () => boolean; |
| 206 | +} |
| 207 | +``` |
| 208 | + |
| 209 | + |
| 210 | +### Delete |
| 211 | + |
| 212 | +`Delete` actions are converted to `Remove` events. |
| 213 | + |
| 214 | +```ts |
| 215 | +interface Delete { |
| 216 | + old: { parent: Node; element: Node; reference?: Node | null }; |
| 217 | + derived?: boolean; |
| 218 | + checkValidity?: () => boolean; |
| 219 | +} |
| 220 | +``` |
| 221 | + |
| 222 | + |
| 223 | +### Update |
| 224 | + |
| 225 | +`Update` actions are converted to `Update` events. |
| 226 | + |
| 227 | +```ts |
| 228 | +interface Update { |
| 229 | + element: Element; |
| 230 | + oldAttributes: Record<string, string | null>; |
| 231 | + newAttributes: Record<string, string | null>; |
| 232 | + derived?: boolean; |
| 233 | + checkValidity?: () => boolean; |
| 234 | +} |
| 235 | +``` |
| 236 | + |
| 237 | +### Replace |
| 238 | + |
| 239 | +`Replace` actions are converted to a complex event with `Remove` and `Insert` events. |
| 240 | + |
| 241 | +```ts |
| 242 | +interface Replace { |
| 243 | + old: { element: Element }; |
| 244 | + new: { element: Element }; |
| 245 | + derived?: boolean; |
| 246 | + checkValidity?: () => boolean; |
| 247 | +} |
| 248 | +``` |
0 commit comments