MasterGo 开发者平台

NodeStyle

NodeStyle 

interface NodeStyle {
  id: `style-${NodeId}`
  type: NodeStyleType
  disable?: boolean
}

基础元素样式。 disable: 是否禁用，默认false。

NodeStyleType 

type NodeStyleType =
| 'VIEW'
| 'SVG'
| 'IMAGE'
| 'TEXT'
| 'INPUT'
| 'BUTTON'
| 'SCROLLVIEW'

节点转成的组件类型。

interface CssNodeStyle extends NodeStyle {
  name: string
  value: StyleSet
  layoutStyles: StyleSet
  attributes: Record<string, AttributeItem>
  inlineStyles?: StyleSet
  dynamicInlineStyles?: {
    [key in keyof StyleSet]: string
  }
  textStyles?: TextSegStyle[]
  classList?: ClassId[]
  tag?: 'IMG' | 'DIV' | 'TEXT' | 'BUTTON' | 'INPUT' | 'SLOT' | 'SVG' | 'OPTION'
  subSelectors?: Array<ClassStyle>
}
  • name: css类名。
  • value: 不包含 布局样式 css的样式map，key为kebab形式，详见CSS。
  • layoutStyles: 布局样式。属性包括
    |'position'
|'flex-grow'
|'align-self'
|'flex-shrink'
|'top'
|'left'
|'bottom'
|'right'
|'width'
|'height'
|'transform'
|'transform-origin'
|'margin-left'
|'margin-top'
|'max-height'
|'max-width'
|'min-width'
|'min-height'
  • attributes: html标签上的属性映射表，例如disable, value或一些框架的特殊语法，例如Vue的v-for, @click动态属性, React的一些绑定事件onClick这些。
  • inlineStyles: 行内样式的cssmap，具体见InlineStyle。
  • dynamicInlineStyles: 动态绑定样式，类似于Vue的:style, React的style=。
  • textStyles: 当文字有多段样式的时候,会被解析成多个文字标签,详见TextSegStyle。
  • tag: 节点会被转换成的dom标签类型。
  • subSelectors: 子选择器。
type TextSegStyle = {
  start: number
  end: number
  textStyleId: string
  textStyle: StyleSet
}

文字分段样式，区间左闭右开。 start: 文字的起始下标。 end: 文字的终止下标。

ClassStyle 

interface ClassStyle {
  id: ClassId
  name: string
  scoped: boolean
  value: StyleSet
  pseudo?: 'HOVER' | 'ACTIVE' | 'FOCUS' | 'DISABLED'
  type: 'group' | 'class' | 'pseudo' | 'id' | 'attribute' | 'combinators'
}

结构化css选择器样式,主要存在于全局样式或者节点样式的子选择器中。

  • id: 样式id。
  • name: 选择器名称。
  • scoped: css是否仅作用在当前文件，防止css污染，默认为true。
  • value: css样式的map,key为kebab形式，详见CSS。
  • pseudo: 伪类类型，详见pseudo。
  • type: 选择器类型，详见Selectors。

AttributeItem 

interface AttributeItem {
  type: Attribute
  name: string
  value: string
  valueType: 'STRING' | 'NUMBER' | 'BOOLEAN' | 'FUNCTION' | 'OBJECT' | 'ARRAY' | 'SLOT'
  valueSource?: 'PROPS' | 'METHODS' | 'DATA'
  defaultValue?: string | number | boolean
  expression?: string
  arguments?: string[]
}
type Attribute = 'STATIC' | 'DYNAMIC' | 'METHOD' | 'UNBIND'

dom标签上的属性。

  • type: 属性类型。

    • STATIC: 静态属性。
    • DYNAMIC: 动态属性。
    • METHOD: 方法属性。
    • UNBIND: 定义但没有使用的属性类型, 会在MGDSLFile中定义，但不会使用。

  • name: 属性名。

  • value: 属性值或者对应的方法名称。

  • valueType: 属性类型。

    • SLOT: 插槽形式，在Vue中对应是slot,在React中对应是传给组件的element的props属性。

  • valueSource: 属性来源，可以在该节点归属的MGDSLFile的对应数据中找到。 PROP: 在MGDSLFile的props中。 METHOD: 在MGDSLFile的methods中。 DATA: 在MGDSLFile的data中。

  • defaultValue: 默认值。

  • expression: 如果该属性是METHOD, 则expression是方法的内容。

  • arguments: 如果该属性是METHOD, 则arguments是方法的传参。