- Pharo-dev - lists.pharo.org

Re: [Pharo-dev] Fun with "Morphs" in JavaScript

by stepharo

Hi dmitry the dev mailing-list for the development of Pharo. Stef Le 4/10/16 Ã 19:01, CodeDmitry a Ã©crit : > I made this two-file demo earlier today, it was really sloppy but I think > it's cute enough to share. > > :> > > index.html: > <!DOCTYPE html> > <head> > > > </head> > <body> > </body> > </html> > > autoexec.js: > (() => { > 'use strict'; > > /* global state hooks */ > (() => { > /** > * sometimes we want to hook events to only get triggered once, > * especially when alternating events > */ > if (!('once' in EventTarget.prototype)) { > EventTarget.prototype.once = function(eventName, callback) { > var wrappedCallback = function(e) { > callback(e); > this.removeEventListener(eventName, wrappedCallback); > }; > > this.addEventListener(eventName, wrappedCallback); > }; > } > })(); > > /** > * avoid repeating myself by binding javascript object notation to css > via get/set directly. > * > * > */ > const json_bind_css_property = function(object, aliasName, realName) { > Object.defineProperty(object, aliasName, { > get: function() { > return this.html.style[realName]; > }, > set: function(setValue) { > this.html.style[realName] = setValue; > } > }); > }; > > const drop_handler = function(e) { > console.log('unselecting.'); > > if (window.selectedMorph != null) { > window.selectedMorph = null; > } > }; > > const css_px_to_number = (text) => { > return Number(text.match(/\d+/)); > } > > const drag_handler = function(e) { > const start_x = window.startX; > const start_y = window.startY; > const mouse_x = e.clientX; > const mouse_y = e.clientY; > const selectedMorph = window.selectedMorph; > const offset_x = mouse_x - start_x; > const offset_y = mouse_y - start_y; > const morph_start_x = window.morph_start_x; > const morph_start_y = window.morph_start_y; > > console.log({ > x1: start_x, > y1: start_y, > x2: mouse_x, > y2: mouse_y > }); > > selectedMorph.left = (css_px_to_number(morph_start_x) + offset_x) + > 'px'; > selectedMorph.top = (css_px_to_number(morph_start_y) + offset_y) + > 'px'; > }; > > const Morph = function() { > var self = this; > this.html = document.createElement('div'); > this.html.style.position = 'absolute'; > this.left = 0; > this.top = 0; > this.html.style.display = 'inline-block'; > this.width = '50px'; > this.height = '40px'; > let anticipate_drop = null; > let anticipate_click = null; > > anticipate_drop = function(e) { > e.stopPropagation(); > window.selectedMorph = null; > window.removeEventListener('mousemove', drag_handler); > self.html.once('click', anticipate_click); > console.log('drop'); > }; > > anticipate_click = function(e) { > e.stopPropagation(); > window.morph_start_x = self.left; > window.morph_start_y = self.top; > window.startX = e.clientX; > window.startY = e.clientY; > window.selectedMorph = self; > > /* once clicked, we want to have the window unselect if we click > on it */ > window.once('click', anticipate_drop); > > window.addEventListener('mousemove', drag_handler); > }; > > /* anticipate the click of this Morph. */ > this.html.once('click', anticipate_click); > > return this; > }; > > Morph.prototype.openInWorld = function() { > document.body.appendChild(this.html); > }; > > Morph.prototype.delete = function() { > var ref = this.get; > ref.parentElement.removeChild(ref); > }; > > Morph.new = function() { > return new Morph; > }; > > json_bind_css_property(Morph.prototype, 'color', 'backgroundColor'); > json_bind_css_property(Morph.prototype, 'width', 'width'); > json_bind_css_property(Morph.prototype, 'height', 'height'); > json_bind_css_property(Morph.prototype, 'left', 'left'); > json_bind_css_property(Morph.prototype, 'top', 'top'); > > window.testMe = function() { > var joe = new Morph; > joe.color = 'blue'; > joe.openInWorld(); > }; > > window.Morph = Morph; > })(); > > > > -- > View this message in context: http://forum.world.st/Fun-with-Morphs-in-JavaScript-tp4918046.html > Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com. > >

Oct. 4, 2016

Re: [Pharo-dev] Fun with "Morphs" in JavaScript

by CodeDmitry

Sorry, I'm new, where is a good place to post nonsense like this? -- View this message in context: http://forum.world.st/Fun-with-Morphs-in-JavaScript-tp4918046p4918050.html Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com.

Oct. 4, 2016

Fun with "Morphs" in JavaScript

by CodeDmitry

I made this two-file demo earlier today, it was really sloppy but I think it's cute enough to share. :> index.html: <!DOCTYPE html> <head> </head> <body> </body> </html> autoexec.js: (() => { 'use strict'; /* global state hooks */ (() => { /** * sometimes we want to hook events to only get triggered once, * especially when alternating events */ if (!('once' in EventTarget.prototype)) { EventTarget.prototype.once = function(eventName, callback) { var wrappedCallback = function(e) { callback(e); this.removeEventListener(eventName, wrappedCallback); }; this.addEventListener(eventName, wrappedCallback); }; } })(); /** * avoid repeating myself by binding javascript object notation to css via get/set directly. * * */ const json_bind_css_property = function(object, aliasName, realName) { Object.defineProperty(object, aliasName, { get: function() { return this.html.style[realName]; }, set: function(setValue) { this.html.style[realName] = setValue; } }); }; const drop_handler = function(e) { console.log('unselecting.'); if (window.selectedMorph != null) { window.selectedMorph = null; } }; const css_px_to_number = (text) => { return Number(text.match(/\d+/)); } const drag_handler = function(e) { const start_x = window.startX; const start_y = window.startY; const mouse_x = e.clientX; const mouse_y = e.clientY; const selectedMorph = window.selectedMorph; const offset_x = mouse_x - start_x; const offset_y = mouse_y - start_y; const morph_start_x = window.morph_start_x; const morph_start_y = window.morph_start_y; console.log({ x1: start_x, y1: start_y, x2: mouse_x, y2: mouse_y }); selectedMorph.left = (css_px_to_number(morph_start_x) + offset_x) + 'px'; selectedMorph.top = (css_px_to_number(morph_start_y) + offset_y) + 'px'; }; const Morph = function() { var self = this; this.html = document.createElement('div'); this.html.style.position = 'absolute'; this.left = 0; this.top = 0; this.html.style.display = 'inline-block'; this.width = '50px'; this.height = '40px'; let anticipate_drop = null; let anticipate_click = null; anticipate_drop = function(e) { e.stopPropagation(); window.selectedMorph = null; window.removeEventListener('mousemove', drag_handler); self.html.once('click', anticipate_click); console.log('drop'); }; anticipate_click = function(e) { e.stopPropagation(); window.morph_start_x = self.left; window.morph_start_y = self.top; window.startX = e.clientX; window.startY = e.clientY; window.selectedMorph = self; /* once clicked, we want to have the window unselect if we click on it */ window.once('click', anticipate_drop); window.addEventListener('mousemove', drag_handler); }; /* anticipate the click of this Morph. */ this.html.once('click', anticipate_click); return this; }; Morph.prototype.openInWorld = function() { document.body.appendChild(this.html); }; Morph.prototype.delete = function() { var ref = this.get; ref.parentElement.removeChild(ref); }; Morph.new = function() { return new Morph; }; json_bind_css_property(Morph.prototype, 'color', 'backgroundColor'); json_bind_css_property(Morph.prototype, 'width', 'width'); json_bind_css_property(Morph.prototype, 'height', 'height'); json_bind_css_property(Morph.prototype, 'left', 'left'); json_bind_css_property(Morph.prototype, 'top', 'top'); window.testMe = function() { var joe = new Morph; joe.color = 'blue'; joe.openInWorld(); }; window.Morph = Morph; })(); -- View this message in context: http://forum.world.st/Fun-with-Morphs-in-JavaScript-tp4918046.html Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com.

Oct. 4, 2016

OsWindow tests

by Eric Le Pors

Hello, I try to execute OsWindow examples with Pharo 5 VM and Pharo-50761 or Pharo-60251 images on Windows 7 Every time you open a SDL window, interact with Pharo main window is no longer possible... When i execute : SDL2AthensDrawingExample new open a "New window" is openned and you can draw something in the window, but... the window does not close and the pharo main window is not clickable (however some incorrect keystrokes events are transmitted to the pharo main window) When i use the same images on Linux... no bug. Is there a solution to this issue on Microsoft Windows ? Thank you in advance, Eric -- View this message in context: http://forum.world.st/OsWindow-tests-tp4918041.html Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com.

Oct. 4, 2016

Re: [Pharo-dev] Extending Pharo Debugger

by phil＠highoctane.be

While you are at it, make a button at the top with "Run to cursor". It is a missing one that requires oneto get the context menu to execute. Annoying. Phil On Tue, Oct 4, 2016 at 4:30 PM, Matteo Marra <gallonba21(a)gmail.com> wrote: > Hi Andrei, > > thank you for your really fast answer! > > Cheers, > Matteo > > 2016-10-04 16:20 GMT+02:00 Andrei Chis <chisvasileandrei(a)gmail.com>: > >> Hi Matteo, >> >> If you look, for example at RestartDebugAction, there is on >> the class side a method #gtStackDebuggingActionFor: that >> has the annotation <gtStackDebuggingAction>. >> >> To attach actions to the stack (proceed, resume, step into) >> the debugger looks for subclasses of DebugAction that have >> class side methods annotated with gtStackDebuggingAction. >> >> These methods can optionally receive the debugger instance >> as an argument. However you can also only have simple >> methods like 'PeelToFirstDebugAction class>>#gtActionType' >> >> >> Cheers, >> Andrei >> >> >> >> On Tue, Oct 4, 2016 at 4:10 PM, Matteo Marra <gallonba21(a)gmail.com> >> wrote: >> >>> Hello, >>> >>> I'm working on the Pharo debugger, and I wanted to add a button with new >>> functionality just besides the buttons "Proceed" "restart" ... >>> >>> Is there an easy way to do it? Which is the class that I have to >>> Modify/Extend in order to do that? >>> >>> I tried to look around the methods and I found where DebugSession is >>> created, but I didn't see any clear reference to the UI or to how is >>> constructed in it. >>> >>> Thank you in advance, >>> Matteo >>> >> >> >

Oct. 4, 2016

Re: [Pharo-dev] How does Pharo store instance variables?

by CodeDmitry

Wait im confused, did moving my thread while you guys were writing response to Users forum make the thread retained in this forum as well? O.o -- View this message in context: http://forum.world.st/Re-How-does-Pharo-store-instance-variables-tp4917950p… Sent from the Pharo Smalltalk Developers mailing list archive at Nabble.com.

Oct. 4, 2016

Re: [Pharo-dev] Extending Pharo Debugger

by Matteo Marra

Hi Andrei, thank you for your really fast answer! Cheers, Matteo 2016-10-04 16:20 GMT+02:00 Andrei Chis <chisvasileandrei(a)gmail.com>: > Hi Matteo, > > If you look, for example at RestartDebugAction, there is on > the class side a method #gtStackDebuggingActionFor: that > has the annotation <gtStackDebuggingAction>. > > To attach actions to the stack (proceed, resume, step into) > the debugger looks for subclasses of DebugAction that have > class side methods annotated with gtStackDebuggingAction. > > These methods can optionally receive the debugger instance > as an argument. However you can also only have simple > methods like 'PeelToFirstDebugAction class>>#gtActionType' > > > Cheers, > Andrei > > > > On Tue, Oct 4, 2016 at 4:10 PM, Matteo Marra <gallonba21(a)gmail.com> wrote: > >> Hello, >> >> I'm working on the Pharo debugger, and I wanted to add a button with new >> functionality just besides the buttons "Proceed" "restart" ... >> >> Is there an easy way to do it? Which is the class that I have to >> Modify/Extend in order to do that? >> >> I tried to look around the methods and I found where DebugSession is >> created, but I didn't see any clear reference to the UI or to how is >> constructed in it. >> >> Thank you in advance, >> Matteo >> > >

Oct. 4, 2016

Re: [Pharo-dev] Extending Pharo Debugger

by Andrei Chis

Hi Matteo, If you look, for example at RestartDebugAction, there is on the class side a method #gtStackDebuggingActionFor: that has the annotation <gtStackDebuggingAction>. To attach actions to the stack (proceed, resume, step into) the debugger looks for subclasses of DebugAction that have class side methods annotated with gtStackDebuggingAction. These methods can optionally receive the debugger instance as an argument. However you can also only have simple methods like 'PeelToFirstDebugAction class>>#gtActionType' Cheers, Andrei On Tue, Oct 4, 2016 at 4:10 PM, Matteo Marra <gallonba21(a)gmail.com> wrote: > Hello, > > I'm working on the Pharo debugger, and I wanted to add a button with new > functionality just besides the buttons "Proceed" "restart" ... > > Is there an easy way to do it? Which is the class that I have to > Modify/Extend in order to do that? > > I tried to look around the methods and I found where DebugSession is > created, but I didn't see any clear reference to the UI or to how is > constructed in it. > > Thank you in advance, > Matteo >

Oct. 4, 2016

Extending Pharo Debugger

by Matteo Marra

Hello, I'm working on the Pharo debugger, and I wanted to add a button with new functionality just besides the buttons "Proceed" "restart" ... Is there an easy way to do it? Which is the class that I have to Modify/Extend in order to do that? I tried to look around the methods and I found where DebugSession is created, but I didn't see any clear reference to the UI or to how is constructed in it. Thank you in advance, Matteo

Oct. 4, 2016

[pharo-project/pharo-core]

by GitHub

Branch: refs/tags/60251 Home: https://github.com/pharo-project/pharo-core

Oct. 4, 2016