手書きパッドの組み込み

public with sharing class SurgeryAgreementPageController {
    
    
    public string defaultAgreementText = '私は術前、担当医師より手術に関して十分な説明をうけ了解いたしました。よって貴院における手術の実施に同意いたします。なお手術中、他の疾患が発見された場合や不測の事態が生じた場合には、それに応じた適切な処置をとられることに同意いたします。';
    public string getDefaultAgreementText(){
        return this.defaultAgreementText;
        
    }
    
    public string defaultAgreementTitle = '手術同意書';
    public string getDefaultAgreementTitle(){
        return this.defaultAgreementTitle;
    }
    public string defaultAgreementDate = Datetime.now().format('yyyy年MM月dd日');
    public string getDefaultAgreementDate(){
        return this.defaultAgreementDate;
    }
    
    public string defaultSignatureTitle = '署名欄';
    public string getDefaultSignatureTitle(){
        return defaultSignatureTitle;
    }
    public string defaultDoctorTitle =  '院長 殿';
    public string getDefaultDoctorTitle(){
        return defaultDoctorTitle;
    }
    
   
    public Surgery_Agreement__c currentAgreement{get{
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}

        PageReference currentPage = apexpages.currentPage();
        Map<string, string> parameters = currentPage.getParameters();
        string currentAgreementId = parameters.get('agreementId');
        
        return this.getAgreementById(currentAgreementId);
    }}
    
    public string currentAgreementSignatureId;
    public string getCurrentAgreementSignatureId(){

        if (!Schema.sObjectType.Surgery_Agreement__c.fields.signatureId__c.isAccessible()){return '';}
        if (this.currentAgreement != null){
            return this.currentAgreement.signatureId__c;
        }else{
            return '';
        }
    }
    
    public Surgery_Agreement__c savedAgreement;
    
    
    public Surgery_Agreement__c signAgreement(string agreementId, string signatureId){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}

        if (!Surgery_Agreement__c.sObjectType.getDescribe().isUpdateable()){return null;}

        Surgery_Agreement__c agreement = getAgreementById(agreementId);
        if (agreement == null){
            return null;
        }
        agreement.signatureId__c = signatureId;
        agreement.Patient_Signature__c = signatureId;
        
        update agreement;
        
        return agreement;
    }
    
    public Surgery_Agreement__c getAgreementById(string agreementId){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isAccessible()){return null;}
        
        if (String.isEmpty(agreementId)){
            return null;
        }
        
        Surgery_Agreement__c agreement = [select AgreementText__c, SignatureId__c  from Surgery_Agreement__c where Id=:agreementId limit 1];
        return agreement;
    }
    
    
    public PageReference onPatientSignatureComplete(){
        if (!Surgery_Agreement__c.sObjectType.getDescribe().isCreateable()){return null;}

        Surgery_Agreement__c agreement  = new Surgery_Agreement__c();
        agreement.Date__c = this.defaultAgreementDate;
        agreement.DoctorTitle__c = this.defaultDoctorTitle;
        agreement.SignatureTitle__c = this.defaultSignatureTitle;
        agreement.AgreementText__c = this.defaultAgreementText;
        
        insert agreement;
        
        
        this.signAgreement(agreement.Id, patientSignatureId);
        this.savedAgreement = agreement;
        return null;
    }

    public Boolean getCurrentSignatureExists(){
      return this.savedAgreement != null;
    }
    public string patientSignatureId{get;set;}
}

<apex:page controller="SurgeryAgreementPageController" standardStylesheets="false">

    <h1>
        {!defaultAgreementTitle}
    </h1>
    <div>
        {!defaultDoctorTitle}
    </div>
    <div>
        {!defaultAgreementText}
    </div>
    <div>
        {!defaultAgreementDate}
    </div>
    
    <div>
        {!defaultSignatureTitle}

         <div class="signature-pad-container">
            <gcrp:RayPen placeholder="署名する" 
                              styleClass="signature-button"
                              signatureImageStyle="max-width: 200px; max-height: 100px;"
                              currentSignatureId="{!patientSignatureId}"
                              onSignatureComplete="{!onPatientSignatureComplete}"

                              footNote="署名の前に契約書を必ずお読みください"
                              footNoteColor="#cccccc"

                              signatureLineColor="#cccccc"
                              titleText="同意書"
                              titleTextColor="#000000"
                              okButtonText="OK"
                              cancelButtonText="キャンセル"
                              signaturePadOrientation="portrait"                              
                              />
        </div>
        
    </div>

    <style>
    .signature-pad-container{
        max-width: 200px;
        max-height: 100px;
        width: 200px;
        height: 100px;
        border: 1px solid black;
        background-color: white;
        text-align: center;
    }
    
    .signature-button{
        
        width: 200px !important;
        height: 100px !important;
        background-color: white !important;
        border: none !important;
        -webkit-appearance: none;
        background-image: none !important;
        box-sizing: border-box;
        border-radius: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .signature-image{
    }
    </style>
</apex:page>