Skip to content

Commit ae6b895

Browse files
arnoblarnobl
committed
update to interacto 7
1 parent d02a27d commit ae6b895

23 files changed

+2204
-6856
lines changed

‎package-lock.json

Lines changed: 1937 additions & 6557 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
"@angular/platform-browser": "~12.2.8",
2222
"@angular/platform-browser-dynamic": "~12.2.8",
2323
"@angular/router": "~12.2.8",
24-
"interacto": "^6.0.1",
25-
"interacto-angular": "^1.0.0-beta.14",
24+
"angular-split": "^13.1.0",
25+
"interacto": "^7.0.0",
26+
"interacto-angular": "^7.12.0",
2627
"rxjs": "6.6.7",
2728
"tslib": "2.0.0",
2829
"zone.js": "0.11.4"
@@ -36,7 +37,7 @@
3637
"@types/jasminewd2": "2.0.3",
3738
"@types/node": "12.11.1",
3839
"codelyzer": "6.0.0",
39-
"interacto-nono": "^0.2.0",
40+
"interacto-nono": "^0.3.0",
4041
"jasmine-core": "3.6.0",
4142
"jasmine-spec-reporter": "5.0.0",
4243
"karma": "6.3.2",

‎src/app/app.component.css

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +0,0 @@
1-
.page {
2-
font-family: 'Josefin Sans', sans-serif;
3-
}
4-
5-
h1 {
6-
text-align: center;
7-
min-height: 30px;
8-
}
9-
10-
.main {
11-
position: absolute;
12-
left: 11%;
13-
width: 85%;
14-
}
15-
16-
.main button {
17-
min-height: 35px;
18-
color: black;
19-
background-color: white;
20-
font-family: 'Josefin Sans', sans-serif;
21-
}

‎src/app/app.component.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
<div class="page">
2-
<link rel="stylesheet"
3-
href="https://fonts.googleapis.com/css?family=Josefin+Sans">
4-
52
<svg width="100%" height="100%" style="z-index:999; position: absolute; pointer-events: none; top: 0; left: 0; bottom: 0; right: 0;">
63
<line #spring display="none" style="stroke:rgb(100,100,100); stroke-width:2; z-index:999;"></line>
74
<circle #handle display="none" class="ioDwellSpring" r="25" style="fill:rgb(255,0,0); z-index:999; pointer-events: all;"></circle>
85
</svg>
96

10-
<div class="main">
11-
<h1>An Interacto-Angular app</h1>
12-
137
<app-tabs>
148
<app-tab tabTitle="Create and edit rectangles">
159
<app-tab-shapes></app-tab-shapes>
@@ -24,6 +18,5 @@ <h1>An Interacto-Angular app</h1>
2418
<app-tab-pictures></app-tab-pictures>
2519
</app-tab>
2620
</app-tabs>
27-
</div>
2821
</div>
2922

‎src/app/app.module.ts

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import {MatCardModule} from '@angular/material/card';
55
import {MatButtonModule} from '@angular/material/button';
66
import {DragDropModule} from '@angular/cdk/drag-drop';
77
import {InteractoModule} from 'interacto-angular';
8-
import { TabsComponent } from './tabs/tabs.component';
9-
import { TabComponent } from './tab/tab.component';
10-
import { TabTextComponent } from './tab-text/tab-text.component';
11-
import { TabShapesComponent } from './tab-shapes/tab-shapes.component';
12-
import { TabCardsComponent } from './tab-cards/tab-cards.component';
13-
import { TabPicturesComponent } from './tab-pictures/tab-pictures.component';
14-
import { TabContentComponent } from './tab-content/tab-content.component';
15-
import { HistoryComponent } from './history/history.component';
8+
import {TabsComponent} from './tabs/tabs.component';
9+
import {TabComponent} from './tab/tab.component';
10+
import {TabTextComponent} from './tab-text/tab-text.component';
11+
import {TabShapesComponent} from './tab-shapes/tab-shapes.component';
12+
import {TabCardsComponent} from './tab-cards/tab-cards.component';
13+
import {TabPicturesComponent} from './tab-pictures/tab-pictures.component';
14+
import {TabContentComponent} from './tab-content/tab-content.component';
15+
import {TreeHistoryComponent} from './tree-history/tree-history.component';
16+
import {AngularSplitModule} from 'angular-split';
1617

1718
@NgModule({
1819
declarations: [
@@ -24,14 +25,15 @@ import { HistoryComponent } from './history/history.component';
2425
TabCardsComponent,
2526
TabPicturesComponent,
2627
TabContentComponent,
27-
HistoryComponent
28+
TreeHistoryComponent
2829
],
2930
imports: [
3031
BrowserModule,
3132
MatCardModule,
3233
MatButtonModule,
3334
DragDropModule,
34-
InteractoModule
35+
InteractoModule,
36+
AngularSplitModule
3537
],
3638
providers: [],
3739
bootstrap: [AppComponent]

‎src/app/history/history.component.html

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/app/history/history.component.ts

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/app/tab-cards/tab-cards.component.css

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,7 @@
55
max-width: 100%;
66
margin: 4px;
77
background-color: white;
8-
font-family: 'Josefin Sans', sans-serif;
9-
color: black;
10-
11-
/* Makes the text on cards unselectable */
12-
-webkit-touch-callout: none; /* iOS Safari */
13-
-webkit-user-select: none; /* Safari */
14-
-moz-user-select: none; /* Old versions of Firefox */
15-
-ms-user-select: none; /* Internet Explorer/Edge */
16-
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
8+
user-select: none;
179
}
1810

1911
.card-elt {

‎src/app/tab-cards/tab-cards.component.html

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
1-
<app-history></app-history>
1+
<as-split direction="horizontal">
2+
<as-split-area #h [size]="20">
3+
<io-linear-history></io-linear-history>
4+
</as-split-area>
25

3-
<div class="cards-block" #cards1>
4-
<mat-card *ngFor="let card of dataService.cards1" class="cards">
5-
<mat-card-header class="card-elt">
6-
<mat-card-title>{{card.title}}</mat-card-title>
7-
<mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
8-
</mat-card-header>
9-
<mat-card-content class="card-elt">
10-
<p>
11-
{{card.text}}
12-
</p>
13-
</mat-card-content>
14-
</mat-card>
15-
</div>
6+
<as-split-area [size]="80">
7+
<div class="cards-block" #cards1>
8+
<mat-card *ngFor="let card of dataService.cards1" class="cards">
9+
<mat-card-header class="card-elt">
10+
<mat-card-title>{{card.title}}</mat-card-title>
11+
<mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
12+
</mat-card-header>
13+
<mat-card-content class="card-elt">
14+
<p>
15+
{{card.text}}
16+
</p>
17+
</mat-card-content>
18+
</mat-card>
19+
</div>
1620

17-
<div class="cards-block" #cards2>
18-
<mat-card *ngFor="let card of dataService.cards2" class="cards">
19-
<mat-card-header class="card-elt">
20-
<mat-card-title>{{card.title}}</mat-card-title>
21-
<mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
22-
</mat-card-header>
23-
<mat-card-content class="card-elt">
24-
<p>
25-
{{card.text}}
26-
</p>
27-
</mat-card-content>
28-
</mat-card>
29-
</div>
21+
<div class="cards-block" #cards2>
22+
<mat-card *ngFor="let card of dataService.cards2" class="cards">
23+
<mat-card-header class="card-elt">
24+
<mat-card-title>{{card.title}}</mat-card-title>
25+
<mat-card-subtitle>{{card.subTitle}}</mat-card-subtitle>
26+
</mat-card-header>
27+
<mat-card-content class="card-elt">
28+
<p>
29+
{{card.text}}
30+
</p>
31+
</mat-card-content>
32+
</mat-card>
33+
</div>
34+
</as-split-area>
35+
</as-split>

‎src/app/tab-cards/tab-cards.component.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
22
import {CardData, DataService} from '../service/data.service';
3-
import {Bindings, TransferArrayItem, UndoHistory} from 'interacto';
4-
import {TabContentComponent} from '../tab-content/tab-content.component';
5-
import {bindingsFactory, undoHistoryFactory} from 'interacto-angular';
3+
import {Bindings, TransferArrayItem, UndoHistoryBase} from 'interacto';
4+
import {interactoProviders} from 'interacto-angular';
65

76
@Component({
87
selector: 'app-tab-cards',
98
templateUrl: './tab-cards.component.html',
109
styleUrls: ['./tab-cards.component.css'],
11-
providers: [
12-
{provide: Bindings, useFactory: bindingsFactory},
13-
{provide: UndoHistory, useFactory: undoHistoryFactory, deps: [Bindings]}]
10+
providers: [interactoProviders()]
1411
})
15-
export class TabCardsComponent extends TabContentComponent implements AfterViewInit {
12+
export class TabCardsComponent implements AfterViewInit {
1613
@ViewChild('cards1')
1714
public cards1: ElementRef<HTMLDivElement>;
1815

@@ -25,8 +22,7 @@ export class TabCardsComponent extends TabContentComponent implements AfterViewI
2522
public card: HTMLElement | null;
2623
public sourceIndex: number;
2724

28-
public constructor(public dataService: DataService, public bindings: Bindings) {
29-
super();
25+
public constructor(public dataService: DataService, public bindings: Bindings<UndoHistoryBase>) {
3026
// With Interacto-angular you can inject in components a Bindings single-instance that allows you
3127
// to define binders and bindings in ngAfterViewInit.
3228
// The UndoHistory parameter is also injected and comes from the Bindings instance (so quite useless to inject

0 commit comments

Comments
 (0)