Canvas圖形編輯器-我的剪貼板裏究竟有什麼數據
在這裏我們先來聊聊我們究竟應該如何操作剪貼板,也就是我們在瀏覽器的複製粘貼事件,並且在此基礎上聊聊我們在Canvas
圖形編輯器中應該如何控制焦點以及如何實現複製粘貼行爲。
- 在線編輯: https://windrunnermax.github.io/CanvasEditor
- 開源地址: https://github.com/WindrunnerMax/CanvasEditor
關於Canvas
簡歷編輯器項目的相關文章:
- 社區老給我推Canvas,我也學習Canvas做了個簡歷編輯器
- Canvas圖形編輯器-數據結構與History(undo/redo)
- Canvas圖形編輯器-我的剪貼板裏究竟有什麼數據
- Canvas簡歷編輯器-圖形繪製與狀態管理(輕量級DOM)
- Canvas簡歷編輯器-Monorepo+Rspack工程實踐
剪貼板
我們在平時使用一些在線文檔編輯器的時候,可能會好奇一個問題,爲什麼我能夠直接把格式複製出來,而不僅僅是純文本,甚至於說從瀏覽器中複製內容到Office Word
都可以保留格式,看起來是不是一件很神奇的事情,不過當我們瞭解到剪貼板的基本操作之後,就可以瞭解這其中的底層實現了。
說到剪貼板,我們可能以爲我們複製的就是純文本,當然顯然光靠複製純文本我們是做不到這一點的,所以實際上剪貼板是可以存儲複雜內容的,那麼在這裏我們以Word
爲例,當我們從Word
中複製文本時,其實際上是會在剪貼板中寫入這麼幾個key
值:
text/plain
text/html
text/rtf
image/png
看着text/plain
是不是很眼熟,這明顯就是我們常見的Content-Type
或者稱作MIME-Type
,所以說我們是不是可以認爲剪貼板是一個Record<string, string>
的類型,但是別忽略了我們還有一個image/png
類型,因爲我們的剪貼板是可以複製文件的,所以我們常用的剪貼板類型就是Record<string, string | File>
,例如此時複製這段文字在剪貼板中就是如下內容。
text/plain
例如此時複製這段文字在剪貼板中就是如下內容
text/html
<meta charset='utf-8'><strong style="...">例如此時複製這段文字</strong><em style="...">在剪貼板中就是如下內容</em>
那麼我們粘貼的時候就很明顯了,我們只需要從剪貼板裏讀取內容就可以了,例如我們從語雀複製內容到飛書中,我們在語雀複製的時候會將text/plain
以及text/html
寫入剪貼板,在粘貼到飛書的時候就可以首先檢查是否有text/html
的key
,如果有的話就可以讀取出來,並且將其解析成爲飛書自己的私有格式,就可以通過剪貼板來保持內容格式粘貼到飛書了,如果沒有text/html
的話,就直接將text/plain
的內容寫到私有的JSON
數據即可。
此外,我們還可以考慮到一個問題,在上邊的例子中實際上我們是複製時需要將JSON
轉到HTML
字符串,在粘貼時需要將HTML
字符串轉換爲JSON
,這都是需要進行序列化與反序列化的,是需要有性能消耗以及內容損失的,所以是不是能減少這部分消耗,那麼當然是可以的,通常來說如果是在應用內直接直接粘貼的話,可以直接通過剪貼板的數據直接compose
到當前的JSON
即可,這樣就可以更完整地保持內容以及減少對於HTML
解析的消耗。例如在飛書中,會有docx/text
的獨立Clipboard Key
以及data-lark-record-data
作爲獨立JSON
數據源。
那麼至此我們已經瞭解到剪貼板的工作原理,緊接着我們就來聊一聊如何進行復制操作,說到複製我們可能通常會想到clipboard.js
,如果需要兼容性比較高的話可以考慮,但是如果需要在現在瀏覽器中使用的話,則可以直接考慮使用HTML5
規範的API
完成,在瀏覽器中關於複製的API
常用的有兩種,分別是document.execCommand("copy")
以及navigator.clipboard.write
。
對於document.execCommand("copy")
來說,我們可以直接藉助textarea + execCommand
來執行寫剪貼板的操作,在這裏需要注意的是如果這個事件必須要是isTrusted
的事件,也就是說這個事件必須要是用戶觸發的,例如點擊事件、鍵盤事件等等,如果我們在打開頁面後直接執行這段代碼的話,則實際上是不會觸發的。此外,如果在控制檯執行這段代碼的話,寫入剪貼板是可行的,因爲我們通常會用回車這個操作來執行代碼,所以這個事件是isTrusted
的。
const TEXT_PLAIN = "text/plain";
const data = {"text/plain": "1", "text/html":"<div>1</div>"};
const textarea = document.createElement("textarea");
textarea.addEventListener(
"copy",
event => {
for (const [key, value] of Object.entries(data)) {
event.clipboardData && event.clipboardData.setData(key, value);
}
event.stopPropagation();
event.preventDefault();
},
true
);
textarea.style.position = "fixed";
textarea.style.left = "-999px";
textarea.style.top = "-999px";
textarea.value = data[TEXT_PLAIN];
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
對於navigator.clipboard
來說,如果我們只寫入純文本的話是比較簡單的,直接調用write
方法即可,只不過需要注意Document is focused
,也就是焦點需要在當前頁面內。如果需要在剪貼板中寫入其他的值,則需要ClipboardItem
對象來寫入Blob
,在這裏需要注意的是,FireFox
只有Nightly
中有定義,所以在這裏需要判斷下,如果不存在這個對象的話就需要走降級的複製,可以使用上述的document.execCommand API
。
const data = {"text/plain": "1", "text/html":"<div>1</div>"};
if (navigator.clipboard && window.ClipboardItem) {
const dataItems = {};
for (const [key, value] of Object.entries(data)) {
const blob = new Blob([value], { type: key });
dataItems[key] = blob;
}
navigator.clipboard.write([new ClipboardItem(dataItems)]);
}
緊接着我們可以聊下粘貼行爲,在這裏我們可以用onPaste
事件以及navigator.clipboard.read
方法,對於navigator.clipboard.read
方法來說,我們可以直接讀取並且打印即可,在這裏需要注意的是需要Document is focused
,所以這裏我們需要在控制檯延時幾秒,然後將鼠標點擊到頁面上纔可以正常打印,此外還有一個問題是打印的types
並不完整,可能是必須要規範內的MIME Type
才直接支持,自定義的key
不支持。
navigator.clipboard.read().then(res => {
for (const item of res) {
const types = item.types;
for (const type of types) {
item.getType(type).then(data => {
const reader = new FileReader();
reader.readAsText(data, "utf-8");
reader.onload = () => {
console.info(type, reader.result);
};
});
}
}
});
針對onPaste
事件,我們可以通過clipboardData
獲取更加完整的相關數據,我們可以獲取比較完整的數據以及構造File
數據,這裏可以使用下面的代碼直接在控制檯執行,並且可以將內容粘貼到其中,這樣就可以打印出當前剪貼板的內容了。
const input = document.createElement("input");
input.style.position = "fixed";
input.style.top = "100px";
input.style.right = "10px";
input.style.zIndex = "999999";
input.style.width = "200px";
input.placeholder = "Read Clipboard On Paste";
input.addEventListener("paste", event => {
const clipboardData = event.clipboardData || window.clipboardData;
for (const item of clipboardData.items) {
console.log(`%c${item.type}`, "background-color: #165DFF; color: #fff; padding: 3px 5px;");
console.log(item.kind === "file" ? item.getAsFile() : clipboardData.getData(item.type));
}
});
document.body.appendChild(input);
Clipboard模塊
上邊我們已經瞭解到如何操作我們的剪貼板了,那麼下面我們就需要將其應用在編輯器當中了,不過我們首先需要關注焦點問題,因爲在編輯器中我們不能保證所有的焦點都是在編輯器Canvas
上的,比如我彈出一個輸入框輸入畫布大小的時候,也是可能會使用粘貼行爲的,而如果此時進行粘貼是會觸發document
上的onPaste
事件的,那麼此時就有可能錯誤的將不應該粘貼的內容插入到剪貼板當中了,所以我們需要處理焦點,也就是說我們需要確定當前操作是在編輯器上的時候才觸發Copy/Paste
行爲。
平時我做富文本相關的功能比較多,所以在實現畫板的時候總想按照富文本的設計思路來實現,同樣的因爲之前也說過我們需要實現History
以及在編輯面板富文本的能力,所以焦點就很重要,如果焦點不在畫板上的時候如果按下Undo/Redo
鍵畫板是不應該響應的,所以現在就需要有一個狀態來控制當前焦點是否在Canvas
上,經過調研發現了兩個方案,方案一是使用document.activeElement
,但是Canvas
是不會有焦點的,所以需要將tabIndex="-1"
屬性賦予Canvas
元素,這樣就可以通過activeElement
拿到焦點狀態了,方案二是在Canvas
上方再覆蓋一層div
,通過pointerEvents: none
來防止事件的鼠標指針事件,但是此時通過window.getSelection
是可以拿到焦點元素的,此時只需要再判斷焦點元素是不是設置的這個元素就可以了。
當焦點的問題解決之後,我們就可以直接進行剪貼板的讀寫了,這部分實現就比較簡單了,在複製的時候需要注意到將內容序列化爲JSON
字符串,並且還要寫入一個text/plain
的佔位符,這樣可以讓用戶在其他地方粘貼的時候是有感知的,對於我們的編輯器自身而言是不需要感知的。
public static KEY = "SKETCHING_CLIPBOARD_KEY";
private copyFromCanvas = (e: ClipboardEvent, isCut = false) => {
const clipboardData = e.clipboardData;
if (clipboardData) {
const ids = this.editor.selection.getActiveDeltaIds();
if (ids.size === 0) return void 0;
const data: Record<string, DeltaLike> = {};
for (const id of ids) {
const delta = this.editor.deltaSet.get(id);
if (!delta) return void 0;
data[id] = delta.toJSON();
if (isCut) {
const parentId = this.editor.state.getDeltaStateParentId(id);
this.editor.state.apply(new Op(OP_TYPE.DELETE, { id, parentId }));
}
}
const str = TSON.stringify(data);
str && clipboardData.setData(Clipboard.KEY, str);
clipboardData.setData("text/plain", "請在編輯器中粘貼");
isCut && this.editor.canvas.mask.clearWithOp();
e.stopPropagation();
e.preventDefault();
}
};
粘貼的這部分需要處理一個交互問題,用戶肯定是希望在多選時也可以直接粘貼多個圖形的,所以在此處我們需要處理好粘貼的位置,在這裏我用的方法是取的所有選中圖形的中點,在用戶觸發粘貼行爲時將中點對齊到此時鼠標所在的位置,並且計算好偏移量應用到反序列化的圖形上,這樣就可以做到跟隨用戶的鼠標進行粘貼了,這裏還有一點是需要替換掉粘貼圖形的id
,這是新的圖形當然就需要有新的唯一標識符。
public static KEY = "SKETCHING_CLIPBOARD_KEY";
private onPaste = (e: ClipboardEvent) => {
if (!this.editor.canvas.isActive()) return void 0;
const clipboardData = e.clipboardData;
if (clipboardData) {
const str = clipboardData.getData(Clipboard.KEY);
const data = str && TSON.parse<Record<string, DeltaLike>>(str);
if (data) {
let range: Range | null = null;
Object.values(data).forEach(deltaLike => {
const { x, y, width, height } = deltaLike;
const current = Range.fromRect(x, y, width, height);
range = range ? range.compose(current) : current;
});
const compose = range as unknown as Range;
if (compose) {
const center = compose.center();
const cursor = this.editor.canvas.root.cursor;
const { x, y } = center.diff(cursor);
Object.values(data).forEach(deltaLike => {
const id = getUniqueId();
deltaLike.id = id;
deltaLike.x = deltaLike.x + x;
deltaLike.y = deltaLike.y + y;
const delta = DeltaSet.create(deltaLike);
delta &&
this.editor.state.apply(new Op(OP_TYPE.INSERT, { delta, parentId: ROOT_DELTA }));
});
}
}
e.stopPropagation();
e.preventDefault();
}
};
最後
本文我們介紹總結了應該如何操作剪貼板,也就是我們在瀏覽器的複製粘貼行爲,並且在此基礎上聊到了在Canvas
圖形編輯器中的焦點問題以及如何實現複製粘貼行爲,雖然暫時不涉及到Canvas
本身,但是這都是作爲編輯器本身的基礎能力,也是通用的能力可以學習。針對於這個編輯器我們可以介紹的能力還有很多,整體來看會涉及到數據結構、History
模塊、複製粘貼模塊、畫布分層、事件管理、無限畫布、按需繪製、性能優化、焦點控制、參考線、富文本、快捷鍵、層級控制、渲染順序、事件模擬、PDF
排版等等,整體來說還是比較有意思的,歡迎關注我並留意後續的文章。