Skip to content

Commit 4bdc553

Browse files
geoffreykwangeoffreykwan
committed
Upgraded Draw authoring to Angular. #2889 
1 parent ced3e8a commit 4bdc553

8 files changed

Lines changed: 930 additions & 648 deletions

File tree

‎src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ import { HtmlAuthoring } from '../../../wise5/components/html/html-authoring/htm
4949
import { OutsideUrlAuthoring } from '../../../wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component';
5050
import { MultipleChoiceAuthoring } from '../../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
5151
import { ConceptMapAuthoring } from '../../../wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component';
52+
import { DrawAuthoring } from '../../../wise5/components/draw/draw-authoring/draw-authoring.component';
5253

5354
@NgModule({
5455
declarations: [
@@ -61,6 +62,7 @@ import { ConceptMapAuthoring } from '../../../wise5/components/conceptMap/concep
6162
ComponentNewWorkBadgeComponent,
6263
ComponentSelectComponent,
6364
ConceptMapAuthoring,
65+
DrawAuthoring,
6466
EditComponentRubricComponent,
6567
EditComponentJsonComponent,
6668
EditComponentMaxScoreComponent,

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 253 additions & 14 deletions
Large diffs are not rendered by default.

‎src/main/webapp/wise5/components/draw/authoring.html‎

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

‎src/main/webapp/wise5/components/draw/draw-authoring/draw-authoring.component.html‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
<mat-form-field class="prompt-input-container">
2+
<mat-label i18n>Prompt</mat-label>
3+
<textarea matInput
4+
[(ngModel)]="authoringComponentContent.prompt"
5+
(ngModelChange)="inputChange.next($event)"
6+
placeholder="Enter Prompt Here"
7+
i18n-placeholder
8+
cdkTextareaAutosize>
9+
</textarea>
10+
</mat-form-field>
11+
<div fxLayout="row" fxLayoutAlign="start center">
12+
<mat-form-field class="background-input-container">
13+
<mat-label i18n>Background Image (Optional)</mat-label>
14+
<input matInput
15+
[(ngModel)]="authoringComponentContent.background"
16+
(ngModelChange)="backgroundImageChange.next($event)"/>
17+
</mat-form-field>
18+
<button mat-raised-button
19+
color="primary"
20+
class="authoring-button"
21+
(click)="chooseBackgroundImage()"
22+
matTooltip="Choose an Image"
23+
matTooltipPosition="above"
24+
i18n-matTooltip
25+
aria-label="Choose an Image"
26+
i18n-aria-label>
27+
<mat-icon>insert_photo</mat-icon>
28+
</button>
29+
</div>
30+
<div>
31+
<mat-form-field class="canvas-dimension-container">
32+
<mat-label>Canvas Width (Optional)</mat-label>
33+
<input matInput
34+
type="number"
35+
[(ngModel)]="authoringComponentContent.width"
36+
(ngModelChange)="canvasWidthChange.next($event)"/>
37+
</mat-form-field>
38+
<mat-form-field class="canvas-dimension-container">
39+
<mat-label i18n>Canvas Height (Optional)</mat-label>
40+
<input matInput
41+
type="number"
42+
[(ngModel)]="authoringComponentContent.height"
43+
(ngModelChange)="canvasHeightChange.next($event)"/>
44+
</mat-form-field>
45+
</div>
46+
<button mat-raised-button
47+
color="primary"
48+
class="enable-all-tools-button"
49+
(click)="enableAllToolsButtonClicked()"
50+
matTooltip="Enable All Tools"
51+
matTooltipPosition="above"
52+
i18n-matTooltip
53+
aria-label="Enable All"
54+
i18n-aria-label>
55+
<mat-icon>check</mat-icon>
56+
</button>
57+
<button mat-raised-button
58+
color="primary"
59+
class="disable-all-tools-button"
60+
(click)="disableAllToolsButtonClicked()"
61+
matTooltip="Disable All Tools"
62+
matTooltipPosition="above"
63+
i18n-matTooltip
64+
aria-label="Disable All"
65+
i18n-aria-label>
66+
<mat-icon>check_box_outline_blank</mat-icon>
67+
</button>
68+
<div fxLayout="row wrap">
69+
<div class="toolsDiv">
70+
<mat-checkbox
71+
color="primary"
72+
[(ngModel)]="authoringComponentContent.tools.select"
73+
(ngModelChange)="toolClicked()"
74+
i18n>
75+
Select Tool
76+
</mat-checkbox>
77+
<br/>
78+
<mat-checkbox
79+
color="primary"
80+
[(ngModel)]="authoringComponentContent.tools.line"
81+
(ngModelChange)="toolClicked()"
82+
i18n>
83+
Line Tool
84+
</mat-checkbox>
85+
<br/>
86+
<mat-checkbox
87+
color="primary"
88+
[(ngModel)]="authoringComponentContent.tools.shape"
89+
(ngModelChange)="toolClicked()"
90+
i18n>
91+
Shape Tool
92+
</mat-checkbox>
93+
<br/>
94+
<mat-checkbox
95+
color="primary"
96+
[(ngModel)]="authoringComponentContent.tools.freeHand"
97+
(ngModelChange)="toolClicked()"
98+
i18n>
99+
Free Hand Tool
100+
</mat-checkbox>
101+
</div>
102+
<div class="toolsDiv">
103+
<mat-checkbox
104+
color="primary"
105+
[(ngModel)]="authoringComponentContent.tools.text"
106+
(ngModelChange)="toolClicked()"
107+
i18n>
108+
Text Tool
109+
</mat-checkbox>
110+
<br/>
111+
<mat-checkbox
112+
color="primary"
113+
[(ngModel)]="authoringComponentContent.tools.stamp"
114+
(ngModelChange)="toolClicked()"
115+
i18n>
116+
Stamp Tool
117+
</mat-checkbox>
118+
<br/>
119+
<mat-checkbox
120+
color="primary"
121+
[(ngModel)]="authoringComponentContent.tools.clone"
122+
(ngModelChange)="toolClicked()"
123+
i18n>
124+
Clone Tool
125+
</mat-checkbox>
126+
<br/>
127+
<mat-checkbox
128+
color="primary"
129+
[(ngModel)]="authoringComponentContent.tools.strokeColor"
130+
(ngModelChange)="toolClicked()"
131+
i18n>
132+
Stroke Color Tool
133+
</mat-checkbox>
134+
</div>
135+
<div class="toolsDiv">
136+
<mat-checkbox
137+
color="primary"
138+
[(ngModel)]="authoringComponentContent.tools.fillColor"
139+
(ngModelChange)="toolClicked()"
140+
i18n>
141+
Fill Color Tool
142+
</mat-checkbox>
143+
<br/>
144+
<mat-checkbox
145+
color="primary"
146+
[(ngModel)]="authoringComponentContent.tools.strokeWidth"
147+
(ngModelChange)="toolClicked()"
148+
i18n>
149+
Stroke Width Tool
150+
</mat-checkbox>
151+
<br/>
152+
<mat-checkbox
153+
color="primary"
154+
[(ngModel)]="authoringComponentContent.tools.sendBack"
155+
(ngModelChange)="toolClicked()"
156+
i18n>
157+
Send Back Tool
158+
</mat-checkbox>
159+
<br/>
160+
<mat-checkbox
161+
color="primary"
162+
[(ngModel)]="authoringComponentContent.tools.sendForward"
163+
(ngModelChange)="toolClicked()"
164+
i18n>
165+
Send Forward Tool
166+
</mat-checkbox>
167+
</div>
168+
<div class="toolsDiv">
169+
<mat-checkbox
170+
color="primary"
171+
[(ngModel)]="authoringComponentContent.tools.undo"
172+
(ngModelChange)="toolClicked()"
173+
i18n>
174+
Undo Tool
175+
</mat-checkbox>
176+
<br/>
177+
<mat-checkbox
178+
color="primary"
179+
[(ngModel)]="authoringComponentContent.tools.redo"
180+
(ngModelChange)="toolClicked()"
181+
i18n>
182+
Redo Tool
183+
</mat-checkbox>
184+
<br/>
185+
<mat-checkbox
186+
color="primary"
187+
[(ngModel)]="authoringComponentContent.tools.delete"
188+
(ngModelChange)="toolClicked()"
189+
i18n>
190+
Delete Tool
191+
</mat-checkbox>
192+
</div>
193+
</div>
194+
<div *ngIf="authoringComponentContent.tools.stamp">
195+
<div class="add-stamps-container">
196+
<span i18n>Stamps</span>
197+
<button mat-raised-button
198+
color="primary"
199+
class="authoring-button"
200+
(click)="addStamp()"
201+
matTooltip="Add Stamp"
202+
matTooltipPosition="above"
203+
i18n-matTooltip
204+
aria-label="Add"
205+
i18n-aria-label>
206+
<mat-icon>add</mat-icon>
207+
</button>
208+
</div>
209+
<div *ngIf="authoringComponentContent.stamps.Stamps.length == 0">
210+
There are no stamps. Click the "Add Stamp" button to add a stamp.
211+
</div>
212+
<div *ngFor="let stamp of stamps; index as stampIndex; first as isFirst; last as isLast;">
213+
<mat-form-field class="stamp-image-input-container">
214+
<mat-label i81n>Stamp Image</mat-label>
215+
<input matInput
216+
[(ngModel)]="stamp.image"
217+
(ngModelChange)="stampChanged(stamp.image, stampIndex)"
218+
placeholder="Choose an Image"
219+
i18n-placeholder/>
220+
</mat-form-field>
221+
<button mat-raised-button
222+
color="primary"
223+
class="authoring-button"
224+
(click)="chooseStampImage(stampIndex)"
225+
matTooltip="Choose an Image"
226+
matTooltipPosition="above"
227+
i18n-matTooltip
228+
aria-label="Choose an Image"
229+
i18n-aria-label>
230+
<mat-icon>insert_photo</mat-icon>
231+
</button>
232+
<button mat-raised-button
233+
color="primary"
234+
class="authoring-button"
235+
[disabled]="isFirst"
236+
(click)="moveStampUp(stampIndex)"
237+
matTooltip="Move Up"
238+
matTooltipPosition="above"
239+
i18n-matTooltip
240+
aria-label="Up"
241+
i18n-aria-label>
242+
<mat-icon>arrow_upward</mat-icon>
243+
</button>
244+
<button mat-raised-button
245+
color="primary"
246+
class="authoring-button"
247+
[disabled]="isLast"
248+
(click)="moveStampDown(stampIndex)"
249+
matTooltip="Move Down"
250+
matTooltipPosition="above"
251+
i18n-matTooltipPosition
252+
aria-label="Down"
253+
i18n-aria-label>
254+
<mat-icon>arrow_downward</mat-icon>
255+
</button>
256+
<button mat-raised-button
257+
color="primary"
258+
class="authoring-button"
259+
(click)="deleteStamp(stampIndex)"
260+
matTooltip="Delete"
261+
matTooltipPosition="above"
262+
i18n-matTooltip
263+
aria-label="Delete"
264+
i18n-aria-label>
265+
<mat-icon>delete</mat-icon>
266+
</button>
267+
</div>
268+
</div>
269+
<div class="starter-draw-buttons-container">
270+
<button mat-raised-button
271+
color="primary"
272+
class="authoring-button"
273+
(click)="saveStarterDrawData()"
274+
matTooltip="Save Starter Drawing"
275+
matTooltipPosition="above"
276+
i18n-matTooltip
277+
aria-label="Save"
278+
i18n-aria-label>
279+
<mat-icon>create</mat-icon>
280+
</button>
281+
<button mat-raised-button
282+
color="primary"
283+
class="authoring-button"
284+
(click)="deleteStarterDrawData()"
285+
matTooltip="Delete Starter Drawing"
286+
matTooltipPosition="above"
287+
i18n-matTooltip
288+
aria-label="Delete"
289+
i18n-aria-label>
290+
<mat-icon>delete_sweep</mat-icon>
291+
</button>
292+
</div>

‎src/main/webapp/wise5/components/draw/draw-authoring/draw-authoring.component.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.prompt-input-container {
2+
width: 100%;
3+
}
4+
5+
.background-input-container {
6+
width: 90%;
7+
}
8+
9+
.enable-all-tools-button {
10+
margin-right: 20px;
11+
}
12+
13+
.disable-all-tools-button {
14+
margin-right: 20px;
15+
}
16+
17+
.authoring-button {
18+
margin-left: 10px;
19+
margin-right: 10px;
20+
}
21+
22+
.canvas-dimension-container {
23+
width: 20%;
24+
margin-right: 20px;
25+
}
26+
27+
.add-stamps-container {
28+
margin-top: 20px;
29+
margin-bottom: 20px;
30+
}
31+
32+
.stamp-image-input-container {
33+
width: 50%;
34+
}
35+
36+
.starter-draw-buttons-container {
37+
margin-top: 20px;
38+
margin-bottom: 20px;
39+
}

0 commit comments

Comments
 (0)