-
Notifications
You must be signed in to change notification settings - Fork 154
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue #4139: Reusable popover component for annotation editors
- Basic Svelte component for info popover - Use this component in the Apache Annotator editor
- Loading branch information
Showing
14 changed files
with
247 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
...l-apache-annotator-editor/src/main/ts/src/apache-annotator/AnnotationDetailPopOver.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <!-- | ||
| Licensed to the Technische Universität Darmstadt under one | ||
| or more contributor license agreements. See the NOTICE file | ||
| distributed with this work for additional information | ||
| regarding copyright ownership. The Technische Universität Darmstadt | ||
| licenses this file to you under the Apache License, Version 2.0 (the | ||
| "License"); you may not use this file except in compliance | ||
| with the License. | ||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| --> | ||
| <svelte:options accessors={true}/> | ||
|
|
||
| <script lang="ts"> | ||
| import { Annotation, AnnotationOverEvent, Relation, Span, DiamAjax } from '@inception-project/inception-js-api' | ||
| import { onMount } from 'svelte' | ||
| export let ajax : DiamAjax | ||
| export let root : Element | ||
| export let top : number = 0 | ||
| export let left : number = 0 | ||
| export let width : number = 400 | ||
| export let annotation : Annotation | undefined = undefined | ||
| let popover : HTMLElement | ||
| onMount(() => { | ||
| // React to mouse hovering over annotation | ||
| root.addEventListener(AnnotationOverEvent.eventType, (e: AnnotationOverEvent) => { | ||
| if (!(e.originalEvent instanceof MouseEvent) || !(e.target instanceof HTMLElement)) return | ||
| annotation = e.annotation | ||
| }) | ||
| // Follow the mouse around | ||
| root.addEventListener('mousemove', (e: MouseEvent) => { | ||
| if (!annotation) return | ||
| const rect = popover.getBoundingClientRect() | ||
| const x = e.clientX | ||
| const y = e.clientY + 16 | ||
| // Flip up if the popover is about to be clipped at the bottom | ||
| if (y + rect.height > window.innerHeight) { | ||
| top = y - rect.height | ||
| } | ||
| else { | ||
| top = y | ||
| } | ||
| // Shift left if the popover is about to be clipped on the right | ||
| if (x + rect.width > window.innerWidth) { | ||
| left = Math.max(0, window.innerWidth - rect.width) | ||
| } | ||
| else { | ||
| left = x | ||
| } | ||
| }) | ||
| // Hide popover when leaving the annotation | ||
| root.addEventListener('mouseout', e => { | ||
| if (annotation) annotation = undefined | ||
| }) | ||
| // $: { | ||
| // if (annotation) { | ||
| // ajax.loadLazyDetails(annotation.vid) | ||
| // } | ||
| // } | ||
| }) | ||
| </script> | ||
|
|
||
| <div bind:this={popover} class="bootstrap popover position-fixed shadow" style:top="{top}px" style:left="{left}px" style:--width="{width}px" class:d-none={!annotation}> | ||
| <div class="popover-header p-0 d-flex"> | ||
| <div class="border-end border-secondary px-1"> | ||
| <span class="annotation-type-marker" | ||
| class:i7n-icon-span={annotation instanceof Span} | ||
| class:i7n-icon-relation={annotation instanceof Relation}/> | ||
| </div> | ||
| <div class="flex-grow-1 px-1">{annotation?.layer?.name}</div> | ||
| <div class="text-body-secondary px-1">ID: {annotation?.vid}</div> | ||
| </div> | ||
| {#if annotation} | ||
| <div class="popover-body p-1"> | ||
| {#each annotation.comments as comment} | ||
| <div class="i7n-marker-{comment.type}">{comment.comment}</div> | ||
| {/each} | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <!-- svelte-ignore css-unused-selector --> | ||
| <style lang="scss"> | ||
| @import '../../node_modules/bootstrap/scss/bootstrap.scss'; | ||
| @import '../../node_modules/@inception-project/inception-js-api/src/style/InceptionEditorIcons.scss'; | ||
| @import '../../node_modules/@inception-project/inception-js-api/src/style/InceptionEditorColors.scss'; | ||
| .bootstrap { | ||
| // Ensure that Bootstrap properly applies to the component | ||
| @extend body | ||
| } | ||
| .popover { | ||
| min-width: var(--width); | ||
| width: var(--width); | ||
| max-width: var(--width); | ||
| pointer-events: none; | ||
| } | ||
| .annotation-type-marker { | ||
| width: 1em; | ||
| display: inline-block; | ||
| text-align: center; | ||
| } | ||
| .i7n-marker-error { | ||
| color: var(--i7n-error-color); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
inception/inception-js-api/src/main/ts/src/event/AnnotationOverEvent.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /* | ||
| * Licensed to the Technische Universität Darmstadt under one | ||
| * or more contributor license agreements. See the NOTICE file | ||
| * distributed with this work for additional information | ||
| * regarding copyright ownership. The Technische Universität Darmstadt | ||
| * licenses this file to you under the Apache License, Version 2.0 (the | ||
| * "License"); you may not use this file except in compliance | ||
| * with the License. | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { Annotation } from '../model' | ||
|
|
||
| const eventType = 'i7n-annotation-over' | ||
| export class AnnotationOverEvent extends Event { | ||
| static eventType = eventType | ||
|
|
||
| originalEvent: Event | ||
| annotation: Annotation | ||
|
|
||
| constructor (annotation: Annotation, originalEvent: Event) { | ||
| super(eventType, { bubbles: true }) | ||
| this.originalEvent = originalEvent | ||
| this.annotation = annotation | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Licensed to the Technische Universität Darmstadt under one | ||
| * or more contributor license agreements. See the NOTICE file | ||
| * distributed with this work for additional information | ||
| * regarding copyright ownership. The Technische Universität Darmstadt | ||
| * licenses this file to you under the Apache License, Version 2.0 (the | ||
| * "License"); you may not use this file except in compliance | ||
| * with the License. | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| export { AnnotationOverEvent } from './AnnotationOverEvent' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.