gave a try to fix the issue llaske#1551

hharshas · Mar 14, 2024 · 3de30ce · 3de30ce
1 parent f16a4a9
commit 3de30ce
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 51 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/activities/Fototoon.activity/js/activity.js b/activities/Fototoon.activity/js/activity.js
@@ -109,7 +109,8 @@ define(["sugar-web/activity/activity","sugar-web/datastore","sugar-web/env","tex
 						element.src = text;
 					}
 					element.onload = function () {
-						toonModel.addImage(element.src);
+                        toonModel.addGlobe(element.src);
+						// toonModel.addImage(element.src);
 					};
 				});
 			}, { mimetype: 'image/png' }, { mimetype: 'image/jpeg' }, { activity: 'org.olpcfrance.PaintActivity'});

diff --git a/activities/Fototoon.activity/js/toon.js b/activities/Fototoon.activity/js/toon.js
@@ -626,7 +626,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             });
         };
 
-        this.addGlobe = function (globeType) {
+        this.addGlobe = function (globeType, imageSrc) {
             var width = 100;
             var height = 50;
             globeData = {'globe_type': globeType, 'x': 100, 'y': 100,
@@ -640,9 +640,9 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
                 globeData['mode'] = MODE_WHISPER;
             };
 
-            var globe = new Globe(this, globeData);
+            var globe = new Globe(this, globeData, imageSrc);
             this.globes.push(globe);
-            this.stage.update();
+            this.stage.update(imageSrc);
         };
 
         this.getJson = function() {
@@ -936,7 +936,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
     };
 
 
-    function Globe(box, globeData) {
+    function Globe(box, globeData, imageSrc) {
         this._box = box;
         this._stage = box.stage;
         this._shapeControls = null;
@@ -1001,7 +1001,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             this._shape = null;
         };
 
-        this.createShape = function() {
+        this.createShape = function(imageSrc) {
             if (this._shape != null) {
                 this._stage.removeChild(this._shape);
                 if (this._type == TYPE_CLOUD) {
@@ -1019,10 +1019,10 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
                 this.createShapeCloud(scaled_x, scaled_y, scale_x, scale_y);
             } else if (this._type == TYPE_EXCLAMATION) {
                 this.createShapeExclamation(scaled_x, scaled_y, scale_x, scale_y);
-            } else if (this._type == TYPE_RECTANGLE) {
-                this.createShapeRectangle();
-            } else {
+            } else if (this._type == TYPE_GLOBE) {
                 this.createShapeGlobe(scaled_x, scaled_y, scale_x, scale_y);
+            } else {
+                this.createShapeRectangle(imageSrc);
             };
 
             this._shape.on('click', function(event) {
@@ -1115,19 +1115,33 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             this._shape.setTransform(0, 0, scale_x, scale_y);
         };
 
-        this.createShapeRectangle = function() {
+        this.createShapeRectangle = function(imageSrc) {
             var x = this._x;
             var y = this._y;
             var w = this._width;
             var h = this._height;
+
 
             this._shape = new createjs.Shape();
             this._shape.name = 'rect';
             this._stage.addChild(this._shape);
             this._shape.graphics.setStrokeStyle(LINE_WIDTH, "round",
                                                 null, null, true);
             this._shape.graphics.beginStroke(BLACK);
-            this._shape.graphics.beginFill(WHITE);
+
+            var image = document.createElement("img");
+            image.crossOrigin = "Anonymous"; // Should work fine
+            image.src = imageSrc;
+            var bitmap = new createjs.Bitmap(image);
+
+            // var bitmap = new createjs.Bitmap(image);
+            bitmap.x = x - w;
+            bitmap.y = y - h;
+            bitmap.scaleX = image.width;
+            bitmap.scaleY = image.height;
+
+            this._shape.graphics.beginBitmapFill(bitmap.image, "no-repeat");
+            if(!imageSrc) this._shape.graphics.beginFill(WHITE);
 
             this._shape.graphics.rect(x - w , y - h, w * 2, h * 2);
             this._shape.graphics.endStroke();
@@ -1504,8 +1518,8 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
             };
         };
 
-        this.update = function() {
-            this.createShape();
+        this.update = function(imageSrc) {
+            this.createShape(imageSrc);
             this._textViewer.update();
             this.createControls();
             this._stage.update();
@@ -1577,7 +1591,7 @@ define(["easel","sugar-web/datastore","sugar-web/env","webL10n","humane"], funct
         };
 
         this.init();
-        this.update();
+        this.update(imageSrc);
     };
 
 

diff --git a/v2/css/styles.css b/v2/css/styles.css
@@ -1333,28 +1333,4 @@ a {
 	#toolbar-help-btn {
 	visibility: hidden;
 	}
-}
-
-/*no matching activities display in listview */
-.no-matching-activities {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	display: grid;
-	grid-template-rows: 3;
-	text-align: center;
-}
-
-.no-matching-activities > div {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin: 10px;
-}  
-.clearSearchField {
-	padding: 10px 30px;
-	background-color: #808080;
-	border-radius: 20px;
-	color : white;
 }
diff --git a/v2/js/screens/homescreen.js b/v2/js/screens/homescreen.js
@@ -52,7 +52,7 @@ const HomeScreen = {
 								:size="constant.iconSizeStandard"
 								:x="buttonpositions.prev.x"
 								:y="buttonpositions.prev.y"
-								color="512"
+								:color="512"
 								isNative="true"
 								@click="showPreviousRestrictedList"
 							></icon>
@@ -64,7 +64,7 @@ const HomeScreen = {
 								:size="constant.iconSizeStandard"
 								:x="buttonpositions.next.x"
 								:y="buttonpositions.next.y"
-								color="512"
+								:color="512"
 								isNative="true"
 								@click="showNextRestrictedList"
 							></icon>

diff --git a/v2/js/screens/listview.js b/v2/js/screens/listview.js
@@ -11,7 +11,7 @@ const ListView = {
 								:id="'star' + activity.id"
 								svgfile="./icons/star.svg"
 								:color="getStarColor(activity)"
-								size="22"
+								:size="22"
 								:x=0
 								:y=0
 								@click="toggleFavorite(activity)"
@@ -21,7 +21,7 @@ const ListView = {
 								<icon 
 									:id=activity.id
 									:svgfile="activity.directory + '/' + activity.icon"
-									size="40"
+									:size="40"
 									isNative="true"
 									v-on:mouseover="showPopupTimer($event)"
 									v-on:mouseleave="removePopupTimer($event)"
@@ -36,8 +36,8 @@ const ListView = {
 						<icon 
 							:id="'help' + activity.id"
 							svgfile="./icons/help-rev.svg"
-							color="256"
-							size="44"
+							:color="256"
+							:size="44"
 							isNative="true"
 						></icon>
 					</div>

diff --git a/v2/js/screens/loginscreen.js b/v2/js/screens/loginscreen.js
@@ -344,5 +344,4 @@ const LoginScreen = {
 			}
 		}
 	},
-};
-
+};
diff --git a/v2/js/screens/mainscreen.js b/v2/js/screens/mainscreen.js
@@ -72,7 +72,7 @@
 					</div>
 					</div>
 					<div id="canvas" ref="canvas" class="sugarizer-desktop">
-						<listview v-if="screentype==='list'" :filter="filter" :SugarL10n="SugarL10n" @clear-searchfield = "clearSearchField"/>
+						<listview v-if="screentype==='list'" :filter="filter" :SugarL10n="SugarL10n"/>
 						<homescreen ref="home" v-else-if="screentype==='home'" :filter="filter" :SugarL10n="SugarL10n"/>
 						<div v-else-if="screentype==='neighborhood'"> Neighborhood </div>
 					</div>
@@ -165,10 +165,7 @@
 				this.$refs.home.$refs.settings.openModal('aboutMyServerModal');
 			}
 		},
-		clearSearchField() {
-			this.$refs.searchfield.searchQuery = '';
-		},
 	},
 };
 
-if (typeof module !== 'undefined') module.exports = { MainScreen }
+if (typeof module !== 'undefined') module.exports = { MainScreen }