feat: sync mixly root files and common folder

mixly/common/js/mixpyProject.js

@@ -0,0 +1,93 @@
+var MixpyProject = function () {
+    this.initProject();
+}
+
+MixpyProject.prototype.initProject = function () {
+    this.fileD = {};
+    this.MAINF = 'main.py'
+    this.fileD[this.MAINF] = ["", true, 1];
+    this.selectFile = this.MAINF;
+}
+
+MixpyProject.prototype.add = function (file, filecontent, filetype) {
+    if (this.exist(file)) {
+        console.log("Warning:file already in project");
+        return;
+    }
+    this.fileD[file] = [filecontent, false, filetype];
+}
+
+MixpyProject.prototype.delete = function (file) {
+    delete this.fileD[file];
+    this.selectFile = undefined;
+}
+MixpyProject.prototype.getProject = function () {
+    return Object.keys(this.fileD);
+}
+
+MixpyProject.prototype.getUploadFileList = function () {
+    var fileNameList = Object.keys(this.fileD);
+    var ret = [];
+    for (var i in fileNameList) {
+        if (this.fileD[fileNameList[i]][2] === 2)
+            ret.push(fileNameList[i]);
+    }
+    return ret;
+}
+
+MixpyProject.prototype.getNewFileList = function () {
+    var fileNameList = Object.keys(this.fileD);
+    var ret = [];
+    for (var i in fileNameList) {
+        if (this.fileD[fileNameList[i]][2] === 1)
+            ret.push(fileNameList[i]);
+    }
+    return ret;
+
+}
+
+MixpyProject.prototype.isSelect = function (f) {
+    return this.fileD[f][1];
+}
+
+MixpyProject.prototype.select = function (f) {
+    if (this.selectFile !== undefined) {
+        this.modify(this.selectFile, mixlyjs.getCodeContent());
+        this.fileD[this.selectFile][1] = false;
+    }
+    this.fileD[f][1] = true;
+    this.selectFile = f;
+    var suffix = mixlyjs.getFileSuffix(f);
+    var textFileSuffix = ["py", "txt", "csv", "xml"];
+    if (textFileSuffix.indexOf(suffix) !== -1) {
+        tabClick('arduino');
+        mixlyjs.renderIno(this.fileD[f][0]);
+    } else {
+        var base64str = 'data:image/' + suffix + ';base64,' + this.fileD[f][0];
+        $('#mixpy_show_image').attr('src', base64str);
+        mixlyjs.renderIno(this.fileD[f][0]);
+        tabClick('image');
+
+        var $imageA = $('#mixpy_link_image');
+        $imageA.attr('href', base64str);
+        $imageA.attr('download', f);
+    }
+}
+
+MixpyProject.prototype.getFileNum = function (f) {
+    var files = Object.keys(this.fileD);
+    return files.length;
+}
+MixpyProject.prototype.getFileContent = function (f) {
+    return this.fileD[f][0];
+}
+MixpyProject.prototype.getFileType = function (f) {
+    return this.fileD[f][2];
+}
+MixpyProject.prototype.modify = function (f, content) {
+    this.fileD[f][0] = content;
+}
+
+MixpyProject.prototype.exist = function (f) {
+    return f in this.fileD;
+}

mixly/common/js/pixi/pixi_sprite.js

@@ -0,0 +1,719 @@
+SPRITE = {
+	stage: new PIXI.Container(),
+	pointer: {x:0, y:0},
+	backgroundSprite: null,
+	sprites: {},
+	texts: {},
+	counter: 0,
+	keys: {},
+	state: false,
+	running: false,
+	repeatPlay: ()=>{},
+	
+	displayTag: false,
+	processingDisplayEvent: null,
+	
+	successDisplayEvents: [],
+	successProcessingDisplayEvents: [],
+	
+	startTime: performance.now(),
+	timer: 0,
+	lastFrameTime: null,
+	lastSecond: null,
+	targetFPS: 60,
+	frameCount: 0,
+	currentFPS: 60,
+	
+	canvasHeight: 450,
+	canvasWidth: 800
+};
+SPRITE.gameLoop = ()=>{
+	if(SPRITE.state == true) {
+		SPRITE.repeatPlay();
+		SPRITE.GameLoopDisplay();
+	}
+	SPRITE.timer = performance.now() - SPRITE.startTime;
+}
+SPRITE.animate = (currentTime)=>{
+	const deltaTime = currentTime - SPRITE.lastFrameTime;
+	
+	if (deltaTime >= 1000 / SPRITE.targetFPS) {
+		SPRITE.frameCount++;
+		SPRITE.gameLoop();
+		SPRITE.renderer.render(SPRITE.stage);
+		SPRITE.lastFrameTime = currentTime;
+	}
+	if (currentTime - SPRITE.lastSecond >= 1000) {
+		SPRITE.currentFPS = SPRITE.frameCount;
+		SPRITE.frameCount = 0;
+		SPRITE.lastSecond = currentTime;
+	}
+	requestAnimationFrame(SPRITE.animate);
+}
+
+SPRITE.CreateBackground = (img, mode=0)=>{
+	var player;
+	if(mode==0) {
+		player = new PIXI.Sprite.fromImage(`../common/media/spriteimg/${img}.png`);
+	}
+	player.name = 'background';
+	player.anchor.set(0.5);
+	player.x = SPRITE.canvasWidth/2;
+	player.y = SPRITE.canvasHeight/2;
+	
+	// const $canvas = $('#spriteContainer canvas');
+	// const canvasWidth = $canvas.width();
+	// const canvasHeight = $canvas.height();
+	// player.width = ($('body').width() / 2);
+	// player.height = ($('body').width() / 2)/canvasWidth*canvasHeight;
+	
+	player.width = SPRITE.canvasWidth;
+	player.height = SPRITE.canvasHeight;
+	
+	player.interactive = true;
+	player.buttonMode = true;
+	player.isDown = false;
+	player.isUp = true;
+	player.on('mousedown',function(event){
+			this.isDown = true;
+			this.isUp = false;
+			if(SPRITE.state)this.RunningMouseDown();
+		})
+		.on('mouseup',function(event){
+			this.isDown = false;
+			this.isUp = true;
+		})
+		.on('mouseupoutside',function(event){
+			this.isDown = false;
+			this.isUp = true;
+		});
+	player.RunningMouseDown = new Function("");
+	if (SPRITE.backgroundSprite && SPRITE.backgroundSprite.parent) {
+		// 如果子节点已经在父节点中，需要先移除
+		SPRITE.stage.removeChild(SPRITE.backgroundSprite);
+	}
+	SPRITE.backgroundSprite = player;
+	SPRITE.stage.addChildAt(SPRITE.backgroundSprite, 0);
+	return 0;
+}
+
+SPRITE.CreateASprite = (img, x = SPRITE.canvasWidth/2, y = SPRITE.canvasHeight/2, name = '', mode = 0)=>{
+	if(name=='') {
+		name = 'sprite'+ (++SPRITE.counter);
+	}
+	var player;
+	if(mode==0) {
+		player = new PIXI.Sprite.fromImage(`../common/media/spriteimg/${img}.png`);
+	}
+	if (!SPRITE.sprites[name]&&!SPRITE.texts[name]) {
+		player.name = name;
+		player.anchor.set(0.5);
+		player.x = x;
+		player.y = y;
+		player.interactive = true;
+		player.buttonMode = true;
+		player.isDown = false;
+		player.isUp = true;
+		player.on('mousedown', function(event){
+				this.isDown = true;
+				this.isUp = false;
+				if (!SPRITE.state) {
+					this.data = event.data;
+					this.alpha = 0.5;
+					this.dragging = true;
+				} else this.RunningMouseDown();
+			})
+			.on('mouseup', function(event){
+				this.isDown = false;
+				this.isUp = true;
+				if (!SPRITE.state) {
+					this.alpha = 1;
+					this.dragging = false;
+					this.data = null;
+				}
+			})
+			.on('mouseupoutside', function(event){
+				this.isDown = false;
+				this.isUp = true;
+				if (!SPRITE.state) {
+					this.alpha = 1;
+					this.dragging = false;
+					this.data = null;
+				}
+			})
+			.on('mousemove', function(event){
+				if (!SPRITE.state)
+					if (this.dragging) {
+						var newPosition = this.data.getLocalPosition(this.parent);
+						this.position.x = newPosition.x;
+						this.position.y = newPosition.y;
+					}
+			})
+		player.RunningMouseDown = new Function("");
+		player.show = function(){
+			this.visible = true;
+		};
+		player.hide = function(){
+			this.visible = false;
+		};
+		player.enlarge = function(s){
+			const ratio = this.height/this.width;
+			var measure = Math.sqrt(this.height*this.width);
+			measure+=s;
+			this.width = Math.sqrt(measure*measure/ratio);
+			this.height = this.width*ratio;
+		};
+		player.enlargeTo = function(s){
+			var ratio = this.height/this.width;
+			this.width = Math.sqrt(s*s/ratio);
+			this.height = this.width*ratio;
+		};
+		
+		player.expandTo = function(s, time=1){
+			if(SPRITE.running) {
+				SPRITE.displayTag = true;
+				SPRITE.processingDisplayEvent = {
+					sprite: this,
+					targetS: s,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'expand'
+				};
+				
+				var prom = new Promise((resolve, reject) => {
+					if (SPRITE.displayTag === false) {
+						resolve();
+					} else {
+						const checkTagInterval = setInterval(() => {
+							if (SPRITE.displayTag === false) {
+								clearInterval(checkTagInterval);
+								resolve();
+							}
+						}, 10);
+					}
+				});
+				
+				var susp = new Sk.misceval.Suspension();
+				var resolution;
+				
+				susp.resume = function () {
+					if (susp.data["error"]) {
+						throw susp.data["error"];
+					} else {
+						return resolution;
+					}
+				};
+				
+				susp.data = {
+					type: "Sk.promise",
+					promise: prom.then(function (value) {
+						resolution = value;
+						return value;
+					}, function (err) {
+						console.log("err3", err);
+						resolution = "";
+						return Promise.reject(err);
+					})
+				};
+				return susp;
+			} else {
+				SPRITE.successProcessingDisplayEvents.push({
+					sprite: this,
+					targetS: s,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'expand'
+				});
+				return 0;
+			}
+		};
+		
+		player.move = function(step){
+			this.x += step * Math.cos(this.rotation);
+			this.y += step * Math.sin(this.rotation);
+		};
+		player.moveTo = function(x, y){
+			this.x = x;
+			this.y = y;
+		};
+		player.slideTo = function(x, y, time=1) {
+			if(SPRITE.running) {
+				SPRITE.displayTag = true;
+				SPRITE.processingDisplayEvent = {
+					sprite: this,
+					targetX: x,
+					targetY: y,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'slide'
+				};
+				
+				var prom = new Promise((resolve, reject) => {
+					const checkTagInterval = setInterval(() => {
+						if (SPRITE.displayTag === false) {
+							clearInterval(checkTagInterval);
+							resolve();
+						}
+					}, 10);
+				});
+				
+				var susp = new Sk.misceval.Suspension();
+				var resolution;
+				
+				susp.resume = function () {
+					if (susp.data["error"]) {
+						throw susp.data["error"];
+					} else {
+						return resolution;
+					}
+				};
+				
+				susp.data = {
+					type: "Sk.promise",
+					promise: prom.then(function (value) {
+						resolution = value;
+						return value;
+					}, function (err) {
+						console.log("err3", err);
+						resolution = "";
+						return Promise.reject(err);
+					})
+				};
+				
+				return susp;
+			} else {
+				SPRITE.successProcessingDisplayEvents.push({
+					sprite: this,
+					targetX: x,
+					targetY: y,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'slide'
+				});
+				return 0;
+			}
+		};
+		player.addX = function(step) {
+			this.x += step;
+		};
+		player.addY = function(step) {
+			this.y += step;
+		};
+		player.rotate = function(degree) {
+			this.rotation += Math.PI/180*degree;
+		};
+		player.rotateTo = function(degree) {
+			this.rotation = Math.PI/180*degree;
+		};
+		player.circleTo = function(degree, time=1) {
+			if(SPRITE.running) {
+				SPRITE.displayTag = true;
+				SPRITE.processingDisplayEvent = {
+					sprite: this,
+					targetDegree: degree,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'circle'
+				};
+				var prom = new Promise((resolve, reject) => {
+					if (SPRITE.displayTag === false) {
+						resolve();
+					} else {
+						const checkTagInterval = setInterval(() => {
+							if (SPRITE.displayTag === false) {
+								clearInterval(checkTagInterval);
+								resolve();
+							}
+						}, 10);
+					}
+				});
+				
+				var susp = new Sk.misceval.Suspension();
+				var resolution;
+				
+				susp.resume = function () {
+				    if (susp.data["error"]) {
+				        throw susp.data["error"];
+				    } else {
+				        return resolution;
+				    }
+				};
+				
+				susp.data = {
+				    type: "Sk.promise",
+				    promise: prom.then(function (value) {
+				        resolution = value;
+				        return value;
+				    }, function (err) {
+				        console.log("err3", err);
+				        resolution = "";
+				        return Promise.reject(err);
+				    })
+				};
+				return susp;
+			} else {
+				SPRITE.successProcessingDisplayEvents.push({
+					sprite: this,
+					targetDegree: degree,
+					totalTime: time*1000,
+					startTime: performance.now(),
+					displayType: 'circle'
+				});
+				return 0;
+			}
+		};
+		player.hit = function(sprite) {
+			return SPRITE.hitTestRectangle(this, sprite);
+		};
+		player.outOfScreen = function() {
+			return this.y >= SPRITE.renderer.height || this.y <= 0 || this.x <= 0 || this.x >= SPRITE.renderer.width;
+		};
+		player.mouseAction = function(func) {
+			this.RunningMouseDown = func;
+		};
+		
+		// new
+		player.setScale = function(h = 0, w = 0) {
+			if(h==0) h = this.height;
+			if(w==0) w = this.width;
+			this.height = h;
+			this.width = w;
+		}
+		player.filterGray = function() {
+			const grayscaleFilter = new PIXI.filters.ColorMatrixFilter();
+			grayscaleFilter.blackAndWhite();
+			this.filters = [grayscaleFilter];
+		}
+		player.filterBrighter = function() {
+			const brightnessFilter = new PIXI.filters.ColorMatrixFilter();
+			brightnessFilter.brightness(1.25); // 增加亮度
+			this.filters = [brightnessFilter];
+		}
+		player.filterOrigin = function() {
+			this.filters = null;
+		}
+		
+		SPRITE.stage.addChild(player);
+		SPRITE.sprites[name] = player;
+	}
+	return name;
+}
+
+SPRITE.ClearAllSprites = ()=>{
+	if(SPRITE.backgroundSprite && SPRITE.backgroundSprite.parent)SPRITE.backgroundSprite.parent.removeChild(SPRITE.backgroundSprite);
+	for(const name in SPRITE.sprites) {
+		SPRITE.sprites[name].parent.removeChild(SPRITE.sprites[name]);
+		delete SPRITE.sprites[name];
+	}
+	for(const name in SPRITE.texts) {
+		SPRITE.texts[name].parent.removeChild(SPRITE.texts[name]);
+		delete SPRITE.texts[name];
+	}
+	SPRITE.counter = 0;
+	SPRITE.ClearTimer();
+	return 0;
+}
+
+SPRITE.CreateText = (text, x = SPRITE.canvasWidth/2, y = SPRITE.canvasHeight/2, name = '')=>{
+	if(name=='') {
+		name = 'text'+ (++SPRITE.counter);
+	}
+	if (!SPRITE.sprites[name]&&!SPRITE.texts[name]) {
+		var textObj = new PIXI.Text(text);
+		textObj.name = name;
+		textObj.x = x;
+		textObj.y = y;
+		textObj.interactive = true;
+		textObj.buttonMode = true;
+		textObj.on('mousedown', function(event){
+				this.isDown = true;
+				this.isUp = false;
+				if (!SPRITE.state) {
+					this.data = event.data;
+					this.alpha = 0.5;
+					this.dragging = true;
+				} else this.RunningMouseDown();
+			})
+			.on('mouseup', function(event){
+				this.isDown = false;
+				this.isUp = true;
+				if (!SPRITE.state) {
+					this.alpha = 1;
+					this.dragging = false;
+					this.data = null;
+				}
+			})
+			.on('mouseupoutside', function(event){
+				this.isDown = false;
+				this.isUp = true;
+				if (!SPRITE.state) {
+					this.alpha = 1;
+					this.dragging = false;
+					this.data = null;
+				}
+			})
+			.on('mousemove', function(event){
+				if (!SPRITE.state)
+					if (this.dragging) {
+						var newPosition = this.data.getLocalPosition(this.parent);
+						this.position.x = newPosition.x;
+						this.position.y = newPosition.y;
+					}
+			});
+		textObj.RunningMouseDown = new Function("");
+		textObj.changeText = function(text) {
+			this.text = text;
+		};
+		textObj.show = function(){
+			this.visible = true;
+		};
+		textObj.hide = function(){
+			this.visible = false;
+		};
+		SPRITE.stage.addChild(textObj);
+		SPRITE.texts[name] = textObj;
+	}
+	return name;
+}
+
+SPRITE.hitTestRectangle = (r1, r2)=>{
+	let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
+	hit = false;
+	r1.centerX = r1.x + r1.width / 2;
+	r1.centerY = r1.y + r1.height / 2;
+	r2.centerX = r2.x + r2.width / 2;
+	r2.centerY = r2.y + r2.height / 2;
+	r1.halfWidth = r1.width / 2;
+	r1.halfHeight = r1.height / 2;
+	r2.halfWidth = r2.width / 2;
+	r2.halfHeight = r2.height / 2;
+	vx = r1.centerX - r2.centerX;
+	vy = r1.centerY - r2.centerY;
+	combinedHalfWidths = r1.halfWidth + r2.halfWidth;
+	combinedHalfHeights = r1.halfHeight + r2.halfHeight;
+	if (Math.abs(vx) < combinedHalfWidths) {
+		if (Math.abs(vy) < combinedHalfHeights) {
+			hit = true;
+		} else {
+			hit = false;
+		}
+	} else {
+		hit = false;
+	}
+	return hit;
+};
+
+SPRITE.Repeat = (func)=>{
+	SPRITE.repeatPlay = func;
+}
+
+SPRITE.IsKeyboardHit = (keyvalue)=>{
+	if(!SPRITE.keys[keyvalue]){
+		let key = SPRITE.keyboard(keyvalue);
+		SPRITE.keys[keyvalue] = key;
+	}
+	return SPRITE.keys[keyvalue].isDown;
+}
+
+SPRITE.KeyboardListener = (keyvalue, func)=>{
+	if(!SPRITE.keys[keyvalue]){
+		let key = SPRITE.keyboard(keyvalue);
+		key.press = function(){
+			if(SPRITE.state)func();
+		};
+		SPRITE.keys[keyvalue] = key;
+	} else {
+		SPRITE.keys[keyvalue].press = function(){
+			if(SPRITE.state)func();
+		};
+	}
+}
+SPRITE.keyboard = (value)=>{
+	let key = {};
+	key.value = value;
+	key.isDown = false;
+	key.isUp = true;
+	key.press = undefined;
+	key.release = undefined;
+	key.downHandler = event => {
+		if (event.key === key.value) {
+			if (key.isUp && key.press) key.press();
+			key.isDown = true;
+			key.isUp = false;
+			event.preventDefault();
+		}
+	};
+	key.upHandler = event => {
+		if (event.key === key.value) {
+			if (key.isDown && key.release) key.release();
+			key.isDown = false;
+			key.isUp = true;
+			event.preventDefault();
+		}
+	};
+	const downListener = key.downHandler.bind(key);
+	const upListener = key.upHandler.bind(key);
+	window.addEventListener(
+		"keydown", downListener, false
+	);
+	window.addEventListener(
+		"keyup", upListener, false
+	);
+	key.unsubscribe = () => {
+		window.removeEventListener("keydown", downListener);
+		window.removeEventListener("keyup", upListener);
+	};
+	return key;
+}
+
+SPRITE.ClearTimer = ()=>{
+	SPRITE.startTime = performance.now();
+}
+
+SPRITE.GameLoopDisplay = ()=>{
+	if(SPRITE.processingDisplayEvent) {
+		const pSE = SPRITE.processingDisplayEvent;
+		switch (pSE.displayType) {
+			case 'slide':
+				if(performance.now() >= pSE.totalTime + pSE.startTime) {
+					pSE.sprite.moveTo(pSE.targetX, pSE.targetY);
+					SPRITE.displayTag = false;
+					SPRITE.processingDisplayEvent = null;
+				} else {
+					var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+					if(leftLoops>=1) {
+						pSE.sprite.addX((pSE.targetX - pSE.sprite.x) / leftLoops);
+						pSE.sprite.addY((pSE.targetY - pSE.sprite.y) / leftLoops);
+					}
+				}
+				break;
+			case 'expand':
+				if(performance.now() >= pSE.totalTime + pSE.startTime) {
+					pSE.sprite.enlargeTo(pSE.targetS);
+					SPRITE.displayTag = false;
+					SPRITE.processingDisplayEvent = null;
+				} else {
+					var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+					if(leftLoops>=1) {
+						pSE.sprite.enlarge((pSE.targetS-Math.sqrt(pSE.sprite.height*pSE.sprite.width))/leftLoops);
+					}
+				}
+				break;
+			case 'circle':
+				if(performance.now() >= pSE.totalTime + pSE.startTime) {
+					pSE.sprite.rotateTo(pSE.targetDegree);
+					SPRITE.displayTag = false;
+					SPRITE.processingDisplayEvent = null;
+				} else {
+					var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+					if(leftLoops>=1) {
+						pSE.sprite.rotate((pSE.targetDegree - pSE.sprite.rotation*180/Math.PI)/leftLoops);
+					}
+				}
+				break;
+		}
+	}
+	
+	if(!SPRITE.running) {
+		if(SPRITE.successProcessingDisplayEvents.length) {
+			for(var pSEindex = SPRITE.successProcessingDisplayEvents.length-1; pSEindex>=0; pSEindex--) {
+				const pSE = SPRITE.successProcessingDisplayEvents[pSEindex];
+				switch (pSE.displayType) {
+					case 'slide':
+						if(performance.now() >= pSE.totalTime + pSE.startTime) {
+							pSE.sprite.moveTo(pSE.targetX, pSE.targetY);
+							SPRITE.successProcessingDisplayEvents.splice(pSEindex, 1);
+						} else {
+							var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+							if(leftLoops>=1) {
+								pSE.sprite.addX((pSE.targetX - pSE.sprite.x) / leftLoops);
+								pSE.sprite.addY((pSE.targetY - pSE.sprite.y) / leftLoops);
+							}
+						}
+						break;
+					case 'expand':
+						if(performance.now() >= pSE.totalTime + pSE.startTime) {
+							pSE.sprite.enlargeTo(pSE.targetS);
+							SPRITE.successProcessingDisplayEvents.splice(pSEindex, 1);
+						} else {
+							var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+							if(leftLoops>=1) {
+								pSE.sprite.enlarge((pSE.targetS-Math.sqrt(pSE.sprite.height*pSE.sprite.width))/leftLoops);
+							}
+						}
+						break;
+					case 'circle':
+						if(performance.now() >= pSE.totalTime + pSE.startTime) {
+							pSE.sprite.rotateTo(pSE.targetDegree);
+							SPRITE.successProcessingDisplayEvents.splice(pSEindex, 1);
+						} else {
+							var leftLoops = SPRITE.currentFPS * (pSE.totalTime + pSE.startTime - performance.now())/1000;
+							if(leftLoops>=1) {
+								pSE.sprite.rotate((pSE.targetDegree - pSE.sprite.rotation*180/Math.PI)/leftLoops);
+							}
+						}
+						break;
+				}
+			}
+		}
+	}
+}
+
+SPRITE.ChangeWidth = (w)=>{
+	const $canvas = $(SPRITE.renderer.view);
+	const canvasWidth = $canvas.width();
+	const canvasHeight = $canvas.height();
+	$canvas.width(w);
+	$canvas.height(w/canvasWidth*canvasHeight);
+}
+
+SPRITE.kill = ()=>{
+	SPRITE.state = false;
+	SPRITE.repeatPlay = new Function();
+	for(i in SPRITE.keys){
+		SPRITE.keys[i].unsubscribe();
+		delete SPRITE.keys[i];
+	}
+	SPRITE.processingDisplayEvent = null;
+	SPRITE.displayTag = false;
+	SPRITE.running = false;
+	SPRITE.ClearTimer();
+}
+
+SPRITE.runit = (container) => {
+	const $container = $(container);
+	$container.empty();
+	// Keep the scale mode to nearest
+	PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
+	SPRITE.renderer = PIXI.autoDetectRenderer(SPRITE.canvasWidth, SPRITE.canvasHeight,{backgroundColor : 0x00FFFFFF});
+	$container.append(SPRITE.renderer.view);
+	// Create SPRITE.stage container
+	// SPRITE.stage = new PIXI.Container();
+	SPRITE.pointer = {x:0, y:0};
+	SPRITE.stage.sortableChildren = true;
+	SPRITE.stage.interactive = true;
+	SPRITE.stage.on("mousemove", (event=PIXI.InteractionEvent) => {
+		SPRITE.pointer.x = event.data.global.x;
+		SPRITE.pointer.y = event.data.global.y;
+	});
+	SPRITE.lastFrameTime = 0;
+	SPRITE.running = true;
+	if (!SPRITE.lastFrameTime) {
+		SPRITE.lastFrameTime = performance.now();
+		SPRITE.lastSecond = performance.now();
+	}
+	SPRITE.animate(performance.now());
+	SPRITE.repeatPlay = new Function();
+	for(i in SPRITE.keys){
+		SPRITE.keys[i].unsubscribe();
+		delete SPRITE.keys[i];
+	}
+	if(SPRITE.backgroundSprite) SPRITE.backgroundSprite.RunningMouseDown = new Function();
+	for(i in SPRITE.sprites) SPRITE.sprites[i].RunningMouseDown = new Function();
+	for(i in SPRITE.texts) SPRITE.texts[i].RunningMouseDown = new Function();
+	SPRITE.processingDisplayEvent = null;
+	SPRITE.displayTag = false;
+	SPRITE.ClearTimer();
+	SPRITE.ChangeWidth($('body').width() / 2);
+	SPRITE.state = true;
+}

mixly/common/js/py2block_editor.js

@@ -0,0 +1,248 @@
+
+function Py2blockEditor(py2block_conveter, ace_editor){
+    this.convert = py2block_conveter;
+    this.editor = ace_editor;
+    this.silentText = false;
+    this.silentBlock = false;
+    this.lastCodeSnapshot = "";
+    this.fromCode = false;
+}
+
+Py2blockEditor.prototype.isFuncStartLine = function(line){
+    return /^ *?def *?.*?\(.*?\): *?$/.test(line);
+}
+
+Py2blockEditor.prototype.isEmptyNewLine = function(line){
+    return /^ +?$/.test(line) || line == "";
+}
+
+Py2blockEditor.prototype.getIndentOfLine = function(line){
+    for(var i = 0 ; i < line.length ; i ++){
+        if(line[i] != " "){
+            return i;
+        }
+    }
+    return 0;
+}
+
+// 换行和tab的处理；
+Py2blockEditor.prototype.formatLine = function (python_code) {
+    python_code = python_code.replace("\r\n", "\n")
+        .replace("\r", "\n")
+        .replace("\t", "    ");
+    return python_code;
+}
+
+// 格式化模块方法的调用形式. 如 Pin->machine.Pin
+Py2blockEditor.prototype.formatModule = function (python_code) {
+    var keylist = py2block_config.formatModuleKeyL;
+    var modulelist = py2block_config.formatModuleL;
+    for (var i = 0; i < keylist.length; i++) {
+        for (var j = 0; j < keylist[i].length; j++) {
+            var reg = new RegExp(modulelist[i] + "." + keylist[i][j], "g");
+            python_code = python_code.replace(reg, keylist[i][j]);
+            var reg = new RegExp("(" + "\\b"+keylist[i][j] + "\\(" + "|" +"\\b"+ keylist[i][j] + "\\." + ")", "g");
+            python_code = python_code.replace(reg, function(match) {
+                return modulelist[i] + "." + match;
+            });
+        }
+    }
+    return python_code;
+}
+    
+
+//为函数定义前后增加空行
+Py2blockEditor.prototype.addNewLines = function(python_code){
+    var lines = python_code.split("\n");
+    var isFirstLine = true;
+    var isNewLine = false;
+    var isFuncDefScope = false;
+    var indent = 0;
+    var new_python_code = "";
+    var newLine = "";
+    //遍历每行
+    for(var i = 0 ; i < lines.length ; i ++){
+        var line = lines[i];
+        //函数定义的开始行（def XXX()）
+        if(this.isFuncStartLine(line)){
+            isFuncDefScope = true;
+            indent = this.getIndentOfLine(line);
+            if(!isFirstLine && !isNewLine){
+                line = "\n" + line;
+            }
+        }else if(isFuncDefScope && this.getIndentOfLine(line) <= indent){//函数定义结束后的第一行
+            if(!this.isEmptyNewLine(line)){
+               line = "\n" + line;
+            }else {
+                isFuncDefScope = false;
+            }
+        }
+        //是否是空行
+        if(this.isEmptyNewLine(line)){
+            isNewLine = true;
+        }else{
+            isNewLine = false;
+        }
+        new_python_code += line + "\n";
+        isFirstLine = false;
+    }
+    return new_python_code;
+}
+
+
+Py2blockEditor.prototype.encodeChinese = function(code){
+    return code.replace(/[\u4e00-\u9fa5]+/g, function (s) {
+        return encodeURIComponent(s).replace(/%/g, "_");
+    })
+}
+
+
+Py2blockEditor.prototype.decodeChinese = function(code){
+    return code.replace(/(_[0-9A-F]{2}_[0-9A-F]{2}_[0-9A-F]{2})+/g, function (s) {
+        return decodeURIComponent(s.replace(/_/g, '%'));
+    });
+}
+
+
+Py2blockEditor.prototype.setBlocks = function(python_code){
+    var xml_code = "";
+    py2block_config.reset();
+    python_code = this.formatLine(python_code);
+    python_code = this.formatModule(python_code);
+    python_code = this.addNewLines(python_code);
+    if (python_code !== '' && python_code !== undefined && python_code.trim().charAt(0) !== '<') {
+        var result = this.convert.convertSource(python_code);
+        xml_code = this.decodeChinese(result.xml);
+        if (result.error !== null) {
+            console.log(result.error);
+        } else {
+
+        }
+    }
+    var error_code = this.convert.convertSourceToCodeBlock(python_code);
+    var errorXml = Blockly.utils.xml.textToDom(error_code);
+    if (python_code == '' || python_code == undefined || python_code.trim() == '') {
+        Mixly.Editor.blockEditor.clear();
+    } else if (xml_code !== '' && xml_code !== undefined) {
+        var blocklyXml = Blockly.utils.xml.textToDom(xml_code);
+        try {
+            this.setBlocksFromXml(blocklyXml);
+        } catch (e) {
+            console.error(e);
+            this.setBlocksFromXml(errorXml);
+        }
+    } else {
+        this.setBlocksFromXml(errorXml);
+    }
+}
+
+Py2blockEditor.prototype.setBlocksFromXml = function(xml){
+    Mixly.Editor.blockEditor.clear();
+    Blockly.Xml.domToWorkspace(xml, Mixly.Editor.blockEditor);
+    Mixly.Editor.blockEditor.scrollCenter();
+}
+
+Py2blockEditor.prototype.gotoEditorEnd = function(){
+    var row = this.editor.session.getLength() - 1;
+    for(var rowid = row; rowid >= 0; rowid --) {
+        var column = this.editor.session.getLine(rowid).length; // or simply Infinity
+        if(column !== 0) {
+            this.editor.gotoLine(rowid + 1, column);
+            this.editor.focus();
+            break;
+        }
+    }
+}
+
+Py2blockEditor.prototype.getFocus = function(){
+    this.editor.focus();
+}
+
+Py2blockEditor.prototype.updateText = function(){
+    if(!this.silentText) {
+        this.silentBlock = true;
+        this.setBlocks(this.encodeChinese(this.editor.getValue()));
+        var py2blockEditor = this;
+        setTimeout(function(){
+            py2blockEditor.silentBlock = false;
+        }, 50);
+    }
+}
+
+
+Py2blockEditor.prototype.updateBlock = function(){
+    if(this.fromCode) {
+        this.fromCode = false;
+        var encodeCode = this.encodeChinese(this.editor.getValue());
+        this.setBlocks(encodeCode);
+    }
+}
+
+
+Blockly.Xml.domToWorkspaceDestructive = function(xml, workspace, errorXml) {
+    if (xml instanceof Blockly.Workspace) {
+        var swap = xml;
+        xml = workspace;
+        workspace = swap;
+        console.warn('Deprecated call to Blockly.Xml.domToWorkspace, ' +
+            'swap the arguments.');
+    }
+    var width;  // Not used in LTR.
+    if (workspace.RTL) {
+        width = workspace.getWidth();
+    }
+    Blockly.utils.dom.startTextWidthCache();
+    // Safari 7.1.3 is known to provide node lists with extra references to
+    // children beyond the lists' length.  Trust the length, do not use the
+    // looping pattern of checking the index for an object.
+    var childCount = xml.childNodes.length;
+    var existingGroup = Blockly.Events.getGroup();
+    if (!existingGroup) {
+        Blockly.Events.setGroup(true);
+    }
+    Blockly.Events.disable();
+    var blockLHeight = [];
+    while (workspace.topBlocks_.length) {
+        workspace.topBlocks_[0].dispose();
+        //blockLHeight.push(workspace.topBlocks_[0].getHeightWidth()['height']);
+    }
+
+    //workspace.variableList.length = 0;
+
+    Blockly.Events.enable();
+
+    // Disable workspace resizes as an optimization.
+    if (workspace.setResizesEnabled) {
+        workspace.setResizesEnabled(false);
+    }
+    var currY = 10;
+    for (var i = 0; i < childCount; i++) {
+        var xmlChild = xml.childNodes[i];
+        var name = xmlChild.nodeName.toLowerCase();
+        if (name == 'block' ||
+            (name == 'shadow' && !Blockly.Events.recordUndo)) {
+            // Allow top-level shadow blocks if recordUndo is disabled since
+            // that means an undo is in progress.  Such a block is expected
+            // to be moved to a nested destination in the next operation.
+            var block = Blockly.Xml.domToBlock(xmlChild, workspace);
+            var blockX = 0;
+            var blockY = currY;
+            currY = blockY + workspace.topBlocks_[i].getHeightWidth()['height'] + 50;
+            if (!isNaN(blockX) && !isNaN(blockY)) {
+                block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
+            }
+        } else if (name == 'shadow') {
+            goog.asserts.fail('Shadow block cannot be a top-level block.');
+        }
+    }
+    if (!existingGroup) {
+        Blockly.Events.setGroup(false);
+    }
+    Blockly.utils.dom.stopTextWidthCache();
+
+    //workspace.updateVariableList(false);
+    // Re-enable workspace resizing.
+    if (workspace.setResizesEnabled) {
+        workspace.setResizesEnabled(true);
+    }
+}

mixly/common/js/skulpt_libs/matplotlib/__init__.js

@@ -0,0 +1,6 @@
+var $builtinmodule = function(name)
+{
+  var matplotlib = {};
+
+  return matplotlib;
+};

mixly/common/js/skulpt_libs/pgzhelper/pgzhelper.js

@@ -0,0 +1,5 @@
+var $builtinmodule = function (name) {
+	let pgzhelper= {__name__: new Sk.builtin.str("pgzhelper")};
+    
+	return pgzhelper;
+}

mixly/common/js/skulpt_libs/pygal/__init__.js

@@ -0,0 +1,393 @@
+var $builtinmodule = function(name) {
+  function fill(arr, val) {
+    if (Array.prototype.fill) {
+      return Array.prototype.fill.bind(arr)(val, arguments[2], arguments[3]);
+    }
+
+    // Steps 1-2.
+    if (arr == null) {
+      throw new TypeError('arr is null or not defined');
+    }
+
+    var O = Object(arr);
+
+    // Steps 3-5.
+    var len = O.length >>> 0;
+
+    // Steps 6-7.
+    var start = arguments[2];
+    var relativeStart = start >> 0;
+
+    // Step 8.
+    var k = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 9-10.
+    var end = arguments[3];
+    var relativeEnd = end === undefined ?
+      len : end >> 0;
+
+    // Step 11.
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 12.
+    while (k < final) {
+      O[k] = value;
+      k++;
+    }
+
+    // Step 13.
+    return O;
+  }
+
+
+  var mod = {};
+
+  var COLORS = [
+    [255, 89, 149],  [182, 227, 84],  [254, 237, 108], [140, 237, 255],
+    [158, 111, 254], [137, 156, 161], [248, 248, 242], [191, 70, 70],
+    [81, 96, 131],   [249, 38, 114],  [130, 180, 20],  [253, 151, 31],
+    [86, 194, 214],  [128, 131, 132], [140, 84, 254],  [70, 84, 87]
+  ];
+
+  var KWARGS = ['title', 'width', 'height', 'range', 'include_x_axis', 'x_title', 'y_title', 'title_font_size', 'fill', 'stroke', 'x_labels'];
+
+  function Chart(options) {
+    this._options = options;
+    this._data = [];
+  }
+
+  function rgba(rgb, a) {
+    return 'rgba(' + rgb.join(',') + ',' + a + ')';
+  }
+
+  Chart.prototype.add = function(label, values) {
+    this._data.unshift({
+      name: label,
+      color: rgba(COLORS[this._data.length%COLORS.length], 0.75),
+      data: values,
+      marker : {
+        symbol: 'circle'
+      },
+      stack : 1
+    });
+
+    return '';
+  }
+
+  Chart.prototype.render = function(renderer) {
+    var options = this._options;
+    var $elem = Sk.domOutput('<div></div>');
+    var title_style = {
+      color: '#FFFFFF'
+    };
+    if (options.title_font_size) {
+      title_style['font-size'] = options.title_font_size + 'px';
+    }
+    var xPlotLines = [];
+    var yPlotLines = [];
+
+    if (options.range) {
+      yPlotLines.push({
+        value: options.range.min,
+        width: 1,
+        color: '#FFFFFF'
+      });
+    }
+
+    var defaultWidth  = Sk.availableWidth || 400;
+    var defaultHeight = Math.min(defaultWidth, Sk.availableHeight || 300);
+
+    var chart = {
+      chart: {
+        width : options.width  || defaultWidth,
+        height: options.height || defaultHeight,
+        backgroundColor: '#000'
+      },
+      credits: {
+        enabled: false
+      },
+      title: {
+          text: options.title,
+          style : title_style
+      },
+      xAxis: {
+          title: {
+              text: options.x_title || null,
+              style : title_style,
+              margin: 20
+          },
+          categories: options.x_labels,
+          labels : {
+            enabled: options.x_labels ? true : false
+          },
+          tickLength: 0
+      },
+      yAxis: {
+          startOnTick: false,
+          title: {
+              text: options.y_title || null,
+              style : title_style,
+              margin: 20
+          },
+          plotLines: yPlotLines,
+          min : options.include_x_axis
+            ? 0
+            : options.range
+              ? options.range.min
+              : null,
+          max : options.range ? options.range.max : null,
+          gridLineDashStyle : 'ShortDash',
+          gridLineColor: '#DDD',
+          tickLength: 0
+      },
+      legend: {
+          itemStyle : {
+            color : '#FFFFFF'
+          },
+          layout: 'vertical',
+          align: 'left',
+          verticalAlign: 'top',
+          y: 50,
+          borderWidth: 0
+      },
+      labels : {
+        style : {
+          color: '#FFFFFF'
+        }
+      },
+      series: this._data
+    };
+
+    for(var i = 0; i < chart.series.length; i++) {
+      chart.series[i].legendIndex = chart.series.length - i;
+      chart.series[i].index = chart.series.length - i;
+    }
+
+    if (renderer) {
+      chart = renderer(options, chart);
+    }
+
+    $elem.highcharts(chart);
+
+    return '';
+  }
+
+  function some(val) {
+    return val && val !== Sk.builtin.none.none$;
+  }
+
+  function kwfunc(impl, kwargs) {
+    if (kwargs && kwargs.length) {
+      impl.co_varnames = ['__self__'].concat(kwargs);
+      impl.$defaults = fill(new Array(kwargs.length), Sk.builtin.none.none$);
+    }
+    return new Sk.builtin.func(impl);
+  }
+
+  function createChartType(type, renderer) {
+    mod[type] = Sk.misceval.buildClass(mod, function($gbl, $loc) {
+      $loc.__init__ = kwfunc(
+        function(self, title, width, height, range, include_x_axis, x_title, y_title, title_font_size, fill, stroke, x_labels) {
+          var options = {};
+          if (some(title)) options.title = title.v;
+          if (some(width)) options.width = width.v;
+          if (some(height)) options.height = height.v;
+          if (some(range)) options.range = {
+            min: range.v[0].v,
+            max: range.v[1].v
+          };
+          if (some(include_x_axis)) options.include_x_axis = include_x_axis.v;
+          if (some(x_title)) options.x_title = x_title.v;
+          if (some(y_title)) options.y_title = y_title.v;
+          if (some(title_font_size)) options.title_font_size = title_font_size.v;
+          if (some(fill)) options.fill = fill.v;
+          if (some(stroke)) options.stroke = stroke.v;
+          if (some(x_labels)) options.x_labels = x_labels.v;
+
+          self.instance = new Chart(options);
+        }, KWARGS
+      );
+
+      $loc.add = new Sk.builtin.func(function(self, label, values) {
+        values = (values instanceof Sk.builtin.list)
+          ? Sk.ffi.remapToJs(values)
+          : [values.v];
+
+        return self.instance.add(label.v, values);
+      });
+
+      $loc.render = new Sk.builtin.func(function(self) {
+        var i, key, val;
+
+        for (i = 0; i < KWARGS.length; i++) {
+          key = KWARGS[i];
+          val = self.tp$getattr(key);
+
+          if (typeof val !== "undefined") {
+            self.instance._options[key] = Sk.ffi.remapToJs(val);
+          }
+        }
+
+        return self.instance.render(renderer);
+      });
+    }, type, []);
+  }
+
+  createChartType('Line', function(options, chart) {
+    chart.chart.type = options.fill ? 'area' : 'line';
+    return chart;
+  });
+  createChartType('StackedLine', function(options, chart) {
+    chart.chart.type = options.fill ? 'area' : 'line';
+    chart.plotOptions = {
+      area : {
+        stacking : 'percent'
+      },
+      series : {
+        stacking : 'percent'
+      }
+    };
+    return chart;
+  });
+  createChartType('Bar', function(options, chart) {
+    chart.chart.type = 'column';
+    return chart;
+  });
+  createChartType('StackedBar', function(options, chart) {
+    chart.chart.type = 'column';
+    chart.plotOptions = {
+      column : {
+        stacking: 'percent'
+      }
+    };
+    return chart;
+  });
+  createChartType('HorizontalBar', function(options, chart) {
+    chart.chart.type = 'bar';
+    return chart;
+  });
+  createChartType('StackedHorizontalBar', function(options, chart) {
+    chart.chart.type = 'bar';
+    chart.plotOptions = {
+      bar : {
+        stacking: 'percent'
+      }
+    };
+    return chart;
+  });
+  createChartType('XY', function(options, chart) {
+    if (options.stroke === false) {
+      chart.chart.type = 'scatter'
+    }
+    else {
+      chart.chart.type = options.fill ? 'area' : 'line';
+    }
+    chart.xAxis.labels.enabled = true;
+
+    return chart;
+  });
+  createChartType('Radar', function(options, chart) {
+    chart.chart.polar = true;
+    chart.chart.type  = 'line';
+    chart.xAxis = {
+      categories: options.x_labels,
+      tickmarkPlacement: 'on',
+      lineWidth: 0
+    }
+    chart.yAxis = {
+      gridLineInterpolation: 'polygon',
+      lineWidth: 0,
+      min: 0,
+      gridLineDashStyle : 'ShortDash',
+      gridLineColor: '#DDD'
+    }
+    for(var i = 0; i < chart.series.length; i++) {
+      chart.series[i].pointPlacement = 'on';
+    }
+
+    return chart;
+  });
+  createChartType('Pie', function(options, chart) {
+    chart.chart.type = 'pie';
+    var slices       = [];
+    var breakdown    = [];
+    var useBreakdown = false;
+    for(var i = 0; i < chart.series.length; i++) {
+      var slice = chart.series[i];
+      if (slice.data.length === 1) {
+        slices.unshift({
+          name        : slice.name,
+          color       : slice.color,
+          borderColor : slice.color,
+          legendIndex : slice.legendIndex,
+          y           : slice.data[0]
+        });
+        breakdown.unshift({
+          name  : slice.name,
+          color : slice.color,
+          borderColor : slice.color,
+          y     : slice.data[0]
+        });
+      }
+      else {
+        useBreakdown = true;
+        var sum = 0;
+        var maxDecimal = 0;
+        for(var j = 0; j < slice.data.length; j++) {
+          var parts = slice.data[j].toString().split('.');
+          maxDecimal = Math.max(maxDecimal, parts[1] ? parts[1].length : 0);
+          sum += slice.data[j];
+          breakdown.unshift({
+            name: slice.name,
+            color: 'rgba(0,0,0,0)',
+            borderColor : slice.color,
+            y: slice.data[j]
+          });
+        }
+        slices.unshift({
+          name        : slice.name,
+          color       : slice.color,
+          borderColor : slice.color,
+          legendIndex : slice.legendIndex,
+          y           : parseFloat(sum.toFixed(maxDecimal))
+        });
+      }
+    }
+    chart.tooltip = {
+      formatter: function() {
+          return this.key + ': ' + this.y;
+        }
+    };
+    chart.plotOptions = {
+      pie: {
+        allowPointSelect: !useBreakdown,
+        cursor: useBreakdown ? null : 'pointer',
+        shadow: false,
+        center: ['50%', '50%'],
+        dataLabels: {
+          enabled: false
+        }
+      }
+    };
+    chart.series = [{
+      name: ' ',
+      data: slices,
+      showInLegend: true
+    }];
+    if (useBreakdown) {
+      chart.series.push({
+        name: ' ',
+        data: breakdown,
+        innerSize: '90%',
+        showInLegend: false
+      });
+    }
+    return chart;
+  });
+
+  return mod;
+}

mixly/common/js/skulpt_libs/sprite/basic.js

@@ -0,0 +1,229 @@
+var $builtinmodule = function (name) {
+	var sprite = {__name__: new Sk.builtin.str("sprite")};
+	sprite.createBackground = new Sk.builtin.func(function(img) {
+		img=Sk.ffi.remapToJs(img);
+        return Sk.ffi.remapToPy(SPRITE.CreateBackground(img));
+	});
+	
+	sprite.Sprite = Sk.misceval.buildClass(sprite, function($gbl, $loc) {
+		
+		$loc.__init__ = new Sk.builtin.func(function(self, img, x, y, name) {
+			img=Sk.ffi.remapToJs(img);
+			x=Sk.ffi.remapToJs(x);
+			y=Sk.ffi.remapToJs(y);
+			name=Sk.ffi.remapToJs(name);
+			self.v$name = Sk.ffi.remapToPy(SPRITE.CreateASprite(img, x, y, name));
+		});
+		
+		$loc.show = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.show();
+		});
+		
+		$loc.hide = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.hide();
+		});
+
+		$loc.enlarge = new Sk.builtin.func(function(self, s) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var s = Sk.ffi.remapToJs(s);
+			var t = SPRITE.sprites[name];
+			t.enlarge(s);
+		});
+		
+		$loc.enlargeTo = new Sk.builtin.func(function(self, s) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var s = Sk.ffi.remapToJs(s);
+			var t = SPRITE.sprites[name];
+			t.enlargeTo(s);
+		});
+		
+		$loc.expandTo = new Sk.builtin.func(function(self, s, time) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var s = Sk.ffi.remapToJs(s);
+			var t = SPRITE.sprites[name];
+			return t.expandTo(s, time);
+		});
+		
+		$loc.move = new Sk.builtin.func(function(self, step) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			step=Sk.ffi.remapToJs(step);
+			var t = SPRITE.sprites[name];
+			t.move(step);
+		});
+		
+		$loc.moveTo = new Sk.builtin.func(function(self, x, y) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			x=Sk.ffi.remapToJs(x);
+			y=Sk.ffi.remapToJs(y);
+			var t = SPRITE.sprites[name];
+			t.moveTo(x, y);
+		});
+		
+		$loc.slideTo = new Sk.builtin.func(function(self, x, y, time) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			x=Sk.ffi.remapToJs(x);
+			y=Sk.ffi.remapToJs(y);
+			time=Sk.ffi.remapToJs(time);
+			var t = SPRITE.sprites[name];
+			return t.slideTo(x, y, time);
+		});
+		
+		$loc.addX = new Sk.builtin.func(function(self, step) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			step = Sk.ffi.remapToJs(step);
+			var t = SPRITE.sprites[name];
+			t.addX(step);
+		});
+		
+		$loc.addY = new Sk.builtin.func(function(self, step) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			step = Sk.ffi.remapToJs(step);
+			var t = SPRITE.sprites[name];
+			t.addY(step);
+		});
+		
+		$loc.getX = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			return Sk.ffi.remapToPy(t.x);
+		});
+		
+		$loc.getY = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			return Sk.ffi.remapToPy(t.y);
+		});
+		
+		$loc.rotate = new Sk.builtin.func(function(self, degree) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			degree=Sk.ffi.remapToJs(degree);
+			var t = SPRITE.sprites[name];
+			t.rotate(degree);
+		});
+		
+		$loc.rotateTo = new Sk.builtin.func(function(self, degree) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			degree=Sk.ffi.remapToJs(degree);
+			var t = SPRITE.sprites[name];
+			t.rotateTo(degree);
+		});
+		
+		$loc.circleTo = new Sk.builtin.func(function(self, degree, time) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			degree=Sk.ffi.remapToJs(degree);
+			var t = SPRITE.sprites[name];
+			return t.circleTo(degree);
+		});
+		
+		$loc.hit = new Sk.builtin.func(function(self, sprite2) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var name2 = Sk.ffi.remapToJs(sprite2.v$name);
+			var t = SPRITE.sprites[name];
+			var t2 = SPRITE.sprites[name2];
+			return Sk.ffi.remapToPy(t.hit(t2));
+		});
+		
+		$loc.outOfScreen = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			return Sk.ffi.remapToPy(t.outOfScreen());
+		});
+		
+		$loc.mouseAction = new Sk.builtin.func(function(self, calc) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.mouseAction(()=>{Sk.misceval.callsim(calc)});
+		});
+		
+		$loc.isClicked = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			return Sk.ffi.remapToPy(t.isDown);
+		});
+		
+		// new
+		$loc.setScale = new Sk.builtin.func(function(self, h, w) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.setScale(h, w);
+		});
+		$loc.filterGray = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.filterGray();
+		});
+		$loc.filterBrighter = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.filterBrighter();
+		});
+		$loc.filterOrigin = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.sprites[name];
+			t.filterOrigin();
+		});
+	}, 'Sprite', []);
+
+	sprite.Text = Sk.misceval.buildClass(sprite, function($gbl, $loc) {
+
+		$loc.__init__ = new Sk.builtin.func(function(self, text, x, y, name) {
+			text=Sk.ffi.remapToJs(text);
+			x=Sk.ffi.remapToJs(x);
+			y=Sk.ffi.remapToJs(y);
+			name=Sk.ffi.remapToJs(name);
+			self.v$name = Sk.ffi.remapToPy(SPRITE.CreateText(text, x, y, name));
+		});
+	
+		$loc.changeText = new Sk.builtin.func(function(self, text) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			text=Sk.ffi.remapToJs(text);
+			var t = SPRITE.texts[name];
+			t.changeText(text);
+		});
+		
+		$loc.show = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.texts[name];
+			t.show();
+		});
+		
+		$loc.hide = new Sk.builtin.func(function(self) {
+			var name = Sk.ffi.remapToJs(self.v$name);
+			var t = SPRITE.texts[name];
+			t.hide();
+		});
+		
+	}, 'Text', []);
+
+	sprite.clearAllSprites = new Sk.builtin.func(function() {
+	    return Sk.ffi.remapToPy(SPRITE.ClearAllSprites());
+	});
+
+	sprite.repeat = new Sk.builtin.func(function(calc = new Function()) {
+		SPRITE.Repeat(()=>{Sk.misceval.callsim(calc)});
+	});
+	
+	sprite.keyboardListener = new Sk.builtin.func(function(key, calc = new Function()) {
+		key = Sk.ffi.remapToJs(key);
+		SPRITE.KeyboardListener(key,()=>{Sk.misceval.callsim(calc)});
+	});
+	
+	sprite.isKeyboardHit = new Sk.builtin.func(function(keyvalue) {
+		keyvalue = Sk.ffi.remapToJs(keyvalue);
+		return Sk.ffi.remapToPy(SPRITE.IsKeyboardHit(keyvalue));
+	});
+	
+	sprite.getTime = new Sk.builtin.func(function() {
+		return Sk.ffi.remapToPy(Math.floor(SPRITE.timer/1000));
+	});
+	
+	sprite.clearTimer = new Sk.builtin.func(function() {
+		SPRITE.ClearTimer();
+	});
+	
+	return sprite;
+}

mixly/common/js/skulpt_mixcar/inittool.js

@@ -0,0 +1,20 @@
+var $builtinmodule = function (name) {
+	let mod= {__name__: new Sk.builtin.str("blocktool")};
+
+    var highlight = function(id) {
+        id=Sk.ffi.remapToJs(id)
+        Mixly.Editor.blockEditor.highlightBlock(id);
+    };
+    
+    var highlight_f=function(block_id) {
+        return new Sk.misceval.promiseToSuspension(new Promise(function(resolve) {
+            setTimeout( () => {   
+                highlight(block_id)
+                resolve(Sk.builtin.none.none$);
+            }, 800);
+        }));
+    }
+    mod.highlight = new Sk.builtin.func(highlight_f);
+
+    return mod;
+}

mixly/common/js/skulpt_mixtoy/inittool.js

@@ -0,0 +1,20 @@
+var $builtinmodule = function (name) {
+	let mod= {__name__: new Sk.builtin.str("blocktool")};
+
+    var highlight = function(id) {
+        id=Sk.ffi.remapToJs(id)
+        Mixly.Editor.blockEditor.highlightBlock(id);
+    };
+    
+    var highlight_f=function(block_id) {
+        return new Sk.misceval.promiseToSuspension(new Promise(function(resolve) {
+            setTimeout( () => {   
+                highlight(block_id)
+                resolve(Sk.builtin.none.none$);
+            }, 800);
+        }));
+    }
+    mod.highlight = new Sk.builtin.func(highlight_f);
+
+    return mod;
+}