+ mdi-plus Add optional field
+ {{field.icon}} mdi-plus {{field.title || field._key}}
diff --git a/packages/cs-form/src/components/fields/chips-editor.vue b/packages/cs-form/src/components/fields/chips-editor.vue
index cc5232e81..2e5110904 100644
--- a/packages/cs-form/src/components/fields/chips-editor.vue
+++ b/packages/cs-form/src/components/fields/chips-editor.vue
@@ -10,6 +10,8 @@
:hint="field.hint"
:persistentHint="field.persistentHint"
:clearable="field.clearable"
+ :filled="field.filled"
+ :rounded="field.rounded"
solo
multiple
text
diff --git a/packages/cs-form/src/components/fields/group-buttons-editor.vue b/packages/cs-form/src/components/fields/group-buttons-editor.vue
index 35cf033f0..2bcfc53e2 100644
--- a/packages/cs-form/src/components/fields/group-buttons-editor.vue
+++ b/packages/cs-form/src/components/fields/group-buttons-editor.vue
@@ -4,7 +4,7 @@
v-model="target[field._key]"
tile
:hint="field.hint"
-
+ class="group-btn-toggle"
@change="fieldUpdated(field)"
group
>
@@ -31,6 +31,9 @@
diff --git a/packages/cs-graph/src/components/datamodel/class-viewer.vue b/packages/cs-graph/src/components/datamodel/class-viewer.vue
index c92c6ed2f..8f7767b58 100644
--- a/packages/cs-graph/src/components/datamodel/class-viewer.vue
+++ b/packages/cs-graph/src/components/datamodel/class-viewer.vue
@@ -28,6 +28,7 @@ import simplebar from 'simplebar-vue';
import G6, { Graph, GraphData } from '@antv/g6';
import { FeatureType, RelationType } from '@csnext/cs-data';
+import { GraphUtils } from '../..';
@Component({
components: { simplebar },
@@ -96,7 +97,7 @@ export default class ClassViewer extends WidgetBase {
let node = {
id: e.type,
classId: e.type,
- label: this.fittingString(e.title!, 50, 10),
+ label: GraphUtils.fittingString(e.title!, 80, 10),
title: e.title,
hidden: false,
style: {
@@ -164,44 +165,14 @@ export default class ClassViewer extends WidgetBase {
}
}
- private fittingString(str: string, maxWidth: number, fontSize: number) {
- let currentWidth = 0;
- let res = str;
- const pattern = new RegExp('[ ]+'); // distinguish the Chinese charactors and letters
- str.split('').forEach((letter, i) => {
- if (currentWidth > maxWidth) return;
- if (pattern.test(letter)) {
- // Chinese charactors
- currentWidth += fontSize;
- } else {
- // get the width of single letter according to the fontSize
- currentWidth += G6.Util.getLetterWidth(letter, fontSize);
- }
- if (currentWidth > maxWidth) {
- res = `${str.substr(0, i)}\n${str.substr(i)}`;
- }
- });
- return res;
- }
-
public updateGraph() {
if (!this.graphSource?.featureTypes || !this.graph) {
return;
}
- // if (!this.data) {
this.data = { nodes: [], edges: [] };
- // this.graph.data(this.data);
- // }
for (const e of Object.values(this.graphSource.featureTypes)) {
if (e.type && !e.isEdge) {
- this.updateNode(e);
- // if (e.class) {
- // this.updateEdge({
- // source: e.id,
- // target: e.class.id,
- // label: "is",
- // } as any);
- // }
+ this.updateNode(e);
}
}
diff --git a/packages/cs-graph/src/components/document-management/relation-editor.vue b/packages/cs-graph/src/components/document-management/relation-editor.vue
index 2d37f7b88..4aef46aab 100644
--- a/packages/cs-graph/src/components/document-management/relation-editor.vue
+++ b/packages/cs-graph/src/components/document-management/relation-editor.vue
@@ -4,7 +4,7 @@
-
+
@@ -54,27 +54,34 @@
-
-
+
+
+
+
- {{ type._featureType.icon }}
+ {{ type._featureType.icon }}
{{ type.title }}
{{ type.count }}
-
-
+
+
+
+
+
+
+ {{ action.icon }}
+
mdi-import
@@ -86,76 +93,90 @@
-
-
+
@@ -214,42 +235,41 @@ import { WidgetBase } from '@csnext/cs-client';
import { DateUtils, FeatureType, TextEntity } from '@csnext/cs-data';
import { SimpleRelationLineSection } from '@csnext/cs-map';
import Dropcursor from '@tiptap/extension-dropcursor';
-import Mention from "@tiptap/extension-mention";
+import Mention from '@tiptap/extension-mention';
import Highlight from '@tiptap/extension-highlight';
import Placeholder from '@tiptap/extension-placeholder';
import StarterKit from '@tiptap/starter-kit';
import { BubbleMenu, Editor, EditorContent, FloatingMenu, Node } from '@tiptap/vue-2';
-import simplebar from 'simplebar-vue';
+// import simplebar from 'simplebar-vue';
import { Component, Prop, Ref, Vue } from 'vue-property-decorator';
-import { IImportPlugin } from '../..';
+import { IImportPlugin, suggestion } from '../..';
import { DocUtils } from '../../utils/doc-utils';
import { DocDatasource, GraphDocument, ITool } from './../../';
import Commands from './plugins/commands/commands';
import commandSuggestion from './plugins/commands/commands-suggestion';
-import ElementCardExtension from './plugins/element-card-extension';
-import ParagraphExtension from './plugins/paragraph-extension';
-import SnippetList from './plugins/snippet-list.vue';
-import SuggestionList from './plugins/text-entity-suggestion/suggestion-list.vue';
-import suggestion from './plugins/text-entity-suggestion/suggestion';
+import ElementCardExtension from './nodes/element-card/element-card-extension';
+
+import ParagraphExtension from './nodes/node-paragraph/paragraph-extension';
+import ElementPropertyExtension from './nodes/element-property/element-property-extension';
+
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
import ActionList from './plugins/text-action/text-action-list.vue';
import textAction from './plugins/text-action/text-action';
-import TextExtension from './plugins/text-extension';
-import { TextMention } from './plugins/text-mention';
+import TextExtension from './nodes/text-entity/text-extension';
import SelectionPopup from './selection-popup.vue';
-
+import { IMenu } from '@csnext/cs-core';
@Component({
components: {
- simplebar,
+ // simplebar,
EditorContent,
BubbleMenu,
FloatingMenu,
SimpleRelationLineSection,
- SuggestionList,
ActionList,
- SnippetList,
// EditorMenuBubble,
SelectionPopup,
},
@@ -264,6 +284,12 @@ export default class DocumentViewer extends WidgetBase {
public dragInitialized = false;
public contextMenuitems: any[] = [];
+ // actions that apply to part of document (bold, heading, etc.)
+ public documentToolsMenu: IMenu[] = [];
+
+ // tools that apply to whole document
+ public documentActionsMenu: IMenu[] = [];
+
public set editor(value: Editor | undefined | null) {
if (this.source) {
this.source.editor = value;
@@ -271,7 +297,93 @@ export default class DocumentViewer extends WidgetBase {
}
public get hideHeader(): boolean {
- return ((this.widget?.options) as any).hideHeader || false;
+ return (this.widget?.options as any).hideHeader || false;
+ }
+
+ public toggleTitle() {
+ this.editTitle = !this.editTitle;
+ if (!this.editTitle && this.source && this.currentDocument) {
+ this.source.saveNode(this.currentDocument);
+ }
+ }
+
+ public async selectDocumentTool(tool: IMenu) {
+ if (tool.action && this.currentDocument) {
+ await tool.action(tool);
+ }
+ }
+
+ public async selectDocumentAction(tool: IMenu) {
+ if (tool.action && this.currentDocument) {
+ await tool.action(tool);
+ }
+ }
+
+ public updateDocumentTools() {
+ this.documentToolsMenu = [
+ {
+ icon: 'mdi-label',
+ action: (m, a) => {
+ this.setTextEntity();
+ },
+ isActive: false,
+ },
+ {
+ icon: 'mdi-card',
+ action: () => {
+ this.setElementCard();
+ },
+ },
+ {
+ icon: 'mdi-format-bold',
+ action: () => {
+ this.editor!.chain().focus().toggleBold().run();
+ },
+ isActive: ()=> this.editor!.isActive('bold')
+ },
+ {
+ icon: 'mdi-format-italic',
+ action: () => {
+ this.editor!.chain().focus().toggleItalic().run();
+ },
+ },
+ {
+ icon: 'mdi-format-strikethrough',
+ action: () => {
+ this.editor!.chain().focus().toggleStrike().run();
+ },
+ },
+ ];
+ }
+
+ //
+ // mdi-format-bold
+ //
+ //
+ // mdi-format-italic
+ //
+ //
+ // mdi-format-strikethrough
+ //
+ //
+ // mdi-marker
+ //
+
+ public updateDocumentActions() {
+ if (!this.source?.tools || !this.currentDocument) {
+ return;
+ }
+ this.documentActionsMenu.splice(0, this.documentToolsMenu.length);
+ for (const tool of this.source.tools) {
+ if (tool.documentActions && typeof tool.documentActions === 'function') {
+ let actions = tool.documentActions(this.currentDocument);
+ if (actions) {
+ for (const mi of actions) {
+ this.documentActionsMenu.push(mi);
+ }
+ }
+ }
+ }
}
@Prop()
@@ -290,6 +402,7 @@ export default class DocumentViewer extends WidgetBase {
public isLoading?: boolean;
public showPopup = true;
public extendedToolbar = false;
+ public editTitle = false;
// public document?: GraphDocument;
public node?: Node;
// v-if="selectionTo !== undefined && selectionFrom !== undefined"
@@ -298,6 +411,8 @@ export default class DocumentViewer extends WidgetBase {
public source: DocDatasource | undefined = undefined;
public entityBubbleSelection: FeatureType | null = null;
+ public doc;
+
public setEntity() {
if (!this.source || !this.currentDocument || !this.editor || !this.entityBubbleSelection?.type) {
return;
@@ -306,8 +421,6 @@ export default class DocumentViewer extends WidgetBase {
this.editor.chain().focus().setTextEntity({ spacy_label: this.entityBubbleSelection?.type }).run();
this.syncDocumentState();
DocUtils.syncEntities(this.currentDocument, this.source, this.currentDocument.properties?.doc?.content, true);
-
- // alert(this.entityBubbleSelection?.title);
}
public setEditorMode(mode: string) {
@@ -316,7 +429,6 @@ export default class DocumentViewer extends WidgetBase {
this.editor!.setEditable(mode === 'EDIT');
}
this.$forceUpdate();
- // this.currentDocument!.properties!.edit_mode = mode;
}
public setElementCard() {
@@ -340,22 +452,8 @@ export default class DocumentViewer extends WidgetBase {
}
this.editor.chain().focus().toggleNodeParagraph().run();
- // this.syncDocumentState();
- // this.source.syncEntities(
- // this.currentDocument,
- // this.currentDocument.doc.content,
- // true
- // );
-
- // alert(this.entityBubbleSelection?.title);
}
- // public get document(): GraphDocument | undefined {
- // if (this.currentDocument) {
- // return this.currentDocument;
- // }
- // }
-
public updateContextMenu() {
this.contextMenuitems = [];
this.contextMenuitems.push({
@@ -395,19 +493,6 @@ export default class DocumentViewer extends WidgetBase {
DocUtils.syncEntities(this.currentDocument, this.source, this.currentDocument.properties?.doc?.content, true);
}
- // public setTextParagraph() {
- // if (!this.currentDocument || !this.editor) {
- // return;
- // }
- // this.editor.chain().focus().setTextParagraph().run();
- // this.syncDocumentState();
- // this.source.syncEntities(
- // this.currentDocument,
- // this.currentDocument.doc.content,
- // true
- // );
- // }
-
public beforeDestroy() {
if (!this.editor) {
return;
@@ -429,10 +514,12 @@ export default class DocumentViewer extends WidgetBase {
public currentDocument: GraphDocument | undefined;
public openElement(document: GraphDocument) {
- this.loadDocument(document);
- this.updateEditor();
- this.updateContent();
- this.initTools();
+ Vue.nextTick(()=> {
+ this.loadDocument(document);
+ this.updateEditor();
+ this.updateContent();
+ this.initTools();
+ })
}
public testEntity() {
@@ -481,10 +568,10 @@ export default class DocumentViewer extends WidgetBase {
public updateStartMenu() {
if (!this.currentDocument?.properties?.doc) {
- this.startMenu = true;
- } else {
- this.startMenu = false;
- }
+ this.startMenu = true;
+ } else {
+ this.startMenu = false;
+ }
}
public updateEditor(destroy = true) {
@@ -493,21 +580,13 @@ export default class DocumentViewer extends WidgetBase {
return;
}
-
-
-
- // this.highlight = new Highlight({
- // disableRegex: false,
- // // entities: this.currentDocument?.entities
- // });
-
if (this.editor && destroy) {
this.editor.destroy();
this.source.editor = undefined;
}
if (!this.editor) {
-
this.editor = new Editor({
+
extensions: [
StarterKit,
// SmilieReplacer,
@@ -515,19 +594,21 @@ export default class DocumentViewer extends WidgetBase {
Dropcursor,
ParagraphExtension,
ElementCardExtension,
+ ElementPropertyExtension,
+ TaskList,
+ TaskItem,
Highlight,
Placeholder,
Commands.configure({
commandSuggestion,
}),
Mention.extend({
- name: 'text-action'}).configure({
- suggestion: textAction
- }),
- TextMention.configure({
- // renderLabel: (props) => {
- // return 'text-entity'
- // },
+ document: this.currentDocument,
+ name: 'text-action',
+ }).configure({
+ suggestion: textAction,
+ }),
+ Mention.configure({
HTMLAttributes: {
class: 'text-entity',
name: 'text-entity',
@@ -535,25 +616,7 @@ export default class DocumentViewer extends WidgetBase {
suggestion,
}),
],
- onTransaction({ transaction }) {
- // transaction.
- // if (transaction.steps) {
- // for (const step of transaction.steps) {
- // console.log(step);
- // }
- // }
- // console.log(transaction);
- // debugger;
- },
- // content: `
- // component 1
- // ) => import("@csnext/cs-core").IMenu[] { throw new
+Error('Function not implemented.'); }
diff --git a/packages/cs-graph/src/components/document/node-entities.ts b/packages/cs-graph/src/components/document/node-entities.ts
index 8d66a9072..cd903c734 100644
--- a/packages/cs-graph/src/components/document/node-entities.ts
+++ b/packages/cs-graph/src/components/document/node-entities.ts
@@ -6,7 +6,7 @@ export class EntityList {
public edge?: GraphElement;
public instances: TextEntity[] = [];
public _hover = false;
- public _approved = false;
+ public _linked = false;
public _relations = 0;
public _togglemore = false;
diff --git a/packages/cs-graph/src/components/document/plugins/element-card-component.vue b/packages/cs-graph/src/components/document/nodes/element-card/element-card-component.vue
similarity index 78%
rename from packages/cs-graph/src/components/document/plugins/element-card-component.vue
rename to packages/cs-graph/src/components/document/nodes/element-card/element-card-component.vue
index b739e41a7..82736b535 100644
--- a/packages/cs-graph/src/components/document/plugins/element-card-component.vue
+++ b/packages/cs-graph/src/components/document/nodes/element-card/element-card-component.vue
@@ -3,8 +3,8 @@
>
-
-
+ {
+ elementProperty: {
+ /**
+ * Add a text entity
+ */
+ setElementProperty: (entity?: GraphElement) => any,
+ toggleElementProperty: (attributes?: any) => ReturnType;
+ }
+ }
+}
+
+
+export default Paragraph.extend({
+ name: 'element-property',
+
+ draggable: true,
+ group: 'inline',
+ content: 'inline*',
+ inline: true,
+ atom: true,
+ // content: 'inline*',
+
+ addAttributes() {
+ return {
+ key: { default: null },
+ value: { default: undefined }
+ }
+
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: 'element-property',
+ },
+ ]
+ },
+
+
+ renderHTML({ HTMLAttributes }) {
+ return ['element-property', mergeAttributes(HTMLAttributes), 0]
+ },
+
+ addCommands() {
+ return {
+ toggleElementProperty: attributes => ({ commands }) => {
+ return commands.toggleNode('element-property', 'text', attributes)
+ },
+ setElementProperty: (entity?: GraphElement, key?: string, value?: any) => ({ tr, dispatch }) => {
+ // debugger;
+ if (dispatch) {
+
+ // } else {
+ // // debugger;
+ // }
+ }
+
+ return true
+ },
+ }
+ },
+
+ // onUpdate(a: any) {
+ // console.log(a)
+ // // debugger;
+ // },
+
+
+ addNodeView() {
+ return VueNodeViewRenderer(ElementPropertyComponent)
+ },
+})
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/paragraph-component.vue b/packages/cs-graph/src/components/document/nodes/node-paragraph/paragraph-component.vue
similarity index 86%
rename from packages/cs-graph/src/components/document/plugins/paragraph-component.vue
rename to packages/cs-graph/src/components/document/nodes/node-paragraph/paragraph-component.vue
index d2d22c018..5f4e6eb4c 100644
--- a/packages/cs-graph/src/components/document/plugins/paragraph-component.vue
+++ b/packages/cs-graph/src/components/document/nodes/node-paragraph/paragraph-component.vue
@@ -49,9 +49,8 @@
diff --git a/packages/cs-graph/src/components/document/plugins/paragraph-extension.ts b/packages/cs-graph/src/components/document/nodes/node-paragraph/paragraph-extension.ts
similarity index 100%
rename from packages/cs-graph/src/components/document/plugins/paragraph-extension.ts
rename to packages/cs-graph/src/components/document/nodes/node-paragraph/paragraph-extension.ts
diff --git a/packages/cs-graph/src/components/document/plugins/text-entity-component.vue b/packages/cs-graph/src/components/document/nodes/text-entity/text-entity-component.vue
similarity index 67%
rename from packages/cs-graph/src/components/document/plugins/text-entity-component.vue
rename to packages/cs-graph/src/components/document/nodes/text-entity/text-entity-component.vue
index c25b945aa..f981a980a 100644
--- a/packages/cs-graph/src/components/document/plugins/text-entity-component.vue
+++ b/packages/cs-graph/src/components/document/nodes/text-entity/text-entity-component.vue
@@ -1,20 +1,24 @@
-
+
-
-
+
+
+
+
+
mdi-calendar-range
- mdi-map-marker-outline
- ![]()
-
+ mdi-map-marker-outline
+ ![]()
+ {{ element._featureType.icon }}
{{ node.attrs.text }}
+
-
-
+
\ No newline at end of file
+
diff --git a/packages/cs-graph/src/components/document/plugins/text-extension.ts b/packages/cs-graph/src/components/document/nodes/text-entity/text-extension.ts
similarity index 80%
rename from packages/cs-graph/src/components/document/plugins/text-extension.ts
rename to packages/cs-graph/src/components/document/nodes/text-entity/text-extension.ts
index 18d025a3a..865f55bc9 100644
--- a/packages/cs-graph/src/components/document/plugins/text-extension.ts
+++ b/packages/cs-graph/src/components/document/nodes/text-entity/text-extension.ts
@@ -7,13 +7,14 @@ import { FeatureType, TextEntity } from '@csnext/cs-data'
import Text from '@tiptap/extension-text';
declare module '@tiptap/core' {
- interface Commands {
+ interface Commands {
textEntity: {
/**
* Add a text entity
*/
setTextEntity: (entity?: TextEntity) => any,
setTextEntityType: (entity?: FeatureType) => any,
+ toggleTextEntity: (attributes?: any) => ReturnType;
}
}
}
@@ -36,13 +37,13 @@ export default Text.extend({
atom: true,
addAttributes() {
-
return {
id: { default: null },
type: { default: 'person' },
text: { default: '' },
kg_id: { default: undefined },
label: { default: null},
+ source: { default: null},
spacy_label: { default: null}
}
},
@@ -62,11 +63,16 @@ export default Text.extend({
addCommands() {
- return {
+ return {
+ toggleTextEntity: attributes => ({ commands }) => {
+ return commands.toggleNode('text-entity', 'text-entity', attributes)
+ },
setTextEntity: (entity?: TextEntity) => ({ tr, dispatch }) => {
if (dispatch) {
const node = tr.doc.nodeAt(tr.selection.from);
+ if (!entity) { entity = {}}
let text = entity?.text ?? (tr.doc as any).textBetween(tr.selection.from, tr.selection.to -1);
+
// const text = (node.text as string).substring();
if (entity?.text !== text) {
tr.selection.$from.pos = tr.selection.from - 1;
@@ -86,18 +92,20 @@ export default Text.extend({
const posAfter = pos + 1;
const nodeAfter = tr.doc.nodeAt(posAfter)
const id = entity?.id ?? guidGenerator();
- const type = entity?.spacy_label ?? 'node';
-
+ if (!entity.spacy_label) { entity.spacy_label = 'NODE'};
+ if (!entity.type) { entity.type = entity.spacy_label; }
+
const newEntity = this.type.create();
- newEntity.attrs = entity as any; // {...{ id : id, type, text: text }, ...entity};
+ newEntity.attrs = {...{ id : id, text: text }, ...entity};
+ delete newEntity.attrs._node;
newEntity.text = text;
tr.replaceSelectionWith(newEntity)
// end of document
if (!nodeAfter) {
- const node = parent.type.contentMatch.defaultType ?.create();
- if (node) {
- tr.insert(posAfter, node)
+ const nodeA = parent.type.contentMatch.defaultType ?.create();
+ if (nodeA) {
+ tr.insert(posAfter, nodeA)
tr.setSelection(TextSelection.create(tr.doc, posAfter))
}
}
diff --git a/packages/cs-graph/src/components/document/plugins/entity-list.vue b/packages/cs-graph/src/components/document/plugins/entity-list.vue
deleted file mode 100644
index 37d085312..000000000
--- a/packages/cs-graph/src/components/document/plugins/entity-list.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-
- ,
- suggestion: Omit,
-}
-
-export const Entity = Node.create({
- name: 'entity',
-
- defaultOptions: {
- HTMLAttributes: {},
- suggestion: {
- char: '#',
- command: ({ editor, range, props }) => {
- (editor
- .chain()
- .focus() as any)
- .replaceRange(range, 'entity', props)
- .insertContent(' ')
- .run()
- },
- allow: ({ editor, range }) => {
- return (editor.can() as any).replaceRange(range, 'entity')
- },
- },
- },
-
- group: 'inline',
-
- inline: true,
-
- selectable: false,
-
- atom: true,
-
- addAttributes() {
- return {
- id: {
- default: null,
- parseHTML: element => {
- return {
- id: element.getAttribute('data-entity'),
- }
- },
- renderHTML: attributes => {
- if (!attributes.id) {
- return {}
- }
-
- return {
- 'data-entity': attributes.id,
- }
- },
- },
- }
- },
-
- parseHTML() {
- return [
- {
- tag: 'span[data-entity]',
- },
- ]
- },
-
- renderHTML({ node, HTMLAttributes }) {
- return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), `#${node.attrs.id}`]
- },
-
- renderText({ node }) {
- return `@${node.attrs.id}`
- },
-
- addKeyboardShortcuts() {
- return {
- Backspace: () => this.editor.commands.command(({ tr, state }) => {
- let isEntity = false
- const { selection } = state
- const { empty, anchor } = selection
-
- if (!empty) {
- return false
- }
-
- state.doc.nodesBetween(anchor - 1, anchor, (node: any, pos: any) => {
- if (node.type.name === 'entity') {
- isEntity = true
- tr.insertText(this.options.suggestion.char || '', pos, pos + node.nodeSize)
-
- return false
- }
- })
-
- return isEntity
- }),
- }
- },
-
- addProseMirrorPlugins() {
- return [
- Suggestion({
- editor: this.editor,
- ...this.options.suggestion,
- }),
- ]
- },
-})
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/snippet-list.vue b/packages/cs-graph/src/components/document/plugins/snippet-list.vue
deleted file mode 100644
index b81fed913..000000000
--- a/packages/cs-graph/src/components/document/plugins/snippet-list.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-
-
-
-
-
-
- {{ item.item.properties.name }}
-
-
- {{ item.item.properties.description }}
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/snippet.ts b/packages/cs-graph/src/components/document/plugins/snippet.ts
deleted file mode 100644
index 8ac16bf8d..000000000
--- a/packages/cs-graph/src/components/document/plugins/snippet.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { VueRenderer } from '@tiptap/vue-2'
-import tippy from 'tippy.js'
-import Vue from 'vue'
-import { DocDatasource, DocUtils, GraphDocument, Suggestions } from '../../..'
-import SnippetList from './snippet-list.vue'
-
-export default {
- name: 'element-card',
- char: '@',
- items: (props) => {
- const source = props.editor.view._props.source as DocDatasource;
- const query = props.query;
- let res : any[]= [];
- if (query && source?.fuse) {
- res = source.fuse.search(query).slice(0, 10);
- console.log(res.length)
- return res;
- } else
- {
- return [];
- }
- },
-
- command: (a) => {
- console.log(a);
- Vue.nextTick(async ()=>{
- a.editor.chain().focus().setTextSelection(a.range).setElementCard(a.props).run();
- const source = a?.editor?.view?._props?.source;
- if (source && a?.editor?.view?._props?.document) {
- DocUtils.syncEntities(a.editor.view._props.document as GraphDocument, source, undefined, true);
- await source.entityParser.callDocument(a.editor.view._props.document, source);
- }
- })
- return;
- },
-
- render: () => {
- let component: VueRenderer
- let popup
- let source: DocDatasource
-
- return {
-
- onStart: props => {
-
-
- source = props.editor.view._props.source as DocDatasource;
- props.source = source;
- component = new VueRenderer(SnippetList, {
- parent: this,
- propsData: props,
- })
-
- popup = tippy('body', {
- getReferenceClientRect: props.clientRect,
- appendTo: () => document.getElementById('app') as HTMLElement,
- content: component.element,
- showOnCreate: true,
- interactive: true,
- trigger: 'manual',
- placement: 'bottom-start',
- })
- },
-
- onUpdate(props) {
- component.updateProps(props)
-
- popup[0].setProps({
- getReferenceClientRect: props.clientRect
- })
- },
-
- onKeyDown(props) {
- if (props.event.key === 'Escape') {
- popup[0].hide()
-
- return true
- }
- return (component.ref! as any).onKeyDown(props)
-
- },
-
- onExit() {
- popup[0].destroy()
- if (component) {
- component.destroy()
- }
- },
- }
- },
-}
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/text-action/sub-menu.vue b/packages/cs-graph/src/components/document/plugins/text-action/sub-menu.vue
deleted file mode 100644
index 57d602217..000000000
--- a/packages/cs-graph/src/components/document/plugins/text-action/sub-menu.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-
-
-
-
-
-
- {{ icon }}
-
-
-
- {{ name }}
-
- mdi-chevron-right
-
-
-
- {{ name }}
-
-
-
-
-
-
- mdi-{{ item.icon }}
-
-
- {{ item.name }}
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/text-action/text-action-list.vue b/packages/cs-graph/src/components/document/plugins/text-action/text-action-list.vue
index f85e1c5f0..2a2a4932b 100644
--- a/packages/cs-graph/src/components/document/plugins/text-action/text-action-list.vue
+++ b/packages/cs-graph/src/components/document/plugins/text-action/text-action-list.vue
@@ -1,228 +1,274 @@
-
-
+
+
+
+
+
+ {{ action.title }}
+
+
+ {{ action.subTitle }}
+
+
+
+
+
\ No newline at end of file
+
diff --git a/packages/cs-graph/src/components/document/plugins/text-action/text-action.ts b/packages/cs-graph/src/components/document/plugins/text-action/text-action.ts
index c7094dfb5..1372c9f01 100644
--- a/packages/cs-graph/src/components/document/plugins/text-action/text-action.ts
+++ b/packages/cs-graph/src/components/document/plugins/text-action/text-action.ts
@@ -9,33 +9,28 @@ export default {
name: 'text-action',
char: '/',
pluginKey: new PluginKey('text-action'),
- items: (props) => {
- const source = props.editor.view._props.source as DocDatasource;
- const query = props.query;
- let res: any[] = [];
- if (query && source?.fuse) {
- res = source.fuse.search(query).slice(0, 10);
- console.log(res.length);
- return res;
- } else {
- return [];
- }
+
+ items: (props) => {
+ return [];
},
command: (a) => {
console.log(a);
Vue.nextTick(async () => {
- a.editor.chain().focus().setTextSelection(a.range).setTextEntity(a.props).run();
- const source = a?.editor?.view?._props?.source;
- if (source && a?.editor?.view?._props?.document) {
- DocUtils.syncEntities(a.editor.view._props.document as GraphDocument, source, undefined, true);
- await source.entityParser.callDocument(a.editor.view._props.document, source);
- }
+
+ // a.editor.chain().focus().setTextSelection(a.range).setTextEntity(a.props).run();
+ // const source = a?.editor?.view?._props?.source;
+ // if (source && a?.editor?.view?._props?.document) {
+ // DocUtils.syncEntities(a.editor.view._props.document as GraphDocument, source, undefined, true);
+ // await source.entityParser.callDocument(a.editor.view._props.document, source);
+ // }
});
return;
},
+
+
render: () => {
let component: VueRenderer;
let popup;
@@ -45,9 +40,12 @@ export default {
onStart: (props) => {
source = props.editor.view._props.source as DocDatasource;
props.source = source;
+ props.document = props.editor.view._props.document as GraphDocument;
+
component = new VueRenderer(ActionList, {
parent: this,
propsData: props,
+ $vuetify: $cs.vuetify
});
popup = tippy('body', {
@@ -62,7 +60,9 @@ export default {
},
onUpdate(props) {
- component.updateProps(props);
+ if (component) {
+ component.updateProps(props);
+ }
popup[0].setProps({
getReferenceClientRect: props.clientRect,
diff --git a/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion-list.vue b/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion-list.vue
index 5ec317340..7de67c0fc 100644
--- a/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion-list.vue
+++ b/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion-list.vue
@@ -41,48 +41,6 @@ export default class MentionList extends Vue {
this.selectedIndex! = 0;
}
- // props: {
- // items: {
- // type: Array,
- // required: true,
- // },
-
- // command: {
- // type: Function,
- // required: true,
- // },
- // },
-
- // data() {
- // return {
- // selectedIndex: 0,
- // };
- // },
-
- // watch: {
- // items() {
- // this.selectedIndex! = 0;
- // },
- // },
- // methods: {
- // onKeyDown({ event }) {
- // if (event.key === 'ArrowUp') {
- // this.upHandler();
- // return true;
- // }
-
- // if (event.key === 'ArrowDown') {
- // this.downHandler();
- // return true;
- // }
-
- // if (event.key === 'Enter') {
- // this.enterHandler();
- // return true;
- // }
-
- // return false;
- // },
private onKeyDown({event}) {
if (event.key === 'ArrowUp') {
this.upHandler();
@@ -102,8 +60,9 @@ export default class MentionList extends Vue {
}
upHandler() {
-
- this.selectedIndex! = (this.selectedIndex! + this.items.length - 1) % this.items.length;
+ if (this.items && this.items.length > 0) {
+ this.selectedIndex! = (this.selectedIndex! + this.items.length - 1) % this.items.length;
+ }
}
downHandler() {
@@ -116,67 +75,11 @@ export default class MentionList extends Vue {
}
selectItem(index) {
- const item = this.items[index];
- // this.$options.propsData.editor.chain().focus().setTextEntity({ spacy_label: this.entityBubbleSelection?.type }).run();
- // setTextEntity({ spacy_label: this.entityBubbleSelection?.type });
- // console.log(item);
+ const item = this.items[index];
if (item) {
this.command({ name:'text-entity', id: `entity-${idGenerator()}`, label: item.item.properties.name, text: item.item.properties.name, spacy_label: item.item._featureType.type, kg_id: item.item.id });
}
}
-
- // public selectedIndex = 0;
- // public testitems = ['Foo', 'Bar', 'Fizz', 'Buzz'];
-
- // onKeyDown({ event }) {
- // if (event.key === 'ArrowUp') {
- // this.upHandler()
- // return true
- // }
-
- // if (event.key === 'ArrowDown') {
- // this.downHandler()
- // return true
- // }
-
- // if (event.key === 'Enter') {
- // this.enterHandler()
- // return true
- // }
-
- // return false
- // }
-
- // upHandler() {
- // this.selectedIndex! = ((this.selectedIndex! + this.items.length) - 1) % this.items.length
- // }
-
- // downHandler() {
- // this.selectedIndex! = (this.selectedIndex! + 1) % this.items.length
- // }
-
- // enterHandler() {
- // this.selectItem(this.selectedIndex!)
- // }
-
- // selectItem(index) {
- // const item = this.items[index]
-
- // // if (item) {
- // // this.command({ id: item })
- // // }
- // }
-
- // mounted() {
- // console.log(this);
-
- // console.log(this.$options.propsData);
- // console.log('init mention list');
- // // setInterval(()=> {
- // // this.$forceUpdate();
- // // }, 2000)
- // // alert('added');
- // }
}
diff --git a/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion.ts b/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion.ts
index f45b32b52..67c181f65 100644
--- a/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion.ts
+++ b/packages/cs-graph/src/components/document/plugins/text-entity-suggestion/suggestion.ts
@@ -28,7 +28,7 @@ export default {
a.editor.chain().focus().setTextSelection(a.range).setTextEntity(a.props).run();
const source = a?.editor?.view?._props?.source;
if (source && a?.editor?.view?._props?.document) {
- DocUtils.syncEntities(a.editor.view._props.document as GraphDocument, source, undefined, true);
+ // DocUtils.syncEntities(a.editor.view._props.document as GraphDocument, source, undefined, true);
await source.entityParser.callDocument(a.editor.view._props.document, source);
}
});
diff --git a/packages/cs-graph/src/components/document/plugins/text-mention.ts b/packages/cs-graph/src/components/document/plugins/text-mention.ts
deleted file mode 100644
index c1f769aa1..000000000
--- a/packages/cs-graph/src/components/document/plugins/text-mention.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import Mention from '@tiptap/extension-mention';
-
-export const TextMention = Mention;
-
-export const SnippetMention = Mention;
-
diff --git a/packages/cs-graph/src/components/document/selection-popup.vue b/packages/cs-graph/src/components/document/selection-popup.vue
index 3811f18da..8a742456f 100644
--- a/packages/cs-graph/src/components/document/selection-popup.vue
+++ b/packages/cs-graph/src/components/document/selection-popup.vue
@@ -1,13 +1,14 @@
-
-
-
-
- mdi-format-bold
-
-
- mdi-format-italic
-
-
- mdi-format-strikethrough
-
-
- mdi-marker
-
-
-
- mdi-segment
-
-
- h1
-
-
- h2
-
-
- mdi-format-list-bulleted
-
-
- mdi-format-list-numbered
-
-
- mdi-code-tags
-
-
- mdi-format-quote-close
-
-
- mdi-reorder-horizontal
-
- mdi-undo mdi-redo mdi-label mdi-format-paragraph mdi-card
+
+
+
+
+ {{ tool.icon }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
- {{ currentDocument.properties.name }}
+
+
+ mdi-content-save
+ mdi-pencil
+
+
Created {{ publishedDate() }} ago,
@@ -204,7 +225,7 @@
:editor="editor"
/>
-
+ - // This is still the text editor you’re used to, but enriched with node views. - //
- //- // Did you see that? That’s a Vue component. We are really living in the future. - //
- // `, + onTransaction({ transaction }) {}, content: this.currentDocument?.properties?.doc, editable: true, editorProps: { @@ -581,7 +644,7 @@ export default class DocumentViewer extends WidgetBase { type: 'doc', content: [ { - type: 'paragraph', + type: 'node-paragraph', content: [ { type: 'text', @@ -593,27 +656,14 @@ export default class DocumentViewer extends WidgetBase { }; } this.currentDocument = doc; - this.state.element = doc; + + // check if entities from document are also included in doc._entities + DocUtils.syncEntities(doc, this.source!, doc.properties.doc.content, false); + // link doc._entities to graph entities + this.source.parseEntities(doc); this.loaded = true; - - // this.source.activateDocument(doc).then(() => { - // this.widget.options!.title = doc.name; - // if (this.currentDocument) { - // // this.source?.openDocumentDetails(this.currentDocument, false); - // if (this.currentDocument._entities) { - // for (const ent of this.currentDocument._entities) { - // if (ent._node) { - // // ent._node._included = true; - // } - // } - // } - - // this.loaded = true; - // this.busManager.subscribe(this.source!.bus, 'document-entities', () => {}); - // } - // }); } } @@ -658,16 +708,6 @@ export default class DocumentViewer extends WidgetBase { this.updateEditor(); } - if (this.currentDocument.properties?.doc) { - // this.currentDocument.properties.doc = JSON.parse( - // JSON.stringify(this.currentDocument.properties.doc, (key, value: any) => { - // if (value === null) { - // return undefined; - // } - // return value; - // })) - } - this.editor?.chain().clearContent().setContent(this.currentDocument.properties?.doc, false).run(); this.updateEntityTypes(); }); @@ -726,6 +766,7 @@ export default class DocumentViewer extends WidgetBase { this.currentDocument.properties!.doc = d.properties.doc; this.updateContent(); DocUtils.syncEntities(this.currentDocument!, this.source!, this.currentDocument!.properties!.doc, true); + this.source!.parseEntities(this.currentDocument!); } }); } @@ -748,7 +789,7 @@ export default class DocumentViewer extends WidgetBase { } plugin .callImport(this.currentDocument, this.source) - .then((r) => { + .then((r) => { this.updateContent(); }) .catch((e) => {}) @@ -773,71 +814,74 @@ export default class DocumentViewer extends WidgetBase { return; } this.source = source; - this.updateContextMenu(); + console.log('document content loaded'); this.busManager.subscribe(this.source!.bus, DocDatasource.DOCUMENT_ENTITIES, (a: string, d: any) => { if (a === DocDatasource.ENTITIES_UPDATED) { console.log('document content updated from messagebus'); - this.checkDocumentIdQuery(); - this.updateEditor(); - this.updateContent(); - this.initTools(); - this.$forceUpdate(); + // this.checkDocumentIdQuery(); } }); this.busManager.subscribe(this.source!.bus, 'document', (a: string, d: any) => { - this.updateEditor(); - this.updateContent(); - this.initTools(); + console.log('document updated'); + this.$forceUpdate(); + // this.updateEditor(); + // this.updateContent(); + // this.initTools(); }); - if (this.state && this.state.elementId) { - const doc = this.source.getElement(this.state.elementId) as GraphDocument; - this.loadDocument(doc); - this.updateEditor(); - this.updateContent(); - this.initTools(); + if (this.state && this.state.elementid) { + const doc = this.source.getElement(this.state.elementid) as GraphDocument; + this.openElement(doc); + } else if (this.checkDocumentIdQuery()) { + console.log('got from uri') } else { - this.checkDocumentIdQuery(); - this.updateEditor(); - this.updateContent(); - this.initTools(); + if (this.state?.element) { + this.openElement(this.state.element); + } } + // this.initTools(); this.initDragging(); + this.updateContextMenu(); } - private checkDocumentIdQuery() { + private checkDocumentIdQuery() : boolean { if (!$cs.router || !this.source) { - return; + return false; } - if ($cs.router.currentRoute?.query?.id) { - if (this.currentDocument?.id !== $cs.router!.currentRoute?.query?.id) { - const doc = this.source.getElement($cs.router.currentRoute.query.id as string) as GraphDocument; + if ($cs.router.currentRoute?.query?.docid) { + if (this.currentDocument?.id !== $cs.router!.currentRoute?.query?.docid) { + const doc = this.source.getElement($cs.router.currentRoute.query.docid as string) as GraphDocument; if (doc) { - this.loadDocument(doc); + this.openElement(doc); } } else { - this.loadDocument(this.currentDocument); - } - } else { - let d: GraphDocument = (this.source.activeElement as GraphDocument) || this.currentDocument; - if (d) { - this.loadDocument(d); - - const combined = { - ...$cs.router!.currentRoute.query, - ...{ id: d.id }, - }; - $cs.router.replace( - { path: $cs.router!.currentRoute.params[0], query: combined }, - () => {}, - () => { - // console.log(err); - } - ); + this.openElement(this.currentDocument); } + return true; + } else { + return false; } + + // else { + // let d: GraphDocument = (this.source.activeElement as GraphDocument) || this.currentDocument; + // if (d) { + // this.openElement(d); + + // const combined = { + // ...$cs.router!.currentRoute.query, + // ...{ docid: d.id }, + // }; + // $cs.router.replace( + // { path: $cs.router!.currentRoute.params[0], query: combined }, + // () => {}, + // () => { + // // console.log(err); + // } + // ); + // } + } private dragMoveListener(event) { @@ -950,58 +994,21 @@ export default class DocumentViewer extends WidgetBase { widget: this.widget, subtitle: 'Entity Recognition, Search, Linking, Geo/time recognition', image: 'images/entity_analysis.png', - action: async () => { - try { - this.updateEntityTypes(); - await this.refresh(); - return Promise.resolve(true); - } catch (e) { - return Promise.resolve(false); - } + documentActions: (e) => { + return [ + { + icon: 'mdi-sim-outline', + title: 'Entity Recognition', + action: async () => { + await this.refresh(); + this.updateEntityTypes(); + }, + }, + ]; }, - } as ITool); - this.source.addTool({ - id: 'observation_extraction', - title: 'Observation Extraction', - subtitle: 'find observations', - widget: this.widget, - disabled: true, - // subtitle: 'Entity Recognition, Search, Linking', - // image: 'images/entity_analysis.png', action: async () => { try { - // await this.refresh(); this.updateEntityTypes(); - return Promise.resolve(true); - } catch (e) { - return Promise.resolve(false); - } - }, - } as ITool); - this.source.addTool({ - id: 'geo_time_extraction', - title: 'Geo & time extraction', - subtitle: 'Recognize locations and time entities', - widget: this.widget, - disabled: true, - // subtitle: 'Entity Recognition, Search, Linking', - // image: 'images/entity_analysis.png', - action: async () => { - try { - await this.refresh(); - return Promise.resolve(true); - } catch (e) { - return Promise.resolve(false); - } - }, - } as ITool); - this.source.addTool({ - id: 'language_detection', - title: 'Language Detection', - disabled: true, - widget: this.widget, - action: async () => { - try { await this.refresh(); return Promise.resolve(true); } catch (e) { @@ -1009,6 +1016,8 @@ export default class DocumentViewer extends WidgetBase { } }, } as ITool); + this.updateDocumentActions(); + this.updateDocumentTools(); } initDragging() { @@ -1158,6 +1167,32 @@ export default class DocumentViewer extends WidgetBase { } + + + +function async(arg0: (e: any) => { icon: string; title: string; action: any; }[]): (element: +import("@csnext/cs-data").GraphElement
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/cs-graph/src/components/document/plugins/entity.ts b/packages/cs-graph/src/components/document/plugins/entity.ts
deleted file mode 100644
index 061750fd6..000000000
--- a/packages/cs-graph/src/components/document/plugins/entity.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import Suggestion, { SuggestionOptions } from '@tiptap/suggestion'
-import Vue from 'vue';
-
-export type EntityOptions = {
- HTMLAttributes: Record
-
-
+
+
+
mdi-tag-outline
@@ -29,35 +30,44 @@
+
-
+
mdi-web Server Knowledge Graph
- mdi-import importmdi-download downloadmdi-web mdi-import restoremdi-download backup
-
+
+
@@ -80,7 +80,7 @@
>
-
+ -->
@@ -134,7 +134,6 @@
}
-
-
+
+ mdi-information-outline infomdi-information-outline mdi-delete
+
- mdi-minus mdi-link-off unlink
{{ $cs.Translate("UNLINK_ENTITY") }}
- mdi-plus mdi-link link
+
+ {{ $cs.Translate("LINK_ENTITY") }}
+
+
+
+ mdi-delete delete{{ entity.text }}
{{ entity.spacy_label }}
+
+
Add new:{{ ft.title }}
-
-
-
-
- mdi-plus
-
-
+ >{{ft._icon}} {{ ft.title }}
+
+
+ mdi-link
+
no entity
@@ -130,9 +137,7 @@
-
+
@@ -146,7 +151,7 @@
-
+
+
{{ entity._date }}
-
-
-
-
-
+
@@ -335,7 +208,7 @@
.entity-node-actions {
position: absolute;
bottom: 0;
- right: 0;
+ /* right: 0; */
}
.selection-popup {
@@ -358,14 +231,15 @@ import { TextEntity } from "@csnext/cs-data";
import { DocDatasource } from "../../datasources/doc-datasource";
import { GraphDocument } from "../../classes/document/graph-document";
import { guidGenerator } from "@csnext/cs-core";
-import { DataInfoPanel, NodeLink, NodeSpan } from "@csnext/cs-map";
+import { DataInfoPanel, NodeLink, NodeChip, NodeSpan } from "@csnext/cs-map";
import { DocUtils } from '../../utils/doc-utils';
import { FeatureType } from "@csnext/cs-data";
+import { ElementCardManager } from "../data-grid/cards/element-card-manager";
// import turf from "@turf/turf";
// import distance from "@turf/distance";
@Component({
- components: { DataInfoPanel, NodeLink, NodeSpan },
+ components: { DataInfoPanel, NodeLink, NodeSpan, NodeChip },
})
export default class SelectionPopup extends WidgetBase {
@Prop()
@@ -403,11 +277,6 @@ export default class SelectionPopup extends WidgetBase {
public to?: number;
public newCategory: FeatureType | null = null;
-
- public newNoteSource: GraphElement = { };
- public newNoteEEI: GraphElement = { };
- public newNoteUrl: string = "";
-
public newEntityNode: GraphElement = { };
public suggestions: any[] | null = null;
@@ -425,6 +294,11 @@ export default class SelectionPopup extends WidgetBase {
}
}
+ @Watch("entity._linked")
+ private updateLinked() {
+ this.$forceUpdate();
+ }
+
public async createEntity() {
if (!this.source || !this.source.searchEntities || !this.document) {
return;
@@ -445,12 +319,21 @@ export default class SelectionPopup extends WidgetBase {
}
public updateSuggestions() {
+ console.log('update suggestions');
if (this.entity?.text && this.source?.fuse) {
- this.suggestions = this.source.fuse
- .search(this.entity.text, { limit: 8})
+ this.suggestions = this.source.searchFuse(this.entity.text, undefined, false);
+ // , { nlp: this.entity?.spacy_label}
+ // .search(this.entity.text, { limit: 8}).filter((x: GraphElement) => x.item._featureType.ba)
}
}
+ public getComponentCard() {
+ if (this.entity?._node) {
+ return ElementCardManager.getElementCard(this.entity._node);
+ }
+ return null;
+ }
+
public async createNewNode(ft: FeatureType) {
if (!this.entity) {
return;
@@ -589,14 +472,14 @@ export default class SelectionPopup extends WidgetBase {
description: entity.text,
location: entity._location,
},
- _included: true,
+ // _linked: true,
};
entity._node = node;
entity.kg_id = node.id;
this.source.addNode(node);
await this.source.saveNode(node);
await this.source.linkEntityToDocument(entity, this.document);
- await this.source.parseEntities();
+ await this.source.parseEntities(this.document);
this.publishChanges();
}
@@ -643,7 +526,7 @@ export default class SelectionPopup extends WidgetBase {
properties: {
title: this.entity?.text ?? this.text,
},
- _included: true,
+ _linked: true,
};
this.source.addNode(node);
this.entity._node = node;
@@ -718,19 +601,21 @@ export default class SelectionPopup extends WidgetBase {
this.potentialTypes = Object.values(this.source.featureTypes).filter(
(ft) => ft._inheritedTypes && ft._inheritedTypes.includes("location")
);
- }
+
} else if (this.source.featureTypes) {
this.potentialTypes = Object.values(this.source.featureTypes).filter(
(ft) =>
ft.attributes &&
- ft.attributes.hasOwnProperty("spacy_label") &&
- ft.attributes["spacy_label"] === this.entity?.spacy_label
+ ft.attributes.hasOwnProperty("nlp:entity_class") &&
+ ft.attributes["nlp:entity_class"] === this.entity?.spacy_label
);
+ }
if (this.potentialTypes && this.potentialTypes.length > 0) {
this.newCategory = this.potentialTypes[0];
} else {
this.newCategory = Object.values(this.source.featureTypes)[0];
}
+
}
}
@@ -751,11 +636,11 @@ export default class SelectionPopup extends WidgetBase {
if (this.entity?.spacy_label === "location") {
this.viewtab = 1;
}
- this.updateAgents();
- this.updatePotentialTypes();
+ // this.updateAgents();
+ // this.updatePotentialTypes();
this.updateSuggestions();
if (!this.entity?._node && this.entity?.spacy_label && !['CARDINAL','DATE', 'ORDINAL', 'QUANTITY'].includes(this.entity.spacy_label) && this.suggestions && this.suggestions.length > 0) {
- this.viewtab = 1;
+ // this.viewtab = 1;
}
}
diff --git a/packages/cs-graph/src/components/element-context-menu.vue b/packages/cs-graph/src/components/element-context-menu.vue
deleted file mode 100644
index 4ae593906..000000000
--- a/packages/cs-graph/src/components/element-context-menu.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-
-
-
-
-
- {{ item.items.length }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/cs-graph/src/components/element/element-actions.ts b/packages/cs-graph/src/components/element/element-actions.ts
index 7c6b20e35..e59d2b67a 100644
--- a/packages/cs-graph/src/components/element/element-actions.ts
+++ b/packages/cs-graph/src/components/element/element-actions.ts
@@ -3,16 +3,25 @@ import { FilterGraphElement, GraphElement } from '@csnext/cs-data';
import { DocDatasource } from '../..';
export class ElementActions {
- public static getElementActions(element: GraphElement, source: DocDatasource, beforeAction?: (m: IMenu, e: GraphElement)=> void, afterAction?: (m: IMenu, e: GraphElement)=>void) : IMenu[] {
+ public static getElementActions(
+ element: GraphElement,
+ source: DocDatasource,
+ beforeAction?: (m: IMenu, e: GraphElement) => void,
+ afterAction?: (m: IMenu, e: GraphElement) => void
+ ): IMenu[] {
let menuItems: IMenu[] = [];
const callBefore = async (m) => {
- if (beforeAction) { await beforeAction(m, element);}
- }
+ if (beforeAction) {
+ await beforeAction(m, element);
+ }
+ };
const callAfter = async (m) => {
- if (afterAction) { await afterAction(m, element);}
- }
+ if (afterAction) {
+ await afterAction(m, element);
+ }
+ };
let showContextMenu = false;
menuItems.push({
@@ -24,69 +33,100 @@ export class ElementActions {
callAfter(i);
},
});
- menuItems.push({
- title: 'duplicate',
- icon: 'mdi-plus-circle-multiple-outline',
- action: async (i) => {
- callBefore(i);
- const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
- await source.duplicateNode(element, name);
- callAfter(i);
- },
- });
- menuItems.push({
- title: 'add to visualisation',
- icon: 'mdi-playlist-plus',
- action: async (i: IMenu) => {
- callBefore(i);
- i.items = [];
- // showContextMenu = false;
- let presets = source.getClassElements('graph_preset', true);
- presets.forEach((p) => {
- i.items!.push({
- title: p.properties?.name,
- icon: p._featureType?.icon,
- action: async () => {
- FilterGraphElement.addElementRule(p as FilterGraphElement, element);
- callAfter(i);
- // alert(`add to ${p.properties.name}`)
- },
+ if (element.type === 'node') {
+ menuItems.push({
+ title: 'duplicate',
+ icon: 'mdi-plus-circle-multiple-outline',
+ action: async (i) => {
+ callBefore(i);
+ const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
+ await source.duplicateNode(element, name);
+ callAfter(i);
+ },
+ });
+ for (const tool of source.tools) {
+ if (tool.elementActions) {
+ const actions = tool.elementActions(element);
+ if (actions && actions.length > 0) {
+ menuItems = menuItems.concat(actions);
+ }
+ }
+ }
+ menuItems.push({
+ title: 'add to visualisation',
+ icon: 'mdi-playlist-plus',
+ action: async (i: IMenu) => {
+ callBefore(i);
+ i.items = [];
+ // showContextMenu = false;
+ let presets = source.getClassElements('graph_preset', true);
+ presets.forEach((p) => {
+ i.items!.push({
+ title: p.properties?.name,
+ icon: p._featureType?.icon,
+ action: async () => {
+ FilterGraphElement.addElementRule(p as FilterGraphElement, element);
+ callAfter(i);
+ // alert(`add to ${p.properties.name}`)
+ },
+ });
});
- });
- console.log(presets);
-
- // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
- // await source.duplicateNode(element, name);
- //
- },
- });
- menuItems.push({
- title: 'link to',
- icon: 'mdi-playlist-plus',
- action: async (i: IMenu) => {
- callBefore(i);
- i.items = [];
- // showContextMenu = false;
- let targets = source.getClassElements('indicator', true);
- targets.forEach((p) => {
- i.items!.push({
- title: p.properties?.name,
- icon: p._featureType?.icon,
- action: async () => {
+ console.log(presets);
+
+ // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
+ // await source.duplicateNode(element, name);
+ //
+ },
+ });
+ menuItems.push({
+ title: 'link to',
+ icon: 'mdi-playlist-plus',
+ action: async (i: IMenu) => {
+ callBefore(i);
+ i.items = [];
+ // showContextMenu = false;
+ let targets = source.getClassElements('indicator', true);
+ targets.forEach((p) => {
+ i.items!.push({
+ title: p.properties?.name,
+ icon: p._featureType?.icon,
+ action: async () => {
+ this.linkToTarget(element, p, 'supports', source);
callAfter(i);
- // this.linkToTarget(p, 'supports');
- // FilterGraphElement.addElementRule(p as FilterGraphElement, element);
- // alert(`add to ${p.properties.name}`)
- },
+ },
+ });
});
+ console.log(targets);
+
+ // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
+ // await source.duplicateNode(element, name);
+ //
+ },
+ });
+ }
+
+ if (source.searchPlugins && source.searchPlugins.length > 0) {
+ let searchOptions: IMenu[] = [];
+
+ source.searchPlugins.forEach(async (p) => {
+ if (p.actions && typeof p.actions === 'function') {
+ let actions = p.actions(element, source);
+ for (const action of actions) {
+ searchOptions.push(action);
+ }
+ }
+ });
+ if (searchOptions.length === 1) {
+ menuItems.push(searchOptions[0]);
+ } else if (searchOptions.length > 1) {
+ menuItems.push({
+ title: 'search',
+ icon: 'mdi-magnify',
+ items: searchOptions,
});
- console.log(targets);
-
- // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${element.properties?.name} - copy`);
- // await source.duplicateNode(element, name);
- //
- },
- });
+ }
+ }
+
menuItems.push({
title: 'rename',
icon: 'mdi-form-textbox',
@@ -113,25 +153,23 @@ export class ElementActions {
});
return menuItems;
-
}
- // public async linkToTarget(target: GraphElement, type: string) {
- // if (source && target.id && element.id)
- // {
- // const edge = {
- // fromId: element.id,
- // toId: target.id,
- // classId: 'LINKED_TO',
- // properties: {
- // "relation_type": type
- // }
- // } as GraphElement
- // try {
- // await source.addNewEdge(edge);
- // } catch (e) {
- // console.error(e);
- // }
-
- // }
+ public static async linkToTarget(element: GraphElement, target: GraphElement, type: string, source: DocDatasource) {
+ if (source && target.id && element.id) {
+ const edge = {
+ fromId: element.id,
+ toId: target.id,
+ classId: 'LINKED_TO',
+ properties: {
+ relation_type: type,
+ },
+ } as GraphElement;
+ try {
+ await source.addNewEdge(edge);
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ }
}
diff --git a/packages/cs-graph/src/components/element/element-context-menu.vue b/packages/cs-graph/src/components/element/element-context-menu.vue
index 18618075f..e0309a07e 100644
--- a/packages/cs-graph/src/components/element/element-context-menu.vue
+++ b/packages/cs-graph/src/components/element/element-context-menu.vue
@@ -33,10 +33,14 @@ import Vue from 'vue';
import { DocDatasource } from '../../datasources/doc-datasource';
import { ElementActions } from './element-actions'
+export type additionalItemsRequest = (e: GraphElement, s: DocDatasource) => IMenu[];
+
@Component({
components: {},
})
export default class ElementContextMenu extends Vue {
+
+
@Prop()
public x!: number;
@@ -52,6 +56,9 @@ export default class ElementContextMenu extends Vue {
@Prop()
public showContextMenu!: boolean;
+ @Prop()
+ public additionalItems?: IMenu[] | additionalItemsRequest;
+
@Emit('itemUpdated')
public itemUpdated() {}
@@ -65,7 +72,6 @@ export default class ElementContextMenu extends Vue {
await i.action(i);
}
}
-
public async linkToTarget(target: GraphElement, type: string) {
if (this.source && target.id && this.element?.id)
@@ -96,89 +102,18 @@ export default class ElementContextMenu extends Vue {
public initMenu() {
if (!this.source || !this.element) { return; }
- this.contextMenuitems = ElementActions.getElementActions(this.element, this.source, undefined, (i,m) => {
- // this.showContextMenu = false;
+ this.contextMenuitems = ElementActions.getElementActions(this.element, this.source, undefined, (i,m) => {
this.listUpdated();
});
- // this.contextMenuitems.push({
- // title: 'duplicate',
- // icon: 'mdi-plus-circle-multiple-outline',
- // action: async () => {
- // this.showContextMenu = false;
- // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${this.element.properties?.name} - copy`);
- // await this.source.duplicateNode(this.element, name);
- // this.listUpdated();
- // },
- // });
- // this.contextMenuitems.push({
- // title: 'add to visualisation',
- // icon: 'mdi-playlist-plus',
- // action: async (i: IMenu) => {
- // i.items = [];
- // // this.showContextMenu = false;
- // let presets = this.source.getClassElements('graph_preset', true);
- // presets.forEach(p => {
- // i.items!.push({
- // title: p.properties?.name,
- // icon: p._featureType?.icon,
- // action: async () => {
- // FilterGraphElement.addElementRule(p as FilterGraphElement, this.element);
- // // alert(`add to ${p.properties.name}`)
- // }
- // });
- // })
- // console.log(presets);
- // // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${this.element.properties?.name} - copy`);
- // // await this.source.duplicateNode(this.element, name);
- // // this.listUpdated();
- // },
- // });
- // this.contextMenuitems.push({
- // title: 'link to',
- // icon: 'mdi-playlist-plus',
- // action: async (i: IMenu) => {
- // i.items = [];
- // // this.showContextMenu = false;
- // let targets = this.source.getClassElements('indicator', true);
- // targets.forEach(p => {
- // i.items!.push({
- // title: p.properties?.name,
- // icon: p._featureType?.icon,
- // action: async () => {
- // this.linkToTarget(p, 'supports');
-
- // // FilterGraphElement.addElementRule(p as FilterGraphElement, this.element);
- // // alert(`add to ${p.properties.name}`)
- // }
- // });
- // })
- // console.log(targets);
- // // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', `${this.element.properties?.name} - copy`);
- // // await this.source.duplicateNode(this.element, name);
- // // this.listUpdated();
- // },
- // });
- // this.contextMenuitems.push({
- // title: 'rename',
- // icon: 'mdi-form-textbox',
- // action: async () => {
- // this.showContextMenu = false;
- // const name = await $cs.triggerInputDialog($cs.Translate('RENAME'), 'enter new name', this.element.properties?.name);
- // this.element.properties = { ... this.element.properties, ...{name}};
- // await this.source.saveNode(this.element);
- // this.itemUpdated();
- // },
- // });
- // this.contextMenuitems.push({
- // title: 'delete',
- // icon: 'mdi-delete',
- // color: '#eb4034',
- // action: async () => {
- // this.showContextMenu = false;
- // await this.source.removeNode(this.element);
- // this.listUpdated();
- // },
- // });
+ if (this.additionalItems) {
+ if (typeof this.additionalItems === 'function') {
+ this.contextMenuitems = this.contextMenuitems.concat(this.additionalItems(this.element, this.source));
+ } else {
+ this.additionalItems = this.contextMenuitems.concat(this.additionalItems);
+ }
+
+ }
+
}
mounted() {
diff --git a/packages/cs-graph/src/components/element/element-info.vue b/packages/cs-graph/src/components/element/element-info.vue
index 27d7eaaf3..b8f0ce553 100644
--- a/packages/cs-graph/src/components/element/element-info.vue
+++ b/packages/cs-graph/src/components/element/element-info.vue
@@ -36,53 +36,56 @@
mdi-folder-outline
-
+
-
+
-
-
-
- mdi-dots-vertical
-
-
-
-
-
- {{ item.items.length }}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ mdi-dots-vertical
+
-
-
-
-
-
-
-
+
+
+
+ {{ item.items.length }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -97,14 +100,14 @@
-
+
-
+
-
+
@@ -153,7 +156,7 @@
-
+
@@ -162,7 +165,7 @@
margin: 14px;
}
.element-data-info-panel {
- margin: 4px;
+ /* margin: 4px; */
}
.type-sub-title {
@@ -200,17 +203,20 @@
}
.info-tab-items {
- position: absolute;
+ /* position: absolute; */
top: 0;
bottom: 0;
left: 0;
right: 0;
+ margin-bottom: 300px;
}
.feature-property-value {
font-size: 16px;
text-align: right;
+ overflow: hidden;
max-width: 66%;
+ font-weight: 600;;
justify-content: flex-end;
}
@@ -225,6 +231,12 @@
font-weight: 700;
}
+.tab-content {
+ overflow-y: auto;
+ padding-bottom: 50px;
+ height: calc(100vh - 120px);
+}
+
.prop-value {
text-overflow: ellipsis;
overflow: hidden;
@@ -282,12 +294,11 @@ export default class ElementInfo extends WidgetBase {
private specialTab: VueComponent | null = null;
private elementInfoTab = 'eitab';
-
public showContextMenu = false;
- public contextMenuitems :IMenu[] = [];
+ public contextMenuitems: IMenu[] = [];
- @Ref('docWidget')
- private docWidget: HTMLElement | null = null;
+ // @Ref('docWidget')
+ // private docWidget: HTMLElement | null = null;
@Watch('activeElement')
public async updateIndicatorResults() {
@@ -298,8 +309,6 @@ export default class ElementInfo extends WidgetBase {
super();
}
-
-
@Watch('tab')
public updateTab() {
if (this.tab === null) {
@@ -319,14 +328,14 @@ export default class ElementInfo extends WidgetBase {
}
}
-
public openContextMenu(e) {
- if (!this.activeElement || !this.dataSource) { return; }
- this.showContextMenu = true;
- this.contextMenuitems = ElementActions.getElementActions(this.activeElement, this.dataSource, undefined, (i,m) => {
- this.$forceUpdate();
+ if (!this.activeElement || !this.dataSource) {
+ return;
+ }
+ this.showContextMenu = true;
+ this.contextMenuitems = ElementActions.getElementActions(this.activeElement, this.dataSource, undefined, (i, m) => {
+ this.$forceUpdate();
});
-
}
public async callContextAction(i: IMenu) {
@@ -334,7 +343,6 @@ export default class ElementInfo extends WidgetBase {
if (i.action && typeof i.action === 'function') {
await i.action(i);
}
- ;
}
public setLegend(p: any) {
@@ -560,7 +568,7 @@ export default class ElementInfo extends WidgetBase {
}
public openDocument(id: string) {
- $cs.router?.push(`/document?id=${id}`);
+ $cs.router?.push(`/document?docid=${id}`);
}
public getInstances(element: GraphElement): LinkInfo[] {
@@ -650,7 +658,7 @@ export default class ElementInfo extends WidgetBase {
}
});
- this.busManager.subscribe(this.dataSource.bus, 'element', (a: string, data: GraphElement) => {
+ this.busManager.subscribe(this.dataSource.bus, 'element', (a: string, data: GraphElement) => {
this.activeElement = data;
if (a === 'edit-element') {
this.tab = 'tab-EDITOR';
diff --git a/packages/cs-graph/src/components/element/find-element.vue b/packages/cs-graph/src/components/element/find-element.vue
new file mode 100644
index 000000000..64ba86350
--- /dev/null
+++ b/packages/cs-graph/src/components/element/find-element.vue
@@ -0,0 +1,36 @@
+
+
+ find element
+
+
+
+
+
+
diff --git a/packages/cs-graph/src/components/graph/graph-rule-editor.vue b/packages/cs-graph/src/components/graph/graph-rule-editor.vue
index d80a88de4..172f2b6ff 100644
--- a/packages/cs-graph/src/components/graph/graph-rule-editor.vue
+++ b/packages/cs-graph/src/components/graph/graph-rule-editor.vue
@@ -184,7 +184,7 @@ export default class GraphRuleEditor extends Vue {
public toggleRule(rule: NodeRule) {
rule.disabled = !rule.disabled;
- this.source.updateRules(this.activePreset, rule);
+ // this.source.updateRules(this.activePreset, rule);
this.$forceUpdate();
// this.source.events.publish(IGraphFilter.GRAPH_FILTER, IGraphFilter.RULES_CHANGED, rule);
}
@@ -194,7 +194,7 @@ export default class GraphRuleEditor extends Vue {
this.rule._editMode = false;
this.rule._featureType = this.source.getFeatureTypeById(this.rule.featureType);
// this.source.events.publish(IGraphFilter.GRAPH_FILTER, IGraphFilter.RULES_CHANGED, this.rule);
- this.source.updateRules(this.activePreset, this.rule);
+ // this.source.updateRules(this.activePreset, this.rule);
this.$forceUpdate();
}
}
@@ -226,14 +226,14 @@ export default class GraphRuleEditor extends Vue {
this.rule._element = this.source.getElement(this.rule.elementId);
// this.rule._featureType = this.source.getFeatureTypeById(this.rule.featureType);
// this.source.events.publish(IGraphFilter.GRAPH_FILTER, IGraphFilter.RULES_CHANGED, this.rule);
- this.source.updateRules(this.activePreset, this.rule);
+ // this.source.updateRules(this.activePreset, this.rule);
this.$forceUpdate();
}
}
public saveRelation() {
this.rule._editMode = false;
- this.source.updateRules(this.activePreset, this.rule);
+ // this.source.updateRules(this.activePreset, this.rule);
this.$forceUpdate();
// this.source.events.publish(IGraphFilter.GRAPH_FILTER, IGraphFilter.RULES_CHANGED, this.rule);
}
@@ -252,7 +252,7 @@ export default class GraphRuleEditor extends Vue {
if (this.activePreset?.properties?.graphLayout?.nodeRules) {
this.activePreset.properties.graphLayout.nodeRules = this.activePreset.properties.graphLayout.nodeRules.filter((r) => r !== this.rule);
}
- this.source.updateRules(this.activePreset, this.rule);
+ // this.source.updateRules(this.activePreset, this.rule);
// this.source.events.publish(IGraphFilter.GRAPH_FILTER, IGraphFilter.RULES_CHANGED, this.rule);
this.$forceUpdate();
}
@@ -316,7 +316,7 @@ export default class GraphRuleEditor extends Vue {
value: undefined,
} as GraphPropertyFilter);
- this.source.updateRules(this.activePreset, this.rule);
+ // this.source.updateRules(this.activePreset, this.rule);
this.$forceUpdate();
}
diff --git a/packages/cs-graph/src/components/graph/graph-rule-filter.vue b/packages/cs-graph/src/components/graph/graph-rule-filter.vue
index 3192ca4b1..b35b48d03 100644
--- a/packages/cs-graph/src/components/graph/graph-rule-filter.vue
+++ b/packages/cs-graph/src/components/graph/graph-rule-filter.vue
@@ -91,19 +91,19 @@ export default class GraphRuleEditor extends Vue {
public removeFilter() {
if (this.rule?.filter) {
this.rule.filter = undefined;
- this.source.updateRules(this.preset, this.rule);
+ // this.source.updateRules(this.preset, this.rule);
}
}
public updateFilterProperty() {
this.updateProperties(true);
- this.source.updateRules(this.preset, this.rule);
+ // this.source.updateRules(this.preset, this.rule);
}
public removeProperty(index: number) {
if (this.source && this.rule?.filter?.hasObjectProperties) {
this.rule.filter.hasObjectProperties.splice(index, 1);
- this.source.updateRules(this.preset, this.rule);
+ // this.source.updateRules(this.preset, this.rule);
}
}
diff --git a/packages/cs-graph/src/components/graph/management.vue b/packages/cs-graph/src/components/graph/management.vue
index 1fda24cf8..abdc62308 100644
--- a/packages/cs-graph/src/components/graph/management.vue
+++ b/packages/cs-graph/src/components/graph/management.vue
@@ -22,21 +22,21 @@