[Bug] Big Image Storage Problem

[AE-SAY-WAY]

Currently, if you upload an image to a tldraw drawing it adds it as an asset.... Cool.

But when you delete the image from the drawing, the asset still remains in the markdown...

This artificially bloats the note, even though the image isn't being utilized.

And since its still technically being referenced, plugins and queries cant see that you are not using it.

I suggest implementing a change, such that, if an image is deleted off the drawing, its asset is deleted too.

This is how excalidaw does it I believe.

[jon-dez]

Leaving some notes here...

• If the image is added from an existing file in the vault, then the asset should be marked as "external"
• If the image is added from the clipboard, then the asset should be marked as "internal"

External asset: does not belong to the note, thus should not get automatically deleted from the vault.
Internal asset: Belongs to the note, thus should get deleted automatically

Both kinds get removed from the markdown file when not in use unless manually marked as "library".

We should be able to view all types of assets to conveniently insert into the drawing.

@AE-SAY-WAY What do you think?

[AE-SAY-WAY]

In my opinion no need to delete the image from the vault...
Its the reference that needs to get deleted:

See here:

Excalidraw only deletes the reference to the image... This way other plugins like this:

Clear Unused Image, or other more dedicated plugins or queries, can detect its not being used and delete it themselves.

No need to mark external an internal, just have the reference to the image be deleted if its not on the drawing.

If you delete the image reference is deleted from the markdown, it deletes it from the drawing, just make it work the other way as well.

i.e. if the image is deleted from the drawing, it should remove the reference to the drawing.

[jon-dez]

Got it, thanks for the feedback!

[AE-SAY-WAY]

@jon-dez once update releases, are you planning on running some sort of scan and delete for the references in existing tldraw notes?

[AE-SAY-WAY]

@jon-dez Excellent Excellent work on the new update Brother, very clean....

I don't know what your next item on the list is, but I think it should be this one.

Let me know if you need me to test anything bro.

Thank you very very much for all your hard work man, much appreciated

[AE-SAY-WAY]

This issue, casues issues like this

[jon-dez]

Ok, maybe it was a bad idea to have that alert show up for each not found reference 😅 .

Probably should just be like this:

• If the asset is not being used, then delete the asset reference to prevent the occurrence from occurring again
• If the asset is referenced in an image shape
  • show alert at most once displaying a counter of the number of occurrences
  • the alert has a "View occurrences" button that when clicked shows a popup listing the occurrences
  • Each occurrence has a "View area" button that transitions to a preview of where the image is supposed to be
  • There is an ability to resolve the occurrence by selecting a new image from the vault to replace the lost or deleted reference, or deleting the asset reference from the file to prevent the occurrence from occurring again
• There should be a new "Problem indicator" icon in the "view actions" toolbar (top right hand corner of the workspace leaf) that when clicked shows a dropdown containing the same alert if one was issued. This is to ensure a user can review the alert if they have suppressed it.

[AE-SAY-WAY]

@jon-dez Sorry, what is an image shape?

[jon-dez]

Examining the tldraw json you can see that whenever you insert an image into the drawing, two records are created:

• (asset) one for the asset itself
• (shape) one that references the asset and tells the tldraw editor where it is located within a page

If an asset cannot be found because it was deleted by the plugin or manually, then the plugin shows that alert.

Example, given a file:

{
	"meta": {
		"uuid": "41ff362b-083b-414e-8287-4925b74d9c35",
		"plugin-version": "1.25.0",
		"tldraw-version": "3.15.3"
	},
	"raw": {
		"tldrawFileFormatVersion": 1,
		"schema": {
			"schemaVersion": 2,
			"sequences": {
				"com.tldraw.store": 4,
				"com.tldraw.asset": 1,
				"com.tldraw.camera": 1,
				"com.tldraw.document": 2,
				"com.tldraw.instance": 25,
				"com.tldraw.instance_page_state": 5,
				"com.tldraw.page": 1,
				"com.tldraw.instance_presence": 6,
				"com.tldraw.pointer": 1,
				"com.tldraw.shape": 4,
				"com.tldraw.asset.bookmark": 2,
				"com.tldraw.asset.image": 5,
				"com.tldraw.asset.video": 5,
				"com.tldraw.shape.arrow": 7,
				"com.tldraw.shape.bookmark": 2,
				"com.tldraw.shape.draw": 2,
				"com.tldraw.shape.embed": 4,
				"com.tldraw.shape.frame": 1,
				"com.tldraw.shape.geo": 10,
				"com.tldraw.shape.group": 0,
				"com.tldraw.shape.highlight": 1,
				"com.tldraw.shape.image": 5,
				"com.tldraw.shape.line": 5,
				"com.tldraw.shape.note": 9,
				"com.tldraw.shape.text": 3,
				"com.tldraw.shape.video": 4,
				"com.tldraw.binding.arrow": 1
			}
		},
		"records": [
			{
				"gridSize": 10,
				"name": "",
				"meta": {},
				"id": "document:document",
				"typeName": "document"
			},
			{
				"x": 0,
				"y": 0,
				"lastActivityTimestamp": 0,
				"meta": {},
				"id": "pointer:pointer",
				"typeName": "pointer"
			},
			{
				"meta": {},
				"id": "page:page",
				"name": "Page 1",
				"index": "a1",
				"typeName": "page"
			},
			{
				"followingUserId": null,
				"opacityForNextShape": 1,
				"stylesForNextShape": {},
				"brush": null,
				"scribbles": [],
				"cursor": {
					"type": "default",
					"rotation": 0
				},
				"isFocusMode": false,
				"exportBackground": true,
				"isDebugMode": false,
				"isToolLocked": false,
				"screenBounds": {
					"x": 0,
					"y": 0,
					"w": 1080,
					"h": 720
				},
				"insets": [
					false,
					false,
					false,
					false
				],
				"zoomBrush": null,
				"isGridMode": false,
				"isPenMode": false,
				"chatMessage": "",
				"isChatting": false,
				"highlightedUserIds": [],
				"isFocused": false,
				"devicePixelRatio": 1,
				"isCoarsePointer": false,
				"isHoveringCanvas": null,
				"openMenus": [],
				"isChangingStyle": false,
				"isReadonly": false,
				"meta": {},
				"duplicateProps": null,
				"id": "instance:instance",
				"currentPageId": "page:page",
				"typeName": "instance"
			},
			{
				"editingShapeId": null,
				"croppingShapeId": null,
				"selectedShapeIds": [],
				"hoveredShapeId": null,
				"erasingShapeIds": [],
				"hintingShapeIds": [],
				"focusedGroupId": null,
				"meta": {},
				"id": "instance_page_state:page:page",
				"pageId": "page:page",
				"typeName": "instance_page_state"
			},
			{
				"x": 0,
				"y": 0,
				"z": 1,
				"meta": {},
				"id": "camera:page:page",
				"typeName": "camera"
			},
			{
				"id": "asset:-256171741",
				"type": "image",
				"typeName": "asset",
				"props": {
					"name": "tldrawFile",
					"src": "asset:obsidian.blockref.e18cec3b-8792-48eb-9429-ed03d82877ed",
					"w": 384,
					"h": 205,
					"fileSize": 12879,
					"mimeType": "image/png",
					"isAnimated": false
				},
				"meta": {}
			},
			{
				"x": 242.15625,
				"y": 294.55859375,
				"rotation": 0,
				"isLocked": false,
				"opacity": 1,
				"meta": {},
				"id": "shape:brsF_OmL_MSlKCxrJLmM3",
				"type": "image",
				"props": {
					"w": 384,
					"h": 205,
					"assetId": "asset:-256171741",
					"playing": true,
					"url": "",
					"crop": null,
					"flipX": false,
					"flipY": false,
					"altText": ""
				},
				"parentId": "page:page",
				"index": "a1",
				"typeName": "shape"
			}
		]
	}
}
!!!_END_OF_TLDRAW_DATA__DO_NOT_CHANGE_THIS_PHRASE_!!!

Looking at the last two records (property typeName)`:

{
	"id": "asset:-256171741",
	"type": "image",
	"typeName": "asset",
	"props": {
		"name": "tldrawFile",
		"src": "asset:obsidian.blockref.e18cec3b-8792-48eb-9429-ed03d82877ed",
		"w": 384,
		"h": 205,
		"fileSize": 12879,
		"mimeType": "image/png",
		"isAnimated": false
	},
	"meta": {}
},
{
	"x": 242.15625,
	"y": 294.55859375,
	"rotation": 0,
	"isLocked": false,
	"opacity": 1,
	"meta": {},
	"id": "shape:brsF_OmL_MSlKCxrJLmM3",
	"type": "image",
	"props": {
		"w": 384,
		"h": 205,
		"assetId": "asset:-256171741",
		"playing": true,
		"url": "",
		"crop": null,
		"flipX": false,
		"flipY": false,
		"altText": ""
	},
	"parentId": "page:page",
	"index": "a1",
	"typeName": "shape"
}

Basically, there is an "image shape" and an "image asset"

[AE-SAY-WAY]

@jon-dez do you need to this part though:

If the asset is referenced in an image shape...

Here is what happens, on the markdown side, when I delete an image from excalidraw:

Youre smarter than me, but I think they just removed the image shape, that you were telling me about, from the code. And of course delete the image asset from the embed reference

[jon-dez]

@jon-dez do you need to this part though:

If the asset is referenced in an image shape...

Imagine the cases where:

• the plugin doesn't delete the images when not in use (the plugin currently does not delete references yet)
• the image is deleted outside of the plugin's control

That conditional check gives the user a chance to reconcile what to do when those cases occur, essentially giving them a chance to restore the data that was deleted as long as they remember which images are supposed to be there.