@api-client/ui 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/elements/schema-design/DataModelVisualizationElement.d.ts.map +1 -1
  2. package/dist/elements/schema-design/DataModelVisualizationElement.js +18 -1
  3. package/dist/elements/schema-design/DataModelVisualizationElement.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/elements/schema-design/DataModelVisualizationElement.ts +18 -1
package/dist/elements/schema-design/DataModelVisualizationElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataModelVisualizationElement.d.ts","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACxH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,SAAS,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAKpF,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,mBAAmB,MAAM,qDAAqD,CAAC;AAEtF,OAAO,6CAA6C,CAAC;AACrD,OAAO,+CAA+C,CAAC;AACvD,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,8DAA8D,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,UAAU,QAAQ;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAClE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,OAAO,6BAA8B,SAAQ,UAAU;IACnE,WAAoB,MAAM,IAAI,SAAS,EAAE,CAsFxC;IAED;;OAEG;IACwC,GAAG,CAAC,EAAE,MAAM,CAAC;IAExD;;OAEG;IACyB,IAAI,CAAC,EAAE,aAAa,CAAC;IAEjD;;OAEG;IACM,SAAS,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAE7B,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEd,SAAS,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEnE,SAAS,CAAC,oBAAoB,CAAC,EAAE,cAAc,CAAC;IAEhD,SAAS,CAAC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE/B,YAAY,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY5C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;cAUlB,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D;;;;OAIG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAM9B;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;cAUf,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA0B3C,SAAS,CAAC,cAAc,IAAI,IAAI;cAkEhB,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;cAmB9C,MAAM,IAAI,cAAc;IAQ3C,SAAS,CAAC,cAAc,IAAI,cAAc,EAAE,GAAG,OAAO,OAAO;IAQ7D,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAqB/D,SAAS,CAAC,uBAAuB,CAAC,MAAM,EAAE,UAAU,GAAG,cAAc;IASrE,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,YAAY,GAAG,cAAc;IAgBnE,SAAS,CAAC,oBAAoB,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,GAAG,OAAO,OAAO;IAkBtF,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,cAAc;CAQjE"}
1
+ {"version":3,"file":"DataModelVisualizationElement.d.ts","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACxH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,SAAS,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAKpF,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,mBAAmB,MAAM,qDAAqD,CAAC;AAEtF,OAAO,6CAA6C,CAAC;AACrD,OAAO,+CAA+C,CAAC;AACvD,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,8DAA8D,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAC;AAExF,UAAU,QAAQ;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAClE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,OAAO,6BAA8B,SAAQ,UAAU;IACnE,WAAoB,MAAM,IAAI,SAAS,EAAE,CA4FxC;IAED;;OAEG;IACwC,GAAG,CAAC,EAAE,MAAM,CAAC;IAExD;;OAEG;IACyB,IAAI,CAAC,EAAE,aAAa,CAAC;IAEjD;;OAEG;IACM,SAAS,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAE7B,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEd,SAAS,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEnE,SAAS,CAAC,oBAAoB,CAAC,EAAE,cAAc,CAAC;IAEhD,SAAS,CAAC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE/B,YAAY,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY5C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;cAUlB,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D;;;;OAIG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAM9B;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;cAUf,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA0B3C,SAAS,CAAC,cAAc,IAAI,IAAI;cAkEhB,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;cAmB9C,MAAM,IAAI,cAAc;IAQ3C,SAAS,CAAC,cAAc,IAAI,cAAc,EAAE,GAAG,OAAO,OAAO;IAQ7D,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG,cAAc;IAqB/D,SAAS,CAAC,uBAAuB,CAAC,MAAM,EAAE,UAAU,GAAG,cAAc;IASrE,SAAS,CAAC,qBAAqB,CAAC,IAAI,EAAE,YAAY,GAAG,cAAc;IA2BnE,SAAS,CAAC,oBAAoB,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,GAAG,OAAO,OAAO;IAkBtF,SAAS,CAAC,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,cAAc;CAQjE"}
package/dist/elements/schema-design/DataModelVisualizationElement.js CHANGED
@@ -96,6 +96,12 @@ export default class DataModelVisualizationElement extends ApiElement {
96
96
  .data-type {
97
97
  margin-left: auto;
98
98
  }
99
+
100
+ .property-key-icon {
101
+ width: 16px;
102
+ height: 16px;
103
+ margin-right: 8px;
104
+ }
99
105
  `,
100
106
  ];
101
107
  }
@@ -309,8 +315,19 @@ export default class DataModelVisualizationElement extends ApiElement {
309
315
  primary,
310
316
  index,
311
317
  };
318
+ const icons = [];
319
+ if (primary) {
320
+ icons.push(html `<ui-icon icon="key" class="property-key-icon"></ui-icon>`);
321
+ }
322
+ else if (index) {
323
+ icons.push(html `<ui-icon icon="search" class="property-key-icon"></ui-icon>`);
324
+ }
325
+ else {
326
+ icons.push(html `<span class="property-key-icon"></span>`);
327
+ }
312
328
  return html `
313
329
  <li data-key="${key}" class="${classMap(classes)}">
330
+ ${icons}
314
331
  <span class="label">${info.renderLabel}</span>
315
332
  <span class="data-type">${type}</span>
316
333
  </li>
@@ -324,7 +341,7 @@ export default class DataModelVisualizationElement extends ApiElement {
324
341
  if (targets.length === 1) {
325
342
  return html `<viz-association
326
343
  data-key="${key}"
327
- data-target="${targets[0]}"
344
+ data-target="${targets[0].key}"
328
345
  title="${info.renderLabel}"
329
346
  data-selectable
330
347
  data-marker-start="association"
package/dist/elements/schema-design/DataModelVisualizationElement.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataModelVisualizationElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataAssociation, DataEntity, DataModel, DataNamespace, DataProperty } from \"@api-client/core/build/browser.js\";\nimport { html, TemplateResult, nothing, CSSResult, css, PropertyValues } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport VizWorkspaceElement from \"../../visualization/elements/VizWorkspaceElement.js\";\nimport { DataModelLayout } from \"../../visualization/plugin/positioning/DataModelLayout.js\";\nimport '../../define/visualization/viz-workspace.js';\nimport '../../define/visualization/viz-association.js';\nimport '../../define/ui/ui-icon.js';\nimport { GroupSelection } from \"../../visualization/plugin/group-selection/GroupSelection.js\";\nimport { DragAndDropPlugin } from \"../../visualization/plugin/dnd/DragAndDropPlugin.js\";\n\ninterface VizModel {\n id?: string;\n entity: DataEntity;\n type: 'parent' | 'association' | 'internal' | 'external' | 'self';\n x?: number;\n y?: number;\n}\n\nexport default class DataModelVisualizationElement extends ApiElement {\n static override get styles(): CSSResult[] {\n return [\n css`\n :host {\n display: block;\n }\n\n viz-workspace {\n flex: 1;\n height: 100%;\n }\n\n [data-selectable][data-selected] {\n border: 2px var(--workspace-entity-selection-border-color) solid;\n background-color: var(--workspace-entity-selection-background-color, #fff);\n color: var(--workspace-entity-selection-color, unset);\n }\n\n [data-selectable][data-secondary-selected] {\n border: 2px var(--workspace-entity-secondary-selection-border-color) solid;\n background-color: var(--workspace-entity-secondary-selection-background-color, #fff);\n }\n\n .data-entity {\n border: 2px var(--workspace-entity-border-color, #9e9e9e) solid;\n border-radius: var(--workspace-entity-border-radius, 8px);\n background-color: var(--workspace-entity-background-color, #fff);\n min-width: 240px;\n box-shadow: var(--workspace-entity-box-shadow, none);\n }\n\n .title {\n display: flex;\n align-items: center;\n margin: 12px 20px;\n }\n\n .title .label {\n padding: 0;\n margin: 0;\n /* font-weight: 300; */\n /* font-size: 1.25rem; */\n margin-left: 8px;\n\n font-family: var(--md-sys-typescale-title-large-font-family-name);\n font-style: var(--md-sys-typescale-title-large-font-family-style);\n font-weight: var(--md-sys-typescale-title-large-font-weight);\n font-size: var(--md-sys-typescale-title-large-font-size);\n letter-spacing: var(--md-sys-typescale-title-large-tracking);\n line-height: var(--md-sys-typescale-title-large-height);\n text-transform: var(--md-sys-typescale-title-large-text-transform);\n text-decoration: var(--md-sys-typescale-title-large-text-decoration);\n }\n\n .properties {\n margin: 20px 0;\n padding: 0;\n list-style: none;\n }\n\n .property {\n padding: 0 20px;\n height: 36px;\n display: flex;\n align-items: center;\n\n font-family: var(--md-sys-typescale-label-medium-font-family-name);\n font-style: var(--md-sys-typescale-label-medium-font-family-style);\n font-weight: var(--md-sys-typescale-label-medium-font-weight);\n font-size: var(--md-sys-typescale-label-medium-font-size);\n letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n line-height: var(--md-sys-typescale-label-medium-height);\n text-transform: var(--md-sys-typescale-label-medium-text-transform);\n text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n }\n\n .property.primary,\n .property.index {\n font-weight: 700;\n }\n\n .data-type {\n margin-left: auto;\n }\n `,\n ];\n }\n\n /**\n * The key of the entity to edit.\n */\n @property({ type: String, reflect: true }) key?: string;\n\n /**\n * The read data namespace.\n */\n @property({ type: Object }) root?: DataNamespace;\n\n /**\n * The computed entity when the key or root change.\n */\n @state() protected _model?: DataModel;\n\n @state() protected _data?: VizModel[];\n\n @query('viz-workspace') protected _workspace?: VizWorkspaceElement;\n\n protected groupSelectionPlugin?: GroupSelection;\n\n protected dndPlugin?: DragAndDropPlugin;\n\n override firstUpdated(cp: PropertyValues<this>): void {\n super.firstUpdated(cp);\n const node = this._workspace;\n if (!node) {\n return;\n }\n this.dndPlugin = new DragAndDropPlugin(node);\n this.dndPlugin.connect();\n this.groupSelectionPlugin = new GroupSelection(node);\n this.groupSelectionPlugin.connect();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.dndPlugin) {\n this.dndPlugin.connect();\n }\n if (this.groupSelectionPlugin) {\n this.groupSelectionPlugin.connect();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.dndPlugin) {\n this.dndPlugin.disconnect();\n }\n if (this.groupSelectionPlugin) {\n this.groupSelectionPlugin.disconnect();\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('key')) {\n this._computeModel();\n }\n }\n\n /**\n * Reloads the generated view model, runs the auto layout, and updated the view.\n * Note, this is very expensive operation. It updates the view at least twice.\n * THe layout computation can be very complex.\n */\n async refresh(): Promise<void> {\n this._createVizData();\n await this.updateComplete;\n await this._runLayout();\n }\n\n /**\n * Computes the view value for the property.\n * This should be called before the update is complete so this won't trigger another update.\n */\n protected _computeModel(): void {\n const { root, key } = this;\n if (!root || !key) {\n this._model = undefined;\n return;\n }\n this._model = root.definitions.models.find(i => i.key === key);\n this.refresh();\n }\n\n protected async _runLayout(): Promise<void> {\n const { _workspace: workspace, _model: dm, _data: list } = this;\n if (!workspace || !dm || !list) {\n return;\n }\n const layout = new DataModelLayout(workspace);\n layout.nodeSeparation = 80;\n layout.rankSeparation = 80;\n\n const result = layout.layout(dm);\n if (!result) {\n return;\n }\n result.nodes.forEach((info) => {\n const item = list.find(i => i.entity.key === info.id);\n if (!item) {\n return;\n }\n item.x = info.node.x;\n item.y = info.node.y;\n });\n this.requestUpdate();\n await this.updateComplete;\n workspace.edges.recalculate();\n }\n\n protected _createVizData(): void {\n const { _model: dm, root } = this;\n if (!dm || !root) {\n this._data = undefined;\n return;\n }\n const result: VizModel[] = [];\n\n dm.entities.forEach((entity) => {\n result.push({ entity, type: 'internal' });\n\n entity.parents.forEach(id => {\n if (result.some(i => i.entity.key === id) || dm.entities.some(i => i.key === id)) {\n // don't add a parent that is already added.\n return;\n }\n const parent = root.definitions.entities.find(i => i.key === id);\n if (parent) {\n result.push({ entity: parent, type: 'parent' });\n }\n });\n\n entity.associations.forEach((assoc) => {\n if (!assoc.targets.length) {\n return;\n }\n const targets = assoc.getTargets();\n if (targets.length === 1) {\n // classic association\n const [target] = targets;\n if (result.some(i => i.entity.key === target.key) || dm.entities.some(i => i.key === target.key)) {\n return;\n }\n const isSelf = entity === target;\n result.push({ \n entity: target, \n type: isSelf ? 'self' : 'association',\n });\n } else {\n // TODO: Union layout.\n // console.log(targets);\n }\n });\n\n // entity.associations.forEach((assoc) => {\n // if (!assoc.target) {\n // // ignore associations without a target\n // return;\n // }\n // if (result.some(i => i.entity.key === assoc.target) || dm.entities.some(i => i.key === assoc.target)) {\n // return;\n // }\n // const target = assoc.getTarget();\n // if (target) {\n // const isSelf = entity === target;\n // result.push({ \n // entity: target, \n // type: isSelf ? 'self' : 'association',\n // });\n // }\n // });\n });\n\n this._data = result;\n }\n\n protected async _repositionHandler(e: CustomEvent): Promise<void> {\n const node = e.target as HTMLElement;\n const { key } = node.dataset;\n if (!key) {\n return;\n }\n const model = this._data?.find(i => i.entity.key === key);\n if (!model) {\n return;\n }\n const { dx, dy } = e.detail;\n const { x=0, y=0 } = model;\n model.x = x + dx;\n model.y = y + dy;\n this.requestUpdate();\n await this.updateComplete;\n this._workspace?.edges.recalculate();\n }\n\n protected override render(): TemplateResult {\n return html`\n <viz-workspace\n @positionchange=\"${this._repositionHandler}\"\n >${this._modelContents()}</viz-workspace>\n `;\n }\n\n protected _modelContents(): TemplateResult[] | typeof nothing {\n const { _data: list } = this;\n if (!list || !list.length) {\n return nothing;\n }\n return list.map(e => this._entityVisualization(e));\n }\n\n protected _entityVisualization(model: VizModel): TemplateResult {\n const { entity, x = 0, y = 0, type } = model;\n const { info, key, associations, parents } = entity;\n const styles = {\n transform: `translate(${x}px, ${y}px)`,\n };\n return html`\n <div class=\"data-entity\" data-key=\"${key}\" data-type=\"${type}\" data-selectable=\"true\" draggable=\"true\" style=\"${styleMap(styles)}\">\n <div class=\"content\">\n <div class=\"title\">\n <ui-icon icon=\"schemaEntity\"></ui-icon>\n <p class=\"label\">${info.renderLabel}</p>\n </div>\n ${this._propertiesListTemplate(entity)}\n </div>\n ${associations.map(assoc => this._associationTemplate(assoc))}\n ${parents.map(id => this._parentAssociationTemplate(id))}\n </div>\n `;\n }\n\n protected _propertiesListTemplate(entity: DataEntity): TemplateResult {\n const { properties } = entity;\n return html`\n <ul class=\"properties\">\n ${properties.map(p => this._propertyItemTemplate(p))}\n </ul>\n `;\n }\n\n protected _propertyItemTemplate(item: DataProperty): TemplateResult {\n const { key, info, type, deprecated = false, primary = false, index = false } = item;\n const classes = {\n property: true,\n deprecated,\n primary,\n index,\n };\n return html`\n <li data-key=\"${key}\" class=\"${classMap(classes)}\">\n <span class=\"label\">${info.renderLabel}</span>\n <span class=\"data-type\">${type}</span>\n </li>\n `;\n }\n\n protected _associationTemplate(item: DataAssociation): TemplateResult | typeof nothing {\n const { key, info, targets } = item;\n if (!targets.length) {\n return nothing;\n }\n if (targets.length === 1) {\n return html`<viz-association \n data-key=\"${key}\" \n data-target=\"${targets[0]}\"\n title=\"${info.renderLabel}\"\n data-selectable\n data-marker-start=\"association\"\n ></viz-association>`;\n }\n // TODO: Make union associations\n return nothing;\n }\n\n protected _parentAssociationTemplate(id: string): TemplateResult {\n return html`<viz-association \n data-key=\"child-${id}\" \n data-target=\"${ifDefined(id)}\"\n data-selectable\n data-marker-end=\"parent\"\n ></viz-association>`;\n }\n}\n"]}
1
+ {"version":3,"file":"DataModelVisualizationElement.js","sourceRoot":"","sources":["../../../src/elements/schema-design/DataModelVisualizationElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataAssociation, DataEntity, DataModel, DataNamespace, DataProperty } from \"@api-client/core/build/browser.js\";\nimport { html, TemplateResult, nothing, CSSResult, css, PropertyValues } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport ApiElement from \"../ApiElement.js\";\nimport VizWorkspaceElement from \"../../visualization/elements/VizWorkspaceElement.js\";\nimport { DataModelLayout } from \"../../visualization/plugin/positioning/DataModelLayout.js\";\nimport '../../define/visualization/viz-workspace.js';\nimport '../../define/visualization/viz-association.js';\nimport '../../define/ui/ui-icon.js';\nimport { GroupSelection } from \"../../visualization/plugin/group-selection/GroupSelection.js\";\nimport { DragAndDropPlugin } from \"../../visualization/plugin/dnd/DragAndDropPlugin.js\";\n\ninterface VizModel {\n id?: string;\n entity: DataEntity;\n type: 'parent' | 'association' | 'internal' | 'external' | 'self';\n x?: number;\n y?: number;\n}\n\nexport default class DataModelVisualizationElement extends ApiElement {\n static override get styles(): CSSResult[] {\n return [\n css`\n :host {\n display: block;\n }\n\n viz-workspace {\n flex: 1;\n height: 100%;\n }\n\n [data-selectable][data-selected] {\n border: 2px var(--workspace-entity-selection-border-color) solid;\n background-color: var(--workspace-entity-selection-background-color, #fff);\n color: var(--workspace-entity-selection-color, unset);\n }\n\n [data-selectable][data-secondary-selected] {\n border: 2px var(--workspace-entity-secondary-selection-border-color) solid;\n background-color: var(--workspace-entity-secondary-selection-background-color, #fff);\n }\n\n .data-entity {\n border: 2px var(--workspace-entity-border-color, #9e9e9e) solid;\n border-radius: var(--workspace-entity-border-radius, 8px);\n background-color: var(--workspace-entity-background-color, #fff);\n min-width: 240px;\n box-shadow: var(--workspace-entity-box-shadow, none);\n }\n\n .title {\n display: flex;\n align-items: center;\n margin: 12px 20px;\n }\n\n .title .label {\n padding: 0;\n margin: 0;\n /* font-weight: 300; */\n /* font-size: 1.25rem; */\n margin-left: 8px;\n\n font-family: var(--md-sys-typescale-title-large-font-family-name);\n font-style: var(--md-sys-typescale-title-large-font-family-style);\n font-weight: var(--md-sys-typescale-title-large-font-weight);\n font-size: var(--md-sys-typescale-title-large-font-size);\n letter-spacing: var(--md-sys-typescale-title-large-tracking);\n line-height: var(--md-sys-typescale-title-large-height);\n text-transform: var(--md-sys-typescale-title-large-text-transform);\n text-decoration: var(--md-sys-typescale-title-large-text-decoration);\n }\n\n .properties {\n margin: 20px 0;\n padding: 0;\n list-style: none;\n }\n\n .property {\n padding: 0 20px;\n height: 36px;\n display: flex;\n align-items: center;\n\n font-family: var(--md-sys-typescale-label-medium-font-family-name);\n font-style: var(--md-sys-typescale-label-medium-font-family-style);\n font-weight: var(--md-sys-typescale-label-medium-font-weight);\n font-size: var(--md-sys-typescale-label-medium-font-size);\n letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n line-height: var(--md-sys-typescale-label-medium-height);\n text-transform: var(--md-sys-typescale-label-medium-text-transform);\n text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n }\n\n .property.primary,\n .property.index {\n font-weight: 700;\n }\n\n .data-type {\n margin-left: auto;\n }\n\n .property-key-icon {\n width: 16px;\n height: 16px;\n margin-right: 8px;\n }\n `,\n ];\n }\n\n /**\n * The key of the entity to edit.\n */\n @property({ type: String, reflect: true }) key?: string;\n\n /**\n * The read data namespace.\n */\n @property({ type: Object }) root?: DataNamespace;\n\n /**\n * The computed entity when the key or root change.\n */\n @state() protected _model?: DataModel;\n\n @state() protected _data?: VizModel[];\n\n @query('viz-workspace') protected _workspace?: VizWorkspaceElement;\n\n protected groupSelectionPlugin?: GroupSelection;\n\n protected dndPlugin?: DragAndDropPlugin;\n\n override firstUpdated(cp: PropertyValues<this>): void {\n super.firstUpdated(cp);\n const node = this._workspace;\n if (!node) {\n return;\n }\n this.dndPlugin = new DragAndDropPlugin(node);\n this.dndPlugin.connect();\n this.groupSelectionPlugin = new GroupSelection(node);\n this.groupSelectionPlugin.connect();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.dndPlugin) {\n this.dndPlugin.connect();\n }\n if (this.groupSelectionPlugin) {\n this.groupSelectionPlugin.connect();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.dndPlugin) {\n this.dndPlugin.disconnect();\n }\n if (this.groupSelectionPlugin) {\n this.groupSelectionPlugin.disconnect();\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('key')) {\n this._computeModel();\n }\n }\n\n /**\n * Reloads the generated view model, runs the auto layout, and updated the view.\n * Note, this is very expensive operation. It updates the view at least twice.\n * THe layout computation can be very complex.\n */\n async refresh(): Promise<void> {\n this._createVizData();\n await this.updateComplete;\n await this._runLayout();\n }\n\n /**\n * Computes the view value for the property.\n * This should be called before the update is complete so this won't trigger another update.\n */\n protected _computeModel(): void {\n const { root, key } = this;\n if (!root || !key) {\n this._model = undefined;\n return;\n }\n this._model = root.definitions.models.find(i => i.key === key);\n this.refresh();\n }\n\n protected async _runLayout(): Promise<void> {\n const { _workspace: workspace, _model: dm, _data: list } = this;\n if (!workspace || !dm || !list) {\n return;\n }\n const layout = new DataModelLayout(workspace);\n layout.nodeSeparation = 80;\n layout.rankSeparation = 80;\n\n const result = layout.layout(dm);\n if (!result) {\n return;\n }\n result.nodes.forEach((info) => {\n const item = list.find(i => i.entity.key === info.id);\n if (!item) {\n return;\n }\n item.x = info.node.x;\n item.y = info.node.y;\n });\n this.requestUpdate();\n await this.updateComplete;\n workspace.edges.recalculate();\n }\n\n protected _createVizData(): void {\n const { _model: dm, root } = this;\n if (!dm || !root) {\n this._data = undefined;\n return;\n }\n const result: VizModel[] = [];\n\n dm.entities.forEach((entity) => {\n result.push({ entity, type: 'internal' });\n\n entity.parents.forEach(id => {\n if (result.some(i => i.entity.key === id) || dm.entities.some(i => i.key === id)) {\n // don't add a parent that is already added.\n return;\n }\n const parent = root.definitions.entities.find(i => i.key === id);\n if (parent) {\n result.push({ entity: parent, type: 'parent' });\n }\n });\n\n entity.associations.forEach((assoc) => {\n if (!assoc.targets.length) {\n return;\n }\n const targets = assoc.getTargets();\n if (targets.length === 1) {\n // classic association\n const [target] = targets;\n if (result.some(i => i.entity.key === target.key) || dm.entities.some(i => i.key === target.key)) {\n return;\n }\n const isSelf = entity === target;\n result.push({ \n entity: target, \n type: isSelf ? 'self' : 'association',\n });\n } else {\n // TODO: Union layout.\n // console.log(targets);\n }\n });\n\n // entity.associations.forEach((assoc) => {\n // if (!assoc.target) {\n // // ignore associations without a target\n // return;\n // }\n // if (result.some(i => i.entity.key === assoc.target) || dm.entities.some(i => i.key === assoc.target)) {\n // return;\n // }\n // const target = assoc.getTarget();\n // if (target) {\n // const isSelf = entity === target;\n // result.push({ \n // entity: target, \n // type: isSelf ? 'self' : 'association',\n // });\n // }\n // });\n });\n\n this._data = result;\n }\n\n protected async _repositionHandler(e: CustomEvent): Promise<void> {\n const node = e.target as HTMLElement;\n const { key } = node.dataset;\n if (!key) {\n return;\n }\n const model = this._data?.find(i => i.entity.key === key);\n if (!model) {\n return;\n }\n const { dx, dy } = e.detail;\n const { x=0, y=0 } = model;\n model.x = x + dx;\n model.y = y + dy;\n this.requestUpdate();\n await this.updateComplete;\n this._workspace?.edges.recalculate();\n }\n\n protected override render(): TemplateResult {\n return html`\n <viz-workspace\n @positionchange=\"${this._repositionHandler}\"\n >${this._modelContents()}</viz-workspace>\n `;\n }\n\n protected _modelContents(): TemplateResult[] | typeof nothing {\n const { _data: list } = this;\n if (!list || !list.length) {\n return nothing;\n }\n return list.map(e => this._entityVisualization(e));\n }\n\n protected _entityVisualization(model: VizModel): TemplateResult {\n const { entity, x = 0, y = 0, type } = model;\n const { info, key, associations, parents } = entity;\n const styles = {\n transform: `translate(${x}px, ${y}px)`,\n };\n return html`\n <div class=\"data-entity\" data-key=\"${key}\" data-type=\"${type}\" data-selectable=\"true\" draggable=\"true\" style=\"${styleMap(styles)}\">\n <div class=\"content\">\n <div class=\"title\">\n <ui-icon icon=\"schemaEntity\"></ui-icon>\n <p class=\"label\">${info.renderLabel}</p>\n </div>\n ${this._propertiesListTemplate(entity)}\n </div>\n ${associations.map(assoc => this._associationTemplate(assoc))}\n ${parents.map(id => this._parentAssociationTemplate(id))}\n </div>\n `;\n }\n\n protected _propertiesListTemplate(entity: DataEntity): TemplateResult {\n const { properties } = entity;\n return html`\n <ul class=\"properties\">\n ${properties.map(p => this._propertyItemTemplate(p))}\n </ul>\n `;\n }\n\n protected _propertyItemTemplate(item: DataProperty): TemplateResult {\n const { key, info, type, deprecated = false, primary = false, index = false } = item;\n const classes = {\n property: true,\n deprecated,\n primary,\n index,\n };\n\n const icons: TemplateResult[] = [];\n if (primary) {\n icons.push(html`<ui-icon icon=\"key\" class=\"property-key-icon\"></ui-icon>`);\n } else if (index) {\n icons.push(html`<ui-icon icon=\"search\" class=\"property-key-icon\"></ui-icon>`);\n } else {\n icons.push(html`<span class=\"property-key-icon\"></span>`);\n }\n\n return html`\n <li data-key=\"${key}\" class=\"${classMap(classes)}\">\n ${icons}\n <span class=\"label\">${info.renderLabel}</span>\n <span class=\"data-type\">${type}</span>\n </li>\n `;\n }\n\n protected _associationTemplate(item: DataAssociation): TemplateResult | typeof nothing {\n const { key, info, targets } = item;\n if (!targets.length) {\n return nothing;\n }\n if (targets.length === 1) {\n return html`<viz-association \n data-key=\"${key}\" \n data-target=\"${targets[0].key}\"\n title=\"${info.renderLabel}\"\n data-selectable\n data-marker-start=\"association\"\n ></viz-association>`;\n }\n // TODO: Make union associations\n return nothing;\n }\n\n protected _parentAssociationTemplate(id: string): TemplateResult {\n return html`<viz-association \n data-key=\"child-${id}\" \n data-target=\"${ifDefined(id)}\"\n data-selectable\n data-marker-end=\"parent\"\n ></viz-association>`;\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "description": "UI for API Client.",
5
5
  "license": "CC-BY-2.0",
6
6
  "main": "dist/index.js",
package/src/elements/schema-design/DataModelVisualizationElement.ts CHANGED
@@ -106,6 +106,12 @@ export default class DataModelVisualizationElement extends ApiElement {
106
106
  .data-type {
107
107
  margin-left: auto;
108
108
  }
109
+
110
+ .property-key-icon {
111
+ width: 16px;
112
+ height: 16px;
113
+ margin-right: 8px;
114
+ }
109
115
  `,
110
116
  ];
111
117
  }
@@ -361,8 +367,19 @@ export default class DataModelVisualizationElement extends ApiElement {
361
367
  primary,
362
368
  index,
363
369
  };
370
+
371
+ const icons: TemplateResult[] = [];
372
+ if (primary) {
373
+ icons.push(html`<ui-icon icon="key" class="property-key-icon"></ui-icon>`);
374
+ } else if (index) {
375
+ icons.push(html`<ui-icon icon="search" class="property-key-icon"></ui-icon>`);
376
+ } else {
377
+ icons.push(html`<span class="property-key-icon"></span>`);
378
+ }
379
+
364
380
  return html`
365
381
  <li data-key="${key}" class="${classMap(classes)}">
382
+ ${icons}
366
383
  <span class="label">${info.renderLabel}</span>
367
384
  <span class="data-type">${type}</span>
368
385
  </li>
@@ -377,7 +394,7 @@ export default class DataModelVisualizationElement extends ApiElement {
377
394
  if (targets.length === 1) {
378
395
  return html`<viz-association
379
396
  data-key="${key}"
380
- data-target="${targets[0]}"
397
+ data-target="${targets[0].key}"
381
398
  title="${info.renderLabel}"
382
399
  data-selectable
383
400
  data-marker-start="association"