From 81b8e8730a482c94a075de01beb32829d4a65809 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Thu, 8 Sep 2022 22:51:02 +0800 Subject: [PATCH] fix client ui --- .../kityminder/kity-editor/runtime/input.js | 23 ++++++++++++++++++- packages/client/src/tiptap/core/all-kit.ts | 2 +- .../client/src/tiptap/core/styles/drag.scss | 1 + .../src/tiptap/core/styles/kityminder.scss | 4 ---- .../src/tiptap/editor/collaboration/kit.ts | 8 +++++-- 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js b/packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js index 9f5fc1d3..996550a3 100644 --- a/packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js +++ b/packages/client/src/thirtypart/kityminder/kity-editor/runtime/input.js @@ -139,11 +139,21 @@ define(function (require, exports, module) { var node = minder.getSelectedNode(); if (node) { var fontSize = node.getData('font-size') || node.getStyle('font-size'); + + try { + const paths = Array.from(node.rc.node.querySelectorAll('path')); + const text = node.rc.node.querySelector('text'); + const path = paths.find((path) => path.id.includes('outline')); + receiverElement.style.backgroundColor = path.getAttribute('fill'); + receiverElement.style.borderColor = path.getAttribute('stroke'); + receiverElement.style.color = text.parentElement.getAttribute('fill'); + } catch (e) {} receiverElement.style.fontSize = fontSize + 'px'; receiverElement.style.minWidth = 0; receiverElement.style.minWidth = receiverElement.clientWidth + 'px'; receiverElement.style.fontWeight = node.getData('font-weight') || ''; receiverElement.style.fontStyle = node.getData('font-style') || ''; + receiverElement.classList.add('input'); receiverElement.focus(); } @@ -377,9 +387,20 @@ define(function (require, exports, module) { if (!focusNode) return; if (!planed.timer) { planed.timer = setTimeout(function () { - var box = focusNode.getRenderBox('TextRenderer'); + var box = null; + + try { + const paths = Array.from(node.rc.node.querySelectorAll('path')); + const path = paths.find((path) => path.id.includes('outline')); + box = path.getBBox(); + } catch (e) { + box = focusNode.getRenderBox('TextRenderer'); + } + receiverElement.style.left = Math.round(box.x) + 'px'; receiverElement.style.top = (debug.flaged ? Math.round(box.bottom + 30) : Math.round(box.y)) + 'px'; + receiverElement.style.minWidth = box.width + 'px'; + receiverElement.style.minHeight = box.height + 'px'; //receiverElement.focus(); planed.timer = 0; }); diff --git a/packages/client/src/tiptap/core/all-kit.ts b/packages/client/src/tiptap/core/all-kit.ts index c10d3600..d484d544 100644 --- a/packages/client/src/tiptap/core/all-kit.ts +++ b/packages/client/src/tiptap/core/all-kit.ts @@ -59,7 +59,7 @@ import { TrailingNode } from 'tiptap/core/extensions/trailing-node'; import { Underline } from 'tiptap/core/extensions/underline'; export const DocumentWithTitle = Document.extend({ - content: 'title block+', + content: 'title{1} block+', }); export const AllExtensions = [ diff --git a/packages/client/src/tiptap/core/styles/drag.scss b/packages/client/src/tiptap/core/styles/drag.scss index f674fc93..52d0f886 100644 --- a/packages/client/src/tiptap/core/styles/drag.scss +++ b/packages/client/src/tiptap/core/styles/drag.scss @@ -5,6 +5,7 @@ width: 16px; height: 16px; cursor: move; + background-color: #fff; opacity: 0; transition: opacity 0.3s ease-out; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3C/svg%3E"); diff --git a/packages/client/src/tiptap/core/styles/kityminder.scss b/packages/client/src/tiptap/core/styles/kityminder.scss index b9908e20..8cdd230b 100644 --- a/packages/client/src/tiptap/core/styles/kityminder.scss +++ b/packages/client/src/tiptap/core/styles/kityminder.scss @@ -118,7 +118,6 @@ width: auto; max-width: 300px; min-height: 1.4em; - padding: 3px 5px; margin-top: -5px; margin-left: -3px; overflow: hidden; @@ -127,11 +126,9 @@ word-break: break-all; word-wrap: break-word; pointer-events: none; - background: white; border: none; outline: none; opacity: 0; - box-shadow: 0 0 20px rgb(0 0 0 / 50%); box-sizing: border-box; user-select: text; } @@ -146,7 +143,6 @@ .km-editor > .receiver.input { z-index: 999; pointer-events: all; - background: white; outline: none; opacity: 1; } diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts index ef5ff56b..eec143dc 100644 --- a/packages/client/src/tiptap/editor/collaboration/kit.ts +++ b/packages/client/src/tiptap/editor/collaboration/kit.ts @@ -73,7 +73,7 @@ import { markdownToHTML, markdownToProsemirror } from 'tiptap/markdown/markdown- import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown'; const DocumentWithTitle = Document.extend({ - content: 'title block+', + content: 'title{1} block+', }); export { Document }; @@ -117,7 +117,11 @@ export const CollaborationKit = [ ColorHighlighter, Column, Columns, - Dropcursor, + Dropcursor.configure({ + width: 2, + class: 'dropcursor', + color: 'skyblue', + }), Excalidraw, EventEmitter, Focus,