Improved editor

desktop/sources/links/main.css

@@ -4,7 +4,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 
 #ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
 #ronin #wrapper { overflow: hidden; position: relative; }
-#ronin #wrapper #commander { z-index: 9000;position: relative;width: 310px;height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
+#ronin #wrapper #commander { z-index: 9000;position: relative;width: calc(50vw - 30px);height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
 #ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 105px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
 #ronin #wrapper #commander #status { position: absolute; bottom: 0px; text-transform: lowercase; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 30px);}
 #ronin #wrapper #commander #source { position: absolute;right: 0px;bottom: 0px; }
@@ -16,8 +16,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin.hidden #wrapper #commander { margin-left:-40vw; }
 #ronin.hidden #surface, #ronin.hidden #guide { left:0; }
 
-#ronin.hidden #wrapper #commander { margin-left:calc(-40vw - 30px); }
-#ronin #surface,#ronin #guide { left:calc(40vw + 30px); }
+#ronin.hidden #wrapper #commander { margin-left:-50vw; }
+#ronin #surface,#ronin #guide { left:50vw; }
 
 #ronin #guide { background:none; }
 #ronin #surface { border-radius: 2px }

desktop/sources/scripts/commander.js

@@ -31,6 +31,7 @@ function Commander (ronin) {
   }
 
   this.run = (txt = this._input.value) => {
+    if (this._input.value.indexOf('$') > -1) { console.warn('$ is present.'); return }
     ronin.bindings = {}
     ronin.surface.maximize()
     ronin.interpreter.run(txt)

desktop/sources/scripts/ronin.js

@@ -86,6 +86,7 @@ function Ronin () {
       this.bindings[id](shape)
     }
     this.commander.capture()
+    this.surface.clearGuide()
     this.surface.drawGuide(shape)
   }
 
@@ -97,6 +98,7 @@ function Ronin () {
     }
     if (this.mouseOrigin) {
       this.commander.commit(shape, false)
+      this.surface.clearGuide()
       this.surface.drawGuide(shape)
     }
   }

desktop/sources/scripts/surface.js

@@ -142,7 +142,13 @@ function Surface (ronin) {
         if (isLine(shape)) {
           this.context.drawImage(img, shape.a.x, shape.a.y, shape.b.x - shape.a.x, shape.b.y - shape.a.y)
         } else if (isRect(shape)) {
-          this.context.drawImage(img, shape.x, shape.y, shape.w, img.height * (shape.w / img.width))
+          if (img.width > img.height) {
+            console.log('w bigger')
+            this.context.drawImage(img, shape.x, shape.y, shape.w, img.height * (shape.w / img.width))
+          } else {
+            console.log('h bigger')
+            this.context.drawImage(img, shape.x, shape.y, img.width * (shape.h / img.height), shape.h)
+          }
         } else {
           this.context.drawImage(img, shape.x, shape.y, img.width, img.height)
         }
@@ -167,7 +173,6 @@ function Surface (ronin) {
   }
 
   this.drawGuide = function (shape, context = this.guide) {
-    this.clearGuide()
     if (!shape) { return }
     this.stroke(shape.rect || shape, 3, 'black', context)
     if (shape.line) { this.stroke(shape.line, 3, 'black', context) }

examples/pixels/crop.lisp

@@ -1,5 +1,5 @@
 ; crop
-
 (clear)
-(open "../static/crystal.jpg")
-(crop (rect 100 100 400 400))
+(open $path)
+(crop 
+  (rect 100 100 400 400))

examples/pixels/import.lisp

@@ -0,0 +1,27 @@
+(clear)
+(def hor-path "/Users/VillaMoirai/Desktop/hor.jpeg")
+(def ver-path "/Users/VillaMoirai/Desktop/ver.jpg")
+; rect
+(import hor-path 
+  (guide (rect 50 50 300 300)))
+
+(import hor-path 
+  (guide (rect 350 50 350 200)))
+
+(import hor-path 
+  (guide (line 700 50 1200 350)))
+
+(import hor-path 
+  (guide (rect 1200 50 200 300)))
+
+(import ver-path 
+  (guide (rect 50 350 300 300)))
+
+(import ver-path 
+  (guide (rect 350 350 350 200)))
+
+(import ver-path 
+  (guide (line 700 350 1200 700)))
+
+(import ver-path 
+  (guide (rect 1200 350 200 300)))