1st working version, annotation is still not work correctly

OpenPage/build/debug/main.css

@@ -1,4 +1,5 @@
 
+@namespace office url(urn:oasis:names:tc:opendocument:xmlns:office:1.0);
 afx-app-window[data-id="OpenPage"] div[data-id="container"]
 {
     overflow: auto;
@@ -8,13 +9,41 @@ afx-app-window[data-id="OpenPage"] div[data-id="container"]
     padding-bottom: 10px;
     text-align: center;
     background-color: #f2f1f0;
+    /*position: relative;*/
 }
 
+/*
+@media screen, print, handheld, projection
+{
+    office|body{
+        display: inline !important;
+    }    
+}*/
+
+
+/*
+Fix annotation problem not showing
+*/
+/*
+afx-app-window[data-id="OpenPage"] document, afx-app-window[data-id="OpenPage"] office:body{
+    display: inline !important;
+}
+afx-app-window[data-id="OpenPage"] .annotationsPane{
+    right: 0 !important;
+    top: 0 !important;
+    position: absolute !important;
+}*/
 afx-app-window[data-id="OpenPage"] div[data-id="odfcanvas"]
 {
     cursor: text;
     margin:auto;
     box-shadow: 1px 1px 3px 3px #9f9F9F;
+    /*added*/
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+    overflow: hidden;
 }
 
 afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
@@ -44,6 +73,8 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button
     border-radius:5px;
     color:#759DC0;
 }
+
+
 afx-app-window[data-id="HyperLinkDialog"] afx-label.header span
 {
     font-weight: bold;
@@ -59,7 +90,8 @@ afx-app-window[data-id="FormatDialog"] afx-label.header span
 }
 afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
 afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
-afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="font-box"] > div > afx-label  span
 {
     display: block;
     padding-top: 7px;

OpenPage/build/debug/package.json

@@ -9,5 +9,5 @@
     "version":"0.0.1-a",
     "category":"Other",
     "iconclass":"fa fa-adn",
-    "mimes":["none"]
+    "mimes":["application/vnd.oasis.opendocument.text"]
 }

OpenPage/coffees/dialogs.coffee

@@ -49,6 +49,7 @@ class FormatDialog extends this.OS.GUI.BaseDialog
                 right: @find("spnright"),
                 top: @find("spntop"),
                 bottom: @find("spnbottom"),
+                lineheight: @find("spnlheight")
             padding:
                 left: @find("pspnleft"),
                 right: @find("pspnright"),
@@ -80,7 +81,8 @@ class FormatDialog extends this.OS.GUI.BaseDialog
                 left:0
                 top:0,
                 right:0,
-                bottom:0
+                bottom:0,
+                lineheight: 0
             padding:
                 left:0
                 top:0,
@@ -165,6 +167,7 @@ class FormatDialog extends this.OS.GUI.BaseDialog
                 "fo:padding-left": @currentStyle.padding.left + "mm"
                 "fo:padding-bottom": @currentStyle.padding.bottom + "mm"
                 "fo:padding-right": @currentStyle.padding.right + "mm"
+                "fo:line-height": if @currentStyle.spacing.lineheight > 0 then @currentStyle.spacing.lineheight + "mm"  else "normal"
                 "fo:text-align": @currentStyle.aligment.selected || "left"
             "style:text-properties":
                 "fo:font-weight": if @currentStyle.style.bold then "bold" else "normal"
@@ -197,6 +200,7 @@ class FormatDialog extends this.OS.GUI.BaseDialog
             @currentStyle.padding.left = cssUnits.convertMeasure(style['fo:padding-left'], 'mm') || 0
             @currentStyle.padding.right = cssUnits.convertMeasure(style['fo:padding-right'], 'mm') || 0
             @currentStyle.padding.bottom = cssUnits.convertMeasure(style['fo:padding-bottom'], 'mm') || 0
+            @currentStyle.spacing.lineheight = cssUnits.convertMeasure(style['fo:line-height'], 'mm')  || 4.2 # 1em = 4,2175176mm
             @currentStyle.aligment[style['fo:text-align']] = true if style['fo:text-align']
         style = @parent.editorSession.getParagraphStyleAttributes(odfs.name)['style:text-properties']
         if style
@@ -220,6 +224,7 @@ class FormatDialog extends this.OS.GUI.BaseDialog
         @ui.spacing.right.set "value", @currentStyle.spacing.right
         @ui.spacing.top.set "value", @currentStyle.spacing.top
         @ui.spacing.bottom.set "value", @currentStyle.spacing.bottom
+        @ui.spacing.lineheight.set "value", @currentStyle.spacing.lineheight
         
         @ui.padding.left.set "value", @currentStyle.padding.left
         @ui.padding.right.set "value", @currentStyle.padding.right
@@ -237,11 +242,11 @@ class FormatDialog extends this.OS.GUI.BaseDialog
             item = i for v, i in items when v.text is @currentStyle.font.family.text
             @ui.font.family.set "selected", item if item >= 0
         
-        $(@ui.style.color).css "background-color", @currentStyle.style.color.hex if @currentStyle.style.color
+        $(@ui.style.color).css "background-color", if @currentStyle.style.color then @currentStyle.style.color.hex else "#000000"
-        $(@ui.style.bgcolor).css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        $(@ui.style.bgcolor).css "background-color", if @currentStyle.style.bgcolor then @currentStyle.style.bgcolor.hex else "white"
         # set the preview css
         el = $ @preview
-        el.css "text-align", @currentStyle.aligment.selected
+        el.css "text-align", if @currentStyle.aligment.selected then @currentStyle.aligment.selected else "left"
         el.css "margin-left", @currentStyle.spacing.left + "mm"
         el.css "margin-right", @currentStyle.spacing.right + "mm"
         el.css "margin-top", @currentStyle.spacing.top + "mm"
@@ -256,13 +261,15 @@ class FormatDialog extends this.OS.GUI.BaseDialog
             .css "font-weight", "normal"
             .css "font-style", "normal"
             .css "text-decoration", "none"
+            .css "line-height", "normal"
         el.css "font-weight", "bold" if @currentStyle.style.bold
         el.css "font-style", "italic" if @currentStyle.style.italic
         el.css "text-decoration", "underline" if @currentStyle.style.underline
-        el.css "color", @currentStyle.style.color.hex if @currentStyle.style.color
+        el.css "color", if @currentStyle.style.color then @currentStyle.style.color.hex else "#000000"
-        el.css "background-color", @currentStyle.style.bgcolor.hex if @currentStyle.style.bgcolor
+        el.css "background-color", if @currentStyle.style.bgcolor then @currentStyle.style.bgcolor.hex  else "transparent"
         el.css "font-size", @currentStyle.font.size + "pt"
         el.css "font-family", @currentStyle.font.family.name if @currentStyle.font.family
+        el.css "line-height", @currentStyle.spacing.lineheight + "mm" if @currentStyle.spacing.lineheight > 0
 
 FormatDialog.scheme = """
 <afx-app-window apptitle="__(Format Dialog)" width="500" height="500" data-id="FormatDialog">
@@ -289,7 +296,7 @@ FormatDialog.scheme = """
             <div data-width="20" ></div>
         </afx-hbox>
          <div data-height="5"></div>
-        <afx-label text="__(Spacing)" class="header" data-height="20"></afx-label>
+        <afx-label text="__(Margin)" class="header" data-height="20"></afx-label>
         <div data-height="5"></div>
         <afx-hbox data-height="23" data-id="spacingbox">
             <div ></div>
@@ -346,12 +353,15 @@ FormatDialog.scheme = """
         <div data-height="5"></div>
         <afx-label text="__(Font)" class="header" data-height="20"></afx-label>
         <div data-height="5"></div>
-        <afx-hbox data-height="30">
+        <afx-hbox data-height="30" data-id="font-box">
             <div data-width="5"></div>
             <afx-list-view data-id="lstfont" dropdown = "true"></afx-list-view>
             <div data-width="5" ></div>
             <afx-label data-width="35" text="__(Size:)"></afx-label>
             <afx-nspinner data-width="50" data-id="spnfsize"></afx-nspinner>
+            <div data-width="5" ></div>
+            <afx-label data-width="80" text="__(Line Height:)"></afx-label>
+            <afx-nspinner data-width="50" data-id="spnlheight" value="4.2" step="0.2"></afx-nspinner>
             <div data-width="5"></div>
         </afx-hbox>
         <div data-height="5"></div>

OpenPage/coffees/main.coffee

@@ -7,16 +7,97 @@ class OpenPage extends this.OS.GUI.BaseApplication
         #if not OpenPage.EditorSession
         #    require ["webodf/editor/EditorSession"], (ES) ->
         #        OpenPage.EditorSession = ES
-        @userid = @systemsetting.user.username
+        me =@
         @eventSubscriptions = new core.EventSubscriptions()
         @initToolbox()
-        @initCanvas()
+        @userid = "#{@systemsetting.user.username}@#{@pid}"
-        @canvas.load "#{@_api.handler.get}/home://welcome.odt"
+        #file = "home://welcome.odt"
+        #file = "#{@_api.handler.get}/home://welcome.odt"
+        #@canvas.load file
+        #odfContainer = new odf.OdfContainer file, (c) ->
+        #    me.canvas.setOdfContainer c, false
         @currentStyle = ""
+        if @args and @args.length > 0 then @open @args[0] else @newdoc()
         @resource =
             fonts: []
             formats: []
+        @bindKey "ALT-N", () -> me.actionFile "#{me.name}-New"
+        @bindKey "ALT-O", () -> me.actionFile "#{me.name}-Open"
+        @bindKey "CTRL-S", () -> me.actionFile "#{me.name}-Save"
+        @bindKey "ALT-W", () -> me.actionFile "#{me.name}-Saveas"
         
+    
+    menu: () ->
+        me = @
+        menu = [{
+                text: "__(File)",
+                child: [
+                    { text: "__(New)", dataid: "#{@name}-New", shortcut: "A-N" },
+                    { text: "__(Open)", dataid: "#{@name}-Open", shortcut: "A-O" },
+                    { text: "__(Save)", dataid: "#{@name}-Save", shortcut: "C-S" },
+                    { text: "__(Save as)", dataid: "#{@name}-Saveas", shortcut: "A-W" }
+                ],
+                onmenuselect: (e) -> me.actionFile e.item.data.dataid
+            }]
+        menu
+    
+    actionFile: (e) ->
+        me = @
+        saveas = () ->
+            me.openDialog "FileDiaLog", (d, n, p) ->
+                me.currfile.setPath "#{d}#{n}"
+                me.save()
+            , __("Save as"), { file: me.currfile }
+        switch e
+            when "#{@name}-Open"
+                @openDialog "FileDiaLog", ( d, f , p) ->
+                    me.open p
+                , __("Open file"), { mimes: me.meta().mimes }
+            when "#{@name}-Save"
+                #@currfile.cache = @editor.value()
+                return @save() if @currfile.basename
+                saveas()
+            when "#{@name}-Saveas"
+                saveas()
+             when "#{@name}-New"
+                @newdoc()
+    
+    
+    newdoc: () ->
+        blank = "#{@meta().path}/blank.odt"
+        @open blank, true
+    open: (p,b) ->
+        me = @
+        
+        @pathAsDataURL(p)
+            .then (r) ->
+                me.closeDocument() if me.editorSession
+                me.initCanvas()
+                OdfContainer = new odf.OdfContainer r.reader.result, (c) ->
+                    me.canvas.setOdfContainer c, false
+                    return me.currfile  = "Untitled".asFileHandler() if b
+                    me.currfile.setPath p
+                    me.scheme.set "apptitle", me.currfile.basename
+                    me.notify __("File {0} opened", p)
+            .catch (e) ->
+                me.error __("Problem read file {0}", e) 
+    
+    save: () ->
+        me = @
+        return unless @editorSession
+        container = @canvas.odfContainer()
+        return @error __("No document container found") unless container
+        container.createByteArray (ba) ->
+            # create blob
+            me.currfile.cache = new Blob [ba], { type: "application/vnd.oasis.opendocument.text" }
+            me.currfile.write "application/vnd.oasis.opendocument.text", (r) ->
+                return me.error __("Cannot save file: {0}", r.error) if r.error
+                me.notify __("File {0} saved", me.currfile.basename)
+                me.scheme.set "apptitle", me.currfile.basename
+                me.currfile.dirty = false
+        , (err) ->
+            @error __("Cannot create byte array from container: {0}", err|| "")
+    
     initToolbox: () ->
         me = @
         @basictool =
@@ -69,8 +150,14 @@ class OpenPage extends this.OS.GUI.BaseApplication
         el.classList.add "notranslate"
         @canvas = new odf.OdfCanvas(el)
         @documentChanged = (e) ->
+            return if me.currfile.dirty
+            me.currfile.dirty = true
+            me.scheme.set "apptitle", me.currfile.basename + "*"
             #console.log e
         @metaChanged = (e) ->
+            return if me.currfile.dirty
+            me.currfile.dirty = true
+            me.scheme.set "apptitle", me.currfile.basename + "*"
             #console.log e
         @textStylingChanged = (e) ->
             me.updateToolbar e
@@ -97,8 +184,7 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.basictool.zoom.set "value", value
             zlb = me.find "lbzoom"
             zlb.set "text", value+"%"
-        
+        #me.canvas.enableAnnotations true, true
-        #@canvas.enableAnnotations(true, true)
         @canvas.addListener "statereadychange", ()->
             me.session = new ops.Session(me.canvas)
             viewOptions =
@@ -118,6 +204,10 @@ class OpenPage extends this.OS.GUI.BaseApplication
                 zoomingEnabled: true,
                 reviewModeEnabled: false
             })
+            me.initFontList me.editorSession.getDeclaredFonts()
+            me.initStyles me.editorSession.getAvailableParagraphStyles()
+            #fix annotation problem on canvas
+            #console.log $("office:body").css "background-color", "red"
             # basic format
             me.directFormattingCtl = me.editorSession.sessionController.getDirectFormattingController()
             me.directFormattingCtl.subscribe gui.DirectFormattingController.textStylingChanged, me.textStylingChanged
@@ -130,6 +220,8 @@ class OpenPage extends this.OS.GUI.BaseApplication
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphChanged, ()-> me.updateHyperlinkButtons()
             me.eventSubscriptions.addFrameSubscription me.editorSession, OpenPage.EditorSession.signalParagraphStyleModified, ()-> me.updateHyperlinkButtons()
             
+            #annotation controller
+            me.annotationController = me.editorSession.sessionController.getAnnotationController()
             
             #image controller
             me.imageController = me.editorSession.sessionController.getImageController()
@@ -158,8 +250,6 @@ class OpenPage extends this.OS.GUI.BaseApplication
                 }
             }
             me.session.enqueue([op])
-            me.initFontList me.editorSession.getDeclaredFonts()
-            me.initStyles me.editorSession.getAvailableParagraphStyles()
             me.editorSession.sessionController.insertLocalCursor()
             me.editorSession.sessionController.startEditing()
             #console.log me.editorSession.getDeclaredFonts()
@@ -230,6 +320,9 @@ class OpenPage extends this.OS.GUI.BaseApplication
     ac: (e) ->
         @directFormattingCtl.alignParagraphCenter()
     
+    note: (e) ->
+        @annotationController.addAnnotation()
+    
     aj: (e) ->
         @directFormattingCtl.alignParagraphJustified()
     
@@ -289,30 +382,37 @@ class OpenPage extends this.OS.GUI.BaseApplication
     redo: (e) ->
         @editorSession.redo()
     
-    image: (e) ->
+    pathAsDataURL: (p) ->
-        me = @
+        return new Promise (resolve, error) ->
-        @openDialog "FileDiaLog", (d, n, p) ->
             fp = p.asFileHandler()
-            fp.asFileHandler().read (data) ->
+            fp.read (data) ->
                 blob = new Blob [data], { type: fp.info.mime }
                 reader = new FileReader()
                 reader.onloadend = () ->
-                    return me.error __("Couldnt load image {0}", p) if reader.readyState isnt 2
+                    return error(p) if reader.readyState isnt 2
-                    # insert the image to document
+                    resolve {reader: reader, fp: fp }
+                reader.readAsDataURL blob
+            , "binary"
+        
+    
+    image: (e) ->
+        me = @
+        @openDialog "FileDiaLog", (d, n, p) ->
+            me.pathAsDataURL(p)
+                .then (r) ->
                     hiddenImage = new Image()
                     hiddenImage.style.position = "absolute"
                     hiddenImage.style.left = "-99999px"
                     document.body.appendChild hiddenImage
                     hiddenImage.onload =  () ->
-                        content = reader.result.substring(reader.result.indexOf(",") + 1)
+                        content = r.reader.result.substring(r.reader.result.indexOf(",") + 1)
                         #insert image
                         me.textController.removeCurrentSelection()
-                        me.imageController.insertImage fp.info.mime, content, hiddenImage.width, hiddenImage.height
+                        me.imageController.insertImage r.fp.info.mime, content, hiddenImage.width, hiddenImage.height
                         document.body.removeChild hiddenImage
-                    hiddenImage.src = reader.result
+                    hiddenImage.src = r.reader.result
-                
+                .catch () ->
-                reader.readAsDataURL blob
+                    me.error __("Couldnt load image {0}", p)
-            , "binary"
         , __("Select image file"), { mimes: ["image/.*"] }
     
     styles: (e) ->
@@ -321,11 +421,12 @@ class OpenPage extends this.OS.GUI.BaseApplication
     
     zoom: (e) ->
         #console.log "zooming", e
+        return unless @zoomHelper
         @zoomHelper.setZoomLevel e/100.0
     
     format: (e) ->
         @openDialog new FormatDialog(), (d) ->
-            console.log d
+                return
         , __("Add/Modify paragraph format"), @resource
     
     closeDocument: () ->
@@ -362,6 +463,7 @@ class OpenPage extends this.OS.GUI.BaseApplication
                         return me.error __("Cannot destroy canvas {0}", e) if e
                         me.notify "Document closed"
                     me.session = undefined
+                    me.annotationController = undefined
                     me.directFormattingCtl = undefined
                     me.textController = undefined
                     me.imageController = undefined
@@ -372,6 +474,8 @@ class OpenPage extends this.OS.GUI.BaseApplication
                     me.paragrahStyleChanged = undefined
                     me.updateSlider = undefined
                     me.styleAdded = undefined
+                    me.basictool.fonts.set "selected", -1
+                    me.basictool.styles.set "selected", -1
                     #
             
     

OpenPage/css/dialog.css

@@ -13,7 +13,8 @@ afx-app-window[data-id="FormatDialog"] afx-label.header span
 }
 afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="aligmentbox"] afx-label span,
 afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="spacingbox"] afx-label span,
-afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="stylebox"] afx-label span,
+afx-app-window[data-id="FormatDialog"] afx-hbox[data-id="font-box"] > div > afx-label  span
 {
     display: block;
     padding-top: 7px;

OpenPage/css/main.css

@@ -1,3 +1,4 @@
+@namespace office url(urn:oasis:names:tc:opendocument:xmlns:office:1.0);
 afx-app-window[data-id="OpenPage"] div[data-id="container"]
 {
     overflow: auto;
@@ -7,13 +8,41 @@ afx-app-window[data-id="OpenPage"] div[data-id="container"]
     padding-bottom: 10px;
     text-align: center;
     background-color: #f2f1f0;
+    /*position: relative;*/
 }
 
+/*
+@media screen, print, handheld, projection
+{
+    office|body{
+        display: inline !important;
+    }    
+}*/
+
+
+/*
+Fix annotation problem not showing
+*/
+/*
+afx-app-window[data-id="OpenPage"] document, afx-app-window[data-id="OpenPage"] office:body{
+    display: inline !important;
+}
+afx-app-window[data-id="OpenPage"] .annotationsPane{
+    right: 0 !important;
+    top: 0 !important;
+    position: absolute !important;
+}*/
 afx-app-window[data-id="OpenPage"] div[data-id="odfcanvas"]
 {
     cursor: text;
     margin:auto;
     box-shadow: 1px 1px 3px 3px #9f9F9F;
+    /*added*/
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+    overflow: hidden;
 }
 
 afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"]
@@ -42,4 +71,5 @@ afx-app-window[data-id="OpenPage"] afx-hbox[data-id="toolbox"] afx-button button
     background-color: transparent;
     border-radius:5px;
     color:#759DC0;
-}
+}
+

OpenPage/package.json

@@ -9,5 +9,5 @@
     "version":"0.0.1-a",
     "category":"Other",
     "iconclass":"fa fa-adn",
-    "mimes":["none"]
+    "mimes":["application/vnd.oasis.opendocument.text"]
 }