greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: copy & pasting into other whiteboards

pull/6489/head
Peng Xiao 2022-08-20 11:50:26 +08:00
parent 9382750dc2
commit 5d32ec5a99
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
View File

@ -28,12 +28,12 @@ export function usePaste(context: LogseqContextValue) {
return React.useCallback<TLReactCallbacks<Shape>['onPaste']>( return React.useCallback<TLReactCallbacks<Shape>['onPaste']>(
async (app, { point, shiftKey, files }) => { async (app, { point, shiftKey, files }) => {
const assetId = uniqueId()
interface VideoImageAsset extends TLAsset { interface VideoImageAsset extends TLAsset {
size: number[] size: number[]
} }
const assetsToCreate: VideoImageAsset[] = [] const imageAssetsToCreate: VideoImageAsset[] = []
let assetsToClone: TLAsset[] = []
const shapesToCreate: Shape['props'][] = [] const shapesToCreate: Shape['props'][] = []
const bindingsToCreate: TLBinding[] = [] const bindingsToCreate: TLBinding[] = []
@ -66,17 +66,17 @@ export function usePaste(context: LogseqContextValue) {
// Do we already have an asset for this image? // Do we already have an asset for this image?
const existingAsset = Object.values(app.assets).find(asset => asset.src === dataurl) const existingAsset = Object.values(app.assets).find(asset => asset.src === dataurl)
if (existingAsset) { if (existingAsset) {
assetsToCreate.push(existingAsset as VideoImageAsset) imageAssetsToCreate.push(existingAsset as VideoImageAsset)
continue continue
} }
// Create a new asset for this image // Create a new asset for this image
const asset: VideoImageAsset = { const asset: VideoImageAsset = {
id: assetId, id: uniqueId(),
type: isVideo ? 'video' : 'image', type: isVideo ? 'video' : 'image',
src: dataurl, src: dataurl,
size: await getSizeFromSrc(handlers.makeAssetUrl(dataurl), isVideo), size: await getSizeFromSrc(handlers.makeAssetUrl(dataurl), isVideo),
} }
assetsToCreate.push(asset) imageAssetsToCreate.push(asset)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
} }
@ -127,6 +127,7 @@ export function usePaste(context: LogseqContextValue) {
const data = JSON.parse(rawText) const data = JSON.parse(rawText)
if (data.type === 'logseq/whiteboard-shapes') { if (data.type === 'logseq/whiteboard-shapes') {
const shapes = data.shapes as TLShapeModel[] const shapes = data.shapes as TLShapeModel[]
assetsToClone = data.assets as TLAsset[]
const commonBounds = BoundsUtils.getCommonBounds( const commonBounds = BoundsUtils.getCommonBounds(
shapes.map(shape => ({ shapes.map(shape => ({
minX: shape.point?.[0] ?? point[0], minX: shape.point?.[0] ?? point[0],
@ -179,6 +180,7 @@ export function usePaste(context: LogseqContextValue) {
}) })
} }
}) })
return true return true
} }
} catch (err) { } catch (err) {
@ -279,7 +281,7 @@ export function usePaste(context: LogseqContextValue) {
const allShapesToAdd: TLShapeModel[] = [ const allShapesToAdd: TLShapeModel[] = [
// assets to images // assets to images
...assetsToCreate.map((asset, i) => ({ ...imageAssetsToCreate.map((asset, i) => ({
...(asset.type === 'video' ? VideoShape : ImageShape).defaultProps, ...(asset.type === 'video' ? VideoShape : ImageShape).defaultProps,
// TODO: Should be place near the last edited shape // TODO: Should be place near the last edited shape
point: [point[0] - asset.size[0] / 4 + i * 16, point[1] - asset.size[1] / 4 + i * 16], point: [point[0] - asset.size[0] / 4 + i * 16, point[1] - asset.size[1] / 4 + i * 16],
@ -297,8 +299,9 @@ export function usePaste(context: LogseqContextValue) {
}) })
app.wrapUpdate(() => { app.wrapUpdate(() => {
if (assetsToCreate.length > 0) { const allAssets = [...imageAssetsToCreate, ...assetsToClone]
app.createAssets(assetsToCreate) if (allAssets.length > 0) {
app.createAssets(allAssets)
} }
if (allShapesToAdd.length > 0) { if (allShapesToAdd.length > 0) {
app.createShapes(allShapesToAdd) app.createShapes(allShapesToAdd)

4
tldraw/packages/core/src/lib/TLApp/TLApp.ts
View File

@ -422,6 +422,10 @@ export class TLApp<
const tldrawString = JSON.stringify({ const tldrawString = JSON.stringify({
type: 'logseq/whiteboard-shapes', type: 'logseq/whiteboard-shapes',
shapes: this.selectedShapesArray.map(shape => shape.serialized), shapes: this.selectedShapesArray.map(shape => shape.serialized),
// pasting into other whiteboard may require this if any shape uses asset
assets: this.getCleanUpAssets().filter(asset => {
return this.selectedShapesArray.some(shape => shape.props.assetId === asset.id)
})
}) })
navigator.clipboard.write([ navigator.clipboard.write([
new ClipboardItem({ new ClipboardItem({