Implemented import

desktop/sources/links/main.css

@@ -6,7 +6,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin #wrapper { overflow: hidden; position: relative; }
 #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% - 75px); padding-left:45px;}
+#ronin #wrapper #commander #status { position: absolute; bottom: 0px; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 75px); padding-left:45px;}
 #ronin #wrapper #commander #status #run { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
 #ronin.expand #wrapper #commander { width:100%; }
 #ronin #surface, #ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%;  transition: left 250ms, opacity 250ms; opacity: 1; }

desktop/sources/scripts/lib/source.js

@@ -18,12 +18,14 @@ function Source () {
     this.cache = {}
   }
 
-  this.open = (callback) => {
+  this.open = (ext, callback) => {
     console.log('Source', 'Open file..')
     const input = document.createElement('input')
     input.type = 'file'
     input.onchange = (e) => {
-      this.cache = e.target.files[0]
+      const file = e.target.files[0]
+      if (file.name.indexOf(ext) < 0) { console.warn('Source', 'File is not ' + ext); return }
+      this.cache = file
       this.load(this.cache, callback)
     }
     input.click()

desktop/sources/scripts/library.js

@@ -3,19 +3,17 @@
 /* global Image */
 
 function Library (ronin) {
-  // Modularity: Write simple parts connected by clean interfaces.
-  // Composition: Design programs to be connected to other programs.
-  // Parsimony: Write a big program only when it is clear by demonstration that nothing else will do.
-
   // IO
 
-  this.import = async (path, shape, alpha = 1) => { // Imports a graphic file with format.
-    // const img = new Image()
-    // img.src = path
-    // return ronin.surface.draw(img, shape, alpha)
+  this.import = async (name, shape, alpha = 1) => { // Imports a graphic file with format.
+    const src = ronin.cache.get(name)
+    if (!src) { ronin.log('No data for ' + name); return }
+    const img = new Image()
+    img.src = src
+    return ronin.surface.draw(img, shape, alpha)
   }
 
-  this.export = (name = 'export', type = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
+  this.export = async (name = 'export', type = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
     const base64 = ronin.surface.el.toDataURL(type, quality)
     const link = document.createElement('a')
     link.setAttribute('href', base64)
@@ -23,14 +21,6 @@ function Library (ronin) {
     link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
   }
 
-  this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
-    return ronin.surface.open(path, ratio)
-  }
-
-  this.exit = (force = false) => { // Exits Ronin.
-    ronin.source.quit(force)
-  }
-
   // Shapes
 
   this.pos = (x = 0, y = 0) => { // Returns a position shape.

desktop/sources/scripts/ronin.js

@@ -39,7 +39,7 @@ function Ronin () {
     this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new(); this.surface.clear(); this.commander.clear() })
     this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.save('export.lisp', this.commander._input.value, 'text/plain') })
     this.acels.set('File', 'Save As', 'CmdOrCtrl+Shift+S', () => { this.source.saveAs() })
-    this.acels.set('File', 'Open', 'CmdOrCtrl+O', () => { this.source.open(this.whenOpen) })
+    this.acels.set('File', 'Open', 'CmdOrCtrl+O', () => { this.source.open('lisp', this.whenOpen) })
     this.acels.set('File', 'Revert', 'CmdOrCtrl+W', () => { this.source.revert() })
     this.acels.set('View', 'Toggle Guides', 'CmdOrCtrl+Shift+H', () => { this.surface.toggleGuides() })
     this.acels.set('View', 'Toggle Commander', 'CmdOrCtrl+K', () => { this.commander.toggle() })
@@ -174,7 +174,29 @@ function Ronin () {
   this.onDrop = (e) => {
     e.preventDefault()
     e.stopPropagation()
-    this.source.load(e.dataTransfer.files[0], this.whenOpen)
+    const file = e.dataTransfer.files[0]
+
+    if (file.name.indexOf('.lisp') > -1) {
+      this.source.load(e.dataTransfer.files[0], this.whenOpen)
+    }
+    if (file.type === 'image/jpeg' || file.type === 'image/png') {
+      const img = new Image()
+      img.onload = () => {
+        this.cache.set(file.name, img.src)
+      }
+      img.src = URL.createObjectURL(file)
+    }
+  }
+
+  this.cache = {
+    data: {},
+    set: (key, content) => {
+      this.log((this.cache.data[key] ? 'Updated ' : 'Stored ') + key)
+      this.cache.data[key] = content
+    },
+    get: (key) => {
+      return this.cache.data[key]
+    }
   }
 
   this.mouseShape = (position, type) => {