Port from LinkIt Main Demo that has the following fixes:

	1. Can delete selected members with the 'delete' key 
	2. Popup for when you access with Mobile Devices (unstyled)
	3. Fixed a bug where you can't connect pets

apps/family_tree/controllers/family.js

@@ -1,8 +1,7 @@
 // ==========================================================================
 // FamilyTree.familyController
 // ==========================================================================
-
-sc_require('core');
+/*globals FamilyTree */
 
 /**
   @extends SC.ArrayController
@@ -12,7 +11,7 @@ sc_require('core');
   This controller holds all the family tree information. It transforms the objects array into a list of nodes
   that LinkIt can use.
 */
-FamilyTree.familyController = SC.ObjectController.create( 
+FamilyTree.familyController = SC.ObjectController.create( SC.CollectionViewDelegate,
   /* @scope */{
 
   // PUBLIC PROPERTIES
@@ -26,6 +25,17 @@ FamilyTree.familyController = SC.ObjectController.create(
 
   contentBinding: 'FamilyTree.familiesController.selection',
   contentBindingDefault: SC.Binding.oneWay().single(),
+
+  // LinkIt Canvas is a Collection Views so to correct the deletion you have to include this
+  /**
+    Delegate for SC.CollectionView's deletion.  We implement this here
+    because we have to handle deletion very carefully, but we still want to be able to
+    trigger it by pressing the delete key on the canvas.
+  */
+  collectionViewDeleteContent: function(view, content, indexes) {
+    FamilyTree.deleteSelectedMembers();
+    return YES;
+  },
 
   // PUBLIC METHODS
   /**

apps/family_tree/controllers/members.js

@@ -1,8 +1,7 @@
 // ==========================================================================
 // FamilyTree.membersController
 // ==========================================================================
-
-sc_require('core');
+/*globals FamilyTree */
 
 /**
   @extends SC.ArrayController

apps/family_tree/core_actions.js

@@ -0,0 +1,61 @@
+// ==========================================================================
+// Project:   FamilyTree - Core Actions
+// Copyright: ©2010 Evin Grano and Contributors
+// ==========================================================================
+/*globals FamilyTree */
+
+/** @namespace
+
+  My cool new app.  Describe your application.
+  
+  @extends SC.Object
+*/
+
+FamilyTree.mixin( /** @scope Orion */{
+  deleteSelectedMembers: function() {
+    var selection, toRemove, family, 
+        len, confirmStr, alertController,
+        fc = FamilyTree.familyController;
+
+    selection = FamilyTree.membersController.get('selection');
+    toRemove = [];
+    family = fc.get('content');
+
+    if (selection) {
+      len = selection.get('length');
+      confirmStr = (len === 1) ? "Are you sure you want to delete this member" : "Are you sure you want to delete these members";
+      alertController = SC.Object.create({
+
+        button1Action: function() {
+          // copy to a separate array since deleting elements changes the selection set itself
+          if (selection && selection.isEnumerable) {
+            selection.forEach(function(element) {
+              toRemove.push(element);
+            });
+          }
+
+          if (family) {
+            toRemove.forEach(function(member) {
+              family.removeMember(member);
+            });
+          }
+        },
+
+        alertPaneDidDismiss: function(pane, status) {
+          switch(status) {
+            case SC.BUTTON1_STATUS:
+              if (this.button1Action) this.button1Action();
+              break;
+
+            case SC.BUTTON2_STATUS:
+              if (this.button2Action) this.button2Action();
+              break;
+          }
+        }
+      });
+
+      SC.AlertPane.warn("Delete?", confirmStr, '', "Delete", "Cancel", '', alertController);
+    }
+  }
+
+});

apps/family_tree/main.js

@@ -12,17 +12,20 @@
 // See comments for some pointers on what to do next.
 //
 FamilyTree.main = function main() {
-
-  // Step 1: Instantiate Your Views
-  // The default code here will make the mainPane for your application visible
-  // on screen.  If you app gets any level of complexity, you will probably 
-  // create multiple pages and panes.  
-  FamilyTree.getPath('mainPage.mainPane').append() ;
-
-  // Step 2. Set the content property on your primary controller.
-  var store = FamilyTree.get('store');
-  FamilyTree.familiesController.set('content', store.find(FamilyTree.Family));
 
+  if(SC.browser.isMobileSafari || SC.browser.isiPhone){
+    FamilyTree.getPath('mainPage.invalidBrowserPane').append() ;
+  } else {
+    // Step 1: Instantiate Your Views
+    // The default code here will make the mainPane for your application visible
+    // on screen.  If you app gets any level of complexity, you will probably 
+    // create multiple pages and panes.  
+    FamilyTree.getPath('mainPage.mainPane').append() ;
+
+    // Step 2. Set the content property on your primary controller.
+    var store = FamilyTree.get('store');
+    FamilyTree.familiesController.set('content', store.find(FamilyTree.Family));
+  }
 } ;
 
 function main() { FamilyTree.main(); }

apps/family_tree/models/family.js

@@ -7,7 +7,7 @@
  * @version 0.1
  * @since 0.1
  */
-sc_require('core');
+/*globals FamilyTree */
 
 FamilyTree.Family = SC.Record.extend({ 
   primaryKey: 'id',
@@ -64,5 +64,20 @@ FamilyTree.Family = SC.Record.extend({
         console.error('Bad member type');
       }
     }
+  },
+
+  removeMember: function(member){
+    var ppl, pets, store = FamilyTree.get('store');
+    if (member.instanceOf(FamilyTree.Human)){
+      ppl = this.get('people');
+      ppl.removeObject(member);
+    }
+    else if (member.instanceOf(FamilyTree.Pet)){
+      pets = this.get('pets');
+      pets.removeObject(member);
+    }
+    else {
+      console.error('Bad member type');
+    }
   }
 });

apps/family_tree/models/human.js

@@ -14,10 +14,10 @@ FamilyTree.Human = SC.Record.extend(LinkIt.Node, {
   primaryKey: 'id',
   name: SC.Record.attr(String, { isRequired: YES, defaultValue: 'Enter Name' }),
   isMale: SC.Record.attr(Boolean, { isRequired: YES, defaultValue: YES }),
-  family: SC.Record.attr('FamilyTree.Family'),
-  mother: SC.Record.attr('FamilyTree.Human'),
-  father: SC.Record.attr('FamilyTree.Human'),
-  spouse: SC.Record.attr('FamilyTree.Human'),
+  family: SC.Record.toOne('FamilyTree.Family'),
+  mother: SC.Record.toOne('FamilyTree.Human'),
+  father: SC.Record.toOne('FamilyTree.Human'),
+  spouse: SC.Record.toOne('FamilyTree.Human'),
   pets: SC.Record.toMany('FamilyTree.Pet', {
     inverse: 'belongsTo',
     isMaster: YES

apps/family_tree/models/pet.js

@@ -44,8 +44,9 @@ FamilyTree.Pet = SC.Record.extend(LinkIt.Node, {
   }.property('belongsTo').cacheable(),
 
   didCreateLink: function(link) {
-    var sn = link.get('startNode'), st = link.get('startTerminal');
-    var en = link.get('endNode'), et = link.get('endTerminal');
+    var l = link[0]; // The link is comprised of an ARRAY of links with the Bi-directional links...often you only need the first object to complete the link
+    var sn = l.get('startNode'), st = l.get('startTerminal');
+    var en = l.get('endNode'), et = l.get('endTerminal');
     //console.log('Pet...didCreateLink: start:%@ end:%@'.fmt(st, et));
     if(en === this && et === 'myOwner'){
       this.set('belongsTo', sn);

apps/family_tree/resources/main_page.js

@@ -10,6 +10,38 @@ sc_require('views/list_button');
 
 // This page describes the main user interface for your application.  
 FamilyTree.mainPage = SC.Page.design({
+
+  invalidBrowserPane: SC.Pane.design({
+    childViews: 'title main'.w(),
+
+    title: SC.View.design({
+      layout: {left: 0, top: 0, right: 0, height: 56},
+      classNames: ['header'],
+      render: function(context, firstTime){
+        context = context.begin('div')
+                    .addClass('logo')
+                      .text('family tree')
+                  .end();
+        context = context.begin('div')
+                    .addClass('blurb')
+                      .text('a scui linkit example')
+                  .end();
+        context = context.begin('div')
+                   .addClass('leaves')
+                  .end();
+      }
+    }),
+
+    main: SC.View.design({
+      layout: {left: 0, top: 56, right: 0, bottom: 0},
+      render: function(context, firstTime){
+        context = context.begin('div')
+                    .addClass('apology')
+                      .text('Sorry, Linkit is designed for desktop application for now and we are working on adding mobile support...')
+                  .end();
+      }
+    })
+  }),
 
   // The main pane is made visible on screen as soon as your app is loaded.
   // Add childViews to this pane for views to display immediately on page 
@@ -75,7 +107,8 @@ FamilyTree.mainPage = SC.Page.design({
       contentBinding: SC.Binding.from('FamilyTree.membersController').oneWay(),
       selectionBinding: 'FamilyTree.membersController.selection',
       nodeViewDelegate: FamilyTree.familyController,
-      exampleView: FamilyTree.NodeView
+      exampleView: FamilyTree.NodeView,
+      delegate: FamilyTree.familyController
     }),    
 
     palette: SC.View.design({