kopia lustrzana https://github.com/Tldraw/Tldraw
Merge branch 'main' into mime/docs-cron
commit
8395ae7626
|
@ -1,5 +1,6 @@
|
||||||
import { ReactNode, useEffect, useState, version } from 'react'
|
import { ReactNode, useEffect, useState } from 'react'
|
||||||
import { LoadingScreen } from 'tldraw'
|
import { LoadingScreen } from 'tldraw'
|
||||||
|
import { version } from '../../version'
|
||||||
import { useUrl } from '../hooks/useUrl'
|
import { useUrl } from '../hooks/useUrl'
|
||||||
import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'
|
import { trackAnalyticsEvent } from '../utils/trackAnalyticsEvent'
|
||||||
|
|
||||||
|
@ -113,7 +114,7 @@ export function IFrameProtector({
|
||||||
<div className="tldraw__editor tl-container">
|
<div className="tldraw__editor tl-container">
|
||||||
<div className="iframe-warning__container">
|
<div className="iframe-warning__container">
|
||||||
<a className="iframe-warning__link" href={url} target="_blank">
|
<a className="iframe-warning__link" href={url} target="_blank">
|
||||||
{'Visit this page on tldraw.com '}
|
{'Visit this page on tldraw.com'}
|
||||||
<svg
|
<svg
|
||||||
width="15"
|
width="15"
|
||||||
height="15"
|
height="15"
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import {
|
import {
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
DefaultContextMenuContent,
|
DefaultContextMenuContent,
|
||||||
|
ErrorScreen,
|
||||||
|
LoadingScreen,
|
||||||
TldrawEditor,
|
TldrawEditor,
|
||||||
TldrawHandles,
|
TldrawHandles,
|
||||||
TldrawScribble,
|
TldrawScribble,
|
||||||
|
@ -10,7 +12,9 @@ import {
|
||||||
defaultShapeTools,
|
defaultShapeTools,
|
||||||
defaultShapeUtils,
|
defaultShapeUtils,
|
||||||
defaultTools,
|
defaultTools,
|
||||||
|
usePreloadAssets,
|
||||||
} from 'tldraw'
|
} from 'tldraw'
|
||||||
|
import { defaultEditorAssetUrls } from 'tldraw/src/lib/utils/static-assets/assetUrls'
|
||||||
import 'tldraw/tldraw.css'
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
// There's a guide at the bottom of this file!
|
// There's a guide at the bottom of this file!
|
||||||
|
@ -26,6 +30,16 @@ const defaultComponents = {
|
||||||
|
|
||||||
//[2]
|
//[2]
|
||||||
export default function ExplodedExample() {
|
export default function ExplodedExample() {
|
||||||
|
const assetLoading = usePreloadAssets(defaultEditorAssetUrls)
|
||||||
|
|
||||||
|
if (assetLoading.error) {
|
||||||
|
return <ErrorScreen>Could not load assets.</ErrorScreen>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!assetLoading.done) {
|
||||||
|
return <LoadingScreen>Loading assets...</LoadingScreen>
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tldraw__editor">
|
<div className="tldraw__editor">
|
||||||
<TldrawEditor
|
<TldrawEditor
|
||||||
|
|
|
@ -682,6 +682,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
getCameraState(): "idle" | "moving";
|
getCameraState(): "idle" | "moving";
|
||||||
getCanRedo(): boolean;
|
getCanRedo(): boolean;
|
||||||
getCanUndo(): boolean;
|
getCanUndo(): boolean;
|
||||||
|
getCollaborators(): TLInstancePresence[];
|
||||||
|
getCollaboratorsOnCurrentPage(): TLInstancePresence[];
|
||||||
getContainer: () => HTMLElement;
|
getContainer: () => HTMLElement;
|
||||||
getContentFromCurrentPage(shapes: TLShape[] | TLShapeId[]): TLContent | undefined;
|
getContentFromCurrentPage(shapes: TLShape[] | TLShapeId[]): TLContent | undefined;
|
||||||
// @internal
|
// @internal
|
||||||
|
@ -693,6 +695,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
getCurrentPageId(): TLPageId;
|
getCurrentPageId(): TLPageId;
|
||||||
getCurrentPageRenderingShapesSorted(): TLShape[];
|
getCurrentPageRenderingShapesSorted(): TLShape[];
|
||||||
getCurrentPageShapeIds(): Set<TLShapeId>;
|
getCurrentPageShapeIds(): Set<TLShapeId>;
|
||||||
|
// @internal (undocumented)
|
||||||
|
getCurrentPageShapeIdsSorted(): TLShapeId[];
|
||||||
getCurrentPageShapes(): TLShape[];
|
getCurrentPageShapes(): TLShape[];
|
||||||
getCurrentPageShapesSorted(): TLShape[];
|
getCurrentPageShapesSorted(): TLShape[];
|
||||||
getCurrentPageState(): TLInstancePageState;
|
getCurrentPageState(): TLInstancePageState;
|
||||||
|
|
|
@ -10059,6 +10059,86 @@
|
||||||
"isAbstract": false,
|
"isAbstract": false,
|
||||||
"name": "getCanUndo"
|
"name": "getCanUndo"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"kind": "Method",
|
||||||
|
"canonicalReference": "@tldraw/editor!Editor#getCollaborators:member(1)",
|
||||||
|
"docComment": "/**\n * Returns a list of presence records for all peer collaborators. This will return the latest presence record for each connected user.\n *\n * @public\n */\n",
|
||||||
|
"excerptTokens": [
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "getCollaborators(): "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "import(\"@tldraw/tlschema\")."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Reference",
|
||||||
|
"text": "TLInstancePresence",
|
||||||
|
"canonicalReference": "@tldraw/tlschema!TLInstancePresence:interface"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "[]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": ";"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isStatic": false,
|
||||||
|
"returnTypeTokenRange": {
|
||||||
|
"startIndex": 1,
|
||||||
|
"endIndex": 4
|
||||||
|
},
|
||||||
|
"releaseTag": "Public",
|
||||||
|
"isProtected": false,
|
||||||
|
"overloadIndex": 1,
|
||||||
|
"parameters": [],
|
||||||
|
"isOptional": false,
|
||||||
|
"isAbstract": false,
|
||||||
|
"name": "getCollaborators"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Method",
|
||||||
|
"canonicalReference": "@tldraw/editor!Editor#getCollaboratorsOnCurrentPage:member(1)",
|
||||||
|
"docComment": "/**\n * Returns a list of presence records for all peer collaborators on the current page. This will return the latest presence record for each connected user.\n *\n * @public\n */\n",
|
||||||
|
"excerptTokens": [
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "getCollaboratorsOnCurrentPage(): "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "import(\"@tldraw/tlschema\")."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Reference",
|
||||||
|
"text": "TLInstancePresence",
|
||||||
|
"canonicalReference": "@tldraw/tlschema!TLInstancePresence:interface"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "[]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": ";"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isStatic": false,
|
||||||
|
"returnTypeTokenRange": {
|
||||||
|
"startIndex": 1,
|
||||||
|
"endIndex": 4
|
||||||
|
},
|
||||||
|
"releaseTag": "Public",
|
||||||
|
"isProtected": false,
|
||||||
|
"overloadIndex": 1,
|
||||||
|
"parameters": [],
|
||||||
|
"isOptional": false,
|
||||||
|
"isAbstract": false,
|
||||||
|
"name": "getCollaboratorsOnCurrentPage"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"kind": "Property",
|
"kind": "Property",
|
||||||
"canonicalReference": "@tldraw/editor!Editor#getContainer:member",
|
"canonicalReference": "@tldraw/editor!Editor#getContainer:member",
|
||||||
|
|
|
@ -2619,15 +2619,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
animateToUser(userId: string): this {
|
animateToUser(userId: string): this {
|
||||||
const presences = this.store.query.records('instance_presence', () => ({
|
const presence = this.getCollaborators().find((c) => c.userId === userId)
|
||||||
userId: { eq: userId },
|
|
||||||
}))
|
|
||||||
|
|
||||||
const presence = [...presences.get()]
|
|
||||||
.sort((a, b) => {
|
|
||||||
return a.lastActivityTimestamp - b.lastActivityTimestamp
|
|
||||||
})
|
|
||||||
.pop()
|
|
||||||
|
|
||||||
if (!presence) return this
|
if (!presence) return this
|
||||||
|
|
||||||
|
@ -2883,6 +2875,45 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
z: point.z ?? 0.5,
|
z: point.z ?? 0.5,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Collaborators
|
||||||
|
|
||||||
|
@computed
|
||||||
|
private _getCollaboratorsQuery() {
|
||||||
|
return this.store.query.records('instance_presence', () => ({
|
||||||
|
userId: { neq: this.user.getId() },
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a list of presence records for all peer collaborators.
|
||||||
|
* This will return the latest presence record for each connected user.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
@computed
|
||||||
|
getCollaborators() {
|
||||||
|
const allPresenceRecords = this._getCollaboratorsQuery().get()
|
||||||
|
if (!allPresenceRecords.length) return EMPTY_ARRAY
|
||||||
|
const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()
|
||||||
|
return userIds.map((id) => {
|
||||||
|
const latestPresence = allPresenceRecords
|
||||||
|
.filter((c) => c.userId === id)
|
||||||
|
.sort((a, b) => b.lastActivityTimestamp - a.lastActivityTimestamp)[0]
|
||||||
|
return latestPresence
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a list of presence records for all peer collaborators on the current page.
|
||||||
|
* This will return the latest presence record for each connected user.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
@computed
|
||||||
|
getCollaboratorsOnCurrentPage() {
|
||||||
|
const currentPageId = this.getCurrentPageId()
|
||||||
|
return this.getCollaborators().filter((c) => c.currentPageId === currentPageId)
|
||||||
|
}
|
||||||
|
|
||||||
// Following
|
// Following
|
||||||
|
|
||||||
|
@ -2894,9 +2925,9 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
startFollowingUser(userId: string): this {
|
startFollowingUser(userId: string): this {
|
||||||
const leaderPresences = this.store.query.records('instance_presence', () => ({
|
const leaderPresences = this._getCollaboratorsQuery()
|
||||||
userId: { eq: userId },
|
.get()
|
||||||
}))
|
.filter((p) => p.userId === userId)
|
||||||
|
|
||||||
const thisUserId = this.user.getId()
|
const thisUserId = this.user.getId()
|
||||||
|
|
||||||
|
@ -2905,7 +2936,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the leader is following us, then we can't follow them
|
// If the leader is following us, then we can't follow them
|
||||||
if (leaderPresences.get().some((p) => p.followingUserId === thisUserId)) {
|
if (leaderPresences.some((p) => p.followingUserId === thisUserId)) {
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2924,7 +2955,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
|
|
||||||
const moveTowardsUser = () => {
|
const moveTowardsUser = () => {
|
||||||
// Stop following if we can't find the user
|
// Stop following if we can't find the user
|
||||||
const leaderPresence = [...leaderPresences.get()]
|
const leaderPresence = [...leaderPresences]
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
return a.lastActivityTimestamp - b.lastActivityTimestamp
|
return a.lastActivityTimestamp - b.lastActivityTimestamp
|
||||||
})
|
})
|
||||||
|
@ -3281,6 +3312,14 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
return this._currentPageShapeIds.get()
|
return this._currentPageShapeIds.get()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @internal
|
||||||
|
*/
|
||||||
|
@computed
|
||||||
|
getCurrentPageShapeIdsSorted() {
|
||||||
|
return Array.from(this.getCurrentPageShapeIds()).sort()
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the ids of shapes on a page.
|
* Get the ids of shapes on a page.
|
||||||
*
|
*
|
||||||
|
@ -3893,7 +3932,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
getShapePageTransform(shape: TLShape | TLShapeId): Mat {
|
getShapePageTransform(shape: TLShape | TLShapeId): Mat {
|
||||||
const id = typeof shape === 'string' ? shape : this.getShape(shape)!.id
|
const id = typeof shape === 'string' ? shape : shape.id
|
||||||
return this._getShapePageTransformCache().get(id) ?? Mat.Identity()
|
return this._getShapePageTransformCache().get(id) ?? Mat.Identity()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4227,7 +4266,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
@computed getCurrentPageBounds(): Box | undefined {
|
@computed getCurrentPageBounds(): Box | undefined {
|
||||||
let commonBounds: Box | undefined
|
let commonBounds: Box | undefined
|
||||||
|
|
||||||
this.getCurrentPageShapeIds().forEach((shapeId) => {
|
this.getCurrentPageShapeIdsSorted().forEach((shapeId) => {
|
||||||
const bounds = this.getShapeMaskedPageBounds(shapeId)
|
const bounds = this.getShapeMaskedPageBounds(shapeId)
|
||||||
if (!bounds) return
|
if (!bounds) return
|
||||||
if (!commonBounds) {
|
if (!commonBounds) {
|
||||||
|
@ -8159,7 +8198,11 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
// it will be 0,0 when its actual screen position is equal
|
// it will be 0,0 when its actual screen position is equal
|
||||||
// to screenBounds.point. This is confusing!
|
// to screenBounds.point. This is confusing!
|
||||||
currentScreenPoint.set(sx, sy)
|
currentScreenPoint.set(sx, sy)
|
||||||
currentPagePoint.set(sx / cz - cx, sy / cz - cy, sz)
|
const nx = sx / cz - cx
|
||||||
|
const ny = sy / cz - cy
|
||||||
|
if (isFinite(nx) && isFinite(ny)) {
|
||||||
|
currentPagePoint.set(nx, ny, sz)
|
||||||
|
}
|
||||||
|
|
||||||
this.inputs.isPen = info.type === 'pointer' && info.isPen
|
this.inputs.isPen = info.type === 'pointer' && info.isPen
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useComputed, useValue } from '@tldraw/state'
|
import { useComputed, useValue } from '@tldraw/state'
|
||||||
import { useMemo } from 'react'
|
|
||||||
import { uniq } from '../utils/uniq'
|
import { uniq } from '../utils/uniq'
|
||||||
import { useEditor } from './useEditor'
|
import { useEditor } from './useEditor'
|
||||||
|
|
||||||
|
@ -10,17 +9,12 @@ import { useEditor } from './useEditor'
|
||||||
*/
|
*/
|
||||||
export function usePeerIds() {
|
export function usePeerIds() {
|
||||||
const editor = useEditor()
|
const editor = useEditor()
|
||||||
const $presences = useMemo(() => {
|
|
||||||
return editor.store.query.records('instance_presence', () => ({
|
|
||||||
userId: { neq: editor.user.getId() },
|
|
||||||
}))
|
|
||||||
}, [editor])
|
|
||||||
|
|
||||||
const $userIds = useComputed(
|
const $userIds = useComputed(
|
||||||
'userIds',
|
'userIds',
|
||||||
() => uniq($presences.get().map((p) => p.userId)).sort(),
|
() => uniq(editor.getCollaborators().map((p) => p.userId)).sort(),
|
||||||
{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
|
{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
|
||||||
[$presences]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
return useValue($userIds)
|
return useValue($userIds)
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { useValue } from '@tldraw/state'
|
import { useValue } from '@tldraw/state'
|
||||||
import { TLInstancePresence } from '@tldraw/tlschema'
|
import { TLInstancePresence } from '@tldraw/tlschema'
|
||||||
import { useMemo } from 'react'
|
|
||||||
import { useEditor } from './useEditor'
|
import { useEditor } from './useEditor'
|
||||||
|
|
||||||
// TODO: maybe move this to a computed property on the App class?
|
// TODO: maybe move this to a computed property on the App class?
|
||||||
|
@ -11,21 +10,12 @@ import { useEditor } from './useEditor'
|
||||||
export function usePresence(userId: string): TLInstancePresence | null {
|
export function usePresence(userId: string): TLInstancePresence | null {
|
||||||
const editor = useEditor()
|
const editor = useEditor()
|
||||||
|
|
||||||
const $presences = useMemo(() => {
|
|
||||||
return editor.store.query.records('instance_presence', () => ({
|
|
||||||
userId: { eq: userId },
|
|
||||||
}))
|
|
||||||
}, [editor, userId])
|
|
||||||
|
|
||||||
const latestPresence = useValue(
|
const latestPresence = useValue(
|
||||||
`latestPresence:${userId}`,
|
`latestPresence:${userId}`,
|
||||||
() => {
|
() => {
|
||||||
return $presences
|
return editor.getCollaborators().find((c) => c.userId === userId)
|
||||||
.get()
|
|
||||||
.slice()
|
|
||||||
.sort((a, b) => b.lastActivityTimestamp - a.lastActivityTimestamp)[0]
|
|
||||||
},
|
},
|
||||||
[]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
return latestPresence ?? null
|
return latestPresence ?? null
|
||||||
|
|
|
@ -39,12 +39,13 @@ export class Mat {
|
||||||
|
|
||||||
equals(m: Mat | MatModel) {
|
equals(m: Mat | MatModel) {
|
||||||
return (
|
return (
|
||||||
this.a === m.a &&
|
this === m ||
|
||||||
this.b === m.b &&
|
(this.a === m.a &&
|
||||||
this.c === m.c &&
|
this.b === m.b &&
|
||||||
this.d === m.d &&
|
this.c === m.c &&
|
||||||
this.e === m.e &&
|
this.d === m.d &&
|
||||||
this.f === m.f
|
this.e === m.e &&
|
||||||
|
this.f === m.f)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2545,6 +2545,12 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): reado
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function useNativeClipboardEvents(): void;
|
export function useNativeClipboardEvents(): void;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function usePreloadAssets(assetUrls: TLEditorAssetUrls): {
|
||||||
|
done: boolean;
|
||||||
|
error: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function useReadonly(): boolean;
|
export function useReadonly(): boolean;
|
||||||
|
|
||||||
|
|
|
@ -27982,6 +27982,52 @@
|
||||||
"parameters": [],
|
"parameters": [],
|
||||||
"name": "useNativeClipboardEvents"
|
"name": "useNativeClipboardEvents"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"kind": "Function",
|
||||||
|
"canonicalReference": "tldraw!usePreloadAssets:function(1)",
|
||||||
|
"docComment": "/**\n * @public\n */\n",
|
||||||
|
"excerptTokens": [
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "export declare function usePreloadAssets(assetUrls: "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Reference",
|
||||||
|
"text": "TLEditorAssetUrls",
|
||||||
|
"canonicalReference": "tldraw!~TLEditorAssetUrls:type"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "): "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "{\n done: boolean;\n error: boolean;\n}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": ";"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"fileUrlPath": "packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts",
|
||||||
|
"returnTypeTokenRange": {
|
||||||
|
"startIndex": 3,
|
||||||
|
"endIndex": 4
|
||||||
|
},
|
||||||
|
"releaseTag": "Public",
|
||||||
|
"overloadIndex": 1,
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"parameterName": "assetUrls",
|
||||||
|
"parameterTypeTokenRange": {
|
||||||
|
"startIndex": 1,
|
||||||
|
"endIndex": 2
|
||||||
|
},
|
||||||
|
"isOptional": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "usePreloadAssets"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"kind": "Function",
|
"kind": "Function",
|
||||||
"canonicalReference": "tldraw!useReadonly:function(1)",
|
"canonicalReference": "tldraw!useReadonly:function(1)",
|
||||||
|
|
|
@ -87,6 +87,7 @@ export { useExportAs } from './lib/ui/hooks/useExportAs'
|
||||||
export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
|
export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
|
||||||
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
|
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
|
||||||
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
|
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
|
||||||
|
export { usePreloadAssets } from './lib/ui/hooks/usePreloadAssets'
|
||||||
export { useReadonly } from './lib/ui/hooks/useReadonly'
|
export { useReadonly } from './lib/ui/hooks/useReadonly'
|
||||||
export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
|
export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
|
||||||
export {
|
export {
|
||||||
|
|
|
@ -97,7 +97,7 @@ export class Drawing extends StateNode {
|
||||||
this.mergeNextPoint = false
|
this.mergeNextPoint = false
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateShapes()
|
this.updateDrawingShape()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,7 +115,7 @@ export class Drawing extends StateNode {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.updateShapes()
|
this.updateDrawingShape()
|
||||||
}
|
}
|
||||||
|
|
||||||
override onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {
|
override onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {
|
||||||
|
@ -137,7 +137,7 @@ export class Drawing extends StateNode {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updateShapes()
|
this.updateDrawingShape()
|
||||||
}
|
}
|
||||||
|
|
||||||
override onExit? = () => {
|
override onExit? = () => {
|
||||||
|
@ -281,7 +281,7 @@ export class Drawing extends StateNode {
|
||||||
this.initialShape = this.editor.getShape<DrawableShape>(id)
|
this.initialShape = this.editor.getShape<DrawableShape>(id)
|
||||||
}
|
}
|
||||||
|
|
||||||
private updateShapes() {
|
private updateDrawingShape() {
|
||||||
const { initialShape } = this
|
const { initialShape } = this
|
||||||
const { inputs } = this.editor
|
const { inputs } = this.editor
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,4 @@
|
||||||
import {
|
import { Vec, VecLike, assert, average, precise, toDomPrecision } from '@tldraw/editor'
|
||||||
Vec,
|
|
||||||
VecLike,
|
|
||||||
assert,
|
|
||||||
average,
|
|
||||||
precise,
|
|
||||||
shortAngleDist,
|
|
||||||
toDomPrecision,
|
|
||||||
} from '@tldraw/editor'
|
|
||||||
import { getStrokeOutlineTracks } from './getStrokeOutlinePoints'
|
import { getStrokeOutlineTracks } from './getStrokeOutlinePoints'
|
||||||
import { getStrokePoints } from './getStrokePoints'
|
import { getStrokePoints } from './getStrokePoints'
|
||||||
import { setStrokePointRadii } from './setStrokePointRadii'
|
import { setStrokePointRadii } from './setStrokePointRadii'
|
||||||
|
@ -36,17 +28,20 @@ function partitionAtElbows(points: StrokePoint[]): StrokePoint[][] {
|
||||||
|
|
||||||
const result: StrokePoint[][] = []
|
const result: StrokePoint[][] = []
|
||||||
let currentPartition: StrokePoint[] = [points[0]]
|
let currentPartition: StrokePoint[] = [points[0]]
|
||||||
for (let i = 1; i < points.length - 1; i++) {
|
let prevV = Vec.Sub(points[1].point, points[0].point).uni()
|
||||||
const prevPoint = points[i - 1]
|
let nextV: Vec
|
||||||
const thisPoint = points[i]
|
let dpr: number
|
||||||
const nextPoint = points[i + 1]
|
let prevPoint: StrokePoint, thisPoint: StrokePoint, nextPoint: StrokePoint
|
||||||
const prevAngle = Vec.Angle(prevPoint.point, thisPoint.point)
|
for (let i = 1, n = points.length; i < n - 1; i++) {
|
||||||
const nextAngle = Vec.Angle(thisPoint.point, nextPoint.point)
|
prevPoint = points[i - 1]
|
||||||
// acuteness is a normalized representation of how acute the angle is.
|
thisPoint = points[i]
|
||||||
// 1 is an infinitely thin wedge
|
nextPoint = points[i + 1]
|
||||||
// 0 is a straight line
|
|
||||||
const acuteness = Math.abs(shortAngleDist(prevAngle, nextAngle)) / Math.PI
|
nextV = Vec.Sub(nextPoint.point, thisPoint.point).uni()
|
||||||
if (acuteness > 0.8) {
|
dpr = Vec.Dpr(prevV, nextV)
|
||||||
|
prevV = nextV
|
||||||
|
|
||||||
|
if (dpr < -0.8) {
|
||||||
// always treat such acute angles as elbows
|
// always treat such acute angles as elbows
|
||||||
// and use the extended .input point as the elbow point for swooshiness in fast zaggy lines
|
// and use the extended .input point as the elbow point for swooshiness in fast zaggy lines
|
||||||
const elbowPoint = {
|
const elbowPoint = {
|
||||||
|
@ -59,19 +54,20 @@ function partitionAtElbows(points: StrokePoint[]): StrokePoint[][] {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
currentPartition.push(thisPoint)
|
currentPartition.push(thisPoint)
|
||||||
if (acuteness < 0.25) {
|
|
||||||
// this is not an elbow, bail out
|
if (dpr > 0.7) {
|
||||||
|
// Not an elbow
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
// so now we have a reasonably acute angle but it might not be an elbow if it's far
|
// so now we have a reasonably acute angle but it might not be an elbow if it's far
|
||||||
// away from it's neighbors
|
// away from it's neighbors, angular dist is a normalized representation of how far away the point is from it's neighbors
|
||||||
const avgRadius = (prevPoint.radius + thisPoint.radius + nextPoint.radius) / 3
|
|
||||||
const incomingNormalizedDist = Vec.Dist(prevPoint.point, thisPoint.point) / avgRadius
|
|
||||||
const outgoingNormalizedDist = Vec.Dist(thisPoint.point, nextPoint.point) / avgRadius
|
|
||||||
// angular dist is a normalized representation of how far away the point is from it's neighbors
|
|
||||||
// (normalized by the radius)
|
// (normalized by the radius)
|
||||||
const angularDist = incomingNormalizedDist + outgoingNormalizedDist
|
if (
|
||||||
if (angularDist < 1.5) {
|
(Vec.Dist2(prevPoint.point, thisPoint.point) + Vec.Dist2(thisPoint.point, nextPoint.point)) /
|
||||||
|
((prevPoint.radius + thisPoint.radius + nextPoint.radius) / 3) ** 2 <
|
||||||
|
1.5
|
||||||
|
) {
|
||||||
// if this point is kinda close to its neighbors and it has a reasonably
|
// if this point is kinda close to its neighbors and it has a reasonably
|
||||||
// acute angle, it's probably a hard elbow
|
// acute angle, it's probably a hard elbow
|
||||||
currentPartition.push(thisPoint)
|
currentPartition.push(thisPoint)
|
||||||
|
@ -89,11 +85,13 @@ function partitionAtElbows(points: StrokePoint[]): StrokePoint[][] {
|
||||||
function cleanUpPartition(partition: StrokePoint[]) {
|
function cleanUpPartition(partition: StrokePoint[]) {
|
||||||
// clean up start of partition (remove points that are too close to the start)
|
// clean up start of partition (remove points that are too close to the start)
|
||||||
const startPoint = partition[0]
|
const startPoint = partition[0]
|
||||||
|
let nextPoint: StrokePoint
|
||||||
while (partition.length > 2) {
|
while (partition.length > 2) {
|
||||||
const nextPoint = partition[1]
|
nextPoint = partition[1]
|
||||||
const dist = Vec.Dist(startPoint.point, nextPoint.point)
|
if (
|
||||||
const avgRadius = (startPoint.radius + nextPoint.radius) / 2
|
Vec.Dist2(startPoint.point, nextPoint.point) <
|
||||||
if (dist < avgRadius * 0.5) {
|
(((startPoint.radius + nextPoint.radius) / 2) * 0.5) ** 2
|
||||||
|
) {
|
||||||
partition.splice(1, 1)
|
partition.splice(1, 1)
|
||||||
} else {
|
} else {
|
||||||
break
|
break
|
||||||
|
@ -101,11 +99,13 @@ function cleanUpPartition(partition: StrokePoint[]) {
|
||||||
}
|
}
|
||||||
// clean up end of partition in the same fashion
|
// clean up end of partition in the same fashion
|
||||||
const endPoint = partition[partition.length - 1]
|
const endPoint = partition[partition.length - 1]
|
||||||
|
let prevPoint: StrokePoint
|
||||||
while (partition.length > 2) {
|
while (partition.length > 2) {
|
||||||
const prevPoint = partition[partition.length - 2]
|
prevPoint = partition[partition.length - 2]
|
||||||
const dist = Vec.Dist(endPoint.point, prevPoint.point)
|
if (
|
||||||
const avgRadius = (endPoint.radius + prevPoint.radius) / 2
|
Vec.Dist2(endPoint.point, prevPoint.point) <
|
||||||
if (dist < avgRadius * 0.5) {
|
(((endPoint.radius + prevPoint.radius) / 2) * 0.5) ** 2
|
||||||
|
) {
|
||||||
partition.splice(partition.length - 2, 1)
|
partition.splice(partition.length - 2, 1)
|
||||||
} else {
|
} else {
|
||||||
break
|
break
|
||||||
|
@ -115,13 +115,14 @@ function cleanUpPartition(partition: StrokePoint[]) {
|
||||||
if (partition.length > 1) {
|
if (partition.length > 1) {
|
||||||
partition[0] = {
|
partition[0] = {
|
||||||
...partition[0],
|
...partition[0],
|
||||||
vector: Vec.FromAngle(Vec.Angle(partition[1].point, partition[0].point)),
|
vector: Vec.Sub(partition[0].point, partition[1].point).uni(),
|
||||||
}
|
}
|
||||||
partition[partition.length - 1] = {
|
partition[partition.length - 1] = {
|
||||||
...partition[partition.length - 1],
|
...partition[partition.length - 1],
|
||||||
vector: Vec.FromAngle(
|
vector: Vec.Sub(
|
||||||
Vec.Angle(partition[partition.length - 1].point, partition[partition.length - 2].point)
|
partition[partition.length - 2].point,
|
||||||
),
|
partition[partition.length - 1].point
|
||||||
|
).uni(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return partition
|
return partition
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useEditor } from '@tldraw/editor'
|
import { useEditor, useQuickReactor } from '@tldraw/editor'
|
||||||
import { useEffect, useState } from 'react'
|
import { useRef, useState } from 'react'
|
||||||
import { useActions } from '../../context/actions'
|
import { useActions } from '../../context/actions'
|
||||||
import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
|
import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
|
||||||
|
|
||||||
|
@ -9,33 +9,25 @@ export function BackToContent() {
|
||||||
const actions = useActions()
|
const actions = useActions()
|
||||||
|
|
||||||
const [showBackToContent, setShowBackToContent] = useState(false)
|
const [showBackToContent, setShowBackToContent] = useState(false)
|
||||||
|
const rIsShowing = useRef(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useQuickReactor(
|
||||||
let showBackToContentPrev = false
|
'toggle showback to content',
|
||||||
|
() => {
|
||||||
const interval = setInterval(() => {
|
const showBackToContentPrev = rIsShowing.current
|
||||||
const renderingShapes = editor.getRenderingShapes()
|
const shapeIds = editor.getCurrentPageShapeIds()
|
||||||
const renderingBounds = editor.getRenderingBounds()
|
let showBackToContentNow = false
|
||||||
|
if (shapeIds.size) {
|
||||||
// Rendering shapes includes all the shapes in the current page.
|
showBackToContentNow = shapeIds.size === editor.getCulledShapes().size
|
||||||
// We have to filter them down to just the shapes that are inside the renderingBounds.
|
}
|
||||||
const visibleShapes = renderingShapes.filter((s) => {
|
|
||||||
const maskedPageBounds = editor.getShapeMaskedPageBounds(s.id)
|
|
||||||
return maskedPageBounds && renderingBounds.includes(maskedPageBounds)
|
|
||||||
})
|
|
||||||
const showBackToContentNow =
|
|
||||||
visibleShapes.length === 0 && editor.getCurrentPageShapes().length > 0
|
|
||||||
|
|
||||||
if (showBackToContentPrev !== showBackToContentNow) {
|
if (showBackToContentPrev !== showBackToContentNow) {
|
||||||
setShowBackToContent(showBackToContentNow)
|
setShowBackToContent(showBackToContentNow)
|
||||||
showBackToContentPrev = showBackToContentNow
|
rIsShowing.current = showBackToContentNow
|
||||||
}
|
}
|
||||||
}, 1000)
|
},
|
||||||
|
[editor]
|
||||||
return () => {
|
)
|
||||||
clearInterval(interval)
|
|
||||||
}
|
|
||||||
}, [editor])
|
|
||||||
|
|
||||||
if (!showBackToContent) return null
|
if (!showBackToContent) return null
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,13 @@
|
||||||
import {
|
import {
|
||||||
ANIMATION_MEDIUM_MS,
|
ANIMATION_MEDIUM_MS,
|
||||||
Box,
|
|
||||||
TLPointerEventInfo,
|
TLPointerEventInfo,
|
||||||
TLShapeId,
|
|
||||||
Vec,
|
Vec,
|
||||||
getPointerInfo,
|
getPointerInfo,
|
||||||
intersectPolygonPolygon,
|
|
||||||
normalizeWheel,
|
normalizeWheel,
|
||||||
releasePointerCapture,
|
releasePointerCapture,
|
||||||
setPointerCapture,
|
setPointerCapture,
|
||||||
useComputed,
|
|
||||||
useEditor,
|
useEditor,
|
||||||
useIsDarkMode,
|
useIsDarkMode,
|
||||||
useQuickReactor,
|
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import { MinimapManager } from './MinimapManager'
|
import { MinimapManager } from './MinimapManager'
|
||||||
|
@ -24,67 +19,78 @@ export function DefaultMinimap() {
|
||||||
const rCanvas = React.useRef<HTMLCanvasElement>(null!)
|
const rCanvas = React.useRef<HTMLCanvasElement>(null!)
|
||||||
const rPointing = React.useRef(false)
|
const rPointing = React.useRef(false)
|
||||||
|
|
||||||
const isDarkMode = useIsDarkMode()
|
const minimapRef = React.useRef<MinimapManager>()
|
||||||
const devicePixelRatio = useComputed('dpr', () => editor.getInstanceState().devicePixelRatio, [
|
|
||||||
editor,
|
|
||||||
])
|
|
||||||
const presences = React.useMemo(() => editor.store.query.records('instance_presence'), [editor])
|
|
||||||
|
|
||||||
const minimap = React.useMemo(() => new MinimapManager(editor), [editor])
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
// Must check after render
|
const minimap = new MinimapManager(editor, rCanvas.current)
|
||||||
const raf = requestAnimationFrame(() => {
|
minimapRef.current = minimap
|
||||||
minimap.updateColors()
|
return minimapRef.current.close
|
||||||
minimap.render()
|
}, [editor])
|
||||||
})
|
|
||||||
return () => {
|
|
||||||
cancelAnimationFrame(raf)
|
|
||||||
}
|
|
||||||
}, [editor, minimap, isDarkMode])
|
|
||||||
|
|
||||||
const onDoubleClick = React.useCallback(
|
const onDoubleClick = React.useCallback(
|
||||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||||
if (!editor.getCurrentPageShapeIds().size) return
|
if (!editor.getCurrentPageShapeIds().size) return
|
||||||
|
if (!minimapRef.current) return
|
||||||
|
|
||||||
const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)
|
const point = minimapRef.current.minimapScreenPointToPagePoint(
|
||||||
|
e.clientX,
|
||||||
|
e.clientY,
|
||||||
|
false,
|
||||||
|
false
|
||||||
|
)
|
||||||
|
|
||||||
const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)
|
const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
|
||||||
|
e.clientX,
|
||||||
|
e.clientY,
|
||||||
|
false,
|
||||||
|
true
|
||||||
|
)
|
||||||
|
|
||||||
minimap.originPagePoint.setTo(clampedPoint)
|
minimapRef.current.originPagePoint.setTo(clampedPoint)
|
||||||
minimap.originPageCenter.setTo(editor.getViewportPageBounds().center)
|
minimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)
|
||||||
|
|
||||||
editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
|
editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
|
||||||
},
|
},
|
||||||
[editor, minimap]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPointerDown = React.useCallback(
|
const onPointerDown = React.useCallback(
|
||||||
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
||||||
|
if (!minimapRef.current) return
|
||||||
const elm = e.currentTarget
|
const elm = e.currentTarget
|
||||||
setPointerCapture(elm, e)
|
setPointerCapture(elm, e)
|
||||||
if (!editor.getCurrentPageShapeIds().size) return
|
if (!editor.getCurrentPageShapeIds().size) return
|
||||||
|
|
||||||
rPointing.current = true
|
rPointing.current = true
|
||||||
|
|
||||||
minimap.isInViewport = false
|
minimapRef.current.isInViewport = false
|
||||||
|
|
||||||
const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)
|
const point = minimapRef.current.minimapScreenPointToPagePoint(
|
||||||
|
e.clientX,
|
||||||
|
e.clientY,
|
||||||
|
false,
|
||||||
|
false
|
||||||
|
)
|
||||||
|
|
||||||
const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)
|
const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
|
||||||
|
e.clientX,
|
||||||
|
e.clientY,
|
||||||
|
false,
|
||||||
|
true
|
||||||
|
)
|
||||||
|
|
||||||
const _vpPageBounds = editor.getViewportPageBounds()
|
const _vpPageBounds = editor.getViewportPageBounds()
|
||||||
|
|
||||||
minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
|
minimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
|
||||||
|
|
||||||
if (minimap.isInViewport) {
|
if (minimapRef.current.isInViewport) {
|
||||||
minimap.originPagePoint.setTo(clampedPoint)
|
minimapRef.current.originPagePoint.setTo(clampedPoint)
|
||||||
minimap.originPageCenter.setTo(_vpPageBounds.center)
|
minimapRef.current.originPageCenter.setTo(_vpPageBounds.center)
|
||||||
} else {
|
} else {
|
||||||
const delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)
|
const delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)
|
||||||
const pagePoint = Vec.Add(point, delta)
|
const pagePoint = Vec.Add(point, delta)
|
||||||
minimap.originPagePoint.setTo(pagePoint)
|
minimapRef.current.originPagePoint.setTo(pagePoint)
|
||||||
minimap.originPageCenter.setTo(point)
|
minimapRef.current.originPageCenter.setTo(point)
|
||||||
editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
|
editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,16 +104,24 @@ export function DefaultMinimap() {
|
||||||
|
|
||||||
document.body.addEventListener('pointerup', release)
|
document.body.addEventListener('pointerup', release)
|
||||||
},
|
},
|
||||||
[editor, minimap]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onPointerMove = React.useCallback(
|
const onPointerMove = React.useCallback(
|
||||||
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
(e: React.PointerEvent<HTMLCanvasElement>) => {
|
||||||
const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true)
|
if (!minimapRef.current) return
|
||||||
|
const point = minimapRef.current.minimapScreenPointToPagePoint(
|
||||||
|
e.clientX,
|
||||||
|
e.clientY,
|
||||||
|
e.shiftKey,
|
||||||
|
true
|
||||||
|
)
|
||||||
|
|
||||||
if (rPointing.current) {
|
if (rPointing.current) {
|
||||||
if (minimap.isInViewport) {
|
if (minimapRef.current.isInViewport) {
|
||||||
const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)
|
const delta = minimapRef.current.originPagePoint
|
||||||
|
.clone()
|
||||||
|
.sub(minimapRef.current.originPageCenter)
|
||||||
editor.centerOnPoint(Vec.Sub(point, delta))
|
editor.centerOnPoint(Vec.Sub(point, delta))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -115,7 +129,7 @@ export function DefaultMinimap() {
|
||||||
editor.centerOnPoint(point)
|
editor.centerOnPoint(point)
|
||||||
}
|
}
|
||||||
|
|
||||||
const pagePoint = minimap.getPagePoint(e.clientX, e.clientY)
|
const pagePoint = minimapRef.current.getPagePoint(e.clientX, e.clientY)
|
||||||
|
|
||||||
const screenPoint = editor.pageToScreen(pagePoint)
|
const screenPoint = editor.pageToScreen(pagePoint)
|
||||||
|
|
||||||
|
@ -130,7 +144,7 @@ export function DefaultMinimap() {
|
||||||
|
|
||||||
editor.dispatch(info)
|
editor.dispatch(info)
|
||||||
},
|
},
|
||||||
[editor, minimap]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
const onWheel = React.useCallback(
|
const onWheel = React.useCallback(
|
||||||
|
@ -150,73 +164,16 @@ export function DefaultMinimap() {
|
||||||
[editor]
|
[editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
// Update the minimap's dpr when the dpr changes
|
const isDarkMode = useIsDarkMode()
|
||||||
useQuickReactor(
|
|
||||||
'update when dpr changes',
|
|
||||||
() => {
|
|
||||||
const dpr = devicePixelRatio.get()
|
|
||||||
minimap.setDpr(dpr)
|
|
||||||
|
|
||||||
const canvas = rCanvas.current as HTMLCanvasElement
|
React.useEffect(() => {
|
||||||
const rect = canvas.getBoundingClientRect()
|
// need to wait a tick for next theme css to be applied
|
||||||
const width = rect.width * dpr
|
// otherwise the minimap will render with the wrong colors
|
||||||
const height = rect.height * dpr
|
setTimeout(() => {
|
||||||
|
minimapRef.current?.updateColors()
|
||||||
// These must happen in order
|
minimapRef.current?.render()
|
||||||
canvas.width = width
|
})
|
||||||
canvas.height = height
|
}, [isDarkMode])
|
||||||
minimap.canvasScreenBounds.set(rect.x, rect.y, width, height)
|
|
||||||
|
|
||||||
minimap.cvs = rCanvas.current
|
|
||||||
},
|
|
||||||
[devicePixelRatio, minimap]
|
|
||||||
)
|
|
||||||
|
|
||||||
useQuickReactor(
|
|
||||||
'minimap render when pagebounds or collaborators changes',
|
|
||||||
() => {
|
|
||||||
const shapeIdsOnCurrentPage = editor.getCurrentPageShapeIds()
|
|
||||||
const commonBoundsOfAllShapesOnCurrentPage = editor.getCurrentPageBounds()
|
|
||||||
const viewportPageBounds = editor.getViewportPageBounds()
|
|
||||||
|
|
||||||
const _dpr = devicePixelRatio.get() // dereference
|
|
||||||
|
|
||||||
minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage
|
|
||||||
? Box.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)
|
|
||||||
: viewportPageBounds
|
|
||||||
|
|
||||||
minimap.updateContentScreenBounds()
|
|
||||||
|
|
||||||
// All shape bounds
|
|
||||||
|
|
||||||
const allShapeBounds = [] as (Box & { id: TLShapeId })[]
|
|
||||||
|
|
||||||
shapeIdsOnCurrentPage.forEach((id) => {
|
|
||||||
let pageBounds = editor.getShapePageBounds(id) as Box & { id: TLShapeId }
|
|
||||||
if (!pageBounds) return
|
|
||||||
|
|
||||||
const pageMask = editor.getShapeMask(id)
|
|
||||||
|
|
||||||
if (pageMask) {
|
|
||||||
const intersection = intersectPolygonPolygon(pageMask, pageBounds.corners)
|
|
||||||
if (!intersection) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
pageBounds = Box.FromPoints(intersection) as Box & { id: TLShapeId }
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pageBounds) {
|
|
||||||
pageBounds.id = id // kinda dirty but we want to include the id here
|
|
||||||
allShapeBounds.push(pageBounds)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
minimap.pageBounds = allShapeBounds
|
|
||||||
minimap.collaborators = presences.get()
|
|
||||||
minimap.render()
|
|
||||||
},
|
|
||||||
[editor, minimap]
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tlui-minimap">
|
<div className="tlui-minimap">
|
||||||
|
|
|
@ -1,114 +1,159 @@
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
|
ComputedCache,
|
||||||
Editor,
|
Editor,
|
||||||
PI2,
|
TLShape,
|
||||||
TLInstancePresence,
|
|
||||||
TLShapeId,
|
|
||||||
Vec,
|
Vec,
|
||||||
|
atom,
|
||||||
clamp,
|
clamp,
|
||||||
|
computed,
|
||||||
|
react,
|
||||||
uniqueId,
|
uniqueId,
|
||||||
} from '@tldraw/editor'
|
} from '@tldraw/editor'
|
||||||
|
import { getRgba } from './getRgba'
|
||||||
|
import { BufferStuff, appendVertices, setupWebGl } from './minimap-webgl-setup'
|
||||||
|
import { pie, rectangle, roundedRectangle } from './minimap-webgl-shapes'
|
||||||
|
|
||||||
export class MinimapManager {
|
export class MinimapManager {
|
||||||
constructor(public editor: Editor) {}
|
disposables = [] as (() => void)[]
|
||||||
|
close = () => this.disposables.forEach((d) => d())
|
||||||
dpr = 1
|
gl: ReturnType<typeof setupWebGl>
|
||||||
|
shapeGeometryCache: ComputedCache<Float32Array | null, TLShape>
|
||||||
colors = {
|
constructor(
|
||||||
shapeFill: 'rgba(144, 144, 144, .1)',
|
public editor: Editor,
|
||||||
selectFill: '#2f80ed',
|
public readonly elem: HTMLCanvasElement
|
||||||
viewportFill: 'rgba(144, 144, 144, .1)',
|
) {
|
||||||
|
this.gl = setupWebGl(elem)
|
||||||
|
this.shapeGeometryCache = editor.store.createComputedCache('webgl-geometry', (r: TLShape) => {
|
||||||
|
const bounds = editor.getShapeMaskedPageBounds(r.id)
|
||||||
|
if (!bounds) return null
|
||||||
|
const arr = new Float32Array(12)
|
||||||
|
rectangle(arr, 0, bounds.x, bounds.y, bounds.w, bounds.h)
|
||||||
|
return arr
|
||||||
|
})
|
||||||
|
this.colors = this._getColors()
|
||||||
|
this.disposables.push(this._listenForCanvasResize(), react('minimap render', this.render))
|
||||||
}
|
}
|
||||||
|
|
||||||
id = uniqueId()
|
private _getColors() {
|
||||||
cvs: HTMLCanvasElement | null = null
|
const style = getComputedStyle(this.editor.getContainer())
|
||||||
pageBounds: (Box & { id: TLShapeId })[] = []
|
|
||||||
collaborators: TLInstancePresence[] = []
|
|
||||||
|
|
||||||
canvasScreenBounds = new Box()
|
return {
|
||||||
canvasPageBounds = new Box()
|
shapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),
|
||||||
|
selectFill: getRgba(style.getPropertyValue('--color-selected').trim()),
|
||||||
|
viewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
contentPageBounds = new Box()
|
private colors: ReturnType<MinimapManager['_getColors']>
|
||||||
contentScreenBounds = new Box()
|
// this should be called after dark/light mode changes have propagated to the dom
|
||||||
|
updateColors() {
|
||||||
|
this.colors = this._getColors()
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly id = uniqueId()
|
||||||
|
@computed
|
||||||
|
getDpr() {
|
||||||
|
return this.editor.getInstanceState().devicePixelRatio
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed
|
||||||
|
getContentPageBounds() {
|
||||||
|
const viewportPageBounds = this.editor.getViewportPageBounds()
|
||||||
|
const commonShapeBounds = this.editor.getCurrentPageBounds()
|
||||||
|
return commonShapeBounds
|
||||||
|
? Box.Expand(commonShapeBounds, viewportPageBounds)
|
||||||
|
: viewportPageBounds
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed
|
||||||
|
getContentScreenBounds() {
|
||||||
|
const contentPageBounds = this.getContentPageBounds()
|
||||||
|
const topLeft = this.editor.pageToScreen(contentPageBounds.point)
|
||||||
|
const bottomRight = this.editor.pageToScreen(
|
||||||
|
new Vec(contentPageBounds.maxX, contentPageBounds.maxY)
|
||||||
|
)
|
||||||
|
return new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getCanvasBoundingRect() {
|
||||||
|
const { x, y, width, height } = this.elem.getBoundingClientRect()
|
||||||
|
return new Box(x, y, width, height)
|
||||||
|
}
|
||||||
|
|
||||||
|
private readonly canvasBoundingClientRect = atom('canvasBoundingClientRect', new Box())
|
||||||
|
|
||||||
|
getCanvasScreenBounds() {
|
||||||
|
return this.canvasBoundingClientRect.get()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _listenForCanvasResize() {
|
||||||
|
const observer = new ResizeObserver(() => {
|
||||||
|
const rect = this._getCanvasBoundingRect()
|
||||||
|
this.canvasBoundingClientRect.set(rect)
|
||||||
|
})
|
||||||
|
observer.observe(this.elem)
|
||||||
|
return () => observer.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed
|
||||||
|
getCanvasSize() {
|
||||||
|
const rect = this.canvasBoundingClientRect.get()
|
||||||
|
const dpr = this.getDpr()
|
||||||
|
return new Vec(rect.width * dpr, rect.height * dpr)
|
||||||
|
}
|
||||||
|
|
||||||
|
@computed
|
||||||
|
getCanvasClientPosition() {
|
||||||
|
return this.canvasBoundingClientRect.get().point
|
||||||
|
}
|
||||||
|
|
||||||
originPagePoint = new Vec()
|
originPagePoint = new Vec()
|
||||||
originPageCenter = new Vec()
|
originPageCenter = new Vec()
|
||||||
|
|
||||||
isInViewport = false
|
isInViewport = false
|
||||||
|
|
||||||
debug = false
|
/** Get the canvas's true bounds converted to page bounds. */
|
||||||
|
@computed getCanvasPageBounds() {
|
||||||
|
const canvasScreenBounds = this.getCanvasScreenBounds()
|
||||||
|
const contentPageBounds = this.getContentPageBounds()
|
||||||
|
|
||||||
setDpr(dpr: number) {
|
const aspectRatio = canvasScreenBounds.width / canvasScreenBounds.height
|
||||||
this.dpr = +dpr.toFixed(2)
|
|
||||||
}
|
|
||||||
|
|
||||||
updateContentScreenBounds = () => {
|
let targetWidth = contentPageBounds.width
|
||||||
const { contentScreenBounds, contentPageBounds: content, canvasScreenBounds: canvas } = this
|
let targetHeight = targetWidth / aspectRatio
|
||||||
|
if (targetHeight < contentPageBounds.height) {
|
||||||
let { x, y, w, h } = contentScreenBounds
|
targetHeight = contentPageBounds.height
|
||||||
|
targetWidth = targetHeight * aspectRatio
|
||||||
if (content.w > content.h) {
|
|
||||||
const sh = canvas.w / (content.w / content.h)
|
|
||||||
if (sh > canvas.h) {
|
|
||||||
x = (canvas.w - canvas.w * (canvas.h / sh)) / 2
|
|
||||||
y = 0
|
|
||||||
w = canvas.w * (canvas.h / sh)
|
|
||||||
h = canvas.h
|
|
||||||
} else {
|
|
||||||
x = 0
|
|
||||||
y = (canvas.h - sh) / 2
|
|
||||||
w = canvas.w
|
|
||||||
h = sh
|
|
||||||
}
|
|
||||||
} else if (content.w < content.h) {
|
|
||||||
const sw = canvas.h / (content.h / content.w)
|
|
||||||
x = (canvas.w - sw) / 2
|
|
||||||
y = 0
|
|
||||||
w = sw
|
|
||||||
h = canvas.h
|
|
||||||
} else {
|
|
||||||
x = canvas.h / 2
|
|
||||||
y = 0
|
|
||||||
w = canvas.h
|
|
||||||
h = canvas.h
|
|
||||||
}
|
}
|
||||||
|
|
||||||
contentScreenBounds.set(x, y, w, h)
|
const box = new Box(0, 0, targetWidth, targetHeight)
|
||||||
|
box.center = contentPageBounds.center
|
||||||
|
return box
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Get the canvas's true bounds converted to page bounds. */
|
@computed getCanvasPageBoundsArray() {
|
||||||
updateCanvasPageBounds = () => {
|
const { x, y, w, h } = this.getCanvasPageBounds()
|
||||||
const { canvasPageBounds, canvasScreenBounds, contentPageBounds, contentScreenBounds } = this
|
return new Float32Array([x, y, w, h])
|
||||||
|
|
||||||
canvasPageBounds.set(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
contentPageBounds.width / (contentScreenBounds.width / canvasScreenBounds.width),
|
|
||||||
contentPageBounds.height / (contentScreenBounds.height / canvasScreenBounds.height)
|
|
||||||
)
|
|
||||||
|
|
||||||
canvasPageBounds.center = contentPageBounds.center
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getScreenPoint = (x: number, y: number) => {
|
getPagePoint = (clientX: number, clientY: number) => {
|
||||||
const { canvasScreenBounds } = this
|
const canvasPageBounds = this.getCanvasPageBounds()
|
||||||
|
const canvasScreenBounds = this.getCanvasScreenBounds()
|
||||||
|
|
||||||
const screenX = (x - canvasScreenBounds.minX) * this.dpr
|
// first offset the canvas position
|
||||||
const screenY = (y - canvasScreenBounds.minY) * this.dpr
|
let x = clientX - canvasScreenBounds.x
|
||||||
|
let y = clientY - canvasScreenBounds.y
|
||||||
|
|
||||||
return { x: screenX, y: screenY }
|
// then multiply by the ratio between the page and screen bounds
|
||||||
}
|
x *= canvasPageBounds.width / canvasScreenBounds.width
|
||||||
|
y *= canvasPageBounds.height / canvasScreenBounds.height
|
||||||
|
|
||||||
getPagePoint = (x: number, y: number) => {
|
// then add the canvas page bounds' offset
|
||||||
const { contentPageBounds, contentScreenBounds, canvasPageBounds } = this
|
x += canvasPageBounds.minX
|
||||||
|
y += canvasPageBounds.minY
|
||||||
|
|
||||||
const { x: screenX, y: screenY } = this.getScreenPoint(x, y)
|
return new Vec(x, y, 1)
|
||||||
|
|
||||||
return new Vec(
|
|
||||||
canvasPageBounds.minX + (screenX * contentPageBounds.width) / contentScreenBounds.width,
|
|
||||||
canvasPageBounds.minY + (screenY * contentPageBounds.height) / contentScreenBounds.height,
|
|
||||||
1
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
minimapScreenPointToPagePoint = (
|
minimapScreenPointToPagePoint = (
|
||||||
|
@ -123,13 +168,13 @@ export class MinimapManager {
|
||||||
let { x: px, y: py } = this.getPagePoint(x, y)
|
let { x: px, y: py } = this.getPagePoint(x, y)
|
||||||
|
|
||||||
if (clampToBounds) {
|
if (clampToBounds) {
|
||||||
const shapesPageBounds = this.editor.getCurrentPageBounds()
|
const shapesPageBounds = this.editor.getCurrentPageBounds() ?? new Box()
|
||||||
const vpPageBounds = viewportPageBounds
|
const vpPageBounds = viewportPageBounds
|
||||||
|
|
||||||
const minX = (shapesPageBounds?.minX ?? 0) - vpPageBounds.width / 2
|
const minX = shapesPageBounds.minX - vpPageBounds.width / 2
|
||||||
const maxX = (shapesPageBounds?.maxX ?? 0) + vpPageBounds.width / 2
|
const maxX = shapesPageBounds.maxX + vpPageBounds.width / 2
|
||||||
const minY = (shapesPageBounds?.minY ?? 0) - vpPageBounds.height / 2
|
const minY = shapesPageBounds.minY - vpPageBounds.height / 2
|
||||||
const maxY = (shapesPageBounds?.maxY ?? 0) + vpPageBounds.height / 2
|
const maxY = shapesPageBounds.maxY + vpPageBounds.height / 2
|
||||||
|
|
||||||
const lx = Math.max(0, minX + vpPageBounds.width - px)
|
const lx = Math.max(0, minX + vpPageBounds.width - px)
|
||||||
const rx = Math.max(0, -(maxX - vpPageBounds.width - px))
|
const rx = Math.max(0, -(maxX - vpPageBounds.width - px))
|
||||||
|
@ -171,209 +216,110 @@ export class MinimapManager {
|
||||||
return new Vec(px, py)
|
return new Vec(px, py)
|
||||||
}
|
}
|
||||||
|
|
||||||
updateColors = () => {
|
|
||||||
const style = getComputedStyle(this.editor.getContainer())
|
|
||||||
|
|
||||||
this.colors = {
|
|
||||||
shapeFill: style.getPropertyValue('--color-text-3').trim(),
|
|
||||||
selectFill: style.getPropertyValue('--color-selected').trim(),
|
|
||||||
viewportFill: style.getPropertyValue('--color-muted-1').trim(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render = () => {
|
render = () => {
|
||||||
const { cvs, pageBounds } = this
|
// make sure we update when dark mode switches
|
||||||
this.updateCanvasPageBounds()
|
const context = this.gl.context
|
||||||
|
const canvasSize = this.getCanvasSize()
|
||||||
|
|
||||||
const { editor, canvasScreenBounds, canvasPageBounds, contentPageBounds, contentScreenBounds } =
|
this.gl.setCanvasPageBounds(this.getCanvasPageBoundsArray())
|
||||||
this
|
|
||||||
const { width: cw, height: ch } = canvasScreenBounds
|
|
||||||
|
|
||||||
const selectedShapeIds = new Set(editor.getSelectedShapeIds())
|
this.elem.width = canvasSize.x
|
||||||
const viewportPageBounds = editor.getViewportPageBounds()
|
this.elem.height = canvasSize.y
|
||||||
|
context.viewport(0, 0, canvasSize.x, canvasSize.y)
|
||||||
|
|
||||||
if (!cvs || !pageBounds) {
|
// this affects which color transparent shapes are blended with
|
||||||
return
|
// during rendering. If we were to invert this any shapes narrower
|
||||||
|
// than 1 px in screen space would have much lower contrast. e.g.
|
||||||
|
// draw shapes on a large canvas.
|
||||||
|
if (this.editor.user.getIsDarkMode()) {
|
||||||
|
context.clearColor(1, 1, 1, 0)
|
||||||
|
} else {
|
||||||
|
context.clearColor(0, 0, 0, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
const ctx = cvs.getContext('2d')!
|
context.clear(context.COLOR_BUFFER_BIT)
|
||||||
|
|
||||||
if (!ctx) {
|
const selectedShapes = new Set(this.editor.getSelectedShapeIds())
|
||||||
throw new Error('Minimap (shapes): Could not get context')
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.resetTransform()
|
const colors = this.colors
|
||||||
ctx.globalAlpha = 1
|
let selectedShapeOffset = 0
|
||||||
ctx.clearRect(0, 0, cw, ch)
|
let unselectedShapeOffset = 0
|
||||||
|
|
||||||
// Transform canvas
|
const ids = this.editor.getCurrentPageShapeIdsSorted()
|
||||||
|
|
||||||
const sx = contentScreenBounds.width / contentPageBounds.width
|
for (let i = 0, len = ids.length; i < len; i++) {
|
||||||
const sy = contentScreenBounds.height / contentPageBounds.height
|
const shapeId = ids[i]
|
||||||
|
const geometry = this.shapeGeometryCache.get(shapeId)
|
||||||
|
if (!geometry) continue
|
||||||
|
|
||||||
ctx.translate((cw - contentScreenBounds.width) / 2, (ch - contentScreenBounds.height) / 2)
|
const len = geometry.length
|
||||||
ctx.scale(sx, sy)
|
|
||||||
ctx.translate(-contentPageBounds.minX, -contentPageBounds.minY)
|
|
||||||
|
|
||||||
// shapes
|
if (selectedShapes.has(shapeId)) {
|
||||||
const shapesPath = new Path2D()
|
appendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)
|
||||||
const selectedPath = new Path2D()
|
selectedShapeOffset += len
|
||||||
|
} else {
|
||||||
const { shapeFill, selectFill, viewportFill } = this.colors
|
appendVertices(this.gl.unselectedShapes, unselectedShapeOffset, geometry)
|
||||||
|
unselectedShapeOffset += len
|
||||||
// When there are many shapes, don't draw rounded rectangles;
|
|
||||||
// consider using the shape's size instead.
|
|
||||||
|
|
||||||
let pb: Box & { id: TLShapeId }
|
|
||||||
for (let i = 0, n = pageBounds.length; i < n; i++) {
|
|
||||||
pb = pageBounds[i]
|
|
||||||
;(selectedShapeIds.has(pb.id) ? selectedPath : shapesPath).rect(
|
|
||||||
pb.minX,
|
|
||||||
pb.minY,
|
|
||||||
pb.width,
|
|
||||||
pb.height
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fill the shapes paths
|
|
||||||
ctx.fillStyle = shapeFill
|
|
||||||
ctx.fill(shapesPath)
|
|
||||||
|
|
||||||
// Fill the selected paths
|
|
||||||
ctx.fillStyle = selectFill
|
|
||||||
ctx.fill(selectedPath)
|
|
||||||
|
|
||||||
if (this.debug) {
|
|
||||||
// Page bounds
|
|
||||||
const commonBounds = Box.Common(pageBounds)
|
|
||||||
const { minX, minY, width, height } = commonBounds
|
|
||||||
ctx.strokeStyle = 'green'
|
|
||||||
ctx.lineWidth = 2 / sx
|
|
||||||
ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Brush
|
|
||||||
{
|
|
||||||
const { brush } = editor.getInstanceState()
|
|
||||||
if (brush) {
|
|
||||||
const { x, y, w, h } = brush
|
|
||||||
ctx.beginPath()
|
|
||||||
MinimapManager.sharpRect(ctx, x, y, w, h)
|
|
||||||
ctx.closePath()
|
|
||||||
ctx.fillStyle = viewportFill
|
|
||||||
ctx.fill()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Viewport
|
this.drawViewport()
|
||||||
{
|
this.drawShapes(this.gl.unselectedShapes, unselectedShapeOffset, colors.shapeFill)
|
||||||
const { minX, minY, width, height } = viewportPageBounds
|
this.drawShapes(this.gl.selectedShapes, selectedShapeOffset, colors.selectFill)
|
||||||
|
this.drawCollaborators()
|
||||||
ctx.beginPath()
|
|
||||||
|
|
||||||
const rx = 12 / sx
|
|
||||||
const ry = 12 / sx
|
|
||||||
MinimapManager.roundedRect(
|
|
||||||
ctx,
|
|
||||||
minX,
|
|
||||||
minY,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
Math.min(width / 4, rx),
|
|
||||||
Math.min(height / 4, ry)
|
|
||||||
)
|
|
||||||
ctx.closePath()
|
|
||||||
ctx.fillStyle = viewportFill
|
|
||||||
ctx.fill()
|
|
||||||
|
|
||||||
if (this.debug) {
|
|
||||||
ctx.strokeStyle = 'orange'
|
|
||||||
ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show collaborator cursors
|
|
||||||
|
|
||||||
// Padding for canvas bounds edges
|
|
||||||
const px = 2.5 / sx
|
|
||||||
const py = 2.5 / sy
|
|
||||||
|
|
||||||
const currentPageId = editor.getCurrentPageId()
|
|
||||||
|
|
||||||
let collaborator: TLInstancePresence
|
|
||||||
for (let i = 0; i < this.collaborators.length; i++) {
|
|
||||||
collaborator = this.collaborators[i]
|
|
||||||
if (collaborator.currentPageId !== currentPageId) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.ellipse(
|
|
||||||
clamp(collaborator.cursor.x, canvasPageBounds.minX + px, canvasPageBounds.maxX - px),
|
|
||||||
clamp(collaborator.cursor.y, canvasPageBounds.minY + py, canvasPageBounds.maxY - py),
|
|
||||||
5 / sx,
|
|
||||||
5 / sy,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
PI2
|
|
||||||
)
|
|
||||||
ctx.fillStyle = collaborator.color
|
|
||||||
ctx.fill()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.debug) {
|
|
||||||
ctx.lineWidth = 2 / sx
|
|
||||||
|
|
||||||
{
|
|
||||||
// Minimap Bounds
|
|
||||||
const { minX, minY, width, height } = contentPageBounds
|
|
||||||
ctx.strokeStyle = 'red'
|
|
||||||
ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
// Canvas Bounds
|
|
||||||
const { minX, minY, width, height } = canvasPageBounds
|
|
||||||
ctx.strokeStyle = 'blue'
|
|
||||||
ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static roundedRect(
|
private drawShapes(stuff: BufferStuff, len: number, color: Float32Array) {
|
||||||
ctx: CanvasRenderingContext2D | Path2D,
|
this.gl.prepareTriangles(stuff, len)
|
||||||
x: number,
|
this.gl.setFillColor(color)
|
||||||
y: number,
|
this.gl.drawTriangles(len)
|
||||||
width: number,
|
|
||||||
height: number,
|
|
||||||
rx: number,
|
|
||||||
ry: number
|
|
||||||
) {
|
|
||||||
if (rx < 1 && ry < 1) {
|
|
||||||
ctx.rect(x, y, width, height)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.moveTo(x + rx, y)
|
|
||||||
ctx.lineTo(x + width - rx, y)
|
|
||||||
ctx.quadraticCurveTo(x + width, y, x + width, y + ry)
|
|
||||||
ctx.lineTo(x + width, y + height - ry)
|
|
||||||
ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height)
|
|
||||||
ctx.lineTo(x + rx, y + height)
|
|
||||||
ctx.quadraticCurveTo(x, y + height, x, y + height - ry)
|
|
||||||
ctx.lineTo(x, y + ry)
|
|
||||||
ctx.quadraticCurveTo(x, y, x + rx, y)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static sharpRect(
|
private drawViewport() {
|
||||||
ctx: CanvasRenderingContext2D | Path2D,
|
const viewport = this.editor.getViewportPageBounds()
|
||||||
x: number,
|
const zoom = this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width
|
||||||
y: number,
|
const len = roundedRectangle(this.gl.viewport.vertices, viewport, 4 * zoom)
|
||||||
width: number,
|
|
||||||
height: number,
|
this.gl.prepareTriangles(this.gl.viewport, len)
|
||||||
_rx?: number,
|
this.gl.setFillColor(this.colors.viewportFill)
|
||||||
_ry?: number
|
this.gl.drawTriangles(len)
|
||||||
) {
|
}
|
||||||
ctx.rect(x, y, width, height)
|
|
||||||
|
drawCollaborators() {
|
||||||
|
const collaborators = this.editor.getCollaboratorsOnCurrentPage()
|
||||||
|
if (!collaborators.length) return
|
||||||
|
|
||||||
|
const zoom = this.getCanvasPageBounds().width / this.getCanvasScreenBounds().width
|
||||||
|
|
||||||
|
// just draw a little circle for each collaborator
|
||||||
|
const numSegmentsPerCircle = 20
|
||||||
|
const dataSizePerCircle = numSegmentsPerCircle * 6
|
||||||
|
const totalSize = dataSizePerCircle * collaborators.length
|
||||||
|
|
||||||
|
// expand vertex array if needed
|
||||||
|
if (this.gl.collaborators.vertices.length < totalSize) {
|
||||||
|
this.gl.collaborators.vertices = new Float32Array(totalSize)
|
||||||
|
}
|
||||||
|
|
||||||
|
const vertices = this.gl.collaborators.vertices
|
||||||
|
let offset = 0
|
||||||
|
for (const { cursor } of collaborators) {
|
||||||
|
pie(vertices, {
|
||||||
|
center: Vec.From(cursor),
|
||||||
|
radius: 2 * zoom,
|
||||||
|
offset,
|
||||||
|
numArcSegments: numSegmentsPerCircle,
|
||||||
|
})
|
||||||
|
offset += dataSizePerCircle
|
||||||
|
}
|
||||||
|
|
||||||
|
this.gl.prepareTriangles(this.gl.collaborators, totalSize)
|
||||||
|
|
||||||
|
offset = 0
|
||||||
|
for (const { color } of collaborators) {
|
||||||
|
this.gl.setFillColor(getRgba(color))
|
||||||
|
this.gl.context.drawArrays(this.gl.context.TRIANGLES, offset / 2, dataSizePerCircle / 2)
|
||||||
|
offset += dataSizePerCircle
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
const memo = {} as Record<string, Float32Array>
|
||||||
|
|
||||||
|
export function getRgba(colorString: string) {
|
||||||
|
if (memo[colorString]) {
|
||||||
|
return memo[colorString]
|
||||||
|
}
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
context!.fillStyle = colorString
|
||||||
|
context!.fillRect(0, 0, 1, 1)
|
||||||
|
const [r, g, b, a] = context!.getImageData(0, 0, 1, 1).data
|
||||||
|
const result = new Float32Array([r / 255, g / 255, b / 255, a / 255])
|
||||||
|
|
||||||
|
memo[colorString] = result
|
||||||
|
return result
|
||||||
|
}
|
|
@ -0,0 +1,148 @@
|
||||||
|
import { roundedRectangleDataSize } from './minimap-webgl-shapes'
|
||||||
|
|
||||||
|
export function setupWebGl(canvas: HTMLCanvasElement | null) {
|
||||||
|
if (!canvas) throw new Error('Canvas element not found')
|
||||||
|
|
||||||
|
const context = canvas.getContext('webgl2', {
|
||||||
|
premultipliedAlpha: false,
|
||||||
|
})
|
||||||
|
if (!context) throw new Error('Failed to get webgl2 context')
|
||||||
|
|
||||||
|
const vertexShaderSourceCode = `#version 300 es
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
in vec2 shapeVertexPosition;
|
||||||
|
|
||||||
|
uniform vec4 canvasPageBounds;
|
||||||
|
|
||||||
|
// taken (with thanks) from
|
||||||
|
// https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html
|
||||||
|
void main() {
|
||||||
|
// convert the position from pixels to 0.0 to 1.0
|
||||||
|
vec2 zeroToOne = (shapeVertexPosition - canvasPageBounds.xy) / canvasPageBounds.zw;
|
||||||
|
|
||||||
|
// convert from 0->1 to 0->2
|
||||||
|
vec2 zeroToTwo = zeroToOne * 2.0;
|
||||||
|
|
||||||
|
// convert from 0->2 to -1->+1 (clipspace)
|
||||||
|
vec2 clipSpace = zeroToTwo - 1.0;
|
||||||
|
|
||||||
|
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
|
||||||
|
}`
|
||||||
|
|
||||||
|
const vertexShader = context.createShader(context.VERTEX_SHADER)
|
||||||
|
if (!vertexShader) {
|
||||||
|
throw new Error('Failed to create vertex shader')
|
||||||
|
}
|
||||||
|
context.shaderSource(vertexShader, vertexShaderSourceCode)
|
||||||
|
context.compileShader(vertexShader)
|
||||||
|
if (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) {
|
||||||
|
throw new Error('Failed to compile vertex shader')
|
||||||
|
}
|
||||||
|
|
||||||
|
const fragmentShaderSourceCode = `#version 300 es
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
uniform vec4 fillColor;
|
||||||
|
out vec4 outputColor;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
outputColor = fillColor;
|
||||||
|
}`
|
||||||
|
|
||||||
|
const fragmentShader = context.createShader(context.FRAGMENT_SHADER)
|
||||||
|
if (!fragmentShader) {
|
||||||
|
throw new Error('Failed to create fragment shader')
|
||||||
|
}
|
||||||
|
context.shaderSource(fragmentShader, fragmentShaderSourceCode)
|
||||||
|
context.compileShader(fragmentShader)
|
||||||
|
if (!context.getShaderParameter(fragmentShader, context.COMPILE_STATUS)) {
|
||||||
|
throw new Error('Failed to compile fragment shader')
|
||||||
|
}
|
||||||
|
|
||||||
|
const program = context.createProgram()
|
||||||
|
if (!program) {
|
||||||
|
throw new Error('Failed to create program')
|
||||||
|
}
|
||||||
|
context.attachShader(program, vertexShader)
|
||||||
|
context.attachShader(program, fragmentShader)
|
||||||
|
context.linkProgram(program)
|
||||||
|
if (!context.getProgramParameter(program, context.LINK_STATUS)) {
|
||||||
|
throw new Error('Failed to link program')
|
||||||
|
}
|
||||||
|
context.useProgram(program)
|
||||||
|
|
||||||
|
const shapeVertexPositionAttributeLocation = context.getAttribLocation(
|
||||||
|
program,
|
||||||
|
'shapeVertexPosition'
|
||||||
|
)
|
||||||
|
if (shapeVertexPositionAttributeLocation < 0) {
|
||||||
|
throw new Error('Failed to get shapeVertexPosition attribute location')
|
||||||
|
}
|
||||||
|
context.enableVertexAttribArray(shapeVertexPositionAttributeLocation)
|
||||||
|
|
||||||
|
const canvasPageBoundsLocation = context.getUniformLocation(program, 'canvasPageBounds')
|
||||||
|
const fillColorLocation = context.getUniformLocation(program, 'fillColor')
|
||||||
|
|
||||||
|
const selectedShapesBuffer = context.createBuffer()
|
||||||
|
if (!selectedShapesBuffer) throw new Error('Failed to create buffer')
|
||||||
|
|
||||||
|
const unselectedShapesBuffer = context.createBuffer()
|
||||||
|
if (!unselectedShapesBuffer) throw new Error('Failed to create buffer')
|
||||||
|
|
||||||
|
return {
|
||||||
|
context,
|
||||||
|
selectedShapes: allocateBuffer(context, 1024),
|
||||||
|
unselectedShapes: allocateBuffer(context, 4096),
|
||||||
|
viewport: allocateBuffer(context, roundedRectangleDataSize),
|
||||||
|
collaborators: allocateBuffer(context, 1024),
|
||||||
|
|
||||||
|
prepareTriangles(stuff: BufferStuff, len: number) {
|
||||||
|
context.bindBuffer(context.ARRAY_BUFFER, stuff.buffer)
|
||||||
|
context.bufferData(context.ARRAY_BUFFER, stuff.vertices, context.STATIC_DRAW, 0, len)
|
||||||
|
context.enableVertexAttribArray(shapeVertexPositionAttributeLocation)
|
||||||
|
context.vertexAttribPointer(
|
||||||
|
shapeVertexPositionAttributeLocation,
|
||||||
|
2,
|
||||||
|
context.FLOAT,
|
||||||
|
false,
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
drawTriangles(len: number) {
|
||||||
|
context.drawArrays(context.TRIANGLES, 0, len / 2)
|
||||||
|
},
|
||||||
|
|
||||||
|
setFillColor(color: Float32Array) {
|
||||||
|
context.uniform4fv(fillColorLocation, color)
|
||||||
|
},
|
||||||
|
|
||||||
|
setCanvasPageBounds(bounds: Float32Array) {
|
||||||
|
context.uniform4fv(canvasPageBoundsLocation, bounds)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BufferStuff = ReturnType<typeof allocateBuffer>
|
||||||
|
|
||||||
|
function allocateBuffer(context: WebGL2RenderingContext, size: number) {
|
||||||
|
const buffer = context.createBuffer()
|
||||||
|
if (!buffer) throw new Error('Failed to create buffer')
|
||||||
|
return { buffer, vertices: new Float32Array(size) }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function appendVertices(bufferStuff: BufferStuff, offset: number, data: Float32Array) {
|
||||||
|
let len = bufferStuff.vertices.length
|
||||||
|
while (len < offset + data.length) {
|
||||||
|
len *= 2
|
||||||
|
}
|
||||||
|
if (len != bufferStuff.vertices.length) {
|
||||||
|
const newVertices = new Float32Array(len)
|
||||||
|
newVertices.set(bufferStuff.vertices)
|
||||||
|
bufferStuff.vertices = newVertices
|
||||||
|
}
|
||||||
|
|
||||||
|
bufferStuff.vertices.set(data, offset)
|
||||||
|
}
|
|
@ -0,0 +1,144 @@
|
||||||
|
import { Box, HALF_PI, PI, PI2, Vec } from '@tldraw/editor'
|
||||||
|
|
||||||
|
export const numArcSegmentsPerCorner = 10
|
||||||
|
|
||||||
|
export const roundedRectangleDataSize =
|
||||||
|
// num triangles in corners
|
||||||
|
4 * 6 * numArcSegmentsPerCorner +
|
||||||
|
// num triangles in center rect
|
||||||
|
12 +
|
||||||
|
// num triangles in outer rects
|
||||||
|
4 * 12
|
||||||
|
|
||||||
|
export function pie(
|
||||||
|
array: Float32Array,
|
||||||
|
{
|
||||||
|
center,
|
||||||
|
radius,
|
||||||
|
numArcSegments = 20,
|
||||||
|
startAngle = 0,
|
||||||
|
endAngle = PI2,
|
||||||
|
offset = 0,
|
||||||
|
}: {
|
||||||
|
center: Vec
|
||||||
|
radius: number
|
||||||
|
numArcSegments?: number
|
||||||
|
startAngle?: number
|
||||||
|
endAngle?: number
|
||||||
|
offset?: number
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
const angle = (endAngle - startAngle) / numArcSegments
|
||||||
|
let i = offset
|
||||||
|
for (let a = startAngle; a < endAngle; a += angle) {
|
||||||
|
array[i++] = center.x
|
||||||
|
array[i++] = center.y
|
||||||
|
array[i++] = center.x + Math.cos(a) * radius
|
||||||
|
array[i++] = center.y + Math.sin(a) * radius
|
||||||
|
array[i++] = center.x + Math.cos(a + angle) * radius
|
||||||
|
array[i++] = center.y + Math.sin(a + angle) * radius
|
||||||
|
}
|
||||||
|
return array
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @internal **/
|
||||||
|
export function rectangle(
|
||||||
|
array: Float32Array,
|
||||||
|
offset: number,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
w: number,
|
||||||
|
h: number
|
||||||
|
) {
|
||||||
|
array[offset++] = x
|
||||||
|
array[offset++] = y
|
||||||
|
array[offset++] = x
|
||||||
|
array[offset++] = y + h
|
||||||
|
array[offset++] = x + w
|
||||||
|
array[offset++] = y
|
||||||
|
|
||||||
|
array[offset++] = x + w
|
||||||
|
array[offset++] = y
|
||||||
|
array[offset++] = x
|
||||||
|
array[offset++] = y + h
|
||||||
|
array[offset++] = x + w
|
||||||
|
array[offset++] = y + h
|
||||||
|
}
|
||||||
|
|
||||||
|
export function roundedRectangle(data: Float32Array, box: Box, radius: number): number {
|
||||||
|
const numArcSegments = numArcSegmentsPerCorner
|
||||||
|
radius = Math.min(radius, Math.min(box.w, box.h) / 2)
|
||||||
|
// first draw the inner box
|
||||||
|
const innerBox = Box.ExpandBy(box, -radius)
|
||||||
|
if (innerBox.w <= 0 || innerBox.h <= 0) {
|
||||||
|
// just draw a circle
|
||||||
|
pie(data, { center: box.center, radius: radius, numArcSegments: numArcSegmentsPerCorner * 4 })
|
||||||
|
return numArcSegmentsPerCorner * 4 * 6
|
||||||
|
}
|
||||||
|
let offset = 0
|
||||||
|
// draw center rect first
|
||||||
|
rectangle(data, offset, innerBox.minX, innerBox.minY, innerBox.w, innerBox.h)
|
||||||
|
offset += 12
|
||||||
|
// then top rect
|
||||||
|
rectangle(data, offset, innerBox.minX, box.minY, innerBox.w, radius)
|
||||||
|
offset += 12
|
||||||
|
// then right rect
|
||||||
|
rectangle(data, offset, innerBox.maxX, innerBox.minY, radius, innerBox.h)
|
||||||
|
offset += 12
|
||||||
|
// then bottom rect
|
||||||
|
rectangle(data, offset, innerBox.minX, innerBox.maxY, innerBox.w, radius)
|
||||||
|
offset += 12
|
||||||
|
// then left rect
|
||||||
|
rectangle(data, offset, box.minX, innerBox.minY, radius, innerBox.h)
|
||||||
|
offset += 12
|
||||||
|
|
||||||
|
// draw the corners
|
||||||
|
|
||||||
|
// top left
|
||||||
|
pie(data, {
|
||||||
|
numArcSegments,
|
||||||
|
offset,
|
||||||
|
center: innerBox.point,
|
||||||
|
radius,
|
||||||
|
startAngle: PI,
|
||||||
|
endAngle: PI * 1.5,
|
||||||
|
})
|
||||||
|
|
||||||
|
offset += numArcSegments * 6
|
||||||
|
|
||||||
|
// top right
|
||||||
|
pie(data, {
|
||||||
|
numArcSegments,
|
||||||
|
offset,
|
||||||
|
center: Vec.Add(innerBox.point, new Vec(innerBox.w, 0)),
|
||||||
|
radius,
|
||||||
|
startAngle: PI * 1.5,
|
||||||
|
endAngle: PI2,
|
||||||
|
})
|
||||||
|
|
||||||
|
offset += numArcSegments * 6
|
||||||
|
|
||||||
|
// bottom right
|
||||||
|
pie(data, {
|
||||||
|
numArcSegments,
|
||||||
|
offset,
|
||||||
|
center: Vec.Add(innerBox.point, innerBox.size),
|
||||||
|
radius,
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: HALF_PI,
|
||||||
|
})
|
||||||
|
|
||||||
|
offset += numArcSegments * 6
|
||||||
|
|
||||||
|
// bottom left
|
||||||
|
pie(data, {
|
||||||
|
numArcSegments,
|
||||||
|
offset,
|
||||||
|
center: Vec.Add(innerBox.point, new Vec(0, innerBox.h)),
|
||||||
|
radius,
|
||||||
|
startAngle: HALF_PI,
|
||||||
|
endAngle: PI,
|
||||||
|
})
|
||||||
|
|
||||||
|
return roundedRectangleDataSize
|
||||||
|
}
|
|
@ -9,6 +9,8 @@ import {
|
||||||
TLTextShape,
|
TLTextShape,
|
||||||
VecLike,
|
VecLike,
|
||||||
isNonNull,
|
isNonNull,
|
||||||
|
preventDefault,
|
||||||
|
stopEventPropagation,
|
||||||
uniq,
|
uniq,
|
||||||
useEditor,
|
useEditor,
|
||||||
useValue,
|
useValue,
|
||||||
|
@ -615,24 +617,29 @@ export function useNativeClipboardEvents() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!appIsFocused) return
|
if (!appIsFocused) return
|
||||||
const copy = () => {
|
const copy = (e: ClipboardEvent) => {
|
||||||
if (
|
if (
|
||||||
editor.getSelectedShapeIds().length === 0 ||
|
editor.getSelectedShapeIds().length === 0 ||
|
||||||
editor.getEditingShapeId() !== null ||
|
editor.getEditingShapeId() !== null ||
|
||||||
disallowClipboardEvents(editor)
|
disallowClipboardEvents(editor)
|
||||||
)
|
) {
|
||||||
return
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
preventDefault(e)
|
||||||
handleNativeOrMenuCopy(editor)
|
handleNativeOrMenuCopy(editor)
|
||||||
trackEvent('copy', { source: 'kbd' })
|
trackEvent('copy', { source: 'kbd' })
|
||||||
}
|
}
|
||||||
|
|
||||||
function cut() {
|
function cut(e: ClipboardEvent) {
|
||||||
if (
|
if (
|
||||||
editor.getSelectedShapeIds().length === 0 ||
|
editor.getSelectedShapeIds().length === 0 ||
|
||||||
editor.getEditingShapeId() !== null ||
|
editor.getEditingShapeId() !== null ||
|
||||||
disallowClipboardEvents(editor)
|
disallowClipboardEvents(editor)
|
||||||
)
|
) {
|
||||||
return
|
return
|
||||||
|
}
|
||||||
|
preventDefault(e)
|
||||||
handleNativeOrMenuCopy(editor)
|
handleNativeOrMenuCopy(editor)
|
||||||
editor.deleteShapes(editor.getSelectedShapeIds())
|
editor.deleteShapes(editor.getSelectedShapeIds())
|
||||||
trackEvent('cut', { source: 'kbd' })
|
trackEvent('cut', { source: 'kbd' })
|
||||||
|
@ -648,9 +655,9 @@ export function useNativeClipboardEvents() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const paste = (event: ClipboardEvent) => {
|
const paste = (e: ClipboardEvent) => {
|
||||||
if (disablingMiddleClickPaste) {
|
if (disablingMiddleClickPaste) {
|
||||||
event.stopPropagation()
|
stopEventPropagation(e)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -660,8 +667,8 @@ export function useNativeClipboardEvents() {
|
||||||
if (editor.getEditingShapeId() !== null || disallowClipboardEvents(editor)) return
|
if (editor.getEditingShapeId() !== null || disallowClipboardEvents(editor)) return
|
||||||
|
|
||||||
// First try to use the clipboard data on the event
|
// First try to use the clipboard data on the event
|
||||||
if (event.clipboardData && !editor.inputs.shiftKey) {
|
if (e.clipboardData && !editor.inputs.shiftKey) {
|
||||||
handlePasteFromEventClipboardData(editor, event.clipboardData)
|
handlePasteFromEventClipboardData(editor, e.clipboardData)
|
||||||
} else {
|
} else {
|
||||||
// Or else use the clipboard API
|
// Or else use the clipboard API
|
||||||
navigator.clipboard.read().then((clipboardItems) => {
|
navigator.clipboard.read().then((clipboardItems) => {
|
||||||
|
@ -671,6 +678,7 @@ export function useNativeClipboardEvents() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
preventDefault(e)
|
||||||
trackEvent('paste', { source: 'kbd' })
|
trackEvent('paste', { source: 'kbd' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -56,6 +56,7 @@ function getTypefaces(assetUrls: TLEditorAssetUrls) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
|
export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
|
||||||
const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])
|
const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])
|
||||||
|
|
||||||
|
|
Plik diff jest za duży
Load Diff
Plik diff jest za duży
Load Diff
|
@ -1,5 +1,6 @@
|
||||||
import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
|
import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
|
||||||
import { TestEditor } from './TestEditor'
|
import { TestEditor } from './TestEditor'
|
||||||
|
import { TEST_DRAW_SHAPE_SCREEN_POINTS } from './drawing.data'
|
||||||
|
|
||||||
jest.useFakeTimers()
|
jest.useFakeTimers()
|
||||||
|
|
||||||
|
@ -260,3 +261,22 @@ for (const toolType of ['draw', 'highlight'] as const) {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
it('Draws a bunch', () => {
|
||||||
|
editor.setCurrentTool('draw').setCamera({ x: 0, y: 0, z: 1 })
|
||||||
|
|
||||||
|
const [first, ...rest] = TEST_DRAW_SHAPE_SCREEN_POINTS
|
||||||
|
editor.pointerMove(first.x, first.y).pointerDown()
|
||||||
|
|
||||||
|
for (const point of rest) {
|
||||||
|
editor.pointerMove(point.x, point.y)
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.pointerUp()
|
||||||
|
editor.selectAll()
|
||||||
|
|
||||||
|
const shape = { ...editor.getLastCreatedShape() }
|
||||||
|
// @ts-expect-error
|
||||||
|
delete shape.id
|
||||||
|
expect(shape).toMatchSnapshot('draw shape')
|
||||||
|
})
|
||||||
|
|
|
@ -34,15 +34,17 @@ export function measureAverageDuration(
|
||||||
const start = performance.now()
|
const start = performance.now()
|
||||||
const result = originalMethod.apply(this, args)
|
const result = originalMethod.apply(this, args)
|
||||||
const end = performance.now()
|
const end = performance.now()
|
||||||
const value = averages.get(descriptor.value)!
|
|
||||||
const length = end - start
|
const length = end - start
|
||||||
const total = value.total + length
|
if (length !== 0) {
|
||||||
const count = value.count + 1
|
const value = averages.get(descriptor.value)!
|
||||||
averages.set(descriptor.value, { total, count })
|
const total = value.total + length
|
||||||
// eslint-disable-next-line no-console
|
const count = value.count + 1
|
||||||
console.log(
|
averages.set(descriptor.value, { total, count })
|
||||||
`${propertyKey} took ${(end - start).toFixed(2)}ms | average ${(total / count).toFixed(2)}ms`
|
// eslint-disable-next-line no-console
|
||||||
)
|
console.log(
|
||||||
|
`${propertyKey} took ${(end - start).toFixed(2)}ms | average ${(total / count).toFixed(2)}ms`
|
||||||
|
)
|
||||||
|
}
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
averages.set(descriptor.value, { total: 0, count: 0 })
|
averages.set(descriptor.value, { total: 0, count: 0 })
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { execSync } from 'child_process'
|
||||||
import { appendFileSync, existsSync, readdirSync, writeFileSync } from 'fs'
|
import { appendFileSync, existsSync, readdirSync, writeFileSync } from 'fs'
|
||||||
import path, { join } from 'path'
|
import path, { join } from 'path'
|
||||||
import { PassThrough } from 'stream'
|
import { PassThrough } from 'stream'
|
||||||
import tar from 'tar'
|
import * as tar from 'tar'
|
||||||
import { exec } from './lib/exec'
|
import { exec } from './lib/exec'
|
||||||
import { makeEnv } from './lib/makeEnv'
|
import { makeEnv } from './lib/makeEnv'
|
||||||
import { nicelog } from './lib/nicelog'
|
import { nicelog } from './lib/nicelog'
|
||||||
|
@ -515,7 +515,7 @@ async function coalesceWithPreviousAssets(assetsDir: string) {
|
||||||
// and it will mess up the inline source viewer on sentry errors.
|
// and it will mess up the inline source viewer on sentry errors.
|
||||||
const out = tar.x({ cwd: assetsDir, 'keep-existing': true })
|
const out = tar.x({ cwd: assetsDir, 'keep-existing': true })
|
||||||
for await (const chunk of Body?.transformToWebStream() as any as AsyncIterable<Uint8Array>) {
|
for await (const chunk of Body?.transformToWebStream() as any as AsyncIterable<Uint8Array>) {
|
||||||
out.write(chunk)
|
out.write(Buffer.from(chunk.buffer))
|
||||||
}
|
}
|
||||||
out.end()
|
out.end()
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,12 +18,12 @@ async function hasPackageChanged(pkg: PackageDetails) {
|
||||||
}
|
}
|
||||||
const publishedTarballPath = `${dirPath}/published-package.tgz`
|
const publishedTarballPath = `${dirPath}/published-package.tgz`
|
||||||
writeFileSync(publishedTarballPath, Buffer.from(await res.arrayBuffer()))
|
writeFileSync(publishedTarballPath, Buffer.from(await res.arrayBuffer()))
|
||||||
const publishedManifest = await getTarballManifest(publishedTarballPath)
|
const publishedManifest = getTarballManifestSync(publishedTarballPath)
|
||||||
|
|
||||||
const localTarballPath = `${dirPath}/local-package.tgz`
|
const localTarballPath = `${dirPath}/local-package.tgz`
|
||||||
await exec('yarn', ['pack', '--out', localTarballPath], { pwd: pkg.dir })
|
await exec('yarn', ['pack', '--out', localTarballPath], { pwd: pkg.dir })
|
||||||
|
|
||||||
const localManifest = await getTarballManifest(localTarballPath)
|
const localManifest = getTarballManifestSync(localTarballPath)
|
||||||
|
|
||||||
return !manifestsAreEqual(publishedManifest, localManifest)
|
return !manifestsAreEqual(publishedManifest, localManifest)
|
||||||
} finally {
|
} finally {
|
||||||
|
@ -48,34 +48,25 @@ function manifestsAreEqual(a: Record<string, Buffer>, b: Record<string, Buffer>)
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTarballManifest(tarballPath: string): Promise<Record<string, Buffer>> {
|
function getTarballManifestSync(tarballPath: string) {
|
||||||
const manifest: Record<string, Buffer> = {}
|
const manifest: Record<string, Buffer> = {}
|
||||||
return new Promise((resolve, reject) =>
|
tar.list({
|
||||||
tar.list(
|
file: tarballPath,
|
||||||
{
|
onentry: (entry) => {
|
||||||
// @ts-expect-error bad typings
|
entry.on('data', (data) => {
|
||||||
file: tarballPath,
|
// we could hash these to reduce memory but it's probably fine
|
||||||
onentry: (entry) => {
|
const existing = manifest[entry.path]
|
||||||
entry.on('data', (data) => {
|
if (existing) {
|
||||||
// we could hash these to reduce memory but it's probably fine
|
manifest[entry.path] = Buffer.concat([existing, data])
|
||||||
const existing = manifest[entry.path]
|
|
||||||
if (existing) {
|
|
||||||
manifest[entry.path] = Buffer.concat([existing, data])
|
|
||||||
} else {
|
|
||||||
manifest[entry.path] = data
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
(err: any) => {
|
|
||||||
if (err) {
|
|
||||||
reject(err)
|
|
||||||
} else {
|
} else {
|
||||||
resolve(manifest)
|
manifest[entry.path] = data
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
)
|
},
|
||||||
)
|
sync: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
return manifest
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function didAnyPackageChange() {
|
export async function didAnyPackageChange() {
|
||||||
|
|
|
@ -32,7 +32,6 @@
|
||||||
"@aws-sdk/lib-storage": "^3.440.0",
|
"@aws-sdk/lib-storage": "^3.440.0",
|
||||||
"@types/is-ci": "^3.0.0",
|
"@types/is-ci": "^3.0.0",
|
||||||
"@types/node": "~20.11",
|
"@types/node": "~20.11",
|
||||||
"@types/tar": "^6.1.11",
|
|
||||||
"@typescript-eslint/utils": "^5.59.0",
|
"@typescript-eslint/utils": "^5.59.0",
|
||||||
"ast-types": "^0.14.2",
|
"ast-types": "^0.14.2",
|
||||||
"cross-fetch": "^3.1.5",
|
"cross-fetch": "^3.1.5",
|
||||||
|
@ -59,7 +58,7 @@
|
||||||
"@types/tmp": "^0.2.6",
|
"@types/tmp": "^0.2.6",
|
||||||
"ignore": "^5.2.4",
|
"ignore": "^5.2.4",
|
||||||
"minimist": "^1.2.8",
|
"minimist": "^1.2.8",
|
||||||
"tar": "^6.2.0",
|
"tar": "^7.0.1",
|
||||||
"tmp": "^0.2.3"
|
"tmp": "^0.2.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
126
yarn.lock
126
yarn.lock
|
@ -3680,6 +3680,15 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@isaacs/fs-minipass@npm:^4.0.0":
|
||||||
|
version: 4.0.0
|
||||||
|
resolution: "@isaacs/fs-minipass@npm:4.0.0"
|
||||||
|
dependencies:
|
||||||
|
minipass: "npm:^7.0.4"
|
||||||
|
checksum: 7444d7a3c9211c27494630e2bff8545e3494a1598624a4871ee7ef3a9e592a61fed3abd85d118f966673bd0b4401c266d45441f89c00c420e9d0cfbf1042dbd5
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@istanbuljs/load-nyc-config@npm:^1.0.0":
|
"@istanbuljs/load-nyc-config@npm:^1.0.0":
|
||||||
version: 1.1.0
|
version: 1.1.0
|
||||||
resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
|
resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
|
||||||
|
@ -7570,7 +7579,6 @@ __metadata:
|
||||||
"@types/is-ci": "npm:^3.0.0"
|
"@types/is-ci": "npm:^3.0.0"
|
||||||
"@types/minimist": "npm:^1.2.5"
|
"@types/minimist": "npm:^1.2.5"
|
||||||
"@types/node": "npm:~20.11"
|
"@types/node": "npm:~20.11"
|
||||||
"@types/tar": "npm:^6.1.11"
|
|
||||||
"@types/tmp": "npm:^0.2.6"
|
"@types/tmp": "npm:^0.2.6"
|
||||||
"@typescript-eslint/utils": "npm:^5.59.0"
|
"@typescript-eslint/utils": "npm:^5.59.0"
|
||||||
ast-types: "npm:^0.14.2"
|
ast-types: "npm:^0.14.2"
|
||||||
|
@ -7589,7 +7597,7 @@ __metadata:
|
||||||
rimraf: "npm:^4.4.0"
|
rimraf: "npm:^4.4.0"
|
||||||
semver: "npm:^7.3.8"
|
semver: "npm:^7.3.8"
|
||||||
svgo: "npm:^3.0.2"
|
svgo: "npm:^3.0.2"
|
||||||
tar: "npm:^6.2.0"
|
tar: "npm:^7.0.1"
|
||||||
tmp: "npm:^0.2.3"
|
tmp: "npm:^0.2.3"
|
||||||
typescript: "npm:^5.3.3"
|
typescript: "npm:^5.3.3"
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
|
@ -8434,16 +8442,6 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/tar@npm:^6.1.11":
|
|
||||||
version: 6.1.11
|
|
||||||
resolution: "@types/tar@npm:6.1.11"
|
|
||||||
dependencies:
|
|
||||||
"@types/node": "npm:*"
|
|
||||||
minipass: "npm:^4.0.0"
|
|
||||||
checksum: 0d54b8acbd7d2fc43bd1097eef5058604a6b0e3a394cf485038303ca3ef39ecb42451c7dc5a2b9b18420e137ef5b2c76ec504e94c2f45010b2c8e8c3a49d9de7
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@types/testing-library__jest-dom@npm:^5.9.1":
|
"@types/testing-library__jest-dom@npm:^5.9.1":
|
||||||
version: 5.14.9
|
version: 5.14.9
|
||||||
resolution: "@types/testing-library__jest-dom@npm:5.14.9"
|
resolution: "@types/testing-library__jest-dom@npm:5.14.9"
|
||||||
|
@ -10700,6 +10698,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"chownr@npm:^3.0.0":
|
||||||
|
version: 3.0.0
|
||||||
|
resolution: "chownr@npm:3.0.0"
|
||||||
|
checksum: b63cb1f73d171d140a2ed8154ee6566c8ab775d3196b0e03a2a94b5f6a0ce7777ee5685ca56849403c8d17bd457a6540672f9a60696a6137c7a409097495b82c
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"chrome-trace-event@npm:^1.0.2":
|
"chrome-trace-event@npm:^1.0.2":
|
||||||
version: 1.0.3
|
version: 1.0.3
|
||||||
resolution: "chrome-trace-event@npm:1.0.3"
|
resolution: "chrome-trace-event@npm:1.0.3"
|
||||||
|
@ -14645,18 +14650,18 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"glob@npm:^10.2.2, glob@npm:^10.3.10":
|
"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7":
|
||||||
version: 10.3.10
|
version: 10.3.12
|
||||||
resolution: "glob@npm:10.3.10"
|
resolution: "glob@npm:10.3.12"
|
||||||
dependencies:
|
dependencies:
|
||||||
foreground-child: "npm:^3.1.0"
|
foreground-child: "npm:^3.1.0"
|
||||||
jackspeak: "npm:^2.3.5"
|
jackspeak: "npm:^2.3.6"
|
||||||
minimatch: "npm:^9.0.1"
|
minimatch: "npm:^9.0.1"
|
||||||
minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
|
minipass: "npm:^7.0.4"
|
||||||
path-scurry: "npm:^1.10.1"
|
path-scurry: "npm:^1.10.2"
|
||||||
bin:
|
bin:
|
||||||
glob: dist/esm/bin.mjs
|
glob: dist/esm/bin.mjs
|
||||||
checksum: 38bdb2c9ce75eb5ed168f309d4ed05b0798f640b637034800a6bf306f39d35409bf278b0eaaffaec07591085d3acb7184a201eae791468f0f617771c2486a6a8
|
checksum: 9e8186abc22dc824b5dd86cefd8e6b5621a72d1be7f68bacc0fd681e8c162ec5546660a6ec0553d6a74757a585e655956c7f8f1a6d24570e8d865c307323d178
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
@ -16275,7 +16280,7 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"jackspeak@npm:^2.3.5":
|
"jackspeak@npm:^2.3.6":
|
||||||
version: 2.3.6
|
version: 2.3.6
|
||||||
resolution: "jackspeak@npm:2.3.6"
|
resolution: "jackspeak@npm:2.3.6"
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -17721,10 +17726,10 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
|
"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
|
||||||
version: 10.1.0
|
version: 10.2.0
|
||||||
resolution: "lru-cache@npm:10.1.0"
|
resolution: "lru-cache@npm:10.2.0"
|
||||||
checksum: 207278d6fa711fb1f94a0835d4d4737441d2475302482a14785b10515e4c906a57ebf9f35bf060740c9560e91c7c1ad5a04fd7ed030972a9ba18bce2a228e95b
|
checksum: 502ec42c3309c0eae1ce41afca471f831c278566d45a5273a0c51102dee31e0e250a62fa9029c3370988df33a14188a38e682c16143b794de78668de3643e302
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
@ -19117,7 +19122,7 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"minipass@npm:^4.0.0, minipass@npm:^4.2.4":
|
"minipass@npm:^4.2.4":
|
||||||
version: 4.2.8
|
version: 4.2.8
|
||||||
resolution: "minipass@npm:4.2.8"
|
resolution: "minipass@npm:4.2.8"
|
||||||
checksum: e148eb6dcb85c980234cad889139ef8ddf9d5bdac534f4f0268446c8792dd4c74f4502479be48de3c1cce2f6450f6da4d0d4a86405a8a12be04c1c36b339569a
|
checksum: e148eb6dcb85c980234cad889139ef8ddf9d5bdac534f4f0268446c8792dd4c74f4502479be48de3c1cce2f6450f6da4d0d4a86405a8a12be04c1c36b339569a
|
||||||
|
@ -19131,7 +19136,7 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3":
|
"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4":
|
||||||
version: 7.0.4
|
version: 7.0.4
|
||||||
resolution: "minipass@npm:7.0.4"
|
resolution: "minipass@npm:7.0.4"
|
||||||
checksum: e864bd02ceb5e0707696d58f7ce3a0b89233f0d686ef0d447a66db705c0846a8dc6f34865cd85256c1472ff623665f616b90b8ff58058b2ad996c5de747d2d18
|
checksum: e864bd02ceb5e0707696d58f7ce3a0b89233f0d686ef0d447a66db705c0846a8dc6f34865cd85256c1472ff623665f616b90b8ff58058b2ad996c5de747d2d18
|
||||||
|
@ -19148,6 +19153,16 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"minizlib@npm:^3.0.1":
|
||||||
|
version: 3.0.1
|
||||||
|
resolution: "minizlib@npm:3.0.1"
|
||||||
|
dependencies:
|
||||||
|
minipass: "npm:^7.0.4"
|
||||||
|
rimraf: "npm:^5.0.5"
|
||||||
|
checksum: 622cb85f51e5c206a080a62d20db0d7b4066f308cb6ce82a9644da112367c3416ae7062017e631eb7ac8588191cfa4a9a279b8651c399265202b298e98c4acef
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3":
|
"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3":
|
||||||
version: 0.5.3
|
version: 0.5.3
|
||||||
resolution: "mkdirp-classic@npm:0.5.3"
|
resolution: "mkdirp-classic@npm:0.5.3"
|
||||||
|
@ -19164,6 +19179,15 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"mkdirp@npm:^3.0.1":
|
||||||
|
version: 3.0.1
|
||||||
|
resolution: "mkdirp@npm:3.0.1"
|
||||||
|
bin:
|
||||||
|
mkdirp: dist/cjs/src/bin.js
|
||||||
|
checksum: 16fd79c28645759505914561e249b9a1f5fe3362279ad95487a4501e4467abeb714fd35b95307326b8fd03f3c7719065ef11a6f97b7285d7888306d1bd2232ba
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"mlly@npm:^1.1.0, mlly@npm:^1.2.0":
|
"mlly@npm:^1.1.0, mlly@npm:^1.2.0":
|
||||||
version: 1.5.0
|
version: 1.5.0
|
||||||
resolution: "mlly@npm:1.5.0"
|
resolution: "mlly@npm:1.5.0"
|
||||||
|
@ -20327,13 +20351,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"path-scurry@npm:^1.10.1, path-scurry@npm:^1.6.1":
|
"path-scurry@npm:^1.10.2, path-scurry@npm:^1.6.1":
|
||||||
version: 1.10.1
|
version: 1.10.2
|
||||||
resolution: "path-scurry@npm:1.10.1"
|
resolution: "path-scurry@npm:1.10.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
lru-cache: "npm:^9.1.1 || ^10.0.0"
|
lru-cache: "npm:^10.2.0"
|
||||||
minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
|
minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
|
||||||
checksum: eebfb8304fef1d4f7e1486df987e4fd77413de4fce16508dea69fcf8eb318c09a6b15a7a2f4c22877cec1cb7ecbd3071d18ca9de79eeece0df874a00f1f0bdc8
|
checksum: a2bbbe8dc284c49dd9be78ca25f3a8b89300e0acc24a77e6c74824d353ef50efbf163e64a69f4330b301afca42d0e2229be0560d6d616ac4e99d48b4062016b1
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
@ -22045,6 +22069,17 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"rimraf@npm:^5.0.5":
|
||||||
|
version: 5.0.5
|
||||||
|
resolution: "rimraf@npm:5.0.5"
|
||||||
|
dependencies:
|
||||||
|
glob: "npm:^10.3.7"
|
||||||
|
bin:
|
||||||
|
rimraf: dist/esm/bin.mjs
|
||||||
|
checksum: a612c7184f96258b7d1328c486b12ca7b60aa30e04229a08bbfa7e964486deb1e9a1b52d917809311bdc39a808a4055c0f950c0280fba194ba0a09e6f0d404f6
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"rollup-plugin-inject@npm:^3.0.0":
|
"rollup-plugin-inject@npm:^3.0.0":
|
||||||
version: 3.0.2
|
version: 3.0.2
|
||||||
resolution: "rollup-plugin-inject@npm:3.0.2"
|
resolution: "rollup-plugin-inject@npm:3.0.2"
|
||||||
|
@ -23378,7 +23413,7 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"tar@npm:^6.0.2, tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0":
|
"tar@npm:^6.0.2, tar@npm:^6.1.11, tar@npm:^6.1.2":
|
||||||
version: 6.2.1
|
version: 6.2.1
|
||||||
resolution: "tar@npm:6.2.1"
|
resolution: "tar@npm:6.2.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -23392,6 +23427,20 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"tar@npm:^7.0.1":
|
||||||
|
version: 7.0.1
|
||||||
|
resolution: "tar@npm:7.0.1"
|
||||||
|
dependencies:
|
||||||
|
"@isaacs/fs-minipass": "npm:^4.0.0"
|
||||||
|
chownr: "npm:^3.0.0"
|
||||||
|
minipass: "npm:^5.0.0"
|
||||||
|
minizlib: "npm:^3.0.1"
|
||||||
|
mkdirp: "npm:^3.0.1"
|
||||||
|
yallist: "npm:^5.0.0"
|
||||||
|
checksum: 6fd89ef8051d12975f66a2f3932a80479bdc6c9f3bcdf04b8b57784e942ed860708ccecf79bcbb30659b14ab52eef2095d2c3af377545ff9df30de28036671dc
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"terminal-link@npm:^2.1.1":
|
"terminal-link@npm:^2.1.1":
|
||||||
version: 2.1.1
|
version: 2.1.1
|
||||||
resolution: "terminal-link@npm:2.1.1"
|
resolution: "terminal-link@npm:2.1.1"
|
||||||
|
@ -24964,8 +25013,8 @@ __metadata:
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"vite@npm:^5.0.0":
|
"vite@npm:^5.0.0":
|
||||||
version: 5.2.8
|
version: 5.2.9
|
||||||
resolution: "vite@npm:5.2.8"
|
resolution: "vite@npm:5.2.9"
|
||||||
dependencies:
|
dependencies:
|
||||||
esbuild: "npm:^0.20.1"
|
esbuild: "npm:^0.20.1"
|
||||||
fsevents: "npm:~2.3.3"
|
fsevents: "npm:~2.3.3"
|
||||||
|
@ -24999,7 +25048,7 @@ __metadata:
|
||||||
optional: true
|
optional: true
|
||||||
bin:
|
bin:
|
||||||
vite: bin/vite.js
|
vite: bin/vite.js
|
||||||
checksum: caa40343c2c4e6d8e257fccb4c3029f62909c319a86063ce727ed550925c0a834460b0d1ca20c4d6c915f35302aa1052f6ec5193099a47ce21d74b9b817e69e1
|
checksum: 26342c8dde540e4161fdad2c9c8f2f0e23567f051c7a40abb8e4796d6c4292fbd118ab7a4ac252515e78c4f99525b557731e6117287b2bccde0ea61d73bcff27
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
@ -25666,6 +25715,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"yallist@npm:^5.0.0":
|
||||||
|
version: 5.0.0
|
||||||
|
resolution: "yallist@npm:5.0.0"
|
||||||
|
checksum: 1884d272d485845ad04759a255c71775db0fac56308764b4c77ea56a20d56679fad340213054c8c9c9c26fcfd4c4b2a90df993b7e0aaf3cdb73c618d1d1a802a
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"yaml@npm:2.3.4, yaml@npm:^2.0.0, yaml@npm:^2.2.1, yaml@npm:^2.2.2, yaml@npm:^2.3.4":
|
"yaml@npm:2.3.4, yaml@npm:^2.0.0, yaml@npm:^2.2.1, yaml@npm:^2.2.2, yaml@npm:^2.3.4":
|
||||||
version: 2.3.4
|
version: 2.3.4
|
||||||
resolution: "yaml@npm:2.3.4"
|
resolution: "yaml@npm:2.3.4"
|
||||||
|
|
Ładowanie…
Reference in New Issue