ViewerEditLockFields.cs
//
// This code is part of GrapeCity Documents for PDF samples.
// Copyright (c) GrapeCity, Inc. All rights reserved.
//
using System.IO;
using GrapeCity.Documents.Pdf;
using System.Drawing;
using GrapeCity.Documents.Pdf.Annotations;
using GrapeCity.Documents.Pdf.Actions;
using GrapeCity.Documents.Text;
using GrapeCity.Documents.Pdf.AcroForms;

namespace GcPdfWeb.Samples
{
    // This example demonstrates how to create a custom sidebar with a specific UI that controls the availability of fields.
    // This example uses the "locked" annotation property.
    // When the locked property is set to true, the user cannot edit or delete annotations using the user interface.

    // This and other samples in this section demonstrate the features of GcPdfViewer
    // (a JavaScript PDF viewer control included with GcPdf), mainly the ability
    // to change PDF files (add or edit annotations and AcroForm fields, rotate pages etc.)
    // when the JS viewer on the client is supported by GcPdf running on the server.
    //
    // To enable the editing features of the viewer, its supportApi property must be set
    // to a URL on the server that implements all or some of the edit supporting APIs
    // that are known to/expected by the viewer. This GcPdf demo site provides those APIs,
    // which makes it possible to demonstrate the editing when you open the PDF viewer
    // in this sample. When you download this sample, in addition to the .NET Core
    // console app project that generates the sample PDF, an ASP.NET Core project is
    // also included in the download zip (located in the GcPdfViewerWeb sub-folder of the
    // downloaded zip), which also provides the necessary APIs. In particular, it includes
    // a project that implements the APIs and provides them via a special controller.
    // It is actually the same controller that is used by this GcPdf demo site, and which
    // can be used in any ASP.NET Core site to enable the viewer editing features.
    //
    // Look at the following files in the sample download zip for more info:
    // - GcPdfViewerWeb\SupportApiDemo: the sample ASP.NET Core web site.
    // - GcPdfViewerWeb\SupportApiDemo.sln: solution to build/run the sample web site.
    // - GcPdfViewerWeb\SupportApi: support API implementation (can be used in any site).
    // - GcPdfViewerWeb\SupportApi\Controllers\GcPdfViewerController.cs: support API controller.
    // 
    // Please note that this and other samples in this section are only available in C# at this time.
    //
    public class ViewerEditLockFields
    {
        public void CreatePDF(Stream stream)
        {
            var doc = new GcPdfDocument();
            var page = doc.NewPage();

            var rc = Common.Util.AddNote(
                "This example demonstrates how to create a custom sidebar with a specific UI that controls the availability of fields." +
                "This example uses the locked annotation property." +
                "When the locked property is set to true, the user cannot edit or delete annotations using the user interface.",
                page);

            var g = page.Graphics;
            TextFormat tf = new TextFormat() { Font = StandardFonts.Times, FontSize = 14 };
            PointF ip = new PointF(72, rc.Bottom + 36);
            float fldOffset = 72 * 2 + 46;
            float fldHeight = tf.FontSize * 1.2f;
            float dY = 32;

            // Text field:
            g.DrawString("First name:", tf, ip);
            var fldFirstName = new TextField() { Name = "FirstName", Value = "John" };
            fldFirstName.Widget.Page = page;
            fldFirstName.Widget.Rect = new RectangleF(ip.X + fldOffset, ip.Y, 72 * 3, fldHeight);
            fldFirstName.Widget.DefaultAppearance.Font = tf.Font;
            fldFirstName.Widget.DefaultAppearance.FontSize = tf.FontSize;
            doc.AcroForm.Fields.Add(fldFirstName);
            ip.Y += dY;

            // Text field:
            g.DrawString("Last name:", tf, ip);
            var fldLastName = new TextField() { Name = "LastName", Value = "Smith" };
            fldLastName.Widget.Page = page;
            fldLastName.Widget.Rect = new RectangleF(ip.X + fldOffset, ip.Y, 72 * 3, fldHeight);
            fldLastName.Widget.DefaultAppearance.Font = tf.Font;
            fldLastName.Widget.DefaultAppearance.FontSize = tf.FontSize;
            doc.AcroForm.Fields.Add(fldLastName);
            ip.Y += dY;

            // Checkbox:
            g.DrawString("Subscribe to Mailing List:", tf, ip);
            var fldCheckbox = new CheckBoxField() { Name = "Subscribe", Value = true };
            fldCheckbox.Widget.Page = page;
            fldCheckbox.Widget.Rect = new RectangleF(ip.X + fldOffset, ip.Y, fldHeight, fldHeight);
            doc.AcroForm.Fields.Add(fldCheckbox);
            ip.Y += dY;

            // Multiline TextBox:
            g.DrawString("Additional information:", tf, ip);
            var fldAdditionalInfo = new TextField() { Name = "AdditionalInfo", Multiline = true };
            fldAdditionalInfo.Widget.Page = page;
            fldAdditionalInfo.Widget.Rect = new RectangleF(ip.X + fldOffset, ip.Y, 72 * 3, fldHeight * 2);
            fldAdditionalInfo.Widget.DefaultAppearance.Font = tf.Font;
            fldAdditionalInfo.Widget.DefaultAppearance.FontSize = tf.FontSize;
            doc.AcroForm.Fields.Add(fldAdditionalInfo);
            ip.Y += dY * 2;

            // Reset form button:
            var btnReset = new PushButtonField();
            btnReset.Widget.Rect = new RectangleF(ip.X + fldOffset, ip.Y, 72 * 3, fldHeight);
            btnReset.Widget.ButtonAppearance.Caption = "Reset";
            btnReset.Widget.Highlighting = HighlightingMode.Invert;
            btnReset.Widget.Page = page;
            btnReset.Widget.Events.Activate = new ActionResetForm();
            doc.AcroForm.Fields.Add(btnReset);
            ip.Y += dY;

            // Done:
            doc.Save(stream);
        }

        // Used by SupportApiDemo to initialize GcPdfViewer.
        public static GcPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions
        {
            get => new GcPdfViewerSupportApiDemo.Models.PdfViewerOptions(
                GcPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.AnnotationEditorPanel,
                viewerTools: new string[] { "save", "$navigation", "$split", "text-selection", "pan", "$zoom", "$fullscreen", "download", "print", "rotate", "view-mode", "hide-annotations", "doc-properties", "about" },
                annotationEditorTools: new string[] { "edit-select", "$split", "edit-link", "edit-stamp", "$split", "edit-undo", "edit-redo", "save" });
        }

        public const string JS_CODE = @"
var viewer;
var React;
var ReactDOM;
var initialAccessTable = null;

function applyAccess(selectedUserName, access) {
  console.log('Apply access ' + selectedUserName + ': ' + access + ', viewer.currentUserName=' +  viewer.currentUserName);

  if (selectedUserName === viewer.currentUserName) {
    viewer.findAnnotation(20, // 20 - AnnotationTypeCode.WIDGET
    {
      findField: 'annotationType',
      pageNumberConstraint: 1,
      findAll: true
    }).then(function (annotationsDataArr) {
      if (access === 'LockAll') {
        viewer.updateAnnotations(0, annotationsDataArr.map(function (data) {
          data.annotation.locked = true;
          return data.annotation;
        }));
      } else {
        viewer.updateAnnotations(0, annotationsDataArr.map(function (data) {
          data.annotation.locked = false;
          return data.annotation;
        }));
      }
    });
  }
}

function getInitialAccessTable(users) {
	if(!initialAccessTable) {
      initialAccessTable = {};
      for(var i = 0; i < users.length; i++) {
        initialAccessTable[users[i]] = 'UnlockAll';
      }
    }
    return initialAccessTable;
}

function FieldsLockerPanel(props)  {
	var availableUsers = props.availableUsers;
    var stateArr1 = React.useState(availableUsers[0] || ''),
        selectedUserName = stateArr1[0],
        setSelectedUserName = stateArr1[1];
    var stateArr2 = React.useState(getInitialAccessTable(availableUsers));
    var accessTable = stateArr2[0],
        setAccessTable = stateArr2[1];
    var userOpts = [];

    for (var i = 0; i < availableUsers.length; i++) {
      var curUserName = availableUsers[i];
      userOpts.push( /*#__PURE__*/React.createElement('option', {
        selected: !!(selectedUserName === curUserName),
        value: curUserName
      }, curUserName));
    }

    var currentAccess = accessTable[selectedUserName];
    return /*#__PURE__*/React.createElement('div', {
      style: {
        margin: '30px 30px 30px 30px'
      },
      class: 'fields-locker-panel-outer'
    }, /*#__PURE__*/React.createElement('p', {
      class: 'gc-heading__text'
    }, 'Current user:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('label', {
      class: 'current-user-label'
    }, /*#__PURE__*/React.createElement('b', null, props.userName))), /*#__PURE__*/React.createElement('p', {
      class: 'gc-heading__text'
    }, 'Select user:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('select', {
      style: {
        width: '100%'
      },
      class: 'gc-combo select-user-combo',
      onChange: function (e) {
        setSelectedUserName(e.target.value);
      }
    }, userOpts), /*#__PURE__*/React.createElement('label', {
      style: {
        margin: '10px 10px 10px 10px'
      }
    }, 'Access: ', currentAccess)), /*#__PURE__*/React.createElement('p', {
      class: 'gc-heading__text'
    }, 'Choose access type:'), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('select', {
      style: {
        width: '100%'
      },
      value: currentAccess,
      class: 'gc-combo access-combo',
      onChange: function (e) {
        var newAccessTable = JSON.parse(JSON.stringify(accessTable));
        newAccessTable[selectedUserName] = e.target.value;
        initialAccessTable = newAccessTable;
        setAccessTable(newAccessTable);
        applyAccess(selectedUserName, e.target.value);
      }
    }, /*#__PURE__*/React.createElement('option', {
      selected: currentAccess === 'UnlockAll',
      value: 'UnlockAll'
    }, 'Unlock all fields'), /*#__PURE__*/React.createElement('option', {
      selected: currentAccess === 'LockAll',
      value: 'LockAll'
    }, 'Lock all fields'))), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('button', {
      style: {
        width: '100%',
        textAlign: 'center'
      },
      class: 'gc-btn',
      onClick: function (e) {
        viewer.layoutMode = 2;
      }
    }, /*#__PURE__*/React.createElement('span', {
      class: 'gc-btn__text'
    }, 'Open Form Editor'))));
	
}

function createFieldsLockerPanel(userName)  { 
  // Create react element:
  return React.createElement(FieldsLockerPanel, { userName: userName, availableUsers: ['Anonymous', 'James', 'Jame', 'Lisa', 'John'] });
}
	
function createSvgIconElement()
{
    return React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '24', height: '24', viewBox: '0 0 24 24', fill: '#ffffff' }, React.createElement('path', { d: 'M10 13.32q-0.352-0.273-3.184-2.48t-4.316-3.34l7.5-5.82 7.5 5.82q-1.484 1.133-4.297 3.32t-3.203 2.5zM10 15.469l6.133-4.805 1.367 1.055-7.5 5.82-7.5-5.82 1.367-1.055z' }));
}

function createPdfViewer(selector, baseOptions) {
    var options = baseOptions || {};
    if(!options.supportApi) {
        options.supportApi = {
            apiUrl: (window.__baseUrl || '') + 'support-api/gc-pdf-viewer',
            token: window.afToken || '',
            webSocketUrl: false, suppressInfoMessages: true, suppressErrorMessages: true
        };
    }
    viewer = new GcPdfViewer(selector, options);
	React = viewer.getType('React');
	ReactDOM = viewer.getType('ReactDOM');	
	viewer.addFormEditorPanel();
	
    accessPanelHandle = viewer.createPanel(createFieldsLockerPanel(viewer.currentUserName || 'World'), null, 'AccessLevel',  
        { icon: { type: 'svg', content: createSvgIconElement() },
          label: 'Access level', description: 'Access level administration',
          visible: false, enabled: false } );
    // Add 'AccessLevel' panel to panels layout:
    viewer.layoutPanels(['AccessLevel', 'FormEditor']);

    viewer.onAfterOpen.register(()=>{
      // Enable 'AccessLevel' panel on document open:
      viewer.updatePanel(accessPanelHandle, { visible: true, enabled: true });
      // Open and pin panel:
      viewer.leftSidebar.menu.panels.open(accessPanelHandle.id);
	  viewer.leftSidebar.menu.panels.pin(accessPanelHandle.id);
    });
    return viewer;
}
";
    }
}