units-visual.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. /**
  2. * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { Unit, Structure } from 'mol-model/structure';
  7. import { RepresentationProps } from '../representation';
  8. import { Visual, VisualContext } from '../visual';
  9. import { StructureMeshParams, StructurePointsParams, StructureLinesParams, StructureDirectVolumeParams, StructureSpheresParams } from './representation';
  10. import { Loci, isEveryLoci, EmptyLoci } from 'mol-model/loci';
  11. import { GraphicsRenderObject, createRenderObject } from 'mol-gl/render-object';
  12. import { deepEqual, ValueCell } from 'mol-util';
  13. import { Interval } from 'mol-data/int';
  14. import { ParamDefinition as PD } from 'mol-util/param-definition';
  15. import { Geometry, GeometryUtils } from 'mol-geo/geometry/geometry';
  16. import { LocationIterator } from 'mol-geo/util/location-iterator';
  17. import { PickingId } from 'mol-geo/geometry/picking';
  18. import { createMarkers, MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data';
  19. import { createSizes } from 'mol-geo/geometry/size-data';
  20. import { createColors } from 'mol-geo/geometry/color-data';
  21. import { Mesh } from 'mol-geo/geometry/mesh/mesh';
  22. import { Points } from 'mol-geo/geometry/points/points';
  23. import { Lines } from 'mol-geo/geometry/lines/lines';
  24. import { DirectVolume } from 'mol-geo/geometry/direct-volume/direct-volume';
  25. import { VisualUpdateState } from 'mol-repr/util';
  26. import { Theme, createEmptyTheme } from 'mol-theme/theme';
  27. import { ColorTheme } from 'mol-theme/color';
  28. import { SizeTheme } from 'mol-theme/size';
  29. import { UnitsParams } from './units-representation';
  30. import { Mat4 } from 'mol-math/linear-algebra';
  31. import { Spheres } from 'mol-geo/geometry/spheres/spheres';
  32. import { createUnitsTransform, includesUnitKind } from './visual/util/common';
  33. export type StructureGroup = { structure: Structure, group: Unit.SymmetryGroup }
  34. export interface UnitsVisual<P extends RepresentationProps = {}> extends Visual<StructureGroup, P> { }
  35. function createUnitsRenderObject<G extends Geometry>(group: Unit.SymmetryGroup, geometry: G, locationIt: LocationIterator, theme: Theme, props: PD.Values<Geometry.Params<G>>) {
  36. const { createValues, createRenderableState } = Geometry.getUtils(geometry)
  37. const transform = createUnitsTransform(group)
  38. const values = createValues(geometry, transform, locationIt, theme, props)
  39. const state = createRenderableState(props)
  40. return createRenderObject(geometry.kind, values, state)
  41. }
  42. interface UnitsVisualBuilder<P extends UnitsParams, G extends Geometry> {
  43. defaultProps: PD.Values<P>
  44. createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.Values<P>, geometry?: G): Promise<G> | G
  45. createLocationIterator(group: Unit.SymmetryGroup): LocationIterator
  46. getLoci(pickingId: PickingId, structureGroup: StructureGroup, id: number): Loci
  47. mark(loci: Loci, structureGroup: StructureGroup, apply: (interval: Interval) => boolean): boolean
  48. setUpdateState(state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme): void
  49. }
  50. interface UnitsVisualGeometryBuilder<P extends UnitsParams, G extends Geometry> extends UnitsVisualBuilder<P, G> {
  51. geometryUtils: GeometryUtils<G>
  52. }
  53. export function UnitsVisual<G extends Geometry, P extends UnitsParams & Geometry.Params<G>>(builder: UnitsVisualGeometryBuilder<P, G>): UnitsVisual<P> {
  54. const { defaultProps, createGeometry, createLocationIterator, getLoci, mark, setUpdateState } = builder
  55. const { createEmpty: createEmptyGeometry, updateValues, updateBoundingSphere, updateRenderableState } = builder.geometryUtils
  56. const updateState = VisualUpdateState.create()
  57. let renderObject: GraphicsRenderObject | undefined
  58. let newProps: PD.Values<P> = Object.assign({}, defaultProps)
  59. let newTheme: Theme = createEmptyTheme()
  60. let newStructureGroup: StructureGroup
  61. let currentProps: PD.Values<P>
  62. let currentTheme: Theme
  63. let currentStructureGroup: StructureGroup
  64. let geometry: G
  65. let locationIt: LocationIterator
  66. function prepareUpdate(theme: Theme, props: Partial<PD.Values<P>> = {}, structureGroup: StructureGroup) {
  67. if (!structureGroup && !currentStructureGroup) {
  68. throw new Error('missing structureGroup')
  69. }
  70. newProps = Object.assign({}, currentProps, props)
  71. newTheme = theme
  72. newStructureGroup = structureGroup
  73. VisualUpdateState.reset(updateState)
  74. if (!renderObject) {
  75. updateState.createNew = true
  76. } else if (!currentStructureGroup || newStructureGroup.group.hashCode !== currentStructureGroup.group.hashCode) {
  77. updateState.createNew = true
  78. }
  79. if (updateState.createNew) {
  80. updateState.createGeometry = true
  81. return
  82. }
  83. setUpdateState(updateState, newProps, currentProps, theme, currentTheme)
  84. if (!ColorTheme.areEqual(theme.color, currentTheme.color)) {
  85. // console.log('new colorTheme')
  86. updateState.updateColor = true
  87. }
  88. if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) {
  89. // console.log('new unitKinds')
  90. updateState.createGeometry = true
  91. }
  92. if (newStructureGroup.group.transformHash !== currentStructureGroup.group.transformHash) {
  93. // console.log('new transformHash')
  94. if (newStructureGroup.group.units.length !== currentStructureGroup.group.units.length || updateState.updateColor) {
  95. updateState.updateTransform = true
  96. } else {
  97. updateState.updateMatrix = true
  98. }
  99. }
  100. // check if the conformation of unit.model has changed
  101. if (Unit.conformationId(newStructureGroup.group.units[0]) !== Unit.conformationId(currentStructureGroup.group.units[0])) {
  102. // console.log('new conformation')
  103. updateState.createGeometry = true
  104. }
  105. if (updateState.updateTransform) {
  106. updateState.updateColor = true
  107. updateState.updateSize = true
  108. updateState.updateMatrix = true
  109. }
  110. if (updateState.createGeometry) {
  111. updateState.updateColor = true
  112. updateState.updateSize = true
  113. }
  114. }
  115. function update(newGeometry?: G) {
  116. if (updateState.createNew) {
  117. locationIt = createLocationIterator(newStructureGroup.group)
  118. if (newGeometry) {
  119. renderObject = createUnitsRenderObject(newStructureGroup.group, newGeometry, locationIt, newTheme, newProps)
  120. } else {
  121. throw new Error('expected geometry to be given')
  122. }
  123. } else {
  124. if (!renderObject) {
  125. throw new Error('expected renderObject to be available')
  126. }
  127. if (updateState.updateTransform) {
  128. // console.log('update transform')
  129. locationIt = createLocationIterator(newStructureGroup.group)
  130. const { instanceCount, groupCount } = locationIt
  131. createMarkers(instanceCount * groupCount, renderObject.values)
  132. }
  133. if (updateState.updateMatrix) {
  134. // console.log('update matrix')
  135. createUnitsTransform(newStructureGroup.group, renderObject.values)
  136. }
  137. if (updateState.createGeometry) {
  138. // console.log('update geometry')
  139. if (newGeometry) {
  140. ValueCell.update(renderObject.values.drawCount, Geometry.getDrawCount(newGeometry))
  141. } else {
  142. throw new Error('expected geometry to be given')
  143. }
  144. }
  145. if (updateState.updateTransform || updateState.createGeometry) {
  146. // console.log('UnitsVisual.updateBoundingSphere')
  147. updateBoundingSphere(renderObject.values, newGeometry || geometry)
  148. }
  149. if (updateState.updateSize) {
  150. // not all geometries have size data, so check here
  151. if ('uSize' in renderObject.values) {
  152. // console.log('update size')
  153. createSizes(locationIt, newTheme.size, renderObject.values)
  154. }
  155. }
  156. if (updateState.updateColor) {
  157. // console.log('update color')
  158. createColors(locationIt, newTheme.color, renderObject.values)
  159. }
  160. updateValues(renderObject.values, newProps)
  161. updateRenderableState(renderObject.state, newProps)
  162. }
  163. currentProps = newProps
  164. currentTheme = newTheme
  165. currentStructureGroup = newStructureGroup
  166. if (newGeometry) geometry = newGeometry
  167. }
  168. function _createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.Values<P>, geometry?: G) {
  169. return includesUnitKind(props.unitKinds, unit)
  170. ? createGeometry(ctx, unit, structure, theme, props, geometry)
  171. : createEmptyGeometry(geometry)
  172. }
  173. return {
  174. get groupCount() { return locationIt ? locationIt.count : 0 },
  175. get renderObject () { return locationIt && locationIt.count ? renderObject : undefined },
  176. createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.Values<P>> = {}, structureGroup?: StructureGroup) {
  177. prepareUpdate(theme, props, structureGroup || currentStructureGroup)
  178. if (updateState.createGeometry) {
  179. const newGeometry = _createGeometry(ctx, newStructureGroup.group.units[0], newStructureGroup.structure, newTheme, newProps, geometry)
  180. return newGeometry instanceof Promise ? newGeometry.then(update) : update(newGeometry as G)
  181. } else {
  182. update()
  183. }
  184. },
  185. getLoci(pickingId: PickingId) {
  186. return renderObject ? getLoci(pickingId, currentStructureGroup, renderObject.id) : EmptyLoci
  187. },
  188. mark(loci: Loci, action: MarkerAction) {
  189. if (!renderObject) return false
  190. const { tMarker } = renderObject.values
  191. const { groupCount, instanceCount } = locationIt
  192. function apply(interval: Interval) {
  193. const start = Interval.start(interval)
  194. const end = Interval.end(interval)
  195. return applyMarkerAction(tMarker.ref.value.array, start, end, action)
  196. }
  197. let changed = false
  198. if (isEveryLoci(loci) || (Structure.isLoci(loci) && loci.structure === currentStructureGroup.structure)) {
  199. changed = apply(Interval.ofBounds(0, groupCount * instanceCount))
  200. } else {
  201. changed = mark(loci, currentStructureGroup, apply)
  202. }
  203. if (changed) {
  204. ValueCell.update(tMarker, tMarker.ref.value)
  205. }
  206. return changed
  207. },
  208. setVisibility(visible: boolean) {
  209. Visual.setVisibility(renderObject, visible)
  210. },
  211. setPickable(pickable: boolean) {
  212. Visual.setPickable(renderObject, pickable)
  213. },
  214. setTransform(matrix?: Mat4, instanceMatrices?: Float32Array | null) {
  215. Visual.setTransform(renderObject, matrix, instanceMatrices)
  216. },
  217. destroy() {
  218. // TODO
  219. renderObject = undefined
  220. }
  221. }
  222. }
  223. // mesh
  224. export const UnitsMeshParams = { ...StructureMeshParams, ...UnitsParams }
  225. export type UnitsMeshParams = typeof UnitsMeshParams
  226. export interface UnitsMeshVisualBuilder<P extends UnitsMeshParams> extends UnitsVisualBuilder<P, Mesh> { }
  227. export function UnitsMeshVisual<P extends UnitsMeshParams>(builder: UnitsMeshVisualBuilder<P>): UnitsVisual<P> {
  228. return UnitsVisual<Mesh, StructureMeshParams & UnitsParams>({
  229. ...builder,
  230. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme) => {
  231. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
  232. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
  233. },
  234. geometryUtils: Mesh.Utils
  235. })
  236. }
  237. // spheres
  238. export const UnitsSpheresParams = { ...StructureSpheresParams, ...UnitsParams }
  239. export type UnitsSpheresParams = typeof UnitsSpheresParams
  240. export interface UnitsSpheresVisualBuilder<P extends UnitsSpheresParams> extends UnitsVisualBuilder<P, Spheres> { }
  241. export function UnitsSpheresVisual<P extends UnitsSpheresParams>(builder: UnitsSpheresVisualBuilder<P>): UnitsVisual<P> {
  242. return UnitsVisual<Spheres, StructureSpheresParams & UnitsParams>({
  243. ...builder,
  244. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme) => {
  245. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
  246. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  247. },
  248. geometryUtils: Spheres.Utils
  249. })
  250. }
  251. // points
  252. export const UnitsPointsParams = { ...StructurePointsParams, ...UnitsParams }
  253. export type UnitsPointsParams = typeof UnitsPointsParams
  254. export interface UnitsPointVisualBuilder<P extends UnitsPointsParams> extends UnitsVisualBuilder<P, Points> { }
  255. export function UnitsPointsVisual<P extends UnitsPointsParams>(builder: UnitsPointVisualBuilder<P>): UnitsVisual<P> {
  256. return UnitsVisual<Points, StructurePointsParams & UnitsParams>({
  257. ...builder,
  258. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme) => {
  259. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
  260. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  261. },
  262. geometryUtils: Points.Utils
  263. })
  264. }
  265. // lines
  266. export const UnitsLinesParams = { ...StructureLinesParams, ...UnitsParams }
  267. export type UnitsLinesParams = typeof UnitsLinesParams
  268. export interface UnitsLinesVisualBuilder<P extends UnitsLinesParams> extends UnitsVisualBuilder<P, Lines> { }
  269. export function UnitsLinesVisual<P extends UnitsLinesParams>(builder: UnitsLinesVisualBuilder<P>): UnitsVisual<P> {
  270. return UnitsVisual<Lines, StructureLinesParams & UnitsParams>({
  271. ...builder,
  272. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme) => {
  273. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
  274. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  275. },
  276. geometryUtils: Lines.Utils
  277. })
  278. }
  279. // direct-volume
  280. export const UnitsDirectVolumeParams = { ...StructureDirectVolumeParams, ...UnitsParams }
  281. export type UnitsDirectVolumeParams = typeof UnitsDirectVolumeParams
  282. export interface UnitsDirectVolumeVisualBuilder<P extends UnitsDirectVolumeParams> extends UnitsVisualGeometryBuilder<P, DirectVolume> { }
  283. export function UnitsDirectVolumeVisual<P extends UnitsDirectVolumeParams>(builder: UnitsDirectVolumeVisualBuilder<P>): UnitsVisual<P> {
  284. return UnitsVisual<DirectVolume, StructureDirectVolumeParams & UnitsParams>({
  285. ...builder,
  286. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme) => {
  287. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme)
  288. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
  289. },
  290. geometryUtils: DirectVolume.Utils
  291. })
  292. }