3a736007e5
This diff mostly adds an image annotator example, but also has a couple of drive-by changes: - Added a 'use-cases' category to the examples app for this style of mini-app - Add `editor.pageToViewport`, which is like `editor.pageToScreen` but works with viewport coordinates (better for `InFrontOfTheCanvas` stuff) - Prevent the chrome side-swipe-to-go-back thing in the examples app Some cool features of the image annotator: - The image cannot be unlocked, and cannot have shapes places behind it - I still need to work out a way of removing the context menu though - Anything you place outside the bounds of the image (and therefore outside the bounds of the export) will be greyed out - You can't change pages - unless you find the "move to page" action... need to fix that - The camera is constrained! It'll keep the image roughly centered on the screen. If you pick a very long thin image, you can only scroll vertically. If you pick a very big one, it'll default it to a reasonable size. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [x] `docs` — Changes to the documentation, examples, or templates. <!-- ❗ Please select a 'Type' label ❗️ --> - [x] `feature` — New feature
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { Articles, GeneratedContent, InputSection } from '../../types/content-types'
|
|
import { generateSection } from './generateSection'
|
|
|
|
const { log: nicelog } = console
|
|
|
|
const section: InputSection = {
|
|
id: 'examples',
|
|
title: 'Examples',
|
|
description: 'Code recipes for bending tldraw to your will.',
|
|
categories: [
|
|
{ id: 'basic', title: 'Getting started', description: '', groups: [], hero: null },
|
|
{ id: 'ui', title: 'UI & theming', description: '', groups: [], hero: null },
|
|
{ id: 'shapes/tools', title: 'Shapes & tools', description: '', groups: [], hero: null },
|
|
{ id: 'data/assets', title: 'Data & assets', description: '', groups: [], hero: null },
|
|
{ id: 'editor-api', title: 'Editor API', description: '', groups: [], hero: null },
|
|
{ id: 'collaboration', title: 'Collaboration', description: '', groups: [], hero: null },
|
|
{ id: 'use-cases', title: 'Use cases', description: '', groups: [], hero: null },
|
|
],
|
|
hero: null,
|
|
sidebar_behavior: 'show-links',
|
|
}
|
|
|
|
export async function generateExamplesContent(): Promise<GeneratedContent> {
|
|
const articles: Articles = {}
|
|
|
|
try {
|
|
const outputExamplesSection = generateSection(section, articles, 0)
|
|
const contentComplete = { sections: [outputExamplesSection], articles }
|
|
|
|
return contentComplete
|
|
} catch (error) {
|
|
nicelog(`x Could not generate Examples content`)
|
|
|
|
throw error
|
|
}
|
|
}
|