Skip to content

SemanticsEditor

Panoramax.components.ui.SemanticsEditor ⇐ lit.LitElement

Kind: static class of Panoramax.components.ui
Extends: lit.LitElement
Emits: change
Element: pnx-semantics-editor

new SemanticsEditor()

Semantics Editor offer an easy-to-use input for adding or editing semantics tags.

It manipulates list of {key: "mypanokey", value: "myvalue"} entries through semantics attribute.

Example

<!-- Basic example -->
<pnx-semantics-editor
   id="editor"
   semantics=${mypic.semantics}
   ._t=${viewer._t}
   onchange=${e => console.log(e.detail.semantics)}
/>

<!-- You can access editor and check its validity through native web browser functions -->
<script>
   const editor = document.getElementById("editor");
   console.log(editor.checkValidity()); // True if input is valid
</script>

<!-- You can change specifically style of textarea -->
<style>
  pnx-semantics-editor::part(text) {
     color: blue;
  }
</style>

semanticsEditor.properties : Object

Component properties.

Kind: instance property of SemanticsEditor
Properties

Name Type Default Description
[semantics] object The semantics field of a picture or annotation feature. It is updated when field changes, but reflect the whole list of new tags (not delta needed by API). If you want delta, please use getDiff function.
[rows] number 3 The amount of rows shown for textarea

semanticsEditor.getDiff() ⇒ Array.<object>

Get current delta between initial tags and user changes.

Kind: instance method of SemanticsEditor
Returns: Array.<object> - The list of tag changes (in API format)

semanticsEditor.checkValidity() ⇒ boolean

Check if input is having a valid value.

Kind: instance method of SemanticsEditor
Returns: boolean - True if it's valid

"change"

Event for value change.

Note that this event is launched only on valid input.

Kind: event emitted by SemanticsEditor
Properties

Name Type Description
detail.semantics Array.<object> The new tags list (in API semantics property format)
detail.delta Array.<object> The delta between old and current tags (expected by API)