template-editor-demo

A poster template edit and generation design document and demo.

design document

Region Region

interface Template extends Size {
  contents: TemplateContent[]
}

type TemplateContent = TemplateTextContent | TemplateImageContent

interface TemplateTextContent extends Region {
  kind: 'text'
  text: string
  fontFamily: string
  fontSize: number
  color: string
}

interface TemplateImageContent extends Region {
  kind: 'image'
  url: string
}

interface Position {
  x: number
  y: number
}

interface Size {
  width: number
  height: number
}

interface Region extends Position, Size { }

https://github.com/plantain-00/types-as-schema typescript json schema

web html html

interface GenerationField {
  if?: string
  else?: boolean
  repeat?: string
}

{
  "if": "commodity.prices.length == 1"
}

else true if false

[
  {
    "if": "commodity.prices.length == 1"
  },
  {
    "else": true,
    "if": "commodity.prices.length == 2"
  },
  {
    "else": true
  }
]

commodities
commodity in commodities
(commodity, index) in commodities

https://github.com/plantain-00/expression-engine

{
  "kind": "text",
  "text": "demo text",
  "textExpression": "commodity.name"
}

optional + "Expression"

interface TemplateImageContent extends Region, RegionExpression {
  kind: 'image'
  url: string
  urlExpression?: string
}

web reactjs

interface Template extends Region, SizeExpression {
  id: string
  contents: TemplateContent[]
  parameters?: string[]
}

props.text

{ text: 'test text' }

interface TemplateReferenceContent extends Position, PositionExpression, GenerationField {
  kind: 'reference'
  id: string
  props?: string
}

TemplateReferenceContent Size Size Size

snapshot

interface TemplateSnapshotContent extends Position, PositionExpression {
  kind: 'snapshot'
  snapshot: Template
}

7.0KB

x y low-level css flex flex Template

interface FlexField extends MarginField {
  display?: 'flex'
  flexDirection?: 'row' | 'column'
  justifyContent?: 'start' | 'end' | 'center' | 'between'
  alignItems?: 'start' | 'end' | 'center'
}

interface MarginField {
  marginLeft?: number
  marginRight?: number
  marginTop?: number
  marginBottom?: number
}

Template FlexField x y

mobx vuejs computed

computed

computed UI computed

canvas UI

UI UI computed

hover
mask
UI

19 26.8ms 18.2 ms

z

interface Position {
  x: number
  y: number
  z?: integer
}

canvas z

UI css z-index

z 0

x y z

websocket json patch

2 1 3

variable.foo

interface StyleGuide {
  name: string
  templates: Template[]
  variables?: StyleGuideVariable[]
}

interface StyleGuideVariable {
  name: string
  displayName?: string
  value: unknown
}

interface StyleGuide {
  name: string
  templates: Template[]
  variables?: StyleGuideVariable[]
  collections?: StyleGuideCollection[]
}

type StyleGuideCollection = StyleGuideColor

interface StyleGuideColor {
  kind: 'color'
  color: string
}

StyleGuideCollection[]

variable.textColor !== variable.backgroundColor

interface StyleGuide {
  name: string
  templates: Template[]
  variables?: StyleGuideVariable[]
  collections?: StyleGuideCollection[]
  constrains?: string[]
}

style guide