Skip to content

Commit 6d42941

Browse files
nonodev96nonodev96
committed
update wiki and multiview drag and drop
1 parent a8d0230 commit 6d42941

File tree

13 files changed

+346
-141
lines changed

13 files changed

+346
-141
lines changed

‎ABOUT.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
THUMDER - DLX Processor Simulator
22
=================================
33

4-
Copyright (©) 2021 The THUMDER project, University of Jaén
4+
Copyright (©) 2022 The THUMDER project, University of Jaén
55

66
* Interface: Antonio Mudarra Machuca
77
* Core contributors: Antonio Mudarra Machuca

‎CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1+
## <small>1.3.8 (2022-03-09)</small>
2+
3+
* Add submodule wiki ([7d7a041](https://github.com/nonodev96/THUMDER/commit/7d7a041))
4+
* CHANGELOG ([f04025e](https://github.com/nonodev96/THUMDER/commit/f04025e))
5+
* Deleted submodule wiki ([41b6bb9](https://github.com/nonodev96/THUMDER/commit/41b6bb9))
6+
* fix karma version ([ee905d3](https://github.com/nonodev96/THUMDER/commit/ee905d3))
7+
* fix layout header ([a8d0230](https://github.com/nonodev96/THUMDER/commit/a8d0230))
8+
* Wiki ([b737a0f](https://github.com/nonodev96/THUMDER/commit/b737a0f))
9+
* Wiki assets 3 and color in cycle clock diagram ([66f67b5](https://github.com/nonodev96/THUMDER/commit/66f67b5))
10+
11+
12+
113
## <small>1.3.6 (2022-02-14)</small>
214

315
* .browserslistrc, fix package.json, components, tests with karma and README ([d0c5fad](https://github.com/nonodev96/THUMDER/commit/d0c5fad))
16+
* CHANGELOG ([c70702c](https://github.com/nonodev96/THUMDER/commit/c70702c))
417
* minor changes ([e0514eb](https://github.com/nonodev96/THUMDER/commit/e0514eb))
518
* polyfills for karma tests ([d6fa110](https://github.com/nonodev96/THUMDER/commit/d6fa110))
619

‎LICENSE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright 2021 - Antonio Mudarra Machuca - <[email protected]>
1+
Copyright 2022 - Antonio Mudarra Machuca - <[email protected]>
22

33
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
44

‎src/app/CONSTANTS.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ export const DEFAULT_MULTIVIEW_CONFIGURATION: TypeMultiviewConfiguration = {
6161
pipeline: true,
6262
registers: true,
6363
statistics: false,
64-
list: [ "calculator", "code", "cycle_clock_diagram", "memory", "pipeline", "registers", "statistics" ]
64+
list_1: [ "code", "cycle_clock_diagram", "memory", "pipeline", "registers" ],
65+
list_2: [ "calculator", "statistics" ]
6566
};
6667

6768
export const DEFAULT_ENABLED_FORWARDING_CONFIGURATION: TypeEnabledForwardingConfiguration = true;

‎src/app/Types.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -562,7 +562,8 @@ export type TypeMultiviewConfiguration = {
562562
registers: boolean;
563563
code: boolean;
564564
statistics: boolean;
565-
list: string[];
565+
list_1: string[];
566+
list_2: string[];
566567
};
567568

568569
export type TypeEnabledForwardingConfiguration = boolean;

‎src/app/__core/services/globals/globals.service.ts

+56
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Injectable } from "@angular/core";
2+
import {CdkDragDrop, moveItemInArray, transferArrayItem} from "@angular/cdk/drag-drop";
23

34
@Injectable({
45
providedIn: "root"
@@ -8,4 +9,59 @@ export class Globals {
89

910
constructor() {
1011
}
12+
13+
public drop(event: CdkDragDrop<any[]>) {
14+
const nodeToMove = event.item.element.nativeElement;
15+
const { previousContainer, container, previousIndex, currentIndex } = event;
16+
if (previousContainer === container) {
17+
moveItemInArray(container.data, previousIndex, currentIndex);
18+
this.moveWithinContainer(
19+
container.element.nativeElement,
20+
previousIndex,
21+
currentIndex
22+
);
23+
window.dispatchEvent(new Event("resize"));
24+
} else {
25+
transferArrayItem(
26+
previousContainer.data,
27+
container.data,
28+
previousIndex,
29+
currentIndex
30+
);
31+
this.transferNodeToContainer(
32+
nodeToMove,
33+
container.element.nativeElement,
34+
currentIndex
35+
);
36+
window.dispatchEvent(new Event("resize"));
37+
Promise.resolve().then(() => {
38+
previousContainer.removeItem(event.item);
39+
event.item.dropContainer = container;
40+
event.item._dragRef._withDropContainer(container._dropListRef);
41+
container.addItem(event.item);
42+
});
43+
}
44+
}
45+
46+
public moveWithinContainer(container, fromIndex, toIndex) {
47+
if (fromIndex === toIndex) {
48+
return;
49+
}
50+
const nodeToMove = container.children[fromIndex];
51+
const targetNode = container.children[toIndex];
52+
if (fromIndex < toIndex) {
53+
targetNode.parentNode.insertBefore(nodeToMove, targetNode.nextSibling);
54+
} else {
55+
targetNode.parentNode.insertBefore(nodeToMove, targetNode);
56+
}
57+
}
58+
59+
public transferNodeToContainer(node, container, toIndex) {
60+
if (toIndex === container.children.length) {
61+
container.appendChild(node);
62+
} else {
63+
const targetItem = container.children[toIndex];
64+
targetItem.parentNode.insertBefore(node, targetItem);
65+
}
66+
}
1167
}

‎src/app/components/footers/footer/footer.component.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<footer class="main-footer">
22
<ng-container *ngIf="electronService.isElectronApp">
3-
<strong>Copyright &copy; 2020-2021 <a href="#" (click)="electronService.openInExternal('https://github.com/nonodev96/THUMDER')">THUMDER</a>.</strong>
3+
<strong>Copyright &copy; 2020-2022 <a href="#" (click)="electronService.openInExternal('https://github.com/nonodev96/THUMDER')">THUMDER</a>.</strong>
44
</ng-container>
55
<ng-container *ngIf="!electronService.isElectronApp">
6-
<strong>Copyright &copy; 2020-2021 <a href="https://github.com/nonodev96/THUMDER">THUMDER</a>.</strong>
6+
<strong>Copyright &copy; 2020-2022 <a href="https://github.com/nonodev96/THUMDER">THUMDER</a>.</strong>
77
</ng-container>
88
All rights reserved. |
99
<button type="button" class="btn btn-xs btn-outline-primary" data-toggle="modal" (click)="globals.showDebug=!globals.showDebug">Debug</button>
10+
<!--
1011
<ng-container *ngIf="electronService.isElectronApp">
1112
<button type="button" class="btn btn-xs btn-outline-primary" (click)="notification()">Debug notification</button>
1213
</ng-container>
14+
-->
1315
<div class="float-right d-none d-sm-block">
1416
<b>{{ 'CONFIG.ENVIRONMENT' | translate }}</b> {{environment}} |
1517
<b>{{ 'CONFIG.LANG' | translate }}</b> {{lang}} |

‎src/app/views/_auth/_views/multiples-views.component.html

+212-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,115 @@
1+
<ng-template #BigSwitch let-component='component'>
2+
<ng-container [ngSwitch]="component">
3+
4+
<ng-container *ngSwitchCase="'calculator'">
5+
<ng-container *ngIf="multiviewConfiguration.calculator">
6+
<div cdkDrag>
7+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
8+
<view-calculator>
9+
<button type="button" class="btn btn-tool" cdkDragHandle>
10+
<i class="fas fa-arrows-alt"></i>
11+
</button>
12+
</view-calculator>
13+
</div>
14+
</ng-container>
15+
</ng-container>
16+
17+
<ng-container *ngSwitchCase="'pipeline'">
18+
<ng-container *ngIf="multiviewConfiguration.pipeline">
19+
<div cdkDrag>
20+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
21+
<view-pipeline>
22+
<button type="button" class="btn btn-tool" cdkDragHandle>
23+
<i class="fas fa-arrows-alt"></i>
24+
</button>
25+
</view-pipeline>
26+
</div>
27+
</ng-container>
28+
</ng-container>
29+
30+
<ng-container *ngSwitchCase="'registers'">
31+
<ng-container *ngIf="multiviewConfiguration.registers">
32+
<div cdkDrag>
33+
<div class="example-custom-placeholder-registers" *cdkDragPlaceholder></div>
34+
<view-registers>
35+
<button type="button" class="btn btn-tool" cdkDragHandle>
36+
<i class="fas fa-arrows-alt"></i>
37+
</button>
38+
</view-registers>
39+
</div>
40+
</ng-container>
41+
</ng-container>
42+
43+
<ng-container *ngSwitchCase="'statistics'">
44+
<ng-container *ngIf="multiviewConfiguration.statistics">
45+
<div cdkDrag>
46+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
47+
<view-statistics>
48+
<button type="button" class="btn btn-tool" cdkDragHandle>
49+
<i class="fas fa-arrows-alt"></i>
50+
</button>
51+
</view-statistics>
52+
</div>
53+
</ng-container>
54+
</ng-container>
55+
56+
<ng-container *ngSwitchCase="'cycle_clock_diagram'">
57+
<ng-container *ngIf="multiviewConfiguration.cycle_clock_diagram">
58+
<div cdkDrag>
59+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
60+
<view-cycle-clock-diagram>
61+
<button type="button" class="btn btn-tool" cdkDragHandle>
62+
<i class="fas fa-arrows-alt"></i>
63+
</button>
64+
</view-cycle-clock-diagram>
65+
</div>
66+
</ng-container>
67+
</ng-container>
68+
69+
<ng-container *ngSwitchCase="'memory'">
70+
<ng-container *ngIf="multiviewConfiguration.memory">
71+
<div cdkDrag>
72+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
73+
<view-memory>
74+
<button type="button" class="btn btn-tool" cdkDragHandle>
75+
<i class="fas fa-arrows-alt"></i>
76+
</button>
77+
</view-memory>
78+
</div>
79+
</ng-container>
80+
</ng-container>
81+
82+
<ng-container *ngSwitchCase="'code'">
83+
<ng-container *ngIf="multiviewConfiguration.code">
84+
<div cdkDrag>
85+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
86+
<view-code>
87+
<button type="button" class="btn btn-tool" cdkDragHandle>
88+
<i class="fas fa-arrows-alt"></i>
89+
</button>
90+
</view-code>
91+
</div>
92+
</ng-container>
93+
</ng-container>
94+
95+
</ng-container>
96+
</ng-template>
97+
98+
99+
<!-- [cdkDropListConnectedTo]="[mainList_2]"-->
100+
<!-- [cdkDropListData]="this.multiviewConfiguration.list_1"-->
1101
<ng-container cdkDropListGroup>
2102
<div class="container-fluid">
3103
<div class="row">
4-
<div cdkDropList #mainList="cdkDropList" [cdkDropListData]="main"
5-
class="example-list col-xxl-6" (cdkDropListDropped)="drop($event)">
104+
<div class="example-list col-xxl-6"
105+
cdkDropList
106+
#mainList_1="cdkDropList"
107+
[cdkDropListConnectedTo]="[mainList_2]"
108+
[cdkDropListData]="main_list_1"
109+
(cdkDropListDropped)="globals.drop($event)">
110+
<ng-container *ngFor="let component of main_list_1">
6111

7-
<ng-container *ngFor="let component of this.multiviewConfiguration.list">
112+
<!-- BIB SWITCH -->
8113
<ng-container [ngSwitch]="component">
9114

10115
<ng-container *ngSwitchCase="'calculator'">
@@ -33,6 +138,32 @@
33138
</ng-container>
34139
</ng-container>
35140

141+
<ng-container *ngSwitchCase="'registers'">
142+
<ng-container *ngIf="multiviewConfiguration.registers">
143+
<div cdkDrag>
144+
<div class="example-custom-placeholder-registers" *cdkDragPlaceholder></div>
145+
<view-registers>
146+
<button type="button" class="btn btn-tool" cdkDragHandle>
147+
<i class="fas fa-arrows-alt"></i>
148+
</button>
149+
</view-registers>
150+
</div>
151+
</ng-container>
152+
</ng-container>
153+
154+
<ng-container *ngSwitchCase="'statistics'">
155+
<ng-container *ngIf="multiviewConfiguration.statistics">
156+
<div cdkDrag>
157+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
158+
<view-statistics>
159+
<button type="button" class="btn btn-tool" cdkDragHandle>
160+
<i class="fas fa-arrows-alt"></i>
161+
</button>
162+
</view-statistics>
163+
</div>
164+
</ng-container>
165+
</ng-container>
166+
36167
<ng-container *ngSwitchCase="'cycle_clock_diagram'">
37168
<ng-container *ngIf="multiviewConfiguration.cycle_clock_diagram">
38169
<div cdkDrag>
@@ -73,15 +204,47 @@
73204
</ng-container>
74205

75206
</ng-container>
76-
</ng-container>
207+
<!-- END BIB SWITCH -->
77208

209+
</ng-container>
78210
</div>
79-
<div cdkDropList [cdkDropListData]="main_list_2"
80-
class="example-list col-xxl-6" (cdkDropListDropped)="drop($event)">
81211

82-
<ng-container *ngFor="let component of this.multiviewConfiguration.list">
212+
<div class="example-list col-xxl-6"
213+
cdkDropList
214+
#mainList_2="cdkDropList"
215+
[cdkDropListConnectedTo]="[mainList_1]"
216+
[cdkDropListData]="main_list_2"
217+
(cdkDropListDropped)="globals.drop($event)">
218+
<ng-container *ngFor="let component of main_list_2">
219+
<!-- BIB SWITCH -->
83220
<ng-container [ngSwitch]="component">
84221

222+
<ng-container *ngSwitchCase="'calculator'">
223+
<ng-container *ngIf="multiviewConfiguration.calculator">
224+
<div cdkDrag>
225+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
226+
<view-calculator>
227+
<button type="button" class="btn btn-tool" cdkDragHandle>
228+
<i class="fas fa-arrows-alt"></i>
229+
</button>
230+
</view-calculator>
231+
</div>
232+
</ng-container>
233+
</ng-container>
234+
235+
<ng-container *ngSwitchCase="'pipeline'">
236+
<ng-container *ngIf="multiviewConfiguration.pipeline">
237+
<div cdkDrag>
238+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
239+
<view-pipeline>
240+
<button type="button" class="btn btn-tool" cdkDragHandle>
241+
<i class="fas fa-arrows-alt"></i>
242+
</button>
243+
</view-pipeline>
244+
</div>
245+
</ng-container>
246+
</ng-container>
247+
85248
<ng-container *ngSwitchCase="'registers'">
86249
<ng-container *ngIf="multiviewConfiguration.registers">
87250
<div cdkDrag>
@@ -108,10 +271,51 @@
108271
</ng-container>
109272
</ng-container>
110273

274+
<ng-container *ngSwitchCase="'cycle_clock_diagram'">
275+
<ng-container *ngIf="multiviewConfiguration.cycle_clock_diagram">
276+
<div cdkDrag>
277+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
278+
<view-cycle-clock-diagram>
279+
<button type="button" class="btn btn-tool" cdkDragHandle>
280+
<i class="fas fa-arrows-alt"></i>
281+
</button>
282+
</view-cycle-clock-diagram>
283+
</div>
284+
</ng-container>
285+
</ng-container>
286+
287+
<ng-container *ngSwitchCase="'memory'">
288+
<ng-container *ngIf="multiviewConfiguration.memory">
289+
<div cdkDrag>
290+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
291+
<view-memory>
292+
<button type="button" class="btn btn-tool" cdkDragHandle>
293+
<i class="fas fa-arrows-alt"></i>
294+
</button>
295+
</view-memory>
296+
</div>
297+
</ng-container>
298+
</ng-container>
299+
300+
<ng-container *ngSwitchCase="'code'">
301+
<ng-container *ngIf="multiviewConfiguration.code">
302+
<div cdkDrag>
303+
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
304+
<view-code>
305+
<button type="button" class="btn btn-tool" cdkDragHandle>
306+
<i class="fas fa-arrows-alt"></i>
307+
</button>
308+
</view-code>
309+
</div>
310+
</ng-container>
311+
</ng-container>
312+
111313
</ng-container>
112-
</ng-container>
314+
<!-- END BIB SWITCH -->
113315

316+
</ng-container>
114317
</div>
115318
</div>
116319
</div>
117320
</ng-container>
321+

0 commit comments

Comments
 (0)