Kendinde Barındırılan Yazı Tipleri ve Şablonlar

Bu kılavuz, yazı tiplerini ve DWG/DXF şablonlarını kendi sunucunuzda nasıl dağıtacağınızı açıklar.

Genel Bakış

cad viewer, yazı tiplerini ve şablonları yüklemek için belirli bir dizin yapısı bekler. Bu yapıyı izleyerek, GitHub'daki varsayılan sunucuyu kullanmak yerine kendi yazı tiplerinizi ve şablonlarınızı barındırabilirsiniz.

Yazı tiplerini ve şablonları cad-data paketinin yerel bir kopyasından (git alt modülü) sunan ve hem canlı görüntüleyicide hem de başsız CLI'da baseUrl ayarlayan çalışan bir Next.js örneği için cad-viewer-nextjs-demo sayfasına bakın.

Dizin Yapısı

Sunucunuz mlightcad/cad-data deposuyla aynı yapıyı izlemelidir:

your-base-url/
├── fonts/                    # Font files directory
│   ├── arial.ttf
│   ├── simkai.ttf
│   ├── custom-font.shx
│   └── ...
├── templates/                # DWG/DXF template files directory
│   ├── acadiso.dxf
│   ├── custom-template.dwg
│   └── ...
└── fonts.json               # Font metadata configuration file

Yapılandırma

Temel URL'yi Ayarlama

Uygulamanızda baseUrl özelliğini sunucunuza işaret edecek şekilde yapılandırın:

Vue Bileşeninde

vue

<template>
  <MlCadViewer 
    locale="en" 
    :base-url="'https://your-server.com/cad-data/'"
  />
</template>

TypeScript/JavaScript İçinde

typescript

import { AcApDocManager } from '@mlightcad/cad-simple-viewer'

// Set the base URL for resource loading
AcApDocManager.instance.baseUrl = 'https://your-server.com/cad-data/'

cad-simple-viewer-cli (başsız CLI) İçinde

@mlightcad/cad-simple-viewer / @mlightcad/cad-simple-viewer-cli 1.7.2 sürümünden itibaren kullanılabilir.

Başsız CLI'ı kendinde barındırılan bir yazı tipi/şablon sunucusuna karşı çalıştırdığınızda temel URL'nizi geçirmeniz gerekir. Aksi halde CLI varsayılan CDN cad-data URL'sini kullanmaya devam eder ve yazı tiplerini veya şablonları sunucunuzdan yüklemez.

Komut satırı (--base-url):

bash

cad-simple-viewer-cli \
  -i ./drawing.dwg \
  -s ./export-png.scr \
  -o ./out \
  --base-url https://your-server.com/cad-data/

Programatik API (runHeadless):

typescript

import { runHeadless } from '@mlightcad/cad-simple-viewer-cli'

await runHeadless({
  inputPath: './drawing.dwg',
  scriptPath: './export-png.scr',
  outputDir: './out',
  baseUrl: 'https://your-server.com/cad-data/'
})

Yazı tipleri <base-url>/fonts/ konumundan yüklenir (örneğin https://your-server.com/cad-data/fonts/). URL http veya https olmalıdır.

Varsayılan Davranış

baseUrl sağlanmazsa, görüntüleyici varsayılan URL'yi kullanır: https://cdn.jsdelivr.net/gh/mlightcad/cad-data@main/

Yazı Tipi Yönetimi

Yazı Tipleri Dizini

Tüm yazı tipi dosyalarını fonts/ dizinine yerleştirin. Desteklenen yazı tipi biçimleri şunlardır:

TTF (TrueType Font) - .ttf dosyaları
SHX (AutoCAD Shape Font) - .shx dosyaları
OTF (OpenType Font) - .otf dosyaları

Fonts.json Yapılandırması

fonts.json dosyası, mevcut her yazı tipi için meta veriler içeren bir JSON dizisidir. Bu dosya, temel URL'nizin kökünde bulunmalıdır.

Dosya Yapısı

json

[
  {
    "name": ["Arial"],
    "file": "arial.ttf",
    "type": "mesh",
    "description": "Standard Arial font for text rendering"
  },
  {
    "name": ["SimKai"],
    "file": "simkai.ttf", 
    "type": "mesh",
    "description": "Chinese Kai font for CJK text support"
  },
  {
    "name": ["Custom SHX Font"],
    "file": "custom.shx",
    "type": "shx",
    "description": "Custom AutoCAD shape font",
    "encoding": "gbk"
  }
]

Alan Açıklamaları

Alan	Tür	Zorunlu	Açıklama
`name`	string dizisi	Evet	DWG/DXF dosyalarında kullanılan yazı tipi adı. Bir yazı tipinin birden çok adı olabilir.
`file`	string	Evet	`fonts/` dizininde bulunan yazı tipi dosyasının adı. Tam olarak eşleşmelidir.
`type`	string	Evet	Yazı tipi türü/biçimi. Yaygın değerler: `"mesh"` ve `"shx"`. `"mesh"`, `"ttf"`, `"otf"` ve `"woff"` yazı tiplerini ifade eder.
`description`	string	Hayır	Yazı tipinin amacı veya özellikleri hakkında isteğe bağlı açıklama.
`encoding`	string	Hayır	Yazı tipinin kodlaması hakkında isteğe bağlı açıklama; TextDecoder: encoding property içinde bulunan değerlerden biri olabilir. Bu özellik yalnızca yazı tipi shx big font veya shx extended big font ise gereklidir.

Yeni Yazı Tipleri Ekleme

Sunucunuza yeni bir yazı tipi eklemek için:

Yazı tipi dosyasını yükleyin fonts/ dizinine
fonts.json dosyasını güncelleyin yeni bir girdi ekleyerek:

json

[
  // ... existing fonts ...
  {
    "name": "My Custom Font",
    "file": "my-custom-font.ttf",
    "type": "mesh",
    "description": "Custom font for specific project needs"
  }
]

Yazı tipi yüklemesini test edin uygulamanızda:

typescript

// Load the new font
await AcApDocManager.instance.loadFonts(['My Custom Font'])

// Or load default fonts (includes your new font if it's in the list)
await AcApDocManager.instance.loadDefaultFonts()

Şablon Yönetimi

Şablonlar Dizini

DWG ve DXF şablon dosyalarını templates/ dizinine yerleştirin. Bu şablonlar yeni belgeler oluşturulurken kullanılır.

Varsayılan Şablon

Kitaplık, templates/ dizininde acadiso.dxf adlı bir varsayılan şablon bekler. Bu şablon "Quick New" komutu (AcApQNewCmd) tarafından kullanılır.

Özel Şablonlar Ekleme

Şablon dosyalarını yükleyin templates/ dizinine
Şablonlara başvurun uygulamanızda:

typescript

// Open a custom template
const templateUrl = AcApDocManager.instance.baseUrl + 'templates/my-custom-template.dxf'
await AcApDocManager.instance.openUrl(templateUrl)

Sunucu Gereksinimleri

CORS Yapılandırması

Sunucunuzun MLightCAD'ın kaynakları yüklemesi için çapraz kaynak isteklerine izin verdiğinden emin olun:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
Access-Control-Allow-Headers: Content-Type

MIME Türleri

Sunucunuzu yazı tipi dosyalarını doğru MIME türleriyle sunacak şekilde yapılandırın:

.ttf → font/ttf
.otf → font/otf
.shx → application/octet-stream
.dwg → application/dwg
.dxf → application/dxf

Örnek Nginx Yapılandırması

nginx

location /cad-data/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    
    location ~* \.(ttf|otf|shx)$ {
        add_header Content-Type font/ttf;
    }
    
    location ~* \.(dwg|dxf)$ {
        add_header Content-Type application/octet-stream;
    }
}

Hata İşleme

Kitaplık, yazı tipi yükleme sorunları için olay işleyicileri sağlar:

typescript

import { eventBus } from '@mlightcad/cad-simple-viewer'

// Handle fonts that cannot be found
eventBus.on('fonts-not-found', (params) => {
  console.warn('Fonts not found:', params.fonts)
  // Implement fallback logic or user notification
})

// Handle fonts that fail to load
eventBus.on('fonts-not-loaded', (params) => {
  console.error('Fonts failed to load:', params.fonts)
  // Implement error handling or user notification
})

En İyi Uygulamalar

Sürüm Kontrolü: Yazı tipi eklemelerini ve değişikliklerini izlemek için fonts.json dosyanızı sürüm kontrolünde tutun
Yazı Tipi Optimizasyonu: Yükleme sürelerini azaltmak için mümkün olduğunda sıkıştırılmış yazı tipi biçimlerini (woff) kullanın
Test Etme: Uyumluluğu sağlamak için yazı tipi yüklemeyi farklı CAD dosyalarıyla test edin
Belgelendirme: Ekip üyeleri için özel yazı tiplerinizi ve şablonlarınızı belgeleyin

Sorun Giderme

Yaygın Sorunlar

Yazı tipleri yüklenmiyor: fonts.json dosyasının {baseUrl}/fonts.json adresinde erişilebilir olduğunu kontrol edin
CORS hataları: Sunucunuzun çapraz kaynak isteklerine izin verdiğinden emin olun
404 hataları: fonts.json içindeki dosya yollarının gerçek dosya adlarıyla eşleştiğini doğrulayın
MIME türü sorunları: Sunucunuzu yazı tiplerini doğru MIME türleriyle sunacak şekilde yapılandırın

Hata Ayıklama

Ağ isteklerini izlemek ve şunları kontrol etmek için tarayıcı geliştirici araçlarını etkinleştirin:

fonts.json dosyasının başarıyla yüklenmesi
Yazı tipi dosyası indirmeleri
CORS başlıkları
HTTP durum kodları

Örnek Uygulama

Aşağıda özel bir yazı tipi ve şablon sunucusu kurmanın tam bir örneği verilmiştir:

typescript

// Initialize the CAD viewer with custom base URL
const docManager = AcApDocManager.createInstance(canvas)
docManager.baseUrl = 'https://my-cdn.com/cad-resources/'

// Load custom fonts
await docManager.loadDefaultFonts(['Arial', 'My Custom Font'])

// Open a document from a custom template
await docManager.openUrl(docManager.baseUrl + 'templates/custom-template.dxf')

Bu kurulum, beklenen yapıyla uyumluluğu korurken uygulamanızın kullanabileceği yazı tiplerini ve şablonları tamamen özelleştirmenize olanak tanır.

Kendinde Barındırılan Yazı Tipleri ve Şablonlar ​

Genel Bakış ​

Dizin Yapısı ​

Yapılandırma ​

Temel URL'yi Ayarlama ​

Vue Bileşeninde ​

TypeScript/JavaScript İçinde ​

cad-simple-viewer-cli (başsız CLI) İçinde ​

Varsayılan Davranış ​

Yazı Tipi Yönetimi ​

Yazı Tipleri Dizini ​

Fonts.json Yapılandırması ​

Dosya Yapısı ​

Alan Açıklamaları ​

Yeni Yazı Tipleri Ekleme ​

Şablon Yönetimi ​

Şablonlar Dizini ​

Varsayılan Şablon ​

Özel Şablonlar Ekleme ​

Sunucu Gereksinimleri ​

CORS Yapılandırması ​

MIME Türleri ​

Örnek Nginx Yapılandırması ​

Hata İşleme ​

En İyi Uygulamalar ​

Sorun Giderme ​

Yaygın Sorunlar ​

Hata Ayıklama ​

Örnek Uygulama ​

Kendinde Barındırılan Yazı Tipleri ve Şablonlar

Genel Bakış

Dizin Yapısı

Yapılandırma

Temel URL'yi Ayarlama

Vue Bileşeninde

TypeScript/JavaScript İçinde

cad-simple-viewer-cli (başsız CLI) İçinde

Varsayılan Davranış

Yazı Tipi Yönetimi

Yazı Tipleri Dizini

Fonts.json Yapılandırması

Dosya Yapısı

Alan Açıklamaları

Yeni Yazı Tipleri Ekleme

Şablon Yönetimi

Şablonlar Dizini

Varsayılan Şablon

Özel Şablonlar Ekleme

Sunucu Gereksinimleri

CORS Yapılandırması

MIME Türleri

Örnek Nginx Yapılandırması

Hata İşleme

En İyi Uygulamalar

Sorun Giderme

Yaygın Sorunlar

Hata Ayıklama

Örnek Uygulama