kopia lustrzana https://github.com/Tldraw/Tldraw
294 wiersze
8.0 KiB
TypeScript
294 wiersze
8.0 KiB
TypeScript
import { EASINGS } from '@tldraw/primitives'
|
|
import { TLAlignType, TLFontType, TLSizeType, TLStyleCollections } from '@tldraw/tlschema'
|
|
|
|
/** @internal */
|
|
export const MAX_SHAPES_PER_PAGE = 2000
|
|
/** @internal */
|
|
export const MAX_PAGES = 40
|
|
|
|
/** @internal */
|
|
export const REMOVE_SYMBOL = Symbol('remove')
|
|
|
|
/** @internal */
|
|
export const RICH_TYPES: Record<string, boolean> = {
|
|
Date: true,
|
|
RegExp: true,
|
|
String: true,
|
|
Number: true,
|
|
}
|
|
|
|
/** @internal */
|
|
export const ANIMATION_SHORT_MS = 80
|
|
/** @internal */
|
|
export const ANIMATION_MEDIUM_MS = 320
|
|
|
|
/** @internal */
|
|
export const ZOOMS = [0.1, 0.25, 0.5, 1, 2, 4, 8]
|
|
/** @internal */
|
|
export const MIN_ZOOM = 0.1
|
|
/** @internal */
|
|
export const MAX_ZOOM = 8
|
|
|
|
/** @internal */
|
|
export const FOLLOW_CHASE_PROPORTION = 0.5
|
|
/** @internal */
|
|
export const FOLLOW_CHASE_PAN_SNAP = 0.1
|
|
/** @internal */
|
|
export const FOLLOW_CHASE_PAN_UNSNAP = 0.2
|
|
/** @internal */
|
|
export const FOLLOW_CHASE_ZOOM_SNAP = 0.005
|
|
/** @internal */
|
|
export const FOLLOW_CHASE_ZOOM_UNSNAP = 0.05
|
|
|
|
/** @internal */
|
|
export const MAJOR_NUDGE_FACTOR = 10
|
|
/** @internal */
|
|
export const MINOR_NUDGE_FACTOR = 1
|
|
|
|
/** @internal */
|
|
export const MAX_ASSET_WIDTH = 1000
|
|
/** @internal */
|
|
export const MAX_ASSET_HEIGHT = 1000
|
|
|
|
/** @internal */
|
|
export const GRID_INCREMENT = 5
|
|
|
|
/** @internal */
|
|
export const MIN_CROP_SIZE = 8
|
|
|
|
/** @internal */
|
|
export const DOUBLE_CLICK_DURATION = 450
|
|
/** @internal */
|
|
export const MULTI_CLICK_DURATION = 200
|
|
|
|
/** @internal */
|
|
export const COARSE_DRAG_DISTANCE = 6
|
|
|
|
/** @internal */
|
|
export const DRAG_DISTANCE = 4
|
|
|
|
/** @internal */
|
|
export const SVG_PADDING = 32
|
|
|
|
/** @internal */
|
|
export const HASH_PATERN_ZOOM_NAMES: Record<string, string> = {}
|
|
|
|
for (let zoom = 1; zoom <= Math.ceil(MAX_ZOOM); zoom++) {
|
|
HASH_PATERN_ZOOM_NAMES[zoom + '_dark'] = `hash_pattern_zoom_${zoom}_dark`
|
|
HASH_PATERN_ZOOM_NAMES[zoom + '_light'] = `hash_pattern_zoom_${zoom}_light`
|
|
}
|
|
|
|
/** @internal */
|
|
export const DEFAULT_ANIMATION_OPTIONS = {
|
|
duration: 0,
|
|
easing: EASINGS.easeInOutCubic,
|
|
}
|
|
|
|
/** @internal */
|
|
export const HAND_TOOL_FRICTION = 0.09
|
|
|
|
/** @internal */
|
|
export const MIN_ARROW_LENGTH = 48
|
|
/** @internal */
|
|
export const BOUND_ARROW_OFFSET = 10
|
|
/** @internal */
|
|
export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10
|
|
|
|
/** @internal */
|
|
export const DEFAULT_BOOKMARK_WIDTH = 300
|
|
|
|
/** @internal */
|
|
export const DEFAULT_BOOKMARK_HEIGHT = 320
|
|
|
|
/** @public */
|
|
export const ROTATING_SHADOWS = [
|
|
{
|
|
offsetX: 0,
|
|
offsetY: 2,
|
|
blur: 4,
|
|
spread: 0,
|
|
color: '#00000029',
|
|
},
|
|
{
|
|
offsetX: 0,
|
|
offsetY: 3,
|
|
blur: 6,
|
|
spread: 0,
|
|
color: '#0000001f',
|
|
},
|
|
]
|
|
|
|
/** @public */
|
|
export const GRID_STEPS = [
|
|
{ min: -1, mid: 0.15, step: 100 },
|
|
{ min: 0.05, mid: 0.375, step: 25 },
|
|
{ min: 0.15, mid: 1, step: 5 },
|
|
{ min: 0.7, mid: 2.5, step: 1 },
|
|
]
|
|
|
|
/** @public */
|
|
export const TEXT_PROPS = {
|
|
lineHeight: 1.35,
|
|
fontWeight: 'normal',
|
|
fontVariant: 'normal',
|
|
fontStyle: 'normal',
|
|
padding: '0px',
|
|
maxWidth: 'auto',
|
|
}
|
|
|
|
/** @public */
|
|
export const FONT_SIZES: Record<TLSizeType, number> = {
|
|
s: 18,
|
|
m: 24,
|
|
l: 36,
|
|
xl: 44,
|
|
}
|
|
|
|
/** @public */
|
|
export const LABEL_FONT_SIZES: Record<TLSizeType, number> = {
|
|
s: 18,
|
|
m: 22,
|
|
l: 26,
|
|
xl: 32,
|
|
}
|
|
|
|
/** @public */
|
|
export const ARROW_LABEL_FONT_SIZES: Record<TLSizeType, number> = {
|
|
s: 18,
|
|
m: 20,
|
|
l: 24,
|
|
xl: 28,
|
|
}
|
|
|
|
/** @public */
|
|
export const ICON_SIZES: Record<TLSizeType, number> = {
|
|
s: 16,
|
|
m: 32,
|
|
l: 48,
|
|
xl: 64,
|
|
}
|
|
|
|
/** @public */
|
|
export const FONT_FAMILIES: Record<TLFontType, string> = {
|
|
draw: 'var(--tl-font-draw)',
|
|
sans: 'var(--tl-font-sans)',
|
|
serif: 'var(--tl-font-serif)',
|
|
mono: 'var(--tl-font-mono)',
|
|
}
|
|
|
|
/** @public */
|
|
export const FONT_ALIGNMENT: Record<TLAlignType, string> = {
|
|
middle: 'center',
|
|
start: 'left',
|
|
end: 'right',
|
|
}
|
|
|
|
/** @public */
|
|
export const STYLES: TLStyleCollections = {
|
|
color: [
|
|
{ id: 'black', type: 'color', icon: 'color' },
|
|
{ id: 'grey', type: 'color', icon: 'color' },
|
|
{ id: 'light-violet', type: 'color', icon: 'color' },
|
|
{ id: 'violet', type: 'color', icon: 'color' },
|
|
{ id: 'blue', type: 'color', icon: 'color' },
|
|
{ id: 'light-blue', type: 'color', icon: 'color' },
|
|
{ id: 'yellow', type: 'color', icon: 'color' },
|
|
{ id: 'orange', type: 'color', icon: 'color' },
|
|
{ id: 'green', type: 'color', icon: 'color' },
|
|
{ id: 'light-green', type: 'color', icon: 'color' },
|
|
{ id: 'light-red', type: 'color', icon: 'color' },
|
|
{ id: 'red', type: 'color', icon: 'color' },
|
|
],
|
|
fill: [
|
|
{ id: 'none', type: 'fill', icon: 'fill-none' },
|
|
{ id: 'semi', type: 'fill', icon: 'fill-semi' },
|
|
{ id: 'solid', type: 'fill', icon: 'fill-solid' },
|
|
{ id: 'pattern', type: 'fill', icon: 'fill-pattern' },
|
|
],
|
|
dash: [
|
|
{ id: 'draw', type: 'dash', icon: 'dash-draw' },
|
|
{ id: 'dashed', type: 'dash', icon: 'dash-dashed' },
|
|
{ id: 'dotted', type: 'dash', icon: 'dash-dotted' },
|
|
{ id: 'solid', type: 'dash', icon: 'dash-solid' },
|
|
],
|
|
size: [
|
|
{ id: 's', type: 'size', icon: 'size-small' },
|
|
{ id: 'm', type: 'size', icon: 'size-medium' },
|
|
{ id: 'l', type: 'size', icon: 'size-large' },
|
|
{ id: 'xl', type: 'size', icon: 'size-extra-large' },
|
|
],
|
|
font: [
|
|
{ id: 'draw', type: 'font', icon: 'font-draw' },
|
|
{ id: 'sans', type: 'font', icon: 'font-sans' },
|
|
{ id: 'serif', type: 'font', icon: 'font-serif' },
|
|
{ id: 'mono', type: 'font', icon: 'font-mono' },
|
|
],
|
|
align: [
|
|
{ id: 'start', type: 'align', icon: 'text-align-left' },
|
|
{ id: 'middle', type: 'align', icon: 'text-align-center' },
|
|
{ id: 'end', type: 'align', icon: 'text-align-right' },
|
|
],
|
|
verticalAlign: [
|
|
{ id: 'start', type: 'verticalAlign', icon: 'vertical-align-start' },
|
|
{ id: 'middle', type: 'verticalAlign', icon: 'vertical-align-center' },
|
|
{ id: 'end', type: 'verticalAlign', icon: 'vertical-align-end' },
|
|
],
|
|
geo: [
|
|
{ id: 'rectangle', type: 'geo', icon: 'geo-rectangle' },
|
|
{ id: 'ellipse', type: 'geo', icon: 'geo-ellipse' },
|
|
{ id: 'triangle', type: 'geo', icon: 'geo-triangle' },
|
|
{ id: 'diamond', type: 'geo', icon: 'geo-diamond' },
|
|
{ id: 'pentagon', type: 'geo', icon: 'geo-pentagon' },
|
|
{ id: 'hexagon', type: 'geo', icon: 'geo-hexagon' },
|
|
{ id: 'octagon', type: 'geo', icon: 'geo-octagon' },
|
|
{ id: 'star', type: 'geo', icon: 'geo-star' },
|
|
{ id: 'rhombus', type: 'geo', icon: 'geo-rhombus' },
|
|
{ id: 'rhombus-2', type: 'geo', icon: 'geo-rhombus-2' },
|
|
{ id: 'oval', type: 'geo', icon: 'geo-oval' },
|
|
{ id: 'trapezoid', type: 'geo', icon: 'geo-trapezoid' },
|
|
{ id: 'arrow-right', type: 'geo', icon: 'geo-arrow-right' },
|
|
{ id: 'arrow-left', type: 'geo', icon: 'geo-arrow-left' },
|
|
{ id: 'arrow-up', type: 'geo', icon: 'geo-arrow-up' },
|
|
{ id: 'arrow-down', type: 'geo', icon: 'geo-arrow-down' },
|
|
{ id: 'x-box', type: 'geo', icon: 'geo-x-box' },
|
|
{ id: 'check-box', type: 'geo', icon: 'geo-check-box' },
|
|
],
|
|
arrowheadStart: [
|
|
{ id: 'none', type: 'arrowheadStart', icon: 'arrowhead-none' },
|
|
{ id: 'arrow', type: 'arrowheadStart', icon: 'arrowhead-arrow' },
|
|
{ id: 'triangle', type: 'arrowheadStart', icon: 'arrowhead-triangle' },
|
|
{ id: 'square', type: 'arrowheadStart', icon: 'arrowhead-square' },
|
|
{ id: 'dot', type: 'arrowheadStart', icon: 'arrowhead-dot' },
|
|
{ id: 'diamond', type: 'arrowheadStart', icon: 'arrowhead-diamond' },
|
|
{ id: 'inverted', type: 'arrowheadStart', icon: 'arrowhead-triangle-inverted' },
|
|
{ id: 'bar', type: 'arrowheadStart', icon: 'arrowhead-bar' },
|
|
],
|
|
arrowheadEnd: [
|
|
{ id: 'none', type: 'arrowheadEnd', icon: 'arrowhead-none' },
|
|
{ id: 'arrow', type: 'arrowheadEnd', icon: 'arrowhead-arrow' },
|
|
{ id: 'triangle', type: 'arrowheadEnd', icon: 'arrowhead-triangle' },
|
|
{ id: 'square', type: 'arrowheadEnd', icon: 'arrowhead-square' },
|
|
{ id: 'dot', type: 'arrowheadEnd', icon: 'arrowhead-dot' },
|
|
{ id: 'diamond', type: 'arrowheadEnd', icon: 'arrowhead-diamond' },
|
|
{ id: 'inverted', type: 'arrowheadEnd', icon: 'arrowhead-triangle-inverted' },
|
|
{ id: 'bar', type: 'arrowheadEnd', icon: 'arrowhead-bar' },
|
|
],
|
|
spline: [
|
|
{ id: 'line', type: 'spline', icon: 'spline-line' },
|
|
{ id: 'cubic', type: 'spline', icon: 'spline-cubic' },
|
|
],
|
|
}
|
|
|
|
// These props should not cause Editor.props to update
|
|
export const BLACKLISTED_PROPS = new Set([
|
|
'bend',
|
|
'w',
|
|
'h',
|
|
'start',
|
|
'end',
|
|
'text',
|
|
'name',
|
|
'url',
|
|
'growY',
|
|
])
|