2023-06-03 08:27:44 +00:00
|
|
|
import { T } from '@tldraw/validate'
|
2024-04-16 11:13:54 +00:00
|
|
|
import {
|
|
|
|
RETIRED_DOWN_MIGRATION,
|
|
|
|
createShapePropsMigrationIds,
|
|
|
|
createShapePropsMigrationSequence,
|
|
|
|
} from '../records/TLShape'
|
2023-06-16 10:33:47 +00:00
|
|
|
import { StyleProp } from '../styles/StyleProp'
|
|
|
|
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
|
|
|
|
import { DefaultDashStyle } from '../styles/TLDashStyle'
|
|
|
|
import { DefaultFillStyle } from '../styles/TLFillStyle'
|
|
|
|
import { DefaultFontStyle } from '../styles/TLFontStyle'
|
|
|
|
import {
|
|
|
|
DefaultHorizontalAlignStyle,
|
|
|
|
TLDefaultHorizontalAlignStyle,
|
|
|
|
} from '../styles/TLHorizontalAlignStyle'
|
|
|
|
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
|
|
|
|
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle'
|
|
|
|
import { ShapePropsType, TLBaseShape } from './TLBaseShape'
|
2023-04-25 11:01:25 +00:00
|
|
|
|
|
|
|
/** @public */
|
2023-06-16 10:33:47 +00:00
|
|
|
export const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {
|
|
|
|
defaultValue: 'rectangle',
|
|
|
|
values: [
|
2023-07-07 15:32:08 +00:00
|
|
|
'cloud',
|
2023-06-16 10:33:47 +00:00
|
|
|
'rectangle',
|
|
|
|
'ellipse',
|
|
|
|
'triangle',
|
|
|
|
'diamond',
|
|
|
|
'pentagon',
|
|
|
|
'hexagon',
|
|
|
|
'octagon',
|
|
|
|
'star',
|
|
|
|
'rhombus',
|
|
|
|
'rhombus-2',
|
|
|
|
'oval',
|
|
|
|
'trapezoid',
|
|
|
|
'arrow-right',
|
|
|
|
'arrow-left',
|
|
|
|
'arrow-up',
|
|
|
|
'arrow-down',
|
|
|
|
'x-box',
|
|
|
|
'check-box',
|
|
|
|
],
|
|
|
|
})
|
2023-04-25 11:01:25 +00:00
|
|
|
|
|
|
|
/** @public */
|
2023-06-16 10:33:47 +00:00
|
|
|
export type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-06-16 10:33:47 +00:00
|
|
|
/** @public */
|
|
|
|
export const geoShapeProps = {
|
|
|
|
geo: GeoShapeGeoStyle,
|
|
|
|
labelColor: DefaultLabelColorStyle,
|
|
|
|
color: DefaultColorStyle,
|
|
|
|
fill: DefaultFillStyle,
|
|
|
|
dash: DefaultDashStyle,
|
|
|
|
size: DefaultSizeStyle,
|
|
|
|
font: DefaultFontStyle,
|
|
|
|
align: DefaultHorizontalAlignStyle,
|
|
|
|
verticalAlign: DefaultVerticalAlignStyle,
|
2024-01-09 10:49:57 +00:00
|
|
|
url: T.linkUrl,
|
2023-06-12 14:04:14 +00:00
|
|
|
w: T.nonZeroNumber,
|
|
|
|
h: T.nonZeroNumber,
|
|
|
|
growY: T.positiveNumber,
|
|
|
|
text: T.string,
|
|
|
|
}
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2023-06-16 10:33:47 +00:00
|
|
|
/** @public */
|
|
|
|
export type TLGeoShapeProps = ShapePropsType<typeof geoShapeProps>
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>
|
|
|
|
|
2024-04-16 11:13:54 +00:00
|
|
|
const geoShapeVersions = createShapePropsMigrationIds('geo', {
|
2023-04-25 11:01:25 +00:00
|
|
|
AddUrlProp: 1,
|
|
|
|
AddLabelColor: 2,
|
|
|
|
RemoveJustify: 3,
|
2023-05-09 13:32:04 +00:00
|
|
|
AddCheckBox: 4,
|
2023-05-19 10:23:43 +00:00
|
|
|
AddVerticalAlign: 5,
|
2023-05-24 11:34:13 +00:00
|
|
|
MigrateLegacyAlign: 6,
|
2023-07-07 15:32:08 +00:00
|
|
|
AddCloud: 7,
|
2024-01-09 10:49:57 +00:00
|
|
|
MakeUrlsValid: 8,
|
2024-04-16 11:13:54 +00:00
|
|
|
})
|
2023-04-25 11:01:25 +00:00
|
|
|
|
2024-04-16 11:13:54 +00:00
|
|
|
export { geoShapeVersions as geoShapeVersions }
|
2023-07-07 15:32:08 +00:00
|
|
|
|
2023-06-03 20:46:53 +00:00
|
|
|
/** @internal */
|
2024-04-16 11:13:54 +00:00
|
|
|
export const geoShapeMigrations = createShapePropsMigrationSequence({
|
|
|
|
sequence: [
|
|
|
|
{
|
|
|
|
id: geoShapeVersions.AddUrlProp,
|
|
|
|
up: (props) => {
|
|
|
|
props.url = ''
|
2023-04-25 11:01:25 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-04-25 11:01:25 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.AddLabelColor,
|
|
|
|
up: (props) => {
|
|
|
|
props.labelColor = 'black'
|
2023-04-25 11:01:25 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-04-25 11:01:25 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.RemoveJustify,
|
|
|
|
up: (props) => {
|
|
|
|
if (props.align === 'justify') {
|
|
|
|
props.align = 'start'
|
2023-04-25 11:01:25 +00:00
|
|
|
}
|
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-04-25 11:01:25 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.AddCheckBox,
|
|
|
|
up: (_props) => {
|
|
|
|
// noop
|
2023-05-09 13:32:04 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-05-09 13:32:04 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.AddVerticalAlign,
|
|
|
|
up: (props) => {
|
|
|
|
props.verticalAlign = 'middle'
|
2023-05-19 10:23:43 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-05-19 10:23:43 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.MigrateLegacyAlign,
|
|
|
|
up: (props) => {
|
2023-06-16 10:33:47 +00:00
|
|
|
let newAlign: TLDefaultHorizontalAlignStyle
|
2024-04-16 11:13:54 +00:00
|
|
|
switch (props.align) {
|
2023-05-24 11:34:13 +00:00
|
|
|
case 'start':
|
2023-06-16 10:33:47 +00:00
|
|
|
newAlign = 'start-legacy'
|
2023-05-24 11:34:13 +00:00
|
|
|
break
|
|
|
|
case 'end':
|
2023-06-16 10:33:47 +00:00
|
|
|
newAlign = 'end-legacy'
|
2023-05-24 11:34:13 +00:00
|
|
|
break
|
|
|
|
default:
|
2023-06-16 10:33:47 +00:00
|
|
|
newAlign = 'middle-legacy'
|
2023-05-24 11:34:13 +00:00
|
|
|
break
|
|
|
|
}
|
2024-04-16 11:13:54 +00:00
|
|
|
props.align = newAlign
|
2023-07-07 15:32:08 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2023-07-07 15:32:08 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.AddCloud,
|
|
|
|
up: (_props) => {
|
|
|
|
// noop
|
2024-01-09 10:49:57 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: RETIRED_DOWN_MIGRATION,
|
2024-04-16 10:18:42 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
{
|
|
|
|
id: geoShapeVersions.MakeUrlsValid,
|
|
|
|
up: (props) => {
|
|
|
|
if (!T.linkUrl.isValid(props.url)) {
|
|
|
|
props.url = ''
|
2024-04-16 10:18:42 +00:00
|
|
|
}
|
2024-04-15 12:53:42 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
down: (_props) => {
|
|
|
|
// noop
|
|
|
|
},
|
2024-01-09 10:49:57 +00:00
|
|
|
},
|
2024-04-16 11:13:54 +00:00
|
|
|
],
|
2023-04-25 11:01:25 +00:00
|
|
|
})
|