@omegagrid/dashboard 0.6.120 → 0.6.121

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 (8) hide show
  1. package/dist/ui/dashboard.d.ts +3 -0
  2. package/dist/ui/dashboard.d.ts.map +1 -1
  3. package/dist/ui/dashboard.js +48 -1
  4. package/dist/ui/dashboard.js.map +1 -1
  5. package/dist/ui/dashboard.style.d.ts.map +1 -1
  6. package/dist/ui/dashboard.style.js +12 -2
  7. package/dist/ui/dashboard.style.js.map +1 -1
  8. package/package.json +3 -3
package/dist/ui/dashboard.d.ts CHANGED
@@ -11,11 +11,13 @@ export declare class Dashboard extends OmegaComponent implements Layout {
11
11
  static styles: import("lit").CSSResultGroup[];
12
12
  model: DashboardModel;
13
13
  designMode: boolean;
14
+ noGrid: boolean;
14
15
  createComponent: ComponentFactory;
15
16
  items: NodeList;
16
17
  container: Container;
17
18
  content: HTMLDivElement;
18
19
  placeholder: HTMLDivElement;
20
+ gridCanvas: HTMLCanvasElement;
19
21
  private _currentItem;
20
22
  private _previewPositions;
21
23
  readonly components: ComponentStore<HTMLElement & Layout>;
@@ -38,6 +40,7 @@ export declare class Dashboard extends OmegaComponent implements Layout {
38
40
  setItemPosition(elm: HTMLElement, rect: Rect): void;
39
41
  fixCollisions(): void;
40
42
  layout(): void;
43
+ drawGrid(): Promise<void>;
41
44
  updated(): void;
42
45
  render: () => import("lit-html").TemplateResult<1> | "";
43
46
  }
package/dist/ui/dashboard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/ui/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAO,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAKvH,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qBAAa,cAAe,SAAQ,KAAK;IAExC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;gBAEvB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC;CAIvD;AAED,qBACa,SAAU,SAAQ,cAAe,YAAW,MAAM;IAE9D,MAAM,CAAC,MAAM,iCAAkC;IAG/C,KAAK,EAAE,cAAc,CAAC;IAGtB,UAAU,UAAS;IAGnB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,KAAK,EAAE,QAAQ,CAAC;IAGhB,SAAS,EAAE,SAAS,CAAC;IAGrB,OAAO,EAAE,cAAc,CAAC;IAGxB,WAAW,EAAE,cAAc,CAAC;IAE5B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAElC,QAAQ,CAAC,UAAU,uCAEjB;IAEF,OAAO,CAAC,SAAS,CAAO;IACxB,IAAI,QAAQ,SAYX;IAED,SAAS,CAAC,IAAI,EAAE,aAAa;IAM7B,QAAQ;IASR,IAAI,YAAY,WAEf;IAED,cAAc,CAAC,MAAM,EAAE,MAAM;IAI7B,cAAc,CAAC,MAAM,EAAE,MAAM;IAI7B,sBAAsB;IAOtB,aAAa,CAAC,IAAI,EAAE,IAAI;IAQxB,WAAW,MAAO,cAAc,UAQ/B;IAED,aAAa,MAAO,cAAc,UAQjC;;IAYD,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAI,IAAI;IAWxC,eAAe,CAAC,IAAI,EAAE,IAAI;IAK1B,eAAe;IAIf,aAAa,CAAC,MAAM,EAAE,eAAe;IAMrC,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI;IAM5C,aAAa;IAMb,MAAM;IAUN,OAAO;IAIP,MAAM,kDAaC;CAEP"}
1
+ {"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/ui/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAO,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAKvH,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,qBAAa,cAAe,SAAQ,KAAK;IAExC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;gBAEvB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC;CAIvD;AAED,qBACa,SAAU,SAAQ,cAAe,YAAW,MAAM;IAE9D,MAAM,CAAC,MAAM,iCAAkC;IAG/C,KAAK,EAAE,cAAc,CAAC;IAGtB,UAAU,UAAS;IAGnB,MAAM,UAAS;IAGf,eAAe,EAAE,gBAAgB,CAAC;IAGlC,KAAK,EAAE,QAAQ,CAAC;IAGhB,SAAS,EAAE,SAAS,CAAC;IAGrB,OAAO,EAAE,cAAc,CAAC;IAGxB,WAAW,EAAE,cAAc,CAAC;IAG5B,UAAU,EAAE,iBAAiB,CAAC;IAE9B,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,iBAAiB,CAAS;IAElC,QAAQ,CAAC,UAAU,uCAEjB;IAEF,OAAO,CAAC,SAAS,CAAO;IACxB,IAAI,QAAQ,SAYX;IAED,SAAS,CAAC,IAAI,EAAE,aAAa;IAM7B,QAAQ;IASR,IAAI,YAAY,WAEf;IAED,cAAc,CAAC,MAAM,EAAE,MAAM;IAI7B,cAAc,CAAC,MAAM,EAAE,MAAM;IAI7B,sBAAsB;IAOtB,aAAa,CAAC,IAAI,EAAE,IAAI;IAQxB,WAAW,MAAO,cAAc,UAQ/B;IAED,aAAa,MAAO,cAAc,UAQjC;;IAYD,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAI,IAAI;IAWxC,eAAe,CAAC,IAAI,EAAE,IAAI;IAK1B,eAAe;IAIf,aAAa,CAAC,MAAM,EAAE,eAAe;IAMrC,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI;IAM5C,aAAa;IAMb,MAAM;IAWA,QAAQ;IAyCd,OAAO;IAIP,MAAM,kDAgBC;CAEP"}
package/dist/ui/dashboard.js CHANGED
@@ -72,6 +72,7 @@ let Dashboard = class Dashboard extends OmegaComponent {
72
72
  constructor() {
73
73
  super();
74
74
  this.designMode = false;
75
+ this.noGrid = false;
75
76
  this.components = new ComponentStore(id => this.createComponent ? this.createComponent(id) : null);
76
77
  this._onItemMove = (e) => {
77
78
  if (!e.item.moving)
@@ -96,7 +97,10 @@ let Dashboard = class Dashboard extends OmegaComponent {
96
97
  this.render = () => this.model ? html `
97
98
  <og-container>
98
99
  <div slot="content">
99
- ${this.designMode ? html `<div class="item-placeholder"></div>` : null}
100
+ ${this.designMode ? html `
101
+ ${this.noGrid ? '' : html `<canvas class="item-grid"></canvas>`}
102
+ <div class="item-placeholder"></div>
103
+ ` : null}
100
104
  ${map(this.model.items, item => html `
101
105
  <og-dashboard-item
102
106
  ?designMode="${this.designMode}"
@@ -156,6 +160,43 @@ let Dashboard = class Dashboard extends OmegaComponent {
156
160
  w: this.model.size.w * (this.baseSize.w + this.model.options.gap) + this.model.options.gap,
157
161
  h: this.model.size.h * (this.baseSize.h + this.model.options.gap) + this.model.options.gap
158
162
  });
163
+ this.drawGrid();
164
+ }
165
+ async drawGrid() {
166
+ if (!this.gridCanvas)
167
+ return;
168
+ if (this.container.isUpdatePending)
169
+ await this.container.updateComplete;
170
+ const ctx = this.gridCanvas.getContext('2d');
171
+ if (!ctx)
172
+ return;
173
+ const gap = this.model.options.gap;
174
+ const baseSize = this.baseSize;
175
+ this.gridCanvas.style.width = '100%';
176
+ this.gridCanvas.style.height = '100%';
177
+ const width = this.gridCanvas.offsetWidth;
178
+ this.gridCanvas.width = width;
179
+ const height = this.gridCanvas.offsetHeight;
180
+ this.gridCanvas.height = height;
181
+ const columns = width / baseSize.w;
182
+ const rows = height / baseSize.h;
183
+ ctx.clearRect(0, 0, width, height);
184
+ ctx.strokeStyle = 'rgba(116,116,116,0.2)';
185
+ ctx.lineWidth = 1;
186
+ for (let i = 0; i <= columns; i++) {
187
+ const x = Math.round(i * (baseSize.w + gap) + gap / 2) + 0.5;
188
+ ctx.beginPath();
189
+ ctx.moveTo(x, 0);
190
+ ctx.lineTo(x, height);
191
+ ctx.stroke();
192
+ }
193
+ for (let i = 0; i <= rows; i++) {
194
+ const y = Math.round(i * (baseSize.h + gap) + gap / 2) + 0.5;
195
+ ctx.beginPath();
196
+ ctx.moveTo(0, y);
197
+ ctx.lineTo(width, y);
198
+ ctx.stroke();
199
+ }
159
200
  }
160
201
  updated() {
161
202
  this.layout();
@@ -168,6 +209,9 @@ __decorate([
168
209
  __decorate([
169
210
  property({ type: Boolean, reflect: true })
170
211
  ], Dashboard.prototype, "designMode", void 0);
212
+ __decorate([
213
+ property({ type: Boolean })
214
+ ], Dashboard.prototype, "noGrid", void 0);
171
215
  __decorate([
172
216
  property({ type: Object })
173
217
  ], Dashboard.prototype, "createComponent", void 0);
@@ -183,6 +227,9 @@ __decorate([
183
227
  __decorate([
184
228
  query('.item-placeholder')
185
229
  ], Dashboard.prototype, "placeholder", void 0);
230
+ __decorate([
231
+ query('.item-grid')
232
+ ], Dashboard.prototype, "gridCanvas", void 0);
186
233
  Dashboard = __decorate([
187
234
  customElement('og-dashboard')
188
235
  ], Dashboard);
package/dist/ui/dashboard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../../src/ui/dashboard.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAoB,cAAc,EAAU,cAAc,EAAE,GAAG,EAAyB,MAAM,iBAAiB,CAAC;AACvH,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAsB,cAAc,EAAE,MAAM,UAAU,CAAC;AAI9D,MAAM,OAAO,cAAe,SAAQ,KAAK;IAKxC,YAAY,IAAY,EAAE,IAA6B;QACtD,KAAK,CAAC,aAAa,IAAI,EAAE,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;QAC5D,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC3B,CAAC;CACD;AAGM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,cAAc;IAiC5C,IAAI,QAAQ;QACX,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1C,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAE1E,IAAI,CAAC,SAAS,GAAG;YAChB,CAAC,EAAE,WAAW,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;YACnG,CAAC,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;SACzF,CAAC;QAEF,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI;YAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAClE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI;YAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAClE,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,SAAS,CAAC,IAAmB;QAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,cAAc,CAAC,MAAc;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,cAAc,CAAC,MAAc;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,sBAAsB;QACrB,IAAI,CAAC,IAAI,CAAC,iBAAiB;YAAE,OAAO;QACpC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAED,aAAa,CAAC,IAAU;QACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACtF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAkB,CAAC;YAC5C,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,YAAY;gBAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;IACJ,CAAC;IAsBD;QACC,KAAK,EAAE,CAAC;QAtGT,eAAU,GAAG,KAAK,CAAC;QAoBV,eAAU,GAAG,IAAI,cAAc,CACvC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAyB,CAAC,CAAC,CAAC,IAAI,CACpF,CAAC;QA2DF,gBAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;gBAAE,OAAO;YAC3B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjD,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;YAC5D,MAAM,IAAI,GAAS,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAC,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAA;QAED,kBAAa,GAAG,CAAC,CAAiB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;YACpC,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;YAC3F,MAAM,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;YACvG,MAAM,IAAI,GAAS,EAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAA;QAgED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;;MAG3B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,sCAAsC,CAAC,CAAC,CAAC,IAAI;MACnE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;qBAEnB,IAAI,CAAC,UAAU;gBACpB,IAAI;qBACC,IAAI,CAAC,UAAU;;KAE/B,CAAC;;;EAGJ,CAAC,CAAC,CAAC,EAAE,CAAC;QAzEN,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5F,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,CAAC,CAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9F,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED,qBAAqB,CAAC,IAAU;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACnC,OAAO;YACN,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG;YACpC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG;YACpC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG;YACpC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG;SACpC,CAAC;IACH,CAAC;IAED,eAAe,CAAC,IAAU;QACzB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,eAAe;QACd,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACnC,CAAC;IAED,aAAa,CAAC,MAAuB;QACpC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,CAAC;IACrC,CAAC;IAED,eAAe,CAAC,GAAgB,EAAE,IAAU;QAC3C,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACtD,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;QAC1B,GAAG,CAAC,WAAW,CAAC,GAAG,EAAE,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;IACpC,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAED,MAAM;QACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAmB,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACrF,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YACzB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;YAC1F,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;SAC1F,CAAC,CAAC;IACJ,CAAC;IAED,OAAO;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;;AAvKM,gBAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,AAAjC,CAAkC;AAG/C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACH;AAGtB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CACtB;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACS;AAGlC;IADC,QAAQ,CAAC,mBAAmB,CAAC;wCACd;AAGhB;IADC,KAAK,CAAC,cAAc,CAAC;4CACD;AAGrB;IADC,KAAK,CAAC,kBAAkB,CAAC;0CACF;AAGxB;IADC,KAAK,CAAC,mBAAmB,CAAC;8CACC;AAvBhB,SAAS;IADrB,aAAa,CAAC,cAAc,CAAC;GACjB,SAAS,CA0LrB","sourcesContent":["import { ComponentFactory, ComponentStore, Layout, OmegaComponent, dom, Rect, Container, Size } from '@omegagrid/core';\nimport { html } from 'lit';\nimport { customElement, property, query, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { style } from './dashboard.style';\nimport { DashboardItemModel, DashboardModel } from '../model';\nimport { DashboardSource } from '../types';\nimport { DashboardItem } from './dashboardItem';\n\nexport class DashboardEvent extends Event {\n\n\treadonly item: DashboardItem;\n\treadonly model: DashboardItemModel;\n\n\tconstructor(type: string, args: Partial<DashboardEvent>) {\n\t\tsuper(`dashboard.${type}`, {bubbles: true, composed: true});\n\t\tObject.assign(this, args);\n\t}\n}\n\n@customElement('og-dashboard')\nexport class Dashboard extends OmegaComponent implements Layout {\n\n\tstatic styles = [OmegaComponent.styles, style];\n\n\t@property({type: Object})\n\tmodel: DashboardModel;\n\n\t@property({type: Boolean, reflect: true})\n\tdesignMode = false;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@queryAll('og-dashboard-item')\n\titems: NodeList;\n\n\t@query('og-container')\n\tcontainer: Container;\n\n\t@query('[slot=\"content\"]')\n\tcontent: HTMLDivElement;\n\n\t@query('.item-placeholder')\n\tplaceholder: HTMLDivElement;\n\n\tprivate _currentItem: DashboardItem;\n\tprivate _previewPositions: Rect[];\n\n\treadonly components = new ComponentStore<HTMLElement & Layout>(\n\t\tid => this.createComponent ? this.createComponent(id) as HTMLElement & Layout : null\n\t);\n\n\tprivate _baseSize: Size;\n\tget baseSize() {\n\t\tif (this._baseSize) return this._baseSize;\n\t\tconst { columns, columnWidth, rows, rowHeight, gap } = this.model.options;\n\n\t\tthis._baseSize = {\n\t\t\tw: columnWidth || (columns ? (this.container.clientWidth - ((columns + 1) * gap)) / columns : null),\n\t\t\th: rowHeight || (rows ? (this.container.clientHeight - ((rows + 1) * gap)) / rows : null),\n\t\t};\n\n\t\tif (this._baseSize.w == null) this._baseSize.w = this._baseSize.h;\n\t\tif (this._baseSize.h == null) this._baseSize.h = this._baseSize.w;\n\t\treturn this._baseSize;\n\t}\n\n\tstartMove(item: DashboardItem) {\n\t\tthis._currentItem = item;\n\t\tthis._currentItem.classList.toggle('active', true);\n\t\tthis.classList.toggle('moving', true);\n\t}\n\n\tstopMove() {\n\t\tif (!this._currentItem) return;\n\t\tthis._currentItem.classList.toggle('active', false);\n\t\tthis._currentItem = null;\n\t\tthis.classList.toggle('moving', false);\n\t\tthis.hidePlaceholder();\n\t\tthis.updatePreviewPositions();\n\t}\n\n\tget scrollOffset() {\n\t\treturn this.container?.verticalSlider?.value || 0;\n\t}\n\n\toffsetToXCoord(offset: number) {\n\t\treturn Math.max(0, Math.floor(offset / (this.baseSize.w + this.model.options.gap)));\n\t}\n\n\toffsetToYCoord(offset: number) {\n\t\treturn Math.max(0, Math.floor(offset / (this.baseSize.h + this.model.options.gap)));\n\t}\n\n\tupdatePreviewPositions() {\n\t\tif (!this._previewPositions) return;\n\t\tthis.model.updatePositions(this._previewPositions);\n\t\tthis._previewPositions = null;\n\t\tthis.layout();\n\t}\n\n\tpreviewLayout(rect: Rect) {\n\t\tthis._previewPositions = this.model.calculatePositions(this._currentItem.model, rect);\n\t\tthis._previewPositions.forEach((rect, i) => {\n\t\t\tconst item = this.items[i] as DashboardItem;\n\t\t\tif (item && item != this._currentItem) this.setItemPosition(item, rect);\n\t\t});\n\t}\n\n\t_onItemMove = (e: DashboardEvent) => {\n\t\tif (!e.item.moving) return;\n\t\tconst topOffset = this.scrollOffset;\n\t\tconst x = this.offsetToXCoord(e.item.offsetLeft);\n\t\tconst y = this.offsetToYCoord(e.item.offsetTop + topOffset);\n\t\tconst rect: Rect = {x, y, w: e.item.model.w, h: e.item.model.h};\n\t\tthis.showPlaceholder(rect);\n\t\tthis.previewLayout(rect);\n\t}\n\n\t_onItemResize = (e: DashboardEvent) => {\n\t\tif (!e.item.resizing) return;\n\t\tconst topOffset = this.scrollOffset;\n\t\tconst w = this.offsetToXCoord(e.item.offsetLeft + e.item.offsetWidth) - e.item.model.x + 1;\n\t\tconst h = this.offsetToYCoord(e.item.offsetTop + e.item.offsetHeight + topOffset) - e.item.model.y + 1;\n\t\tconst rect: Rect = {x: e.item.model.x, y: e.item.model.y, w, h};\n\t\tthis.showPlaceholder(rect);\n\t\tthis.previewLayout(rect);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dashboard.movestart', (e: DashboardEvent) => this.startMove(e.item));\n\t\tthis.addEventListener('dashboard.resizestart', (e: DashboardEvent) => this.startMove(e.item));\n\t\tthis.addEventListener('dashboard.movestop', () => this.stopMove());\n\t\tthis.addEventListener('dashboard.resizestop', () => this.stopMove());\n\t\tthis.addEventListener('dashboard.move', this._onItemMove);\n\t\tthis.addEventListener('dashboard.resize', this._onItemResize);\n\t}\n\n\tcalculateItemLocation(item: Rect) : Rect {\n\t\tconst baseSize = this.baseSize;\n\t\tconst gap = this.model.options.gap;\n\t\treturn {\n\t\t\tx: item.x * (baseSize.w + gap) + gap,\n\t\t\ty: item.y * (baseSize.h + gap) + gap,\n\t\t\tw: item.w * (baseSize.w + gap) - gap,\n\t\t\th: item.h * (baseSize.h + gap) - gap,\n\t\t};\n\t}\n\n\tshowPlaceholder(rect: Rect) {\n\t\tdom.showElement(this.placeholder);\n\t\tthis.setItemPosition(this.placeholder, rect);\n\t}\n\n\thidePlaceholder() {\n\t\tdom.hideElement(this.placeholder);\n\t}\n\n\tsetSourceData(source: DashboardSource) {\n\t\tthis.components.clear();\n\t\tthis.model = new DashboardModel(source);\n\t\tthis.model.detectAndFixCollisions();\n\t}\n\n\tsetItemPosition(elm: HTMLElement, rect: Rect) {\n\t\tconst {x, y, w, h} = this.calculateItemLocation(rect);\n\t\tdom.setSize(elm, { w, h});\n\t\tdom.setPosition(elm, {l: x, t: y});\n\t}\n\n\tfixCollisions() {\n\t\tif (!this.model) return;\n\t\tthis.model.detectAndFixCollisions();\n\t\tthis.layout();\n\t}\n\n\tlayout() {\n\t\tthis._baseSize = null;\n\t\tif (!this.model) return;\n\t\tthis.items?.forEach((item: DashboardItem) => this.setItemPosition(item, item.model));\n\t\tdom.setSize(this.content, {\n\t\t\tw: this.model.size.w * (this.baseSize.w + this.model.options.gap) + this.model.options.gap,\n\t\t\th: this.model.size.h * (this.baseSize.h + this.model.options.gap) + this.model.options.gap\n\t\t});\n\t}\n\n\tupdated() {\n\t\tthis.layout();\n\t}\n\t\n\trender = () => this.model ? html`\n\t\t<og-container>\n\t\t\t<div slot=\"content\">\n\t\t\t\t${this.designMode ? html`<div class=\"item-placeholder\"></div>` : null}\n\t\t\t\t${map(this.model.items, item => html`\n\t\t\t\t\t<og-dashboard-item\n\t\t\t\t\t\t?designMode=\"${this.designMode}\"\n\t\t\t\t\t\t.model=\"${item}\" \n\t\t\t\t\t\t.components=\"${this.components}\">\n\t\t\t\t\t</og-dashboard-item>\n\t\t\t\t`)}\n\t\t\t</div>\n\t\t</og-container>\n\t` : '';\n\n}"]}
1
+ {"version":3,"file":"dashboard.js","sourceRoot":"","sources":["../../src/ui/dashboard.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentFactory, ComponentStore, Layout, OmegaComponent, dom, Rect, Container, Size } from '@omegagrid/core';\nimport { html } from 'lit';\nimport { customElement, property, query, queryAll } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { style } from './dashboard.style';\nimport { DashboardItemModel, DashboardModel } from '../model';\nimport { DashboardSource } from '../types';\nimport { DashboardItem } from './dashboardItem';\n\nexport class DashboardEvent extends Event {\n\n\treadonly item: DashboardItem;\n\treadonly model: DashboardItemModel;\n\n\tconstructor(type: string, args: Partial<DashboardEvent>) {\n\t\tsuper(`dashboard.${type}`, {bubbles: true, composed: true});\n\t\tObject.assign(this, args);\n\t}\n}\n\n@customElement('og-dashboard')\nexport class Dashboard extends OmegaComponent implements Layout {\n\n\tstatic styles = [OmegaComponent.styles, style];\n\n\t@property({type: Object})\n\tmodel: DashboardModel;\n\n\t@property({type: Boolean, reflect: true})\n\tdesignMode = false;\n\n\t@property({type: Boolean})\n\tnoGrid = false;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@queryAll('og-dashboard-item')\n\titems: NodeList;\n\n\t@query('og-container')\n\tcontainer: Container;\n\n\t@query('[slot=\"content\"]')\n\tcontent: HTMLDivElement;\n\n\t@query('.item-placeholder')\n\tplaceholder: HTMLDivElement;\n\n\t@query('.item-grid')\n\tgridCanvas: HTMLCanvasElement;\n\n\tprivate _currentItem: DashboardItem;\n\tprivate _previewPositions: Rect[];\n\n\treadonly components = new ComponentStore<HTMLElement & Layout>(\n\t\tid => this.createComponent ? this.createComponent(id) as HTMLElement & Layout : null\n\t);\n\n\tprivate _baseSize: Size;\n\tget baseSize() {\n\t\tif (this._baseSize) return this._baseSize;\n\t\tconst { columns, columnWidth, rows, rowHeight, gap } = this.model.options;\n\n\t\tthis._baseSize = {\n\t\t\tw: columnWidth || (columns ? (this.container.clientWidth - ((columns + 1) * gap)) / columns : null),\n\t\t\th: rowHeight || (rows ? (this.container.clientHeight - ((rows + 1) * gap)) / rows : null),\n\t\t};\n\n\t\tif (this._baseSize.w == null) this._baseSize.w = this._baseSize.h;\n\t\tif (this._baseSize.h == null) this._baseSize.h = this._baseSize.w;\n\t\treturn this._baseSize;\n\t}\n\n\tstartMove(item: DashboardItem) {\n\t\tthis._currentItem = item;\n\t\tthis._currentItem.classList.toggle('active', true);\n\t\tthis.classList.toggle('moving', true);\n\t}\n\n\tstopMove() {\n\t\tif (!this._currentItem) return;\n\t\tthis._currentItem.classList.toggle('active', false);\n\t\tthis._currentItem = null;\n\t\tthis.classList.toggle('moving', false);\n\t\tthis.hidePlaceholder();\n\t\tthis.updatePreviewPositions();\n\t}\n\n\tget scrollOffset() {\n\t\treturn this.container?.verticalSlider?.value || 0;\n\t}\n\n\toffsetToXCoord(offset: number) {\n\t\treturn Math.max(0, Math.floor(offset / (this.baseSize.w + this.model.options.gap)));\n\t}\n\n\toffsetToYCoord(offset: number) {\n\t\treturn Math.max(0, Math.floor(offset / (this.baseSize.h + this.model.options.gap)));\n\t}\n\n\tupdatePreviewPositions() {\n\t\tif (!this._previewPositions) return;\n\t\tthis.model.updatePositions(this._previewPositions);\n\t\tthis._previewPositions = null;\n\t\tthis.layout();\n\t}\n\n\tpreviewLayout(rect: Rect) {\n\t\tthis._previewPositions = this.model.calculatePositions(this._currentItem.model, rect);\n\t\tthis._previewPositions.forEach((rect, i) => {\n\t\t\tconst item = this.items[i] as DashboardItem;\n\t\t\tif (item && item != this._currentItem) this.setItemPosition(item, rect);\n\t\t});\n\t}\n\n\t_onItemMove = (e: DashboardEvent) => {\n\t\tif (!e.item.moving) return;\n\t\tconst topOffset = this.scrollOffset;\n\t\tconst x = this.offsetToXCoord(e.item.offsetLeft);\n\t\tconst y = this.offsetToYCoord(e.item.offsetTop + topOffset);\n\t\tconst rect: Rect = {x, y, w: e.item.model.w, h: e.item.model.h};\n\t\tthis.showPlaceholder(rect);\n\t\tthis.previewLayout(rect);\n\t}\n\n\t_onItemResize = (e: DashboardEvent) => {\n\t\tif (!e.item.resizing) return;\n\t\tconst topOffset = this.scrollOffset;\n\t\tconst w = this.offsetToXCoord(e.item.offsetLeft + e.item.offsetWidth) - e.item.model.x + 1;\n\t\tconst h = this.offsetToYCoord(e.item.offsetTop + e.item.offsetHeight + topOffset) - e.item.model.y + 1;\n\t\tconst rect: Rect = {x: e.item.model.x, y: e.item.model.y, w, h};\n\t\tthis.showPlaceholder(rect);\n\t\tthis.previewLayout(rect);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dashboard.movestart', (e: DashboardEvent) => this.startMove(e.item));\n\t\tthis.addEventListener('dashboard.resizestart', (e: DashboardEvent) => this.startMove(e.item));\n\t\tthis.addEventListener('dashboard.movestop', () => this.stopMove());\n\t\tthis.addEventListener('dashboard.resizestop', () => this.stopMove());\n\t\tthis.addEventListener('dashboard.move', this._onItemMove);\n\t\tthis.addEventListener('dashboard.resize', this._onItemResize);\n\t}\n\n\tcalculateItemLocation(item: Rect) : Rect {\n\t\tconst baseSize = this.baseSize;\n\t\tconst gap = this.model.options.gap;\n\t\treturn {\n\t\t\tx: item.x * (baseSize.w + gap) + gap,\n\t\t\ty: item.y * (baseSize.h + gap) + gap,\n\t\t\tw: item.w * (baseSize.w + gap) - gap,\n\t\t\th: item.h * (baseSize.h + gap) - gap,\n\t\t};\n\t}\n\n\tshowPlaceholder(rect: Rect) {\n\t\tdom.showElement(this.placeholder);\n\t\tthis.setItemPosition(this.placeholder, rect);\n\t}\n\n\thidePlaceholder() {\n\t\tdom.hideElement(this.placeholder);\n\t}\n\n\tsetSourceData(source: DashboardSource) {\n\t\tthis.components.clear();\n\t\tthis.model = new DashboardModel(source);\n\t\tthis.model.detectAndFixCollisions();\n\t}\n\n\tsetItemPosition(elm: HTMLElement, rect: Rect) {\n\t\tconst {x, y, w, h} = this.calculateItemLocation(rect);\n\t\tdom.setSize(elm, { w, h});\n\t\tdom.setPosition(elm, {l: x, t: y});\n\t}\n\n\tfixCollisions() {\n\t\tif (!this.model) return;\n\t\tthis.model.detectAndFixCollisions();\n\t\tthis.layout();\n\t}\n\n\tlayout() {\n\t\tthis._baseSize = null;\n\t\tif (!this.model) return;\n\t\tthis.items?.forEach((item: DashboardItem) => this.setItemPosition(item, item.model));\n\t\tdom.setSize(this.content, {\n\t\t\tw: this.model.size.w * (this.baseSize.w + this.model.options.gap) + this.model.options.gap,\n\t\t\th: this.model.size.h * (this.baseSize.h + this.model.options.gap) + this.model.options.gap\n\t\t});\n\t\tthis.drawGrid();\n\t}\n\n\tasync drawGrid() {\n\t\tif (!this.gridCanvas) return;\n\t\tif (this.container.isUpdatePending) await this.container.updateComplete;\n\n\t\tconst ctx = this.gridCanvas.getContext('2d');\n\t\tif (!ctx) return;\n\n\t\tconst gap = this.model.options.gap;\n\t\tconst baseSize = this.baseSize;\n\t\t\n\t\tthis.gridCanvas.style.width = '100%';\n\t\tthis.gridCanvas.style.height = '100%';\n\t\tconst width = this.gridCanvas.offsetWidth;\n\t\tthis.gridCanvas.width = width;\n\t\tconst height = this.gridCanvas.offsetHeight;\n\t\tthis.gridCanvas.height = height;\n\t\tconst columns = width / baseSize.w;\n\t\tconst rows = height / baseSize.h;\n\n\n\t\tctx.clearRect(0, 0, width, height);\n\t\tctx.strokeStyle = 'rgba(116,116,116,0.2)';\n\t\tctx.lineWidth = 1;\n\n\t\tfor (let i = 0; i <= columns; i++) {\n\t\t\tconst x = Math.round(i * (baseSize.w + gap) + gap / 2) + 0.5;\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(x, 0);\n\t\t\tctx.lineTo(x, height);\n\t\t\tctx.stroke();\n\t\t}\n\n\t\tfor (let i = 0; i <= rows; i++) {\n\t\t\tconst y = Math.round(i * (baseSize.h + gap) + gap / 2) + 0.5;\n\t\t\tctx.beginPath();\n\t\t\tctx.moveTo(0, y);\n\t\t\tctx.lineTo(width, y);\n\t\t\tctx.stroke();\n\t\t}\n\t}\n\n\tupdated() {\n\t\tthis.layout();\n\t}\n\t\n\trender = () => this.model ? html`\n\t\t<og-container>\n\t\t\t<div slot=\"content\">\n\t\t\t\t${this.designMode ? html`\n\t\t\t\t\t${this.noGrid ? '' : html`<canvas class=\"item-grid\"></canvas>`}\n\t\t\t\t\t<div class=\"item-placeholder\"></div>\n\t\t\t\t` : null}\n\t\t\t\t${map(this.model.items, item => html`\n\t\t\t\t\t<og-dashboard-item\n\t\t\t\t\t\t?designMode=\"${this.designMode}\"\n\t\t\t\t\t\t.model=\"${item}\" \n\t\t\t\t\t\t.components=\"${this.components}\">\n\t\t\t\t\t</og-dashboard-item>\n\t\t\t\t`)}\n\t\t\t</div>\n\t\t</og-container>\n\t` : '';\n\n}"]}
package/dist/ui/dashboard.style.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dashboard.style.d.ts","sourceRoot":"","sources":["../../src/ui/dashboard.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA8CjB,CAAC"}
1
+ {"version":3,"file":"dashboard.style.d.ts","sourceRoot":"","sources":["../../src/ui/dashboard.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAwDjB,CAAC"}
package/dist/ui/dashboard.style.js CHANGED
@@ -12,7 +12,7 @@ export const style = css `
12
12
 
13
13
  og-dashboard-item {
14
14
  _border: 2px solid var(--og-accent-color);
15
- z-index: 1;
15
+ z-index: 100;
16
16
  transition: left 0.2s, top 0.2s;
17
17
  }
18
18
 
@@ -28,7 +28,7 @@ export const style = css `
28
28
  }
29
29
 
30
30
  :host([designMode].moving) og-dashboard-item {
31
- opacity: 0.2;
31
+ opacity: 0.6;
32
32
  }
33
33
 
34
34
  :host([designMode]) og-dashboard-item.active {
@@ -44,6 +44,16 @@ export const style = css `
44
44
  display: none;
45
45
  border: 2px dotted var(--og-accent-color);
46
46
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
47
+ z-index: 99;
48
+ }
49
+
50
+ .item-grid {
51
+ z-index: 98;
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
47
57
  }
48
58
  `;
49
59
  //# sourceMappingURL=dashboard.style.js.map
package/dist/ui/dashboard.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dashboard.style.js","sourceRoot":"","sources":["../../src/ui/dashboard.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t:host {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\tog-container {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tog-dashboard-item {\n\t\t_border: 2px solid var(--og-accent-color);\n\t\tz-index: 1;\n\t\ttransition: left 0.2s, top 0.2s;\n\t}\n\n\tog-dashboard-item.active {\n\t\ttransition: none;\n\t}\n\n\t:host([designMode]) og-dashboard-item {\n\t\tcursor: move;\n\t\tresize: both;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t}\n\t\n\t:host([designMode].moving) og-dashboard-item {\n\t\topacity: 0.2;\n\t}\n\n\t:host([designMode]) og-dashboard-item.active {\n\t\tborder: none;\n\t\tbackground-color: var(--og-accent-color);\n\t}\n\n\t:host([designMode].moving) og-dashboard-item.active {\n\t\topacity: 1;\n\t}\n\t\n\t.item-placeholder {\n\t\tdisplay: none;\n\t\tborder: 2px dotted var(--og-accent-color);\n\t\ttransition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;\n\t}\n`;"]}
1
+ {"version":3,"file":"dashboard.style.js","sourceRoot":"","sources":["../../src/ui/dashboard.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t:host {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\tog-container {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tog-dashboard-item {\n\t\t_border: 2px solid var(--og-accent-color);\n\t\tz-index: 100;\n\t\ttransition: left 0.2s, top 0.2s;\n\t}\n\n\tog-dashboard-item.active {\n\t\ttransition: none;\n\t}\n\n\t:host([designMode]) og-dashboard-item {\n\t\tcursor: move;\n\t\tresize: both;\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t}\n\t\n\t:host([designMode].moving) og-dashboard-item {\n\t\topacity: 0.6;\n\t}\n\n\t:host([designMode]) og-dashboard-item.active {\n\t\tborder: none;\n\t\tbackground-color: var(--og-accent-color);\n\t}\n\n\t:host([designMode].moving) og-dashboard-item.active {\n\t\topacity: 1;\n\t}\n\t\n\t.item-placeholder {\n\t\tdisplay: none;\n\t\tborder: 2px dotted var(--og-accent-color);\n\t\ttransition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;\n\t\tz-index: 99;\n\t}\n\n\t.item-grid {\n\t\tz-index: 98;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n`;"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/dashboard",
3
- "version": "0.6.120",
3
+ "version": "0.6.121",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Dashboard component",
6
6
  "main": "./dist/index.js",
@@ -28,8 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@fortawesome/fontawesome-svg-core": "6.4.2",
31
- "@omegagrid/core": "^0.6.120",
32
- "@omegagrid/localize": "^0.6.120",
31
+ "@omegagrid/core": "^0.6.121",
32
+ "@omegagrid/localize": "^0.6.121",
33
33
  "@riovir/wc-fontawesome": "^0.1.9",
34
34
  "date-fns": "^3.2.0",
35
35
  "lit": "^3.1.1",