different marks architecture, a bit more complext to play with but allot more flexible (bugs expected)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/data.js

@@ -1101,6 +1101,7 @@ function convertDataGen1(data, cmp){
 * Loaders
 */
 
+
 function updateImageIndicators(gid, image){
 	gid = gid == null ? getImageGID() : gid
 	image = image == null ? getImage() : $(image)
@@ -1108,8 +1109,12 @@ function updateImageIndicators(gid, image){
 	// marks...
 	if(MARKED.indexOf(gid) != -1){
 		image.addClass('marked')
+		// XXX
+		_addMark('selected', gid, image)
 	} else {
 		image.removeClass('marked')
+		// XXX
+		_removeMark('selected', gid, image)
 	}
 
 	return image
@@ -1138,14 +1143,19 @@ function _loadImagePreviewURL(image, url){
 // 		may leak to newly loaded images...
 // XXX do a pre-caching framework...
 function updateImage(image, gid, size, sync){
+	image = image == null ? getImage() : $(image)
 	sync = sync == null ? SYNC_IMG_LOADER : sync
-	image = $(image)
 	var oldgid = getImageGID(image)
 
 	if(oldgid == gid || gid == null){
 		gid = oldgid
 
 	} else {
+		// remove old marks...
+		if(typeof(oldgid) == typeof('str')){
+			getImageMarks(oldgid).remove()
+		}
+		// reset gid...
 		image
 			.attr('gid', JSON.stringify(gid))
 			.css({

ui/experiments/seporate-image-and-background.html

@@ -161,6 +161,7 @@
 	border: dotted blue 5px;
 }
 
+.mark.tagged,
 .mark.blue,
 .mark.red,
 .mark.yellow {
@@ -168,8 +169,8 @@
 	margin-left: 0px;
 	border: none;
 	box-sizing: border-box;
-
 }
+.mark.tagged:after,
 .mark.blue:after,
 .mark.red:after,
 .mark.yellow:after {
@@ -194,6 +195,16 @@
 	border-radius: 50%;
 }
 
+.mark.tagged:after {
+	box-shadow: none;
+	text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
+	font-size: 10pt;
+	vertical-align: middle;
+	text-align: center;
+	content: "T";
+	color: white;
+	background: none;
+}
 .mark.blue:after {
 	left: -25px;
 	border: solid 3px blue;
@@ -208,6 +219,23 @@
 	background: yellow;
 }
 
+.ccw270,
+.cw90 {
+	-webkit-transform: rotate(90deg);
+}
+.ccw180,
+.cw180 {
+	-webkit-transform: rotate(180deg);
+}
+.ccw90,
+.cw270 {
+	-webkit-transform: rotate(270deg);
+}
+.ccw0,
+.cw0 {
+	-webkit-transform: rotate(0deg);
+}
+
 </style>
 <script src="jquery.js"></script>
 
@@ -264,7 +292,7 @@
 		<div id="0" class="image2" style="background-image: url(image.jpg)"></div>
 		<div class="mark red"></div>
 
-		<div id="1" class="current image2" style="background-image: url(image.jpg)"></div>
+		<div id="1" class="current image2 cw180" style="background-image: url(image.jpg)"></div>
 		<div class="mark"></div>
 		<div class="mark blue" title="blue"></div>
 		<div class="mark red" title="red"></div>
@@ -272,6 +300,7 @@
 
 		<div id="2" class="image2" style="background-image: url(image.jpg)"></div>
 		<div class="mark select"></div>
+		<div class="mark tagged" title="tagged"></div>
 	</div>
 	</details>
 

ui/layout.css

@@ -224,7 +224,7 @@ button:hover {
   height: 20px;
   margin-top: -20px;
   text-align: center;
-  vertical-align: center;
+  vertical-align: middle;
   font-size: 18px;
   font-weight: bold;
   color: silver;
@@ -270,6 +270,7 @@ button:hover {
 /*********************************************************** Image ***/
 .marker,
 .current-marker,
+.mark,
 .image {
   position: relative;
   display: inline-block;
@@ -495,63 +496,64 @@ button:hover {
 	opacity: 0.5;
 }
 */
+/*
 .marks-visible.viewer .marked.image:after {
-  display: block;
+	display: block;
-  position: absolute;
+	position: absolute;
-  content: "";
+	content: "";
-  font-size: 0pt;
+	font-size: 0pt;
-  border: none;
+	border: none;
-  width: 10px;
-  height: 10px;
-  top: auto;
-  bottom: 5px;
-  left: auto;
-  right: 5px;
-  border-radius: 50%;
-  background: blue;
-  /* make the mark stand out if it is over an image with similar 
-	color/density */
 
-  box-shadow: 0px 0px 7px 0px black;
+	width: @ribbon-mark-size;
-  /*border: solid 1px white;*/
+	height: @ribbon-mark-size;
 
-  /*border: solid 1px black;*/
+	top: auto;
+	bottom: @ribbon-mark-offset;
+	left: auto;
+	right: @ribbon-mark-offset;
 
+	border-radius: 50%;
+	background: blue;
+
+	box-shadow: 0px 0px 7px 0px black;
 }
 .marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
 .marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
 .marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
-  top: 5px;
+	top: @ribbon-mark-offset;
-  bottom: auto:
+	bottom: auto;
 	left: auto;
-  right: 5px;
+	right: @ribbon-mark-offset;
 }
 .marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
 .marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
-  top: 5px;
+	top: @ribbon-mark-offset;
-  bottom: auto;
+	bottom: auto;
-  left: 5px;
+	left: @ribbon-mark-offset;
-  right: auto;
+	right: auto;
 }
 .marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
 .marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
-  top: auto;
+	top: auto;
-  bottom: 5px;
+	bottom: @ribbon-mark-offset;
-  left: 5px;
+	left: @ribbon-mark-offset;
-  right: auto;
+	right: auto;
 }
+*/
 /* NOTE: we use a different mark representation for single image mode... */
+/*
 .marks-visible.single-image-mode.viewer .marked.image:after {
-  display: none;
+	display: none;
 }
+*/
 /* corner mark... (a-la bookmarks in PortableMag) 
  * XXX account for flipping... */
 /*
@@ -586,12 +588,48 @@ button:hover {
 	bottom: @ribbon-mark-offset;
 	right: @ribbon-mark-offset;
 }
-/
 
 
-/* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
-  opacity: 0.3;
+	opacity: 0.3;
+}
+*/
+/* new gen marks... */
+.mark {
+  /* this fully covers the image to simplify positioning of actual marks */
+
+  margin-left: -300px;
+  border: none;
+}
+.viewer:not(.marks-visible) .mark {
+  display: none;
+}
+.mark.selected {
+  width: 0px;
+  margin-left: 0px;
+  border: none;
+  overflow: visible;
+}
+.mark.selected:after {
+  display: block;
+  position: absolute;
+  content: "";
+  font-size: 0pt;
+  border: none;
+  width: 5px;
+  height: 5px;
+  top: auto;
+  bottom: 10px;
+  left: auto;
+  right: 10px;
+  box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: blue;
+  left: -15;
+}
+.marks-visible.single-image-mode.viewer .mark:after {
+  display: none;
 }
 /****************************************************** Image info ***/
 .inline-image-info {
@@ -959,7 +997,7 @@ button:hover {
 .global-mode-indicators > *,
 .context-mode-indicators > * {
   font-size: small;
-  vertical-align: center;
+  vertical-align: middle;
   margin-left: 10px;
 }
 .global-mode-indicators .circle,
@@ -986,7 +1024,7 @@ button:hover {
 .context-mode-indicators .indicator {
   display: none;
   height: 20px;
-  vertical-align: center;
+  vertical-align: middle;
 }
 /* actual indicators */
 /* marks... */
@@ -1143,9 +1181,10 @@ button:hover {
 .dark.viewer .ribbon-indicator:hover:after {
   opacity: 0.8;
 }
-.large.viewer:not(.single-image-mode) .current.image {
+.large.viewer:not(.single-image-mode) .current-marker {
-  border-width: 3px;
+  border-width: 2px;
 }
+.large.viewer:not(.single-image-mode) .mark:after,
 .large.viewer:not(.single-image-mode) .marked.image:after {
   -webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
   -moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
@@ -1153,6 +1192,7 @@ button:hover {
   -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
   transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
 }
+.small.viewer:not(.single-image-mode) .mark:after,
 .small.viewer:not(.single-image-mode) .marked.image:after {
   -webkit-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
   -moz-transform: rotate(0deg) scaleY(1.8) scaleX(1.8);
@@ -1163,8 +1203,8 @@ button:hover {
 /********************************************************* Overlay ***/
 .overlay-block {
   display: none;
-  position: absolute:
+  position: absolute;
-	top: 0px;
+  top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
@@ -1237,7 +1277,7 @@ button:hover {
   border-radius: 3px;
   background: gray;
   padding: 20px;
-  vertical-align: center;
+  vertical-align: middle;
   box-shadow: 0px 5px 50px 0px black;
 }
 /* tables in dialogs... */

ui/layout.less

@@ -4,6 +4,8 @@
 
 /******************************************************** Settings ***/
 
+@image-tile-size: 300px;
+
 @ribbon-mark-offset: 5px;
 
 @ribbon-mark-size: 10px;
@@ -318,7 +320,7 @@ button:hover {
 	margin-top: -20px;
 
 	text-align: center;
-	vertical-align: center;
+	vertical-align: middle;
 
 	font-size: 18px;
 	font-weight: bold;
@@ -375,13 +377,14 @@ button:hover {
 /*********************************************************** Image ***/
 .marker,
 .current-marker,
+.mark,
 .image {
 	position: relative;
 	display: inline-block;
 	vertical-align: middle;
 	text-align:left;
-	width: 300px;
+	width: @image-tile-size;
-	height: 300px;
+	height: @image-tile-size;
 	font-size: 12pt;
 	overflow: hidden;
 
@@ -560,6 +563,7 @@ button:hover {
 }
 */
 
+/*
 .marks-visible.viewer .marked.image:after {
 	display: block;
 	position: absolute;
@@ -578,11 +582,7 @@ button:hover {
 	border-radius: 50%;
 	background: blue;
 
-	/* make the mark stand out if it is over an image with similar 
-	color/density */
 	box-shadow: 0px 0px 7px 0px black;
-	/*border: solid 1px white;*/
-	/*border: solid 1px black;*/
 }
 .marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
 .marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
@@ -590,7 +590,7 @@ button:hover {
 .marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
 .marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
 	top: @ribbon-mark-offset;
-	bottom: auto:
+	bottom: auto;
 	left: auto;
 	right: @ribbon-mark-offset;
 }
@@ -614,11 +614,14 @@ button:hover {
 	left: @ribbon-mark-offset;
 	right: auto;
 }
+*/
 
 /* NOTE: we use a different mark representation for single image mode... */
+/*
 .marks-visible.single-image-mode.viewer .marked.image:after {
 	display: none;
 }
+*/
 
 
 /* corner mark... (a-la bookmarks in PortableMag) 
@@ -655,13 +658,59 @@ button:hover {
 	bottom: @ribbon-mark-offset;
 	right: @ribbon-mark-offset;
 }
-/
 
 
-/* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
 	opacity: 0.3;
 }
+*/
+
+
+
+/* new gen marks... */
+
+.mark {
+	/* this fully covers the image to simplify positioning of actual marks */
+	margin-left: -@image-tile-size;
+	border: none;
+}
+.viewer:not(.marks-visible) .mark {
+	display: none;
+}
+
+.mark.selected {
+	width: 0px;
+	margin-left: 0px;
+	border: none;
+	overflow: visible;
+}
+.mark.selected:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: 5px;
+	height: 5px;
+
+	top: auto;
+	bottom: 10px;
+	left: auto;
+	right: 10px;
+
+	box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
+
+	box-sizing: border-box;
+	border-radius: 50%;
+
+
+	background: blue;
+	left: -15;
+}
+.marks-visible.single-image-mode.viewer .mark:after {
+	display: none;
+}
 
 
 
@@ -941,7 +990,7 @@ button:hover {
 	position: absolute;
 	height: 20px;
 	width: auto;
-	min-width: 300px;
+	min-width: @image-tile-size;
 	text-align: right;
 
 	color: transparent;
@@ -971,7 +1020,7 @@ button:hover {
 .global-mode-indicators > *,
 .context-mode-indicators > * {
 	font-size: small;
-	vertical-align: center;
+	vertical-align: middle;
 	margin-left: 10px;
 }
 
@@ -1001,7 +1050,7 @@ button:hover {
 .context-mode-indicators .indicator {
 	display: none;
 	height: 20px;
-	vertical-align: center;
+	vertical-align: middle;
 }
 
 
@@ -1182,13 +1231,15 @@ button:hover {
 
 
 
-.large.viewer:not(.single-image-mode) .current.image {
+.large.viewer:not(.single-image-mode) .current-marker {
-	border-width: 3px;
+	border-width: 2px;
 }
+.large.viewer:not(.single-image-mode) .mark:after,
 .large.viewer:not(.single-image-mode) .marked.image:after {
 	.scale(0.7);
 }
 
+.small.viewer:not(.single-image-mode) .mark:after,
 .small.viewer:not(.single-image-mode) .marked.image:after {
 	.scale(1.8);
 }
@@ -1199,7 +1250,7 @@ button:hover {
 
 .overlay-block {
 	display: none;
-	position: absolute:
+	position: absolute;
 	top: 0px;
 	left: 0px;
 	height: 100%;
@@ -1280,7 +1331,7 @@ button:hover {
 
 	padding: 20px;
 
-	vertical-align: center;
+	vertical-align: middle;
 
 	box-shadow: 0px 5px 50px 0px black;
 }

ui/marks.js

@@ -12,6 +12,32 @@
 * helpers...
 */
 
+function _addMark(cls, gid, image){
+	gid = gid == null ? getImageGID() : gid
+	image = image == null ? getImage() : $(image)
+
+	var mark = $('.mark.'+cls+'.'+gid)
+
+	if(mark.length == 0){
+		mark = $('<div class="mark selected"/>')
+			.addClass(gid)
+			.insertAfter(image)
+	} 
+	return mark
+}
+function _removeMark(cls, gid, image){
+	gid = gid == null ? getImageGID() : gid
+	image = image == null ? getImage() : $(image)
+
+	var mark = $('.mark.'+cls+'.'+gid)
+
+	if(mark.length != 0){
+		mark.detach()
+	}
+	return mark
+}
+
+
 // NOTE: to disable MARKED cleanout set no_cleanout_marks to true.
 // NOTE: MARKED may contain both gids that are not loaded and that do 
 // 		not exist, as there is no way to distinguish between the two 
@@ -81,6 +107,12 @@ var toggleImageMark = createCSSClassToggler(
 	'marked',
 	function(action){
 		toggleMarkesView('on')
+		// XXX
+		if(action == 'on'){
+			_addMark('selected')
+		} else {
+			_removeMark('selected')
+		}
 		$('.viewer').trigger('togglingMark', [getImage(), action])
 	})
 

ui/ribbons.js

@@ -126,6 +126,22 @@ function getImageGID(image){
 }
 
 
+// Get marks associated with image...
+//
+// img can be:
+// 	- literal gid
+// 	- image
+// 	- null -- assume current image
+//
+// NOTE: this does not understand selectors as arguments...
+function getImageMarks(img){
+	gid = typeof(img) == typeof('str') ? img : null
+	gid = gid == null ? getImageGID(img) : gid
+
+	return $('.mark.'+gid)
+}
+
+
 function getRibbon(a){
 	a = a == null ? getImage() : a
 
@@ -241,15 +257,24 @@ function getImageBefore(image, ribbon){
 function shiftTo(image, ribbon){
 	var target = getImageBefore(image, ribbon)
 	var cur_ribbon = getRibbon(image)
+	var marks = getImageMarks(image)
 
 	// insert before the first image if nothing is before the target...
 	if(target.length == 0){
 		image.prependTo($(ribbon))
 
 	} else {
-		image.insertAfter(target)
+		var target_marks = getImageMarks(target).last()
+		image.insertAfter(
+				// if target has marks, insert after them...
+				target_marks.length > 0 
+					? target_marks 
+					: target)
 	}
 
+	// move the marks...
+	image.after(marks)
+
 	$('.viewer').trigger('shiftedImage', [image, cur_ribbon, ribbon])
 
 	// if removing last image out of a ribbon, remove the ribbon....
@@ -312,7 +337,13 @@ function createImage(n, force_create_new){
 						'class': 'image'
 					})
 	} else {
-		return $('<div order="'+n+'" gid="'+n+'" class="image"/>')
+		return $('<div/>')
+			.attr({
+				order: n,
+				gid: JSON.stringify(n),
+				// need to strip extra classes...
+				'class': 'image',
+			})
 	}
 }
 
@@ -398,9 +429,7 @@ function removeRibbon(ribbon){
 // NOTE: this will remove everything out of a ribbon if left/right are 
 // 		more than the length of the ribbon...
 function extendRibbon(left, right, ribbon, no_compensate_shift){
-	ribbon = ribbon == null ? 
+	ribbon = ribbon == null ?  getRibbon() : $(ribbon)
-				getRibbon()
-				: $(ribbon)
 	left = left == null ? 0 : left
 	right = right == null ? 0 : right
 	var images = ribbon.children('.image')
@@ -420,12 +449,10 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
 	// NOTE: we save the detached elements to reuse them on extending,
 	//		if needed...
 	if(left < 0){
-		//removed = $(images.splice(0, -left)).detach()
 		removed = removed.concat($(images.splice(0, -left)).detach().toArray())
 	}
 	if(right < 0){
 		var l = images.length
-		//removed = $(images.splice(l+right, l)).detach()
 		removed = removed.concat($(images.splice(l+right, l)).detach().toArray())
 	}
 	// calculate the maximum number of new elements left to create...
@@ -444,6 +471,11 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
 		res.right = createImages(right, removed).appendTo(ribbon)
 	}
 
+	// cleanup...
+	$(removed).each(function(){
+		getImageMarks($(this)).remove()
+	})
+
 	// compensate the position...
 	// NOTE: this is fool-proof as it's based on relative visual 
 	// 		position...